Wired up sorting modal to current query sortation.

Not yet updating table when sortation is changed.

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

@@ -48,10 +48,10 @@ angular.module('openproject.workPackages.controllers')
   $scope.initSortation = function(){
     var currentSortation = QueryService.getSortation();
 
-    var element = currentSortation.sortElements[0];
-    $scope.selectedColumn1 = $scope.availableColumnsData.filter(function(column) {
-      return column.id == element.field;
-    })[0];
+    $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]]
+    });
   }
 
   $scope.getAvailableColumnsData = function(term, result) {
@@ -63,11 +63,12 @@ angular.module('openproject.workPackages.controllers')
   }
 
   $scope.updateSortation = function(){
-    // TODO RS: Clean this up once we have a sortation directive
-    var sortation = [[ $scope.selectedColumn1.id, $scope.selectedDirection1.id ],
-                     [ $scope.selectedColumn2.id, $scope.selectedDirection2.id ],
-                     [ $scope.selectedColumn3.id, $scope.selectedDirection3.id ]];
-    QueryService.setSortation(sortation);
+    var sortElements = $scope.sortElements.map(function(element){
+      return { field: element[0].id, direction: element[1].id }
+    })
+    QueryService.updateSortElements(sortElements);
+
+    sortingModal.deactivate();
   }
 
   QueryService.getAvailableColumns()
@@ -78,4 +79,6 @@ angular.module('openproject.workPackages.controllers')
       });
       $scope.initSortation();
     });
+
+  $scope.availableDirectionsData = [{ id: 'desc', label: 'Descending'}, { id: 'asc', label: 'Ascending'}];
 }]);

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

@@ -41,11 +41,19 @@ angular.module('openproject.workPackages.controllers')
     'WorkPackageLoadingHelper',
     'INITIALLY_SELECTED_COLUMNS',
     'OPERATORS_AND_LABELS_BY_FILTER_TYPE',
+    'columnsModal',
+    'exportModal',
+    'saveModal',
+    'settingsModal',
+    'shareModal',
+    'sortingModal',
     function($scope, $q, $window, $location,
       WorkPackagesTableHelper, WorkPackagesTableService,
       WorkPackageService, QueryService, PaginationService,
       WorkPackageLoadingHelper, INITIALLY_SELECTED_COLUMNS,
-      OPERATORS_AND_LABELS_BY_FILTER_TYPE) {
+      OPERATORS_AND_LABELS_BY_FILTER_TYPE, columnsModal,
+      exportModal, saveModal, settingsModal, shareModal,
+      sortingModal) {
 
   $scope.projectTypes = $window.gon.project_types;
   $scope.showFiltersOptions = false;
@@ -202,6 +210,30 @@ angular.module('openproject.workPackages.controllers')
     return false;
   };
 
+  // Modals
+
+  $scope.showColumnsModal  = columnsModal.activate;
+  $scope.showExportModal   = exportModal.activate;
+  $scope.showSettingsModal = settingsModal.activate;
+  $scope.showShareModal    = shareModal.activate;
+
+  $scope.showSortingModal = function(){
+    $scope.$emit('hideAllDropdowns');
+    sortingModal.activate();
+  };
+
+  $scope.showSaveModal = function(saveAs){
+    $scope.$emit('hideAllDropdowns');
+    if( saveAs || $scope.query.isNew() ){
+      saveModal.activate();
+    } else {
+      QueryService.saveQuery()
+        .then(function(data){
+          $scope.$emit('flashMessage', data.status);
+        });
+    }
+  };
+
   // Go
 
   initialSetup();

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

@@ -29,43 +29,13 @@
 angular.module('openproject.workPackages.directives')
 
 .directive('optionsDropdown', ['I18n',
-  'columnsModal',
-  'exportModal',
-  'saveModal',
-  'settingsModal',
-  'shareModal',
-  'sortingModal',
-  function(I18n, columnsModal, exportModal, saveModal, settingsModal, shareModal, sortingModal){
+  function(I18n){
 
   return {
     restrict: 'AE',
     scope: true,
     link: function(scope, element, attributes) {
 
-      // Modals
-      scope.showColumnsModal  = columnsModal.activate;
-      scope.showExportModal   = exportModal.activate;
-      scope.showSettingsModal = settingsModal.activate;
-      scope.showShareModal    = shareModal.activate;
-      scope.showSortingModal  = sortingModal.activate;
-
-      scope.showSaveModal     = function(saveAs){
-        scope.$emit('hideAllDropdowns');
-        if( saveAs || scope.query.isNew() ){
-          saveModal.activate();
-        } else {
-          QueryService.saveQuery()
-            .then(function(data){
-              scope.$emit('flashMessage', data.status);
-            });
-        }
-      };
-
-      scope.showColumnsModal  = function(){
-        scope.$emit('hideAllDropdowns');
-        columnsModal.activate();
-      };
-
       scope.toggleDisplaySums = function(){
         scope.query.displaySums = !scope.query.displaySums;
       };

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

@@ -98,6 +98,14 @@ angular.module('openproject.models')
       this.sortation = sortation;
     },
 
+    updateSortElements: function(sortElements){
+      this.sortation.sortElements.length = 0;
+      var self = this;
+      angular.forEach(sortElements, function(sortElement){
+        self.sortation.addSortElement(sortElement);
+      })
+    },
+
     setName: function(name) {
       this.name = name;
     },

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

@@ -148,8 +148,8 @@ angular.module('openproject.services')
       this.showColumns(selectedColumnNames);
     },
 
-    setSortation: function(sortation) {
-      return query.setSortation(new Sortation(sortation));
+    updateSortElements: function(sortation) {
+      return query.updateSortElements(sortation);
     },
 
     getSortation: function() {

public/templates/work_packages/modals/sorting.html

@@ -4,43 +4,15 @@
 
     <h1>Sorting</h1>
 
-    <div>
-      <input id="sort_by_column1"
-             type="hidden"
-             ui-select2-sortable="sortByOptions"
-             simple-query="getAvailableColumnsData"
-             ng-model="selectedColumn1"></input>
-      <input id="sort_direction1"
-             type="hidden"
-             ui-select2-sortable="sortDirectionOptions"
-             simple-query="getDirectionsData"
-             ng-model="selectedDirection1"></input>
-    </div>
-
-    <div>
-      <input id="sort_by_column2"
-             type="hidden"
-             ui-select2-sortable="sortByOptions"
-             simple-query="getAvailableColumnsData"
-             ng-model="selectedColumn2"></input>
-      <input id="sort_direction2"
-             type="hidden"
-             ui-select2-sortable="sortDirectionOptions"
-             simple-query="getDirectionsData"
-             ng-model="selectedDirection2"></input>
-    </div>
-
-    <div>
-      <input id="sort_by_column3"
-             type="hidden"
+    <div ng-repeat="element in sortElements">
+      <input type="hidden"
              ui-select2-sortable="sortByOptions"
              simple-query="getAvailableColumnsData"
-             ng-model="selectedColumn3"></input>
-      <input id="sort_direction3"
-             type="hidden"
+             ng-model="element[0]"></input>
+      <input type="hidden"
              ui-select2-sortable="sortDirectionOptions"
              simple-query="getDirectionsData"
-             ng-model="selectedDirection3"></input>
+             ng-model="element[1]"></input>
     </div>
 
     <div>