External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-14 03:10:42 -03:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6740 from jaredevantabor/page-size

Browse Source 
Adding View Per Page for pagination
This commit is contained in:
Jared Tabor 2017-06-27 08:54:20 -07:00 committed by GitHub
commit 5d8e3161d1
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',