External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-16 20:30:46 -03: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
Show Stats 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}"
dataset="${list.iterator}_dataset"
iterator="${list.iterator}"
query-set="${list.iterator}_queryset">
</paginate></div>`;
query-set="${list.iterator}_queryset"`;
html += list.maxVisiblePages ? `max-visible-pages="${list.maxVisiblePages}"` : '';
html += `></paginate></div>`;
}
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',
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;
}

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

@ -8,7 +8,8 @@ export default ['templateUrl',
dataset: '=',
iterator: '@',
basePath: '@',
querySet: '='
querySet: '=',
maxVisiblePages: '@'
},
controller: 'PaginateController',
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': {
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;
}