Implement column sorting in embedded_list

dmolnarqu · Oct 9, 2015 · 40dad41 · 40dad41
1 parent 811182b
commit 40dad41
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 27 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -4,7 +4,7 @@
   "esnext": true,
   "bitwise": true,
   "camelcase": true,
-  "curly": true,
+  "curly": false,
   "eqeqeq": true,
   "immed": true,
   "indent": 2,
@@ -14,7 +14,7 @@
   "regexp": true,
   "undef": true,
   "unused": true,
-  "strict": true,
+  "strict": false,
   "trailing": true,
   "smarttabs": true,
   "globals": {

diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "url": "git://github.com/marmelab/ng-admin.git"
   },
   "devDependencies": {
-    "admin-config": "^0.5.0",
+    "admin-config": "^0.5.1",
     "angular": "~1.3.15",
     "angular-bootstrap": "^0.12.0",
     "angular-mocks": "1.3.14",

diff --git a/src/javascripts/ng-admin/Crud/column/maEmbeddedListColumn.js b/src/javascripts/ng-admin/Crud/column/maEmbeddedListColumn.js
@@ -1,6 +1,17 @@
 import Entry from 'admin-config/lib/Entry';
 
+function sorter(sortField, sortDir) {
+    return (entry1, entry2) => {
+        // use < and > instead of substraction to sort strings properly
+        const sortFactor = sortDir === 'DESC' ? -1 : 1;
+        if (entry1.values[sortField] > entry2.values[sortField]) return sortFactor;
+        if (entry1.values[sortField] < entry2.values[sortField]) return -1 * sortFactor;
+        return 0;
+    };
+}
+
 function maEmbeddedListColumn(NgAdminConfiguration) {
+    const application = NgAdminConfiguration(); // jshint ignore:line
     return {
         scope: {
             'field': '&',
@@ -15,46 +26,55 @@ function maEmbeddedListColumn(NgAdminConfiguration) {
                 const targetEntityName = targetEntity.name();
                 const targetFields = field.targetFields();
                 const sortField = field.sortField();
-                const sortDir = field.sortDir() === 'DESC' ? -1 : 1;
+                const sortDir = field.sortDir();
                 var filterFunc;
                 if (field.permanentFilters()) {
                     const filters = field.permanentFilters();
                     const filterKeys = Object.keys(filters);
-                    filterFunc = (entry) => {
-                        return filterKeys.reduce((isFiltered, key) => isFiltered && entry.values[key] == filters[key], true)
-                    }
+                    filterFunc = (entry) => filterKeys.reduce((isFiltered, key) => isFiltered && entry.values[key] === filters[key], true);
                 } else {
                     filterFunc = () => true;
                 }
                 let entries = Entry
                     .createArrayFromRest(scope.value() || [], targetFields, targetEntityName, targetEntity.identifier().name())
-                    .sort((entry1, entry2) => {
-                        // use < and > instead of substraction to sort strings properly
-                        if (entry1.values[sortField] > entry2.values[sortField]) return sortDir;
-                        if (entry1.values[sortField] < entry2.values[sortField]) return -1 * sortDir;
-                        return 0;
-                    })
+                    .sort(sorter(sortField, sortDir))
                     .filter(filterFunc);
                 if (!targetEntityName) {
                     let index = 0;
                     entries = entries.map(e => {
                         e._identifierValue = index++;
                         return e;
                     });
-                };
+                }
                 scope.field = field;
                 scope.targetFields = targetFields;
                 scope.entries = entries;
-                scope.entity = targetEntityName ? NgAdminConfiguration().getEntity(targetEntityName) : targetEntity;
+                scope.entity = targetEntityName ? application.getEntity(targetEntityName) : targetEntity;
+                scope.sortField = sortField;
+                scope.sortDir = sortDir;
+                scope.sort = field => {
+                    let sortDir = 'ASC';
+                    const sortField = field.name();
+                    if (scope.sortField === sortField) {
+                        // inverse sort dir
+                        sortDir = scope.sortDir === 'ASC' ? 'DESC' : 'ASC';
+                    }
+                    scope.entries = scope.entries.sort(sorter(sortField, sortDir));
+                    scope.sortField = sortField;
+                    scope.sortDir = sortDir;
+                };
             }
         },
         template: `
-<ma-datagrid ng-if="::entries.length > 0" name="{{ field.datagridName() }}"
-    entries="::entries"
+<ma-datagrid ng-if="::entries.length > 0"
+    entries="entries"
     fields="::targetFields"
     list-actions="::field.listActions()"
     entity="::entity"
-    datastore="::datastore()">
+    datastore="::datastore()"
+    sort-field="{{ sortField }}"
+    sort-dir="{{ sortDir }}"
+    sort="::sort">
 </ma-datagrid>`
     };
 }

