From 6ab48c68969d17e4f55c642c434d827df44ff5df Mon Sep 17 00:00:00 2001 From: Michael Abashian Date: Tue, 7 Feb 2017 15:56:30 -0500 Subject: [PATCH] Added the ability to pass in a maximum number of pages shown to pagination directive. This is useful for narrow lists particularly in modals. --- .../list-generator/list-generator.factory.js | 5 ++- .../shared/paginate/paginate.controller.js | 42 +++++++++++-------- .../src/shared/paginate/paginate.directive.js | 3 +- awx/ui/client/src/templates/main.js | 20 ++++++--- 4 files changed, 43 insertions(+), 27 deletions(-) diff --git a/awx/ui/client/src/shared/list-generator/list-generator.factory.js b/awx/ui/client/src/shared/list-generator/list-generator.factory.js index 5b71dad641..74f6ec4146 100644 --- a/awx/ui/client/src/shared/list-generator/list-generator.factory.js +++ b/awx/ui/client/src/shared/list-generator/list-generator.factory.js @@ -451,8 +451,9 @@ export default ['$location', '$compile', '$rootScope', 'Attr', 'Icon', collection="${list.name}" dataset="${list.iterator}_dataset" iterator="${list.iterator}" - query-set="${list.iterator}_queryset"> - `; + query-set="${list.iterator}_queryset"`; + html += list.maxVisiblePages ? `max-visible-pages="${list.maxVisiblePages}"` : ''; + html += `>`; } return html; diff --git a/awx/ui/client/src/shared/paginate/paginate.controller.js b/awx/ui/client/src/shared/paginate/paginate.controller.js index e8a5fc81f6..445c07b7a0 100644 --- a/awx/ui/client/src/shared/paginate/paginate.controller.js +++ b/awx/ui/client/src/shared/paginate/paginate.controller.js @@ -1,18 +1,9 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'QuerySet', '$interpolate', function($scope, $stateParams, $state, $filter, GetBasePath, qs, $interpolate) { - let pageSize, + let pageSize = $scope.querySet ? $scope.querySet.page_size || 20 : $stateParams[`${$scope.iterator}_search`].page_size || 20, queryset, path; - // TODO: can we clean this if/else up? - if($scope.querySet) { - pageSize = $scope.querySet.page_size || 20; - } - else { - // Pull the page size from the url - pageSize = $stateParams[`${$scope.iterator}_search`].page_size || 20; - } - $scope.pageSize = pageSize; function init() { @@ -75,15 +66,30 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q }; function calcPageRange(current, last) { - let result = []; - if (last < 10) { + let result = [], + maxVisiblePages = $scope.maxVisiblePages ? parseInt($scope.maxVisiblePages) : 10, + pagesLeft, + pagesRight; + if(maxVisiblePages % 2) { + // It's an odd number + pagesLeft = (maxVisiblePages - 1) / 2; + pagesRight = ((maxVisiblePages - 1) / 2) + 1; + } + else { + // Its an even number + pagesLeft = pagesRight = maxVisiblePages / 2; + } + if (last < maxVisiblePages) { + // Don't have enough pages to exceed the max range - just show all of them result = _.range(1, last + 1); - } else if (current - 5 > 0 && current !== last) { - result = _.range(current - 5, current + 6); - } else if (current === last) { - result = _.range(last - 10, last + 1); - } else { - result = _.range(1, 11); + } + else if(current === last) { + result = _.range(last + 1 - maxVisiblePages, last + 1); + } + else { + let topOfRange = current + pagesRight > maxVisiblePages + 1 ? (current + pagesRight < last + 1 ? current + pagesRight : last + 1) : maxVisiblePages + 1; + let bottomOfRange = (topOfRange === last + 1) ? last + 1 - maxVisiblePages : (current - pagesLeft > 0 ? current - pagesLeft : 1); + result = _.range(bottomOfRange, topOfRange); } return result; } diff --git a/awx/ui/client/src/shared/paginate/paginate.directive.js b/awx/ui/client/src/shared/paginate/paginate.directive.js index ef849e7ff0..9a62b1b926 100644 --- a/awx/ui/client/src/shared/paginate/paginate.directive.js +++ b/awx/ui/client/src/shared/paginate/paginate.directive.js @@ -8,7 +8,8 @@ export default ['templateUrl', dataset: '=', iterator: '@', basePath: '@', - querySet: '=' + querySet: '=', + maxVisiblePages: '@' }, controller: 'PaginateController', templateUrl: templateUrl('shared/paginate/paginate') diff --git a/awx/ui/client/src/templates/main.js b/awx/ui/client/src/templates/main.js index 953fd22c95..887e362e02 100644 --- a/awx/ui/client/src/templates/main.js +++ b/awx/ui/client/src/templates/main.js @@ -210,18 +210,16 @@ angular.module('templates', [surveyMaker.name, templatesList.name, jobTemplatesA ] }, 'inventorySyncList@templates.editWorkflowJobTemplate.workflowMaker': { - templateProvider: function(InventorySourcesList, generateList) { - let list = _.cloneDeep(InventorySourcesList); - // mutate list definition here! + templateProvider: function(WorkflowInventorySourcesList, generateList) { let html = generateList.build({ - list: list, + list: WorkflowInventorySourcesList, input_type: 'radio', mode: 'lookup' }); return html; }, // encapsulated $scope in this controller will be a initialized as child of 'modal' $scope, because of element hierarchy - controller: ['$scope', 'InventorySourcesList', 'InventorySourcesDataset', + controller: ['$scope', 'WorkflowInventorySourcesList', 'InventorySourcesDataset', function($scope, list, Dataset) { init(); @@ -438,7 +436,7 @@ angular.module('templates', [surveyMaker.name, templatesList.name, jobTemplatesA return qs.search(path, $stateParams[`${list.iterator}_search`]); } ], - ProjectDataset: ['ProjectList', 'QuerySet', '$stateParams', 'GetBasePath', + ProjectDataset: ['WorkflowProjectList', 'QuerySet', '$stateParams', 'GetBasePath', (list, qs, $stateParams, GetBasePath) => { let path = GetBasePath(list.basePath); return qs.search(path, $stateParams[`${list.iterator}_search`]); @@ -468,6 +466,7 @@ angular.module('templates', [surveyMaker.name, templatesList.name, jobTemplatesA label: '', nosort: true }; + list.maxVisiblePages = 5; return list; } @@ -479,6 +478,15 @@ angular.module('templates', [surveyMaker.name, templatesList.name, jobTemplatesA delete list.fields.scm_type; delete list.fields.last_updated; list.fields.name.columnClass = "col-md-11"; + list.maxVisiblePages = 5; + + return list; + } + ], + WorkflowInventorySourcesList: ['InventorySourcesList', + (InventorySourcesList) => { + let list = _.cloneDeep(InventorySourcesList); + list.maxVisiblePages = 5; return list; }