From 40dad41d76aae66d1ddf2cfa26b3d06e366b47d3 Mon Sep 17 00:00:00 2001 From: Francois Zaninotto Date: Fri, 9 Oct 2015 16:03:08 +0200 Subject: [PATCH] Implement column sorting in embedded_list --- .jshintrc | 4 +- package.json | 2 +- .../Crud/column/maEmbeddedListColumn.js | 50 +++++++++++++------ .../ng-admin/Crud/list/maDatagrid.js | 7 ++- .../Crud/list/maDatagridController.js | 17 ++++--- 5 files changed, 53 insertions(+), 27 deletions(-) diff --git a/.jshintrc b/.jshintrc index 8fe58ca6..a9a9e7ee 100644 --- 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 index 05921f88..3fd82a46 100644 --- 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 index b52304f3..1721bda4 100644 --- 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,25 +26,18 @@ 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; @@ -41,20 +45,36 @@ function maEmbeddedListColumn(NgAdminConfiguration) { 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: ` - + datastore="::datastore()" + sort-field="{{ sortField }}" + sort-dir="{{ sortDir }}" + sort="::sort"> ` }; } diff --git a/src/javascripts/ng-admin/Crud/list/maDatagrid.js b/src/javascripts/ng-admin/Crud/list/maDatagrid.js index eb7c6259..56a13a21 100644 --- 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) { - + {{ field.label() }} diff --git a/src/javascripts/ng-admin/Crud/list/maDatagridController.js b/src/javascripts/ng-admin/Crud/list/maDatagridController.js index 04020fbf..59b96032 100644 --- a/src/javascripts/ng-admin/Crud/list/maDatagridController.js +++ b/src/javascripts/ng-admin/Crud/list/maDatagridController.js @@ -12,7 +12,7 @@ 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; @@ -20,12 +20,15 @@ define(function () { 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; });