Merge pull request #1075 from opf/pagination-fix-5639

Cherrypicked everything from pagination fix branch so we can merge this ...

app/assets/javascripts/angular/config/work-packages-config.js

@@ -39,5 +39,7 @@ angular.module('openproject.workPackages.config')
 .constant('DEFAULT_PAGINATION_OPTIONS', {
   page: 1,
   perPage: 10,
-  perPageOptions: [10, 20, 50, 100, 500, 1000]
+  perPageOptions: [10, 20, 50, 100, 500, 1000],
+  maxVisiblePageOptions: 9,
+  optionsTruncationSize: 2,
 });

app/assets/javascripts/angular/directives/components/table_pagination.js

@@ -22,6 +22,7 @@ angular.module('openproject.uiComponents')
         PaginationService.setPage(pageNumber);
 
         updateCurrentRangeLabel();
+        updatePageNumbers();
 
         scope.updateResults(); // update table
       };
@@ -33,7 +34,7 @@ angular.module('openproject.uiComponents')
        */
       function updateCurrentRangeLabel() {
         scope.currentRange = "(" + PaginationService.getLowerPageBound() + " - " + PaginationService.getUpperPageBound(scope.totalEntries) + "/" + scope.totalEntries + ")";
-      }
+      };
 
       /**
        * @name updatePageNumbers
@@ -41,12 +42,29 @@ angular.module('openproject.uiComponents')
        * @description Defines a list of all pages in numerical order inside the scope
        */
       function updatePageNumbers() {
+        var maxVisible = PaginationService.getMaxVisiblePageOptions();
+        var truncSize = PaginationService.getOptionsTruncationSize();
+
         var pageNumbers = [];
         for (var i = 1; i <= Math.ceil(scope.totalEntries / scope.paginationOptions.perPage); i++) {
           pageNumbers.push(i);
         }
+
+        scope.prePageNumbers = truncatePageNums(pageNumbers, PaginationService.getPage() >= maxVisible, 0, Math.min(PaginationService.getPage() - Math.ceil(maxVisible / 2), pageNumbers.length - maxVisible), truncSize);
+        scope.postPageNumbers = truncatePageNums(pageNumbers, pageNumbers.length >= maxVisible + (truncSize * 2), maxVisible, pageNumbers.length, 0);
         scope.pageNumbers = pageNumbers;
-      }
+      };
+
+      function truncatePageNums(pageNumbers, perform, disectFrom, disectLength, truncateFrom){
+        if (perform){
+          var tuncationSize = PaginationService.getOptionsTruncationSize();
+          var truncatedNums = pageNumbers.splice(disectFrom, disectLength);
+          if (truncatedNums.length >= tuncationSize * 2) truncatedNums.splice(truncateFrom, truncatedNums.length - tuncationSize)
+          return truncatedNums;
+        } else {
+          return [];
+        }
+      };
 
       scope.$watch('totalEntries', function() {
         updateCurrentRangeLabel();

app/assets/javascripts/angular/services/pagination-service.js

@@ -4,7 +4,9 @@ angular.module('openproject.services')
   var paginationOptions = {
     page: DEFAULT_PAGINATION_OPTIONS.page,
     perPage: DEFAULT_PAGINATION_OPTIONS.perPage,
-    perPageOptions: DEFAULT_PAGINATION_OPTIONS.perPageOptions
+    perPageOptions: DEFAULT_PAGINATION_OPTIONS.perPageOptions,
+    maxVisiblePageOptions: DEFAULT_PAGINATION_OPTIONS.maxVisiblePageOptions,
+    optionsTruncationSize: DEFAULT_PAGINATION_OPTIONS.optionsTruncationSize
   };
 
   PaginationService = {
@@ -20,6 +22,12 @@ angular.module('openproject.services')
     getPerPage: function() {
       return paginationOptions.perPage;
     },
+    getMaxVisiblePageOptions: function() {
+      return paginationOptions.maxVisiblePageOptions;
+    },
+    getOptionsTruncationSize: function() {
+      return paginationOptions.optionsTruncationSize;
+    },
     setPerPage: function(perPage) {
       paginationOptions.perPage = perPage;
     },

public/templates/components/table_pagination.html

@@ -6,6 +6,13 @@
      href="">Previous
   </a>
 
+  <span ng-if="prePageNumbers" ng-repeat="pageNumber in prePageNumbers">
+    <a ng-click="showPage(pageNumber)"
+       rel="next"
+       href="">{{ pageNumber }}</a>
+  </span>
+  <span ng-if="prePageNumbers" class="gap">...</span>
+
   <span ng-if="pageNumbers.length > 1" ng-repeat="pageNumber in pageNumbers">
     <em ng-if="pageNumber == paginationOptions.page" class="current">{{ pageNumber }}</em>
     <a ng-if="pageNumber != paginationOptions.page"
@@ -14,6 +21,13 @@
        href="">{{ pageNumber }}</a>
   </span>
 
+  <span ng-if="postPageNumbers" class="gap">...</span>
+  <span ng-if="postPageNumbers" ng-repeat="pageNumber in postPageNumbers">
+    <a ng-click="showPage(pageNumber)"
+       rel="next"
+       href="">{{ pageNumber }}</a>
+  </span>
+
   <a ng-show="paginationOptions.page != pageNumbers.length"
      ng-click="showPage(paginationOptions.page + 1)"
      class="next_page"
@@ -27,7 +41,7 @@
     Per page:
     <span ng-repeat="perPageOption in paginationOptions.perPageOptions">
       <span ng-if="perPageOption != paginationOptions.perPage">
-      	<a href="" ng-click="selectPerPage(perPageOption)">{{ perPageOption }}</a>
+        <a href="" ng-click="selectPerPage(perPageOption)">{{ perPageOption }}</a>
       </span>
       <span ng-if="perPageOption == paginationOptions.perPage"
             ng-click="selectPerPage(perPageOption)">{{ perPageOption }}</span>