support sort file list in task detail page

app/index.html

@@ -240,6 +240,7 @@
 <script src="scripts/controllers/task-detail.js"></script>
 <script src="scripts/filters/dateDuration.js"></script>
 <script src="scripts/filters/filename.js"></script>
+<script src="scripts/filters/fileOrderBy.js"></script>
 <script src="scripts/filters/percent.js"></script>
 <script src="scripts/filters/substring.js"></script>
 <script src="scripts/filters/taskOrderBy.js"></script>

app/scripts/controllers/task-detail.js

@@ -5,6 +5,12 @@
         var tabOrders = ['overview', 'blocks', 'filelist', 'btpeers'];
         var downloadTaskRefreshPromise = null;
 
+        $scope.context = {
+            currentTab: 'overview'
+        };
+
+        $scope.healthPercent = 0;
+
         var refreshPeers = function (task) {
             return aria2RpcService.getPeers({
                 params: [task.gid],
@@ -42,13 +48,6 @@
             })
         };
 
-        $scope.context = {
-            currentTab: 'overview'
-        };
-
-        $scope.healthPercent = 0;
-        $scope.loadPromise = refreshDownloadTask();
-
         $rootScope.swipeActions.extentLeftSwipe = function () {
             var tabIndex = tabOrders.indexOf($scope.context.currentTab);
 
@@ -71,6 +70,33 @@
             }
         };
 
+        $scope.changeFileListDisplayOrder = function (type, autoSetReverse) {
+            var oldType = utils.parseOrderType(ariaNgSettingService.getFileListDisplayOrder());
+            var newType = utils.parseOrderType(type);
+
+            if (autoSetReverse && newType.type == oldType.type) {
+                newType.reverse = !oldType.reverse;
+            }
+
+            ariaNgSettingService.setFileListDisplayOrder(newType.getValue());
+        };
+
+        $scope.isSetFileListDisplayOrder = function (type, reverse) {
+            var orderType = utils.parseOrderType(ariaNgSettingService.getFileListDisplayOrder());
+
+            if (angular.isUndefined(reverse)) {
+                return orderType.type === type;
+            } else {
+                return orderType.type === type && orderType.reverse === reverse;
+            }
+        };
+        
+        $scope.getFileListOrderType = function () {
+            return ariaNgSettingService.getFileListDisplayOrder();
+        };
+
+        $scope.loadPromise = refreshDownloadTask();
+
         if (ariaNgSettingService.getDownloadTaskRefreshInterval() > 0) {
             downloadTaskRefreshPromise = $interval(function () {
                 refreshDownloadTask();

app/scripts/core/utils.js

@@ -95,6 +95,7 @@
                 if (task.files) {
                     for (var i = 0; i < task.files.length; i++) {
                         var file = task.files[i];
+                        file.fileName = this.getFileNameFromPath(file.path);
                         file.length = parseInt(file.length);
                         file.completedLength = parseInt(file.completedLength);
                         file.completePercent = (file.length > 0 ? file.completedLength / file.length * 100 : 0);

app/scripts/filters/fileOrderBy.js

@@ -0,0 +1,27 @@
+(function () {
+    'use strict';
+
+    angular.module("ariaNg").filter('fileOrderBy', ['orderByFilter', 'utils', function (orderByFilter, utils) {
+        return function (array, type) {
+            if (!angular.isArray(array)) {
+                return array;
+            }
+
+            var orderType = utils.parseOrderType(type);
+
+            if (orderType == null) {
+                return array;
+            }
+
+            if (orderType.type == 'name') {
+                return orderByFilter(array, ['fileName'], orderType.reverse);
+            } else if (orderType.type == 'size') {
+                return orderByFilter(array, ['length'], orderType.reverse);
+            } else if (orderType.type == 'percent') {
+                return orderByFilter(array, ['completePercent'], orderType.reverse);
+            } else {
+                return array;
+            }
+        }
+    }]);
+})();

app/scripts/services/ariaNgSettingService.js

@@ -106,6 +106,18 @@
             },
             setDisplayOrder: function (value) {
                 setOption('displayOrder', value);
+            },
+            getFileListDisplayOrder: function () {
+                var value = getOption('fileListDisplayOrder');
+
+                if (!value) {
+                    value = 'default:false';
+                }
+
+                return value;
+            },
+            setFileListDisplayOrder: function (value) {
+                setOption('fileListDisplayOrder', value);
             }
         };
     }]);

app/views/task-detail.html

@@ -117,21 +117,24 @@
                     <div class="task-table-title hidden-xs">
                         <div class="row">
                             <div class="col-sm-8">
-                                <span translate>File Name</span>
+                                <a ng-click="changeFileListDisplayOrder('name:false', true)" translate>File Name</a>
+                                <i class="fa" ng-class="{'fa-sort-asc': isSetFileListDisplayOrder('name', false), 'fa-sort-desc': isSetFileListDisplayOrder('name', true)}"></i>
                             </div>
                             <div class="col-sm-2">
-                                <span translate>Completed Percent</span>
+                                <a ng-click="changeFileListDisplayOrder('percent:true', true)" translate>Completed Percent</a>
+                                <i class="fa" ng-class="{'fa-sort-asc': isSetFileListDisplayOrder('percent', false), 'fa-sort-desc': isSetFileListDisplayOrder('percent', true)}"></i>
                             </div>
                             <div class="col-sm-2">
-                                <span translate>File Size</span>
+                                <a ng-click="changeFileListDisplayOrder('size:false', true)" translate>File Size</a>
+                                <i class="fa" ng-class="{'fa-sort-asc': isSetFileListDisplayOrder('size', false), 'fa-sort-desc': isSetFileListDisplayOrder('size', true)}"></i>
                             </div>
                         </div>
                     </div>
                     <div class="task-table-body">
-                        <div class="row" ng-repeat="file in task.files">
+                        <div class="row" ng-repeat="file in task.files | fileOrderBy: getFileListOrderType()">
                             <div class="col-sm-8">
                                 <input type="checkbox" ng-checked="file.selected == 'true'" disabled="disabled"/>
-                                <span ng-bind="file.path | filename"></span>
+                                <span ng-bind="file.fileName"></span>
                             </div>
                             <div class="col-sm-2">
                                 <div class="progress">