Merge pull request #1306 from opf/feature/ng-toolbar-sort-by

Feature/ng toolbar sort by

app/assets/javascripts/angular/controllers/dialogs/sorting.js

@@ -36,7 +36,57 @@ angular.module('openproject.workPackages.controllers')
   });
 }])
 
-.controller('SortingModalController', ['sortingModal', function(sortingModal) {
+.controller('SortingModalController', ['sortingModal',
+	'$scope',
+	'QueryService',
+	function(sortingModal, $scope, QueryService) {
   this.name    = 'Sorting';
   this.closeMe = sortingModal.deactivate;
+
+  $scope.sortByOptions = {};
+
+  $scope.initSortation = function(){
+    var currentSortation = QueryService.getSortation();
+
+    $scope.sortElements = currentSortation.sortElements.map(function(element){
+      return [$scope.availableColumnsData.filter(function(column) { return column.id == element.field; })[0],
+              $scope.availableDirectionsData.filter(function(direction) { return direction.id == element.direction; })[0]]
+    });
+
+    while($scope.sortElements.length < 3) {
+      $scope.sortElements.push([]);
+    }
+  }
+
+  $scope.getAvailableColumnsData = function(term, result) {
+    result($scope.availableColumnsData);
+  }
+
+  $scope.getDirectionsData = function(term, result) {
+    result([{ id: 'asc', label: 'Ascending'}, { id: 'desc', label: 'Descending'}]);
+  }
+
+  $scope.updateSortation = function(){
+    var sortElements = $scope.sortElements
+      .filter(function(element){
+        return element.length == 2;
+      })
+      .map(function(element){
+        return { field: element[0].id, direction: element[1].id }
+      })
+    QueryService.updateSortElements(sortElements);
+
+    sortingModal.deactivate();
+  }
+
+  QueryService.loadAvailableColumns()
+    .then(function(available_columns){
+      $scope.availableColumns = available_columns
+      $scope.availableColumnsData = available_columns.map(function(column){
+        return { id: column.name, label: column.title, other: column.title };
+      });
+      $scope.initSortation();
+    });
+
+  $scope.availableDirectionsData = [{ id: 'desc', label: 'Descending'}, { id: 'asc', label: 'Ascending'}];
 }]);

app/assets/javascripts/angular/controllers/work-packages-controller.js

@@ -211,4 +211,13 @@ angular.module('openproject.workPackages.controllers')
     }
   });
 
+  // Note: Again, this was in the work packages table directive but in an isolated scope so it wasn't picking up the changes to sortation.
+  // Think it would probably be a good idea to have the table directive just share the scope but that requires a refactor.
+  $scope.$watch('query.sortation.sortElements', function(oldValue, newValue) {
+    if (JSON.stringify(newValue) != JSON.stringify(oldValue)) {
+      $scope.updateResults();
+      $scope.updateBackUrl();
+    }
+  }, true);
+
 }]);

app/assets/javascripts/angular/directives/work_packages/options-dropdown-directive.js

@@ -52,7 +52,6 @@ angular.module('openproject.workPackages.directives')
       scope.showExportModal   = exportModal.activate;
       scope.showSettingsModal = settingsModal.activate;
       scope.showShareModal    = shareModal.activate;
-      scope.showSortingModal  = sortingModal.activate;
 
       scope.showSaveModal     = function(saveAs){
         scope.$emit('hideAllDropdowns');
@@ -71,6 +70,11 @@ angular.module('openproject.workPackages.directives')
         columnsModal.activate();
       };
 
+      scope.showSortingModal  = function(){
+        scope.$emit('hideAllDropdowns');
+        sortingModal.activate();
+      };
+
       scope.toggleDisplaySums = function(){
         scope.$emit('hideAllDropdowns');
         scope.query.displaySums = !scope.query.displaySums;

app/assets/javascripts/angular/models/query.js

@@ -92,10 +92,18 @@ angular.module('openproject.models')
       return UrlParamsHelper.buildQueryString(this.toParams());
     },
 
+    getSortation: function(){
+      return this.sortation;
+    },
+
     setSortation: function(sortation){
       this.sortation = sortation;
     },
 
+    updateSortElements: function(sortElements){
+      this.sortation.setSortElements(sortElements);
+    },
+
     setName: function(name) {
       this.name = name;
     },

app/assets/javascripts/angular/models/sortation.js

@@ -83,6 +83,14 @@ angular.module('openproject.models')
     this.sortElements.unshift(sortElement);
   };
 
+  Sortation.prototype.setSortElements = function(sortElements) {
+    var elements = this.sortElements;
+    elements.length = 0;
+    angular.forEach(sortElements, function(element){
+      elements.push(element);
+    });
+  };
+
   Sortation.prototype.getTargetSortationOfHeader = function(headerName) {
     var targetSortation = angular.copy(this);
     var targetSortDirection = this.getCurrentSortDirectionOfHeader(headerName) === 'asc' ? 'desc' : 'asc';

app/assets/javascripts/angular/openproject-app.js

@@ -73,7 +73,7 @@ openprojectApp
           config.url = window.appBasePath + config.url;
           return config || $q.when(config);
         }
-      }
+      };
     });
   }])
   .run(['$http', function($http){

app/assets/javascripts/angular/services/query-service.js

@@ -157,6 +157,14 @@ angular.module('openproject.services')
       this.showColumns(selectedColumnNames);
     },
 
+    updateSortElements: function(sortation) {
+      return query.updateSortElements(sortation);
+    },
+
+    getSortation: function() {
+      return query.getSortation();
+    },
+
     getAvailableFilters: function(projectIdentifier){
       // TODO once this is becoming more single-page-app-like keep the available filters of the query model in sync when the project identifier is changed on the scope but the page isn't reloaded
       var identifier = 'global';

public/templates/work_packages/modals/sorting.html

@@ -4,5 +4,21 @@
 
     <h1>Sorting</h1>
 
+    <div ng-repeat="element in sortElements">
+      <input type="hidden"
+             ui-select2-sortable="sortByOptions"
+             simple-query="getAvailableColumnsData"
+             ng-model="element[0]"></input>
+      <input type="hidden"
+             ui-select2-sortable="sortDirectionOptions"
+             simple-query="getDirectionsData"
+             ng-model="element[1]"></input>
+    </div>
+
+    <div>
+      <button ng-click="updateSortation()">Apply</button>
+      <button ng-click="modal.closeMe()">Cancel</button>
+    </div>
+
   </div>
 </div>