External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-07 17:37:37 -02:30
Code Issues Packages Projects Releases Wiki Activity

Added the ability to pass in a maximum number of pages shown to pagination directive. This is useful for narrow lists particularly in modals.

Browse Source
This commit is contained in:
Michael Abashian
2017-02-07 15:56:30 -05:00
parent 5554b46401
commit 6ab48c6896
4 changed files with 43 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
awx/ui/client/src/shared/list-generator/list-generator.factory.js
View File

@@ -451,8 +451,9 @@ export default ['$location', '$compile', '$rootScope', 'Attr', 'Icon',
collection="${list.name}" collection="${list.name}"
dataset="${list.iterator}_dataset" dataset="${list.iterator}_dataset"
iterator="${list.iterator}" iterator="${list.iterator}"
query-set="${list.iterator}_queryset"> query-set="${list.iterator}_queryset"`;
</paginate></div>`; html += list.maxVisiblePages ? `max-visible-pages="${list.maxVisiblePages}"` : '';
html += `></paginate></div>`;
} }
return html; return html;

42
awx/ui/client/src/shared/paginate/paginate.controller.js
View File

@@ -1,18 +1,9 @@
export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'QuerySet', '$interpolate', export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'QuerySet', '$interpolate',
function($scope, $stateParams, $state, $filter, GetBasePath, qs, $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; 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; $scope.pageSize = pageSize;
function init() { function init() {
@@ -75,15 +66,30 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
}; };
function calcPageRange(current, last) { function calcPageRange(current, last) {
let result = []; let result = [],
if (last < 10) { 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); result = _.range(1, last + 1);
} else if (current - 5 > 0 && current !== last) { }
result = _.range(current - 5, current + 6); else if(current === last) {
} else if (current === last) { result = _.range(last + 1 - maxVisiblePages, last + 1);
result = _.range(last - 10, last + 1); }
} else { else {
result = _.range(1, 11); 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; return result;
} }

3
awx/ui/client/src/shared/paginate/paginate.directive.js
View File

@@ -8,7 +8,8 @@ export default ['templateUrl',
dataset: '=', dataset: '=',
iterator: '@', iterator: '@',
basePath: '@', basePath: '@',
querySet: '=' querySet: '=',
maxVisiblePages: '@'
}, },
controller: 'PaginateController', controller: 'PaginateController',
templateUrl: templateUrl('shared/paginate/paginate') templateUrl: templateUrl('shared/paginate/paginate')

20
awx/ui/client/src/templates/main.js
View File

@@ -210,18 +210,16 @@ angular.module('templates', [surveyMaker.name, templatesList.name, jobTemplatesA
] ]
}, },
'inventorySyncList@templates.editWorkflowJobTemplate.workflowMaker': { 'inventorySyncList@templates.editWorkflowJobTemplate.workflowMaker': {
templateProvider: function(InventorySourcesList, generateList) { templateProvider: function(WorkflowInventorySourcesList, generateList) {
let list = _.cloneDeep(InventorySourcesList);
// mutate list definition here!
let html = generateList.build({ let html = generateList.build({
list: list, list: WorkflowInventorySourcesList,
input_type: 'radio', input_type: 'radio',
mode: 'lookup' mode: 'lookup'
}); });
return html; return html;
}, },
// encapsulated $scope in this controller will be a initialized as child of 'modal' $scope, because of element hierarchy // 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) { function($scope, list, Dataset) {
init(); init();
@@ -438,7 +436,7 @@ angular.module('templates', [surveyMaker.name, templatesList.name, jobTemplatesA
return qs.search(path, $stateParams[`${list.iterator}_search`]); return qs.search(path, $stateParams[`${list.iterator}_search`]);
} }
], ],
ProjectDataset: ['ProjectList', 'QuerySet', '$stateParams', 'GetBasePath', ProjectDataset: ['WorkflowProjectList', 'QuerySet', '$stateParams', 'GetBasePath',
(list, qs, $stateParams, GetBasePath) => { (list, qs, $stateParams, GetBasePath) => {
let path = GetBasePath(list.basePath); let path = GetBasePath(list.basePath);
return qs.search(path, $stateParams[`${list.iterator}_search`]); return qs.search(path, $stateParams[`${list.iterator}_search`]);
@@ -468,6 +466,7 @@ angular.module('templates', [surveyMaker.name, templatesList.name, jobTemplatesA
label: '', label: '',
nosort: true nosort: true
}; };
list.maxVisiblePages = 5;
return list; return list;
} }
@@ -479,6 +478,15 @@ angular.module('templates', [surveyMaker.name, templatesList.name, jobTemplatesA
delete list.fields.scm_type; delete list.fields.scm_type;
delete list.fields.last_updated; delete list.fields.last_updated;
list.fields.name.columnClass = "col-md-11"; list.fields.name.columnClass = "col-md-11";
list.maxVisiblePages = 5;
return list;
}
],
WorkflowInventorySourcesList: ['InventorySourcesList',
(InventorySourcesList) => {
let list = _.cloneDeep(InventorySourcesList);
list.maxVisiblePages = 5;
return list; return list;
} }