Refactor pagination in angular work packages table

pull/1065/head
Till Breuer 11 years ago
parent 80afb2b0f9
commit 5b47405e6c
  1. 4
      app/assets/javascripts/angular/config/work-packages-config.js
  2. 18
      app/assets/javascripts/angular/controllers/work-packages-controller.js
  3. 38
      app/assets/javascripts/angular/directives/components/table_pagination.js
  4. 4
      app/assets/javascripts/angular/directives/work_packages/query-filter-directive.js
  5. 53
      app/assets/javascripts/angular/services/pagination-service.js
  6. 5
      app/views/work_packages/_list.html.erb
  7. 2
      public/templates/components/table_pagination.html

@ -44,6 +44,6 @@ angular.module('openproject.workPackages.config')
.constant('DEFAULT_PAGINATION_OPTIONS', {
page: 1,
per_page: 10,
per_page_options: [10, 20, 50, 100, 500, 1000]
perPage: 10,
perPageOptions: [10, 20, 50, 100, 500, 1000]
});

@ -1,7 +1,7 @@
angular.module('openproject.workPackages.controllers')
.controller('WorkPackagesController', ['$scope', 'WorkPackagesTableHelper', 'Query', 'Sortation', 'WorkPackageService', 'QueryService', 'INITIALLY_SELECTED_COLUMNS', 'OPERATORS_AND_LABELS_BY_FILTER_TYPE', 'AVAILABLE_WORK_PACKAGE_FILTERS','DEFAULT_SORT_CRITERIA', 'DEFAULT_QUERY', 'DEFAULT_PAGINATION_OPTIONS',
function($scope, WorkPackagesTableHelper, Query, Sortation, WorkPackageService, QueryService, INITIALLY_SELECTED_COLUMNS, OPERATORS_AND_LABELS_BY_FILTER_TYPE, AVAILABLE_WORK_PACKAGE_FILTERS, DEFAULT_SORT_CRITERIA, DEFAULT_QUERY, DEFAULT_PAGINATION_OPTIONS) {
.controller('WorkPackagesController', ['$scope', 'WorkPackagesTableHelper', 'Query', 'Sortation', 'WorkPackageService', 'QueryService', 'PaginationService', 'INITIALLY_SELECTED_COLUMNS', 'OPERATORS_AND_LABELS_BY_FILTER_TYPE', 'AVAILABLE_WORK_PACKAGE_FILTERS','DEFAULT_SORT_CRITERIA', 'DEFAULT_QUERY',
function($scope, WorkPackagesTableHelper, Query, Sortation, WorkPackageService, QueryService, PaginationService, INITIALLY_SELECTED_COLUMNS, OPERATORS_AND_LABELS_BY_FILTER_TYPE, AVAILABLE_WORK_PACKAGE_FILTERS, DEFAULT_SORT_CRITERIA, DEFAULT_QUERY) {
function initialSetup() {
@ -13,7 +13,6 @@ angular.module('openproject.workPackages.controllers')
setupColumns()
.then(setupQuery)
.then(setupPagination)
.then($scope.updateResults)
.then(setupComplete);
@ -45,15 +44,6 @@ angular.module('openproject.workPackages.controllers')
});
}
function setupPagination(paginationOptions) {
paginationOptions = paginationOptions || DEFAULT_PAGINATION_OPTIONS;
$scope.paginationOptions = {
page: paginationOptions.page,
perPage: paginationOptions.per_page
};
$scope.perPageOptions = paginationOptions.per_page_options;
}
$scope.submitQueryForm = function(){
jQuery("#selected_columns option").attr('selected',true);
jQuery('#query_form').submit();
@ -69,12 +59,10 @@ angular.module('openproject.workPackages.controllers')
$scope.totalSums = meta.sums;
$scope.groupSums = meta.group_sums;
$scope.totalEntries = meta.total_entries;
setupPagination(meta);
};
$scope.updateResults = function() {
return $scope.withLoading(WorkPackageService.getWorkPackages, [$scope.projectIdentifier, $scope.query, $scope.paginationOptions])
return $scope.withLoading(WorkPackageService.getWorkPackages, [$scope.projectIdentifier, $scope.query, PaginationService.getPaginationOptions()])
.then($scope.setupWorkPackagesTable);
};

@ -1,27 +1,28 @@
angular.module('openproject.uiComponents')
.directive('tablePagination', [function(){
.directive('tablePagination', ['PaginationService', function(PaginationService) {
return {
restrict: 'EA',
templateUrl: '/templates/components/table_pagination.html',
scope: {
paginationOptions: '=',
perPageOptions: '=',
totalEntries: '=',
updateResults: '&'
},
link: function(scope, element, attributes){
link: function(scope, element, attributes) {
scope.paginationOptions = PaginationService.getPaginationOptions();
scope.selectPerPage = function(perPage){
scope.paginationOptions.perPage = perPage;
PaginationService.setPerPage(perPage);
updatePageNumbers();
scope.showPage(1);
};
scope.showPage = function(pageNumber){
scope.paginationOptions.page = pageNumber;
PaginationService.setPage(pageNumber);
updateCurrentRangeLabel();
updateCurrentRange();
scope.updateResults(); // update table
};
@ -30,19 +31,8 @@ angular.module('openproject.uiComponents')
*
* @description Defines a string containing page bound information inside the directive scope
*/
function updateCurrentRange() {
var page = scope.paginationOptions.page;
var perPage = scope.paginationOptions.perPage;
scope.currentRange = "(" + getLowerPageBound(page, perPage) + " - " + getUpperPageBound(page, perPage) + "/" + scope.totalEntries + ")";
}
function getLowerPageBound(page, perPage) {
return perPage * (page - 1) + 1;
}
function getUpperPageBound(page, perPage) {
return Math.min(perPage * page, scope.totalEntries);
function updateCurrentRangeLabel() {
scope.currentRange = "(" + PaginationService.getLowerPageBound() + " - " + PaginationService.getUpperPageBound(scope.totalEntries) + "/" + scope.totalEntries + ")";
}
/**
@ -50,18 +40,16 @@ angular.module('openproject.uiComponents')
*
* @description Defines a list of all pages in numerical order inside the scope
*/
updatePageNumbers = function() {
function updatePageNumbers() {
var pageNumbers = [];
for (var i = 1; i <= Math.ceil(scope.totalEntries / scope.paginationOptions.perPage); i++) {
pageNumbers.push(i);
}
scope.pageNumbers = pageNumbers;
};
}
scope.$watch('totalEntries', function() {
if (!scope.paginationOptions) return;
updateCurrentRange();
updateCurrentRangeLabel();
updatePageNumbers();
});

@ -1,6 +1,6 @@
angular.module('openproject.workPackages.directives')
.directive('queryFilter', ['WorkPackagesTableHelper', 'WorkPackageService', 'FunctionDecorators', 'QueryService', 'StatusService', function(WorkPackagesTableHelper, WorkPackageService, FunctionDecorators, QueryService, StatusService) {
.directive('queryFilter', ['WorkPackagesTableHelper', 'WorkPackageService', 'FunctionDecorators', 'QueryService', 'PaginationService', function(WorkPackagesTableHelper, WorkPackageService, FunctionDecorators, QueryService, PaginationService) {
return {
restrict: 'A',
@ -27,7 +27,7 @@ angular.module('openproject.workPackages.directives')
if (filter !== oldFilter) {
if (filter.isConfigured()) {
scope.query.hasChanged();
scope.paginationOptions.page = 1; // reset page
PaginationService.resetPage();
applyFiltersWithDelay();
}

@ -0,0 +1,53 @@
angular.module('openproject.services')
.service('PaginationService', ['DEFAULT_PAGINATION_OPTIONS', function(DEFAULT_PAGINATION_OPTIONS) {
var paginationOptions = {
page: DEFAULT_PAGINATION_OPTIONS.page,
perPage: DEFAULT_PAGINATION_OPTIONS.perPage,
perPageOptions: DEFAULT_PAGINATION_OPTIONS.perPageOptions
};
PaginationService = {
getPaginationOptions: function() {
return paginationOptions;
},
getPage: function() {
return paginationOptions.page;
},
setPage: function(page) {
paginationOptions.page = page;
},
getPerPage: function() {
return paginationOptions.perPage;
},
setPerPage: function(perPage) {
paginationOptions.perPage = perPage;
},
getPerPageOptions: function() {
return paginationOptions.perPageOptions;
},
setPerPageOptions: function(perPageOptions) {
paginationOptions.perPageOptions = perPageOptions;
},
getLowerPageBound: function() {
return paginationOptions.perPage * (paginationOptions.page - 1) + 1;
},
getUpperPageBound: function(limit) {
return Math.min(paginationOptions.perPage * paginationOptions.page, limit);
},
resetPage: function() {
paginationOptions.page = 1;
},
nextPage: function() {
paginationOptions.page = paginationOptions.page + 1;
},
previousPage: function() {
paginationOptions.page = paginationOptions.page - 1;
}
};
return PaginationService;
}]);

@ -48,11 +48,10 @@ See doc/COPYRIGHT.rdoc for more details.
with-loading="withLoading">
</work-packages-table>
<table-pagination pagination-options="paginationOptions"
per-page-options="perPageOptions"
total-entries="totalEntries"
<table-pagination total-entries="totalEntries"
update-results="updateResults()">
</table-pagination>
<work-packages-loading>
</work-packages-loading>

@ -25,7 +25,7 @@
<span class="per_page_options">
Per page:
<span ng-repeat="perPageOption in perPageOptions">
<span ng-repeat="perPageOption in paginationOptions.perPageOptions">
<span ng-if="perPageOption != paginationOptions.perPage">
<a href="" ng-click="selectPerPage(perPageOption)">{{ perPageOption }}</a>
</span>

Loading…
Cancel
Save