apply order by to filelists, closes feature #51

Author: joni2back

dist/angular-filemanager.css

@@ -532,3 +532,17 @@ a:hover {
             transform: rotate(450deg);
   }
 }
+
+table th > a:hover,
+table th > a:active,
+table th > a:focus {
+    text-decoration: none;
+}
+.sortorder:after {
+    color: #2196f3;
+    content: '\25bc';
+}
+.sortorder.reverse:after {
+    color: #2196f3;
+    content: '\25b2';
+}

dist/angular-filemanager.min.js

@@ -6,7 +6,14 @@
 
         $scope.config = fileManagerConfig;
         $scope.appName = fileManagerConfig.appName;
-        $scope.orderProp = ['model.type', 'model.name'];
+
+        $scope.reverse = false;
+        $scope.predicate = ['model.type', 'model.name'];        
+        $scope.order = function(predicate) {
+            $scope.reverse = ($scope.predicate[1] === predicate) ? !$scope.reverse : false;
+            $scope.predicate[1] = predicate;
+        };
+
         $scope.query = '';
         $scope.temp = new Item();
         $scope.fileNavigator = new FileNavigator();

src/css/angular-filemanager.css

@@ -4,7 +4,13 @@
         '$scope', '$rootScope', 'fileNavigator',
         function($scope, $rootScope, FileNavigator) {
 
-        $scope.orderProp = ['model.type', 'model.name'];
+        $scope.reverse = false;
+        $scope.predicate = ['model.type', 'model.name'];        
+        $scope.order = function(predicate) {
+            $scope.reverse = ($scope.predicate[1] === predicate) ? !$scope.reverse : false;
+            $scope.predicate[1] = predicate;
+        };
+
         $scope.fileNavigator = new FileNavigator();
 
         $rootScope.select = function(item, temp) {

src/js/controllers/main.js

@@ -3,11 +3,12 @@
     angular.module('FileManagerApp').factory('item', ['$http', '$q', '$translate', 'fileManagerConfig', 'chmod', function($http, $q, $translate, fileManagerConfig, Chmod) {
 
         var Item = function(model, path) {
+            window.px = this;
             var rawModel = {
                 name: model && model.name || '',
                 path: path || [],
                 type: model && model.type || 'file',
-                size: model && model.size || 0,
+                size: model && parseInt(model.size || 0),
                 date: parseMySQLDate(model && model.date),
                 perms: new Chmod(model && model.rights),
                 content: model && model.content || '',

src/js/controllers/selector-controller.js

@@ -1,7 +1,12 @@
 <table class="table table-condensed table-modal-condensed mb0">
     <thead>
         <tr>
-            <th>{{"name" | translate}}</th>
+            <th>
+                <a href="" ng-click="order('model.name')">
+                    {{"name" | translate}}
+                    <span class="sortorder" ng-show="predicate[1] === 'model.name'" ng-class="{reverse:reverse}"></span>
+                </a>
+            </th>
             <th class="text-right"></th>
         </tr>
     </thead>
@@ -24,7 +29,7 @@
                 {{ fileNavigator.error }}
             </td>
         </tr>
-        <tr ng-repeat="item in fileNavigator.fileList | orderBy: orderProp" ng-show="!fileNavigator.requesting && item.model.type === 'dir'">
+        <tr ng-repeat="item in fileNavigator.fileList | orderBy:predicate:reverse" ng-show="!fileNavigator.requesting && item.model.type === 'dir'">
             <td>
                 <a href="" ng-click="fileNavigator.folderClick(item)" title="{{item.model.name}} ({{item.model.sizeKb()}}kb)">
                     <i class="glyphicon glyphicon-folder-close"></i>

src/js/entities/item.js

@@ -1,10 +1,30 @@
 <table class="table mb0 table-files">
     <thead>
         <tr>
-            <th>{{"name" | translate}}</th>
-            <th class="hidden-xs">{{"size" | translate}}</th>
-            <th class="hidden-sm hidden-xs">{{"date" | translate}}</th>
-            <th class="hidden-sm hidden-xs">{{"permissions" | translate}}</th>
+            <th>
+                <a href="" ng-click="order('model.name')">
+                    {{"name" | translate}}
+                    <span class="sortorder" ng-show="predicate[1] === 'model.name'" ng-class="{reverse:reverse}"></span>
+                </a>
+            </th>
+            <th class="hidden-xs">
+                <a href="" ng-click="order('model.size')">
+                    {{"size" | translate}}
+                    <span class="sortorder" ng-show="predicate[1] === 'model.size'" ng-class="{reverse:reverse}"></span>
+                </a>
+            </th>
+            <th class="hidden-sm hidden-xs">
+                <a href="" ng-click="order('model.date')">
+                    {{"date" | translate}}
+                    <span class="sortorder" ng-show="predicate[1] === 'model.date'" ng-class="{reverse:reverse}"></span>
+                </a>
+            </th>
+            <th class="hidden-sm hidden-xs">
+                <a href="" ng-click="order('model.permissions')">
+                    {{"permissions" | translate}}
+                    <span class="sortorder" ng-show="predicate[1] === 'model.permissions'" ng-class="{reverse:reverse}"></span>
+                </a>
+            </th>
             <th class="text-right"></th>
         </tr>
     </thead>
@@ -24,7 +44,7 @@
                 {{ fileNavigator.error }}
             </td>
         </tr>
-        <tr ng-repeat="item in fileNavigator.fileList | filter: query | orderBy: orderProp" ng-show="!fileNavigator.requesting">
+        <tr ng-repeat="item in fileNavigator.fileList | filter: query | orderBy:predicate:reverse" ng-show="!fileNavigator.requesting">
             <td ng-right-click="touch(item)">
                 <a href="" ng-click="smartClick(item)" title="{{item.model.name}} ({{item.model.sizeKb()}}kb)">
                     <i class="glyphicon glyphicon-folder-close" ng-show="item.model.type === 'dir'"></i>