TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor pagination in angular work packages table

Browse Source
pull/1065/head
Till Breuer 11 years ago
parent 80afb2b0f9
commit 5b47405e6c
7 changed files with 76 additions and 48 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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

4
app/assets/javascripts/angular/config/work-packages-config.js vendored
Unescape View File

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

18
app/assets/javascripts/angular/controllers/work-packages-controller.js vendored
Unescape View File

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

38
app/assets/javascripts/angular/directives/components/table_pagination.js vendored
Unescape View File

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

4
app/assets/javascripts/angular/directives/work_packages/query-filter-directive.js vendored
Unescape View File

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

53
app/assets/javascripts/angular/services/pagination-service.js vendored
Unescape View File

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

5
app/views/work_packages/_list.html.erb
Unescape View File

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

2
public/templates/components/table_pagination.html
Unescape View File

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

Write Preview
Loading…
Cancel
Save