From 5c0b417363d3d59898362b0bb27428a5ffe71a3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Macias?= Date: Wed, 3 Jun 2015 11:45:11 +0200 Subject: [PATCH] Fix gotoDetail() should remember list filter and replace some .path() by .go() --- .../ng-admin/Crud/column/maColumn.js | 26 +++++++-------- .../Crud/column/maReferenceManyLinkColumn.js | 6 ++-- .../Crud/fieldView/ReferencedListFieldView.js | 8 ++--- .../ng-admin/Crud/list/DatagridController.js | 32 +++---------------- src/javascripts/ng-admin/Crud/list/list.html | 4 +-- .../ng-admin/Crud/list/maDatagrid.js | 4 +-- .../component/controller/AppController.js | 12 +++---- .../controller/DashboardController.js | 25 ++++++++------- .../component/directive/maDashboardPanel.js | 10 +++--- .../Main/component/service/PanelBuilder.js | 6 ++-- .../ng-admin/Main/view/dashboard-panel.html | 4 +-- .../unit/Crud/list/DatagridControllerSpec.js | 2 +- .../test/unit/Crud/list/maDatagridSpec.js | 5 ++- .../directive/maDashboardPanelSpec.js | 29 ++++++++++++++++- .../component/service/PanelBuilderSpec.js | 3 +- 15 files changed, 85 insertions(+), 91 deletions(-) diff --git a/src/javascripts/ng-admin/Crud/column/maColumn.js b/src/javascripts/ng-admin/Crud/column/maColumn.js index b2803509..c0815398 100644 --- a/src/javascripts/ng-admin/Crud/column/maColumn.js +++ b/src/javascripts/ng-admin/Crud/column/maColumn.js @@ -3,7 +3,7 @@ define(function (require) { 'use strict'; - function maColumn($location, $anchorScroll, $compile, Configuration, FieldViewConfiguration) { + function maColumn($state, $anchorScroll, $compile, Configuration, FieldViewConfiguration) { function isDetailLink(field) { if (field.isDetailLink() === false) { @@ -16,7 +16,7 @@ define(function (require) { var relatedEntity = Configuration().getEntity(referenceEntity); if (!relatedEntity) return false; return relatedEntity.isReadOnly ? relatedEntity.showView().enabled : relatedEntity.editionView().enabled; - }; + } return { restrict: 'E', @@ -38,33 +38,31 @@ define(function (require) { } $compile(element.contents())(scope); scope.gotoDetail = function () { - this.clearRouteParams(); var route = scope.field.detailLinkRoute(); if (route == 'edit' && !scope.entity().editionView().enabled) { route = 'show'; } - $location.path('/' + scope.entry.entityName + '/' + route + '/' + scope.entry.identifierValue); - $anchorScroll(0); + $state.go($state.get(route), + angular.extend({ + entity: scope.entry.entityName, + id: scope.entry.identifierValue + }, $state.params)); }; scope.gotoReference = function () { - this.clearRouteParams(); var referenceEntity = scope.field.targetEntity().name(); var relatedEntity = Configuration().getEntity(referenceEntity); var referenceId = scope.entry.values[scope.field.name()]; var route = relatedEntity.isReadOnly ? 'show' : scope.field.detailLinkRoute(); - $location.path('/' + referenceEntity + '/' + route + '/' + referenceId); - }; - scope.clearRouteParams = function () { - $location.search('q', null); - $location.search('page', null); - $location.search('sortField', null); - $location.search('sortDir', null); + $state.go($state.get(route), { + entity: referenceEntity, + id: referenceId + }); }; } }; } - maColumn.$inject = ['$location', '$anchorScroll', '$compile', 'NgAdminConfiguration', 'FieldViewConfiguration']; + maColumn.$inject = ['$state', '$anchorScroll', '$compile', 'NgAdminConfiguration', 'FieldViewConfiguration']; return maColumn; }); diff --git a/src/javascripts/ng-admin/Crud/column/maReferenceManyLinkColumn.js b/src/javascripts/ng-admin/Crud/column/maReferenceManyLinkColumn.js index a38c4666..ecd7366e 100644 --- a/src/javascripts/ng-admin/Crud/column/maReferenceManyLinkColumn.js +++ b/src/javascripts/ng-admin/Crud/column/maReferenceManyLinkColumn.js @@ -3,7 +3,7 @@ define(function (require) { 'use strict'; - function maReferenceManyLinkColumn($location, Configuration) { + function maReferenceManyLinkColumn($state, Configuration) { return { restrict: 'E', scope: { @@ -19,7 +19,7 @@ define(function (require) { relatedEntity = Configuration().getEntity(referenceEntity); scope.gotoReference = function (referenceId) { var route = relatedEntity.isReadOnly ? 'show' : 'edit'; - $location.path('/' + referenceEntity + '/' + route + '/' + referenceId); + $state.go($state.get(route), { entity: referenceEntity, id: referenceId }); }; }, template: @@ -29,7 +29,7 @@ define(function (require) { }; } - maReferenceManyLinkColumn.$inject = ['$location', 'NgAdminConfiguration']; + maReferenceManyLinkColumn.$inject = ['$state', 'NgAdminConfiguration']; return maReferenceManyLinkColumn; }); diff --git a/src/javascripts/ng-admin/Crud/fieldView/ReferencedListFieldView.js b/src/javascripts/ng-admin/Crud/fieldView/ReferencedListFieldView.js index 775f8dbb..6c3c5a62 100644 --- a/src/javascripts/ng-admin/Crud/fieldView/ReferencedListFieldView.js +++ b/src/javascripts/ng-admin/Crud/fieldView/ReferencedListFieldView.js @@ -6,9 +6,7 @@ define(function(require) { 'entries="::datastore.getEntries(field.targetEntity().uniqueId + \'_list\')" ' + 'fields="::field.targetFields()" ' + 'list-actions="::field.listActions()" ' + - 'entity="::field.targetEntity()" ' + - 'sort-field="::field.getSortFieldName()" ' + - 'sort-dir="::field.sortDir()">' + + 'entity="::field.targetEntity()">' + ''; } function getLinkWidget() { @@ -22,9 +20,7 @@ define(function(require) { 'entries="::datastore.getEntries(field.targetEntity().uniqueId + \'_list\')" ' + 'fields="::field.targetFields()" ' + 'list-actions="::field.listActions()" ' + - 'entity="::field.targetEntity()" ' + - 'sort-field="::field.getSortFieldName()" ' + - 'sort-dir="::field.sortDir()">' + + 'entity="::field.targetEntity()">' + ''; } return { diff --git a/src/javascripts/ng-admin/Crud/list/DatagridController.js b/src/javascripts/ng-admin/Crud/list/DatagridController.js index 4d978619..2ca7e1d0 100644 --- a/src/javascripts/ng-admin/Crud/list/DatagridController.js +++ b/src/javascripts/ng-admin/Crud/list/DatagridController.js @@ -7,11 +7,12 @@ define(function () { * * @param {$scope} $scope * @param {$location} $location + * @param {$stateParams} $stateParams * @param {$anchorScroll} $anchorScroll * * @constructor */ - function DatagridController($scope, $location, $anchorScroll) { + function DatagridController($scope, $location, $stateParams, $anchorScroll) { $scope.entity = $scope.entity(); this.$scope = $scope; this.$location = $location; @@ -22,33 +23,10 @@ define(function () { $scope.toggleSelect = this.toggleSelect.bind(this); $scope.toggleSelectAll = this.toggleSelectAll.bind(this); - this.$scope.gotoDetail = this.gotoDetail.bind(this); - - var searchParams = this.$location.search(); - this.sortField = 'sortField' in searchParams ? searchParams.sortField : this.$scope.sortField; - this.sortDir = 'sortDir' in searchParams ? searchParams.sortDir : this.$scope.sortDir; + this.sortField = 'sortField' in $stateParams ? $stateParams.sortField : null; + this.sortDir = 'sortDir' in $stateParams ? $stateParams.sortDir : null; } - /** - * Link to edit entity page - * - * @param {Entry} entry - */ - DatagridController.prototype.gotoDetail = function (entry) { - this.clearRouteParams(); - var entity = this.$scope.entity; - var route = entity.editionView().enabled ? 'edit' : 'show'; - this.$location.path('/' + entry.entityName + '/' + route + '/' + entry.identifierValue); - this.$anchorScroll(0); - }; - - DatagridController.prototype.clearRouteParams = function () { - this.$location.search('q', null); - this.$location.search('page', null); - this.$location.search('sortField', null); - this.$location.search('sortDir', null); - }; - /** * Return true if a column is being sorted * @@ -120,7 +98,7 @@ define(function () { this.$scope.selection = []; }; - DatagridController.$inject = ['$scope', '$location', '$anchorScroll']; + DatagridController.$inject = ['$scope', '$location', '$stateParams', '$anchorScroll']; return DatagridController; }); diff --git a/src/javascripts/ng-admin/Crud/list/list.html b/src/javascripts/ng-admin/Crud/list/list.html index 3aee84e4..660dbcb0 100644 --- a/src/javascripts/ng-admin/Crud/list/list.html +++ b/src/javascripts/ng-admin/Crud/list/list.html @@ -24,9 +24,7 @@

selection="listController.selection" fields="::listController.fields" list-actions="::listController.listActions" - entity="::listController.entity" - sort-field="::listController.sortField" - sort-dir="::listController.sortDir"> + entity="::listController.entity"> diff --git a/src/javascripts/ng-admin/Crud/list/maDatagrid.js b/src/javascripts/ng-admin/Crud/list/maDatagrid.js index 1d12e182..5ccdd591 100644 --- a/src/javascripts/ng-admin/Crud/list/maDatagrid.js +++ b/src/javascripts/ng-admin/Crud/list/maDatagrid.js @@ -16,9 +16,7 @@ define(function (require) { selection: '=', fields: '&', listActions: '&', - entity: '&', - sortField: '=', - sortDir: '=' + entity: '&' }, controllerAs: 'datagrid', controller: DatagridController diff --git a/src/javascripts/ng-admin/Main/component/controller/AppController.js b/src/javascripts/ng-admin/Main/component/controller/AppController.js index 72097d1a..b0ad92bc 100644 --- a/src/javascripts/ng-admin/Main/component/controller/AppController.js +++ b/src/javascripts/ng-admin/Main/component/controller/AppController.js @@ -6,14 +6,14 @@ define(function () { /** * * @param {$scope} $scope - * @param {$location} $location + * @param {$state} $state * @param {NgAdmin} Configuration * @constructor */ - var AppController = function ($scope, $location, Configuration) { + var AppController = function ($scope, $state, Configuration) { var application = Configuration(); this.$scope = $scope; - this.$location = $location; + this.$state = $state; this.menu = application.menu(); this.applicationName = application.title(); this.header = application.header(); @@ -22,15 +22,15 @@ define(function () { }; AppController.prototype.displayHome = function () { - this.$location.path('dashboard'); + this.$state.go(this.$state.get('dashboard')); }; AppController.prototype.destroy = function () { this.$scope = undefined; - this.$location = undefined; + this.$state = undefined; }; - AppController.$inject = ['$scope', '$location', 'NgAdminConfiguration']; + AppController.$inject = ['$scope', '$state', 'NgAdminConfiguration']; return AppController; }); diff --git a/src/javascripts/ng-admin/Main/component/controller/DashboardController.js b/src/javascripts/ng-admin/Main/component/controller/DashboardController.js index 7f98473b..f21b492a 100644 --- a/src/javascripts/ng-admin/Main/component/controller/DashboardController.js +++ b/src/javascripts/ng-admin/Main/component/controller/DashboardController.js @@ -6,21 +6,17 @@ define(function (require) { /** * * @param {$scope} $scope - * @param {$location} $location + * @param {$state} $state * @param {PanelBuilder} PanelBuilder * @constructor */ - function DashboardController($scope, $location, PanelBuilder) { + function DashboardController($scope, $state, PanelBuilder) { this.$scope = $scope; - this.$location = $location; + this.$state = $state; this.PanelBuilder = PanelBuilder; this.$scope.edit = this.edit.bind(this); - var searchParams = this.$location.search(); - this.sortField = 'sortField' in searchParams ? searchParams.sortField : null; - this.sortDir = 'sortDir' in searchParams ? searchParams.sortDir : null; - this.retrievePanels(); $scope.$on('$destroy', this.destroy.bind(this)); @@ -33,7 +29,11 @@ define(function (require) { var self = this; this.panels = []; - this.PanelBuilder.getPanelsData(this.sortField, this.sortDir).then(function (panels) { + var searchParams = this.$state.params; + var sortField = 'sortField' in searchParams ? searchParams.sortField : null; + var sortDir = 'sortDir' in searchParams ? searchParams.sortDir : null; + + this.PanelBuilder.getPanelsData(sortField, sortDir).then(function (panels) { self.panels = panels; }); }; @@ -44,16 +44,19 @@ define(function (require) { * @param {Entry} entry */ DashboardController.prototype.edit = function (entry) { - this.$location.path(entry.entityName + '/edit/' + entry.identifierValue); + this.$state.go(this.$state.get('edit'), { + entity: entry.entityName, + id: entry.identifierValue + }); }; DashboardController.prototype.destroy = function () { this.$scope = undefined; - this.$location = undefined; + this.$state = undefined; this.PanelBuilder = undefined; }; - DashboardController.$inject = ['$scope', '$location', 'PanelBuilder']; + DashboardController.$inject = ['$scope', '$state', 'PanelBuilder']; return DashboardController; }); diff --git a/src/javascripts/ng-admin/Main/component/directive/maDashboardPanel.js b/src/javascripts/ng-admin/Main/component/directive/maDashboardPanel.js index a5f03243..1790b27f 100644 --- a/src/javascripts/ng-admin/Main/component/directive/maDashboardPanel.js +++ b/src/javascripts/ng-admin/Main/component/directive/maDashboardPanel.js @@ -1,6 +1,6 @@ var dashboardPanelView = require('../../view/dashboard-panel.html'); -function maDashboardPanel($location) { +function maDashboardPanel($state) { return { restrict: 'E', scope: { @@ -9,20 +9,18 @@ function maDashboardPanel($location) { entries: '=', fields: '&', entity: '&', - perPage: '=', - sortDir: '=', - sortField: '=' + perPage: '=' }, link: function(scope) { scope.gotoList = function () { - $location.path(scope.entity().name() + '/list'); + $state.go($state.get('list'), { entity: scope.entity().name() }); }; }, template: dashboardPanelView }; } -maDashboardPanel.$inject = ['$location']; +maDashboardPanel.$inject = ['$state']; module.exports = maDashboardPanel; diff --git a/src/javascripts/ng-admin/Main/component/service/PanelBuilder.js b/src/javascripts/ng-admin/Main/component/service/PanelBuilder.js index f7bc5962..7f4a5bac 100644 --- a/src/javascripts/ng-admin/Main/component/service/PanelBuilder.js +++ b/src/javascripts/ng-admin/Main/component/service/PanelBuilder.js @@ -1,15 +1,13 @@ /** * @param {$q} $q - * @param {$location} $location * @param {ReadQueries} ReadQueries * @param {Configuration} Configuration * @param {AdminDescription} AdminDescription * * @constructor */ -function PanelBuilder($q, $location, ReadQueries, Configuration, AdminDescription) { +function PanelBuilder($q, ReadQueries, Configuration, AdminDescription) { this.$q = $q; - this.$location = $location; this.ReadQueries = ReadQueries; this.dataStore = AdminDescription.getDataStore(); this.Configuration = Configuration(); @@ -71,6 +69,6 @@ PanelBuilder.prototype.getPanelsData = function (sortField, sortDir) { }); }; -PanelBuilder.$inject = ['$q', '$location', 'ReadQueries', 'NgAdminConfiguration', 'AdminDescription']; +PanelBuilder.$inject = ['$q', 'ReadQueries', 'NgAdminConfiguration', 'AdminDescription']; module.exports = PanelBuilder; diff --git a/src/javascripts/ng-admin/Main/view/dashboard-panel.html b/src/javascripts/ng-admin/Main/view/dashboard-panel.html index 6af08e19..9779edc4 100644 --- a/src/javascripts/ng-admin/Main/view/dashboard-panel.html +++ b/src/javascripts/ng-admin/Main/view/dashboard-panel.html @@ -6,7 +6,5 @@ entries="entries" fields="fields()" entity="entity()" - list-actions="false" - sort-field="sortField" - sort-dir="sortDir"> + list-actions="false"> diff --git a/src/javascripts/test/unit/Crud/list/DatagridControllerSpec.js b/src/javascripts/test/unit/Crud/list/DatagridControllerSpec.js index 8abfe0af..f4d37e88 100644 --- a/src/javascripts/test/unit/Crud/list/DatagridControllerSpec.js +++ b/src/javascripts/test/unit/Crud/list/DatagridControllerSpec.js @@ -26,7 +26,7 @@ describe('controller: ma-datagrid', function () { search: function () { return {}; } - }); + }, {}); }); describe('toggleSelect', function () { diff --git a/src/javascripts/test/unit/Crud/list/maDatagridSpec.js b/src/javascripts/test/unit/Crud/list/maDatagridSpec.js index f02e9057..c1b9d0cc 100644 --- a/src/javascripts/test/unit/Crud/list/maDatagridSpec.js +++ b/src/javascripts/test/unit/Crud/list/maDatagridSpec.js @@ -11,7 +11,10 @@ describe('directive: ma-datagrid', function () { 'entity="entity" next-page="nextPage" per-page="itemsPerPage" total-items="{{ totalItems }}" infinite-pagination="infinitePagination">' + ''; - angular.module('testapp_Datagrid', []) + angular.module('testapp_stateParams', []) + .service('$stateParams', function($q){ return {}; }); + + angular.module('testapp_Datagrid', ['testapp_stateParams']) .directive('maDatagrid', directive); beforeEach(angular.mock.module('testapp_Datagrid')); diff --git a/src/javascripts/test/unit/Main/component/directive/maDashboardPanelSpec.js b/src/javascripts/test/unit/Main/component/directive/maDashboardPanelSpec.js index c07b65a1..39617429 100644 --- a/src/javascripts/test/unit/Main/component/directive/maDashboardPanelSpec.js +++ b/src/javascripts/test/unit/Main/component/directive/maDashboardPanelSpec.js @@ -9,7 +9,34 @@ describe('directive: ma-dashboard-panel', function () { directiveUsage = ''; - angular.module('testapp_DashboardPanel', []).directive('maDashboardPanel', directive); + angular.module('testapp_state', []) + .service('$state', function($q) { + this.expectedTransitions = []; + this.transitionTo = function(stateName){ + if (this.expectedTransitions.length > 0){ + var expectedState = this.expectedTransitions.shift(); + if (expectedState !== stateName){ + throw Error('Expected transition to state: ' + expectedState + ' but transitioned to ' + stateName ); + } + } else { + throw Error('No more transitions were expected! Tried to transition to ' + stateName ); + } + return $q.when(); + }; + this.go = this.transitionTo; + this.expectTransitionTo = function(stateName){ + this.expectedTransitions.push(stateName); + }; + + this.ensureAllTransitionsHappened = function(){ + if (this.expectedTransitions.length > 0){ + throw Error('Not all transitions happened!'); + } + }; + }); + + angular.module('testapp_DashboardPanel', ['testapp_state']) + .directive('maDashboardPanel', directive); beforeEach(angular.mock.module('testapp_DashboardPanel')); diff --git a/src/javascripts/test/unit/Main/component/service/PanelBuilderSpec.js b/src/javascripts/test/unit/Main/component/service/PanelBuilderSpec.js index af025c7b..6d67ae8e 100644 --- a/src/javascripts/test/unit/Main/component/service/PanelBuilderSpec.js +++ b/src/javascripts/test/unit/Main/component/service/PanelBuilderSpec.js @@ -84,9 +84,8 @@ function getPanelBuilder(dashboardViews, responses) { } }; }; - var location = { search: function() { return {}; } }; var retrieveQueries = { getAll: function() {} }; var AdminDescription = { getDataStore: function() { return new DataStore(); } }; - return new PanelBuilder(q, location, retrieveQueries, Configuration, AdminDescription); + return new PanelBuilder(q, retrieveQueries, Configuration, AdminDescription); }