diff --git a/src/javascripts/ng-admin/Crud/list/maDatagrid.js b/src/javascripts/ng-admin/Crud/list/maDatagrid.js
@@ -15,7 +15,10 @@ define(function (require) {
                 fields: '&',
                 listActions: '&',
                 entity: '&',
-                datastore: '&'
+                datastore: '&',
+                sortField: '@',
+                sortDir: '@',
+                sort: '&'
             },
             controllerAs: 'datagrid',
             controller: maDatagridController,
@@ -27,7 +30,7 @@ define(function (require) {
                 <ma-datagrid-multi-selector toggle-select-all="toggleSelectAll()" selection="selection" entries="entries"/>
             </th>
             <th ng-repeat="field in fields() track by $index" ng-class="field.getCssClasses()" class="ng-admin-column-{{ ::field.name() }} ng-admin-type-{{ ::field.type() }}">
-                <a ng-click="datagrid.sort(field)">
+                <a ng-click="datagrid.sortCallback(field)">
                     <span class="glyphicon {{ datagrid.sortDir === 'DESC' ? 'glyphicon-chevron-down': 'glyphicon-chevron-up' }}" ng-if="datagrid.isSorting(field)"></span>
 
                     {{ field.label() }}

diff --git a/src/javascripts/ng-admin/Crud/list/maDatagridController.js b/src/javascripts/ng-admin/Crud/list/maDatagridController.js
@@ -12,20 +12,23 @@ define(function () {
      *
      * @constructor
      */
-    function DatagridController($scope, $location, $stateParams, $anchorScroll) {
+    function DatagridController($scope, $location, $stateParams, $anchorScroll, $attrs) {
         $scope.entity = $scope.entity();
         this.$scope = $scope;
         this.$location = $location;
         this.$anchorScroll = $anchorScroll;
         this.datastore = this.$scope.datastore();
         this.filters = {};
         this.shouldDisplayActions = this.$scope.listActions() && this.$scope.listActions().length > 0;
-
         $scope.toggleSelect = this.toggleSelect.bind(this);
         $scope.toggleSelectAll = this.toggleSelectAll.bind(this);
-
-        this.sortField = 'sortField' in $stateParams ? $stateParams.sortField : null;
-        this.sortDir = 'sortDir' in $stateParams ? $stateParams.sortDir : null;
+        $scope.sortField = $attrs.sortField;
+        $scope.sortDir = $attrs.sortDir;
+        this.sortField = 'sortField' in $stateParams ? $stateParams.sortField : $attrs.sortField;
+        this.sortDir = 'sortDir' in $stateParams ? $stateParams.sortDir : $attrs.sortDir;
+        $attrs.$observe('sortDir', sortDir => this.sortDir = sortDir);
+        $attrs.$observe('sortField', sortField => this.sortField = sortField);
+        this.sortCallback = $scope.sort() ? $scope.sort() : this.sort.bind(this);
     }
 
     /**
@@ -73,7 +76,7 @@ define(function () {
      * @returns {String}
      */
     DatagridController.prototype.getSortName = function (field) {
-        return this.$scope.name + '.' + field.name();
+        return this.$scope.name ? this.$scope.name + '.' + field.name() : field.name();
     };
 
     DatagridController.prototype.toggleSelect = function (entry) {
@@ -99,7 +102,7 @@ define(function () {
         this.$scope.selection = [];
     };
 
-    DatagridController.$inject = ['$scope', '$location', '$stateParams', '$anchorScroll'];
+    DatagridController.$inject = ['$scope', '$location', '$stateParams', '$anchorScroll', '$attrs'];
 
     return DatagridController;
 });