Merge pull request #489 from marmelab/fix_gottodetail_remmeber_list_f…

…ilter [RFR] Fix gotoDetail() should remember list filter and replace some $location.path() by $state.go()
marmelab · Jun 3, 2015 · 220310f · 220310f
2 parents 07d69f9 + 5c0b417
commit 220310f
Show file tree

Hide file tree

Showing 15 changed files with 85 additions and 91 deletions.
diff --git 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
@@ -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
@@ -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()">' +
             '</ma-datagrid>';
     }
     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()">' +
             '</ma-datagrid>';
     }
     return {

diff --git 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
@@ -24,9 +24,7 @@ <h1 compile="::listController.title">
                   selection="listController.selection"
                   fields="::listController.fields"
                   list-actions="::listController.listActions"
-                  entity="::listController.entity"
-                  sort-field="::listController.sortField"
-                  sort-dir="::listController.sortDir">
+                  entity="::listController.entity">
         </ma-datagrid>
     </div>
 </div>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -6,7 +6,5 @@
     entries="entries"
     fields="fields()"
     entity="entity()"
-    list-actions="false"
-    sort-field="sortField"
-    sort-dir="sortDir">
+    list-actions="false">
 </ma-datagrid>
diff --git 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
@@ -11,7 +11,10 @@ describe('directive: ma-datagrid', function () {
             'entity="entity" next-page="nextPage" per-page="itemsPerPage" total-items="{{ totalItems }}" infinite-pagination="infinitePagination">' +
             '</ma-datagrid>';
 
-    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'));
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,7 +26,7 @@ describe('controller: ma-datagrid', function () { @@
                 search: function () {
                     return {};
                 }
-            });
+            }, {});
         });
         describe('toggleSelect', function () {
@@ Expand Down @@