From 4c0702ef3cd55c2969bcf6347bedc89d1c9fa908 Mon Sep 17 00:00:00 2001 From: Jared Tabor Date: Thu, 15 Jun 2017 14:37:06 -0700 Subject: [PATCH] Adding View Per Page for pagination hooking up page size selector with paginate controller hiding view per page on lookups fixing some bugs with pagination and completed jobs pagination for inventories and templates --- .../completed-jobs/completed-jobs.route.js | 3 +- awx/ui/client/src/shared/form-generator.js | 8 ++++- .../list-generator/list-generator.factory.js | 4 ++- .../src/shared/paginate/paginate.block.less | 14 ++++++++ .../shared/paginate/paginate.controller.js | 32 ++++++++++++++++--- .../src/shared/paginate/paginate.directive.js | 3 +- .../src/shared/paginate/paginate.partial.html | 24 ++++++++++++++ .../src/templates/completed-jobs.list.js | 7 +++- 8 files changed, 85 insertions(+), 10 deletions(-) diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/completed-jobs/completed-jobs.route.js b/awx/ui/client/src/inventories-hosts/inventories/related/completed-jobs/completed-jobs.route.js index 7b3d3167dd..2d20164357 100644 --- a/awx/ui/client/src/inventories-hosts/inventories/related/completed-jobs/completed-jobs.route.js +++ b/awx/ui/client/src/inventories-hosts/inventories/related/completed-jobs/completed-jobs.route.js @@ -7,7 +7,8 @@ export default { value: { or__job__inventory:"", or__adhoccommand__inventory:"", - or__inventoryupdate__inventory_source__inventory:"" + or__inventoryupdate__inventory_source__inventory:"", + order_by: "-id" }, squash:"" } diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js index d932814550..ff3bcbf568 100644 --- a/awx/ui/client/src/shared/form-generator.js +++ b/awx/ui/client/src/shared/form-generator.js @@ -2015,7 +2015,13 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat //html += "\n"; // close well html += "\n"; // close list-wrapper div - html += ``; + html += ``; return html; }, }; 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 9502a99b0c..a735c16ff7 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 @@ -453,12 +453,14 @@ export default ['$compile', 'Attr', 'Icon', } if (options.paginate === undefined || options.paginate === true) { + let hide_view_per_page = (options.mode === "lookup") ? true : false; html += ``; } diff --git a/awx/ui/client/src/shared/paginate/paginate.block.less b/awx/ui/client/src/shared/paginate/paginate.block.less index 93b287df00..00c220ba97 100644 --- a/awx/ui/client/src/shared/paginate/paginate.block.less +++ b/awx/ui/client/src/shared/paginate/paginate.block.less @@ -56,3 +56,17 @@ align-items: flex-end; margin-bottom: -2px; } + +.Paginate-filterLabel{ + padding: 0px 10px 0px 10px; +} + +.Paginate-filteringDropdowns{ + display: flex; + align-items: center; +} + +.Paginate-dropdown{ + z-index: 1041; + margin-bottom: 10px; +} diff --git a/awx/ui/client/src/shared/paginate/paginate.controller.js b/awx/ui/client/src/shared/paginate/paginate.controller.js index 7326a797e8..c7a4cf5237 100644 --- a/awx/ui/client/src/shared/paginate/paginate.controller.js +++ b/awx/ui/client/src/shared/paginate/paginate.controller.js @@ -9,6 +9,7 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q function init() { let updatePaginationVariables = function() { + $scope.pageSize = calcPageSize(); $scope.current = calcCurrent(); $scope.last = calcLast(); $scope.pageRange = calcPageRange($scope.current, $scope.last); @@ -22,6 +23,22 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q }); } + $scope.filter = function(id){ + $scope.pageSize = Number(id); + $('#period-dropdown') + .replaceWith(""+id+ + "\n"); + + if($scope.querySet){ + let origQuerySet = _.cloneDeep($scope.querySet); + queryset = _.merge(origQuerySet, { page_size: $scope.pageSize }); + } + else { + queryset = _.merge($stateParams[`${$scope.iterator}_search`], { page_size: $scope.pageSize, page: 1 }); + } + $scope.toPage(); + }; + $scope.dataCount = function() { return $filter('number')($scope.dataset.count); }; @@ -65,7 +82,7 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q }; function calcLast() { - return Math.ceil($scope.dataset.count / pageSize); + return Math.ceil($scope.dataset.count / $scope.pageSize); } function calcCurrent() { @@ -107,17 +124,22 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q } function calcDataRange() { - if ($scope.current === 1 && $scope.dataset.count < parseInt(pageSize)) { + if ($scope.current === 1 && $scope.dataset.count < parseInt($scope.pageSize)) { return `1 - ${$scope.dataset.count}`; } else if ($scope.current === 1) { - return `1 - ${pageSize}`; + return `1 - ${$scope.pageSize}`; } else { - let floor = (($scope.current - 1) * parseInt(pageSize)) + 1; - let ceil = floor + parseInt(pageSize) < $scope.dataset.count ? floor + parseInt(pageSize) : $scope.dataset.count; + let floor = (($scope.current - 1) * parseInt($scope.pageSize)) + 1; + let ceil = floor + parseInt($scope.pageSize) < $scope.dataset.count ? floor + parseInt($scope.pageSize) : $scope.dataset.count; return `${floor} - ${ceil}`; } } + function calcPageSize(){ + let pageSize = $scope.querySet ? $scope.querySet.page_size || 20 : $stateParams[`${$scope.iterator}_search`].page_size || 20; + return Number(pageSize) ; + } + init(); } ]; diff --git a/awx/ui/client/src/shared/paginate/paginate.directive.js b/awx/ui/client/src/shared/paginate/paginate.directive.js index 9a62b1b926..73d6eed26b 100644 --- a/awx/ui/client/src/shared/paginate/paginate.directive.js +++ b/awx/ui/client/src/shared/paginate/paginate.directive.js @@ -9,7 +9,8 @@ export default ['templateUrl', iterator: '@', basePath: '@', querySet: '=', - maxVisiblePages: '@' + maxVisiblePages: '@', + hideViewPerPage: '=' }, controller: 'PaginateController', templateUrl: templateUrl('shared/paginate/paginate') diff --git a/awx/ui/client/src/shared/paginate/paginate.partial.html b/awx/ui/client/src/shared/paginate/paginate.partial.html index 7f8dc186c9..db281d8948 100644 --- a/awx/ui/client/src/shared/paginate/paginate.partial.html +++ b/awx/ui/client/src/shared/paginate/paginate.partial.html @@ -44,5 +44,29 @@ {{dataRange}} of {{dataCount()}} +
+
VIEW PER PAGE
+
+ + {{pageSize}} + + +
+
diff --git a/awx/ui/client/src/templates/completed-jobs.list.js b/awx/ui/client/src/templates/completed-jobs.list.js index 11e8c19b0a..56a0f76f52 100644 --- a/awx/ui/client/src/templates/completed-jobs.list.js +++ b/awx/ui/client/src/templates/completed-jobs.list.js @@ -11,7 +11,11 @@ export default ['i18n', function(i18n) { awToolTip: i18n._('Please save and run a job to view'), dataPlacement: 'top', name: 'completed_jobs', - basePath: 'api/v2/job_templates/{{$stateParams.job_template_id}}/jobs/?or__status=successful&or__status=failed&or__status=error&or__status=canceled', + basePath: 'api/v2/job_templates/{{$stateParams.job_template_id}}/jobs', + search: { + or__status__in: "successful,failed,error,canceled", + order_by: "-id" + }, iterator: 'completed_job', editTitle: i18n._('COMPLETED JOBS'), index: false, @@ -29,6 +33,7 @@ export default ['i18n', function(i18n) { icon: 'icon-job-{{ completed_job.status }}', iconOnly: true, ngClick:"viewjobResults(completed_job)", + nosort: true }, id: { label: 'ID',