External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-02 09:18:48 -03:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #7151 from mabashian/6823-pagination-ux-fixes

Browse Source 
Pagination ux fixes
This commit is contained in:
Michael Abashian
2017-07-19 14:16:24 -04:00
committed by GitHub
parent 7bdb092b80 f3880e76a1
commit 04014e4f53
7 changed files with 26 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
awx/ui/client/src/instance-groups/instance-groups.route.js
View File

@@ -12,7 +12,7 @@ export default {
params: { params: {
instance_group_search: { instance_group_search: {
value: { value: {
page_size: '10', page_size: '20',
order_by: 'name' order_by: 'name'
} }
} }
@@ -38,4 +38,4 @@ export default {
} }
] ]
} }
}; };

4
awx/ui/client/src/instance-groups/instances/instance-jobs/instance-jobs-list.route.js
View File

@@ -11,7 +11,7 @@ export default {
params: { params: {
instance_job_search: { instance_job_search: {
value: { value: {
page_size: '10', page_size: '20',
order_by: '-finished', order_by: '-finished',
not__launch_type: 'sync' not__launch_type: 'sync'
} }
@@ -37,4 +37,4 @@ export default {
} }
], ],
} }
}; };

4
awx/ui/client/src/instance-groups/instances/instances-list.route.js
View File

@@ -12,7 +12,7 @@ export default {
params: { params: {
instance_search: { instance_search: {
value: { value: {
page_size: '10', page_size: '20',
order_by: 'hostname' order_by: 'hostname'
} }
} }
@@ -31,4 +31,4 @@ export default {
} }
] ]
} }
}; };

4
awx/ui/client/src/instance-groups/jobs/jobs-list.route.js
View File

@@ -11,7 +11,7 @@ export default {
params: { params: {
job_search: { job_search: {
value: { value: {
page_size: '10', page_size: '20',
order_by: '-finished', order_by: '-finished',
not__launch_type: 'sync' not__launch_type: 'sync'
} }
@@ -37,4 +37,4 @@ export default {
} }
] ]
} }
}; };

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

@@ -20,7 +20,7 @@
.Paginate { .Paginate {
margin-top: 20px; margin-top: 20px;
font-size: 12px !important; font-size: 10px !important;
color: @list-pagin-text; color: @list-pagin-text;
text-transform: uppercase; text-transform: uppercase;
display: flex; display: flex;
@@ -28,7 +28,7 @@
} }
.Paginate-pager--pageof { .Paginate-pager--pageof {
line-height: 22px; line-height: 25px;
margin-left: 10px; margin-left: 10px;
} }
@@ -64,6 +64,7 @@
.Paginate-filteringDropdowns{ .Paginate-filteringDropdowns{
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 25px;
} }
.Paginate-dropdown{ .Paginate-dropdown{
@@ -80,3 +81,7 @@
} }
} }
} }
.Paginate-itemsOf {
line-height: 25px;
}

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

@@ -6,6 +6,8 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
$scope.pageSize = pageSize; $scope.pageSize = pageSize;
$scope.basePageSize = parseInt(pageSize) === 5 ? 5 : 20;
function init() { function init() {
let updatePaginationVariables = function() { let updatePaginationVariables = function() {
@@ -28,7 +30,7 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
$('#period-dropdown') $('#period-dropdown')
.replaceWith("<a id=\"period-dropdown\" class=\"DashboardGraphs-filterDropdownText DashboardGraphs-filterDropdownItems--period\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+id+ .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"); "<i class=\"fa fa-angle-down DashboardGraphs-filterIcon\"></i>\n");
if($scope.querySet){ if($scope.querySet){
let origQuerySet = _.cloneDeep($scope.querySet); let origQuerySet = _.cloneDeep($scope.querySet);
queryset = _.merge(origQuerySet, { page_size: $scope.pageSize }); queryset = _.merge(origQuerySet, { page_size: $scope.pageSize });
@@ -39,12 +41,8 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
$scope.toPage(); $scope.toPage();
}; };
$scope.dataCount = function() {
return $filter('number')($scope.dataset.count);
};
$scope.toPage = function(page) { $scope.toPage = function(page) {
if(page === 0) { if(page === 0 || page > $scope.last) {
return; return;
} }
if (GetBasePath($scope.basePath) || $scope.basePath) { if (GetBasePath($scope.basePath) || $scope.basePath) {
@@ -130,7 +128,7 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
return `1 - ${$scope.pageSize}`; return `1 - ${$scope.pageSize}`;
} else { } else {
let floor = (($scope.current - 1) * parseInt($scope.pageSize)) + 1; 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; let ceil = floor + parseInt($scope.pageSize) - 1 < $scope.dataset.count ? floor + parseInt($scope.pageSize) - 1 : $scope.dataset.count;
return `${floor} - ${ceil}`; return `${floor} - ${ceil}`;
} }
} }

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

@@ -1,4 +1,4 @@
<div class="Paginate page-row" ng-hide="dataset.count < 1"> <div class="Paginate page-row">
<div class="Paginate-wrapper" ng-hide="dataset.count <= pageSize"> <div class="Paginate-wrapper" ng-hide="dataset.count <= pageSize">
<ul class="Paginate-controls pagination"> <ul class="Paginate-controls pagination">
<!-- first --> <!-- first -->
@@ -18,7 +18,7 @@
<a href ng-class="{'Paginate-controls--active': page === current}" ng-click="toPage(page)">{{ page }}</a> <a href ng-class="{'Paginate-controls--active': page === current}" ng-click="toPage(page)">{{ page }}</a>
</li> </li>
<!-- next --> <!-- next -->
<li class="Paginate-controls--next Paginate-controls--item" ng-hide="current === last"> <li class="Paginate-controls--next Paginate-controls--item" ng-class="{disabled: current === last}">
<a href ng-click="toPage(current + 1)"> <a href ng-click="toPage(current + 1)">
<i class="fa fa-angle-right"></i> <i class="fa fa-angle-right"></i>
</a> </a>
@@ -35,16 +35,16 @@
<span id="total-pages">{{last}}</span> <span id="total-pages">{{last}}</span>
</span> </span>
</div> </div>
<div class="Paginate-total page-label" ng-hide="dataCount === 0"> <div class="Paginate-total page-label" ng-hide="dataset.count === 0">
<!-- TODO: Move the ITEMS line into paginate.directive.js <!-- TODO: Move the ITEMS line into paginate.directive.js
so that i18n.sprintf("A of B") can be used but so that i18n.sprintf("A of B") can be used but
it seems $sce.trustAsHtml() does not work with html tag. it seems $sce.trustAsHtml() does not work with html tag.
--> -->
<span translate>ITEMS&nbsp; <span class="Paginate-itemsOf" translate>ITEMS&nbsp;
<span>{{dataRange}}</span> <span>{{dataRange}}</span>
<span>of {{dataCount()}}</span> <span ng-hide="dataset.count <= basePageSize">of {{dataset.count | number}}</span>
</span> </span>
<div class="Paginate-filteringDropdowns" ng-hide="hideViewPerPage"> <div class="Paginate-filteringDropdowns" ng-hide="hideViewPerPage || dataset.count <= basePageSize">
<div class="Paginate-filterLabel" translate>VIEW PER PAGE</div> <div class="Paginate-filterLabel" translate>VIEW PER PAGE</div>
<div class="DashboardGraphs-periodDropdown"> <div class="DashboardGraphs-periodDropdown">
<a role="button" <a role="button"