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

Adding View Per Page for pagination

Browse Source 
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
This commit is contained in:
Jared Tabor 2017-06-15 14:37:06 -07:00
parent 2d9df199c6
commit 4c0702ef3c
8 changed files with 85 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
awx/ui/client/src/inventories-hosts/inventories/related/completed-jobs/completed-jobs.route.js
View File

@ -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:""
}

8
awx/ui/client/src/shared/form-generator.js
View File

@ -2015,7 +2015,13 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
//html += "</div>\n"; // close well
html += "</div>\n"; // close list-wrapper div
html += `<paginate base-path="${collection.basePath}" dataset="${collection.iterator}_dataset" collection="${collection.iterator}s" iterator="${collection.iterator}" ng-hide="hidePagination">`;
html += `<paginate
base-path="${collection.basePath}"
dataset="${collection.iterator}_dataset"
collection="${collection.iterator}s"
iterator="${collection.iterator}"
query-set="${collection.iterator}_queryset"
ng-hide="hidePagination">`;
return html;
},
};

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

@ -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 += `<paginate
base-path="${list.basePath || list.name}"
collection="${list.name}"
dataset="${list.iterator}_dataset"
iterator="${list.iterator}"
query-set="${list.iterator}_queryset"`;
query-set="${list.iterator}_queryset"
hide-view-per-page="${hide_view_per_page}"`;
html += list.maxVisiblePages ? `max-visible-pages="${list.maxVisiblePages}"` : '';
html += `></paginate></div>`;
}

14
awx/ui/client/src/shared/paginate/paginate.block.less
View File

@ -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;
}

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

@ -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("<a id=\"period-dropdown\" class=\"DashboardGraphs-filterDropdownText DashboardGraphs-filterDropdownItems--period\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+id+
"<i class=\"fa fa-angle-down DashboardGraphs-filterIcon\"></i>\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();
}
];

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

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

24
awx/ui/client/src/shared/paginate/paginate.partial.html
View File

@ -44,5 +44,29 @@
<span>{{dataRange}}</span>
<span>of {{dataCount()}}</span>
</span>
<div class="Paginate-filteringDropdowns" ng-hide="hideViewPerPage">
<div class="Paginate-filterLabel" translate>VIEW PER PAGE</div>
<div class="DashboardGraphs-periodDropdown">
<a role="button"
data-toggle="dropdown"
data-target="#"
href="/page.html"
class="DashboardGraphs-filterDropdownText">
<translate>{{pageSize}}</translate> <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
</a>
<ul class="dropdown-menu DashboardGraphs-filterDropdownItems
DashboardGraphs-filterDropdownItems--period Paginate-dropdown" role="menu" aria-labelledby="period-dropdown">
<li>
<a ng-click="filter(20)" translate>20</a>
</li>
<li>
<a ng-click="filter(50)" translate>50</a>
</li>
<li>
<a ng-click="filter(100)" translate>100</a>
</li>
</ul>
</div>
</div>
</div>
</div>

7
awx/ui/client/src/templates/completed-jobs.list.js
View File

@ -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',