Wired up the page number selection.

app/assets/javascripts/angular/controllers/work-packages-controller.js

@@ -15,6 +15,10 @@ angular.module('openproject.workPackages.controllers')
     $scope.query.per_page = $scope.perPage;
   });
 
+  $scope.$watch('page', function() {
+    $scope.query.page = $scope.page;
+  });
+
   function initialSetup() {
     $scope.projectIdentifier = gon.project_identifier;
     $scope.operatorsAndLabelsByFilterType = gon.operators_and_labels_by_filter_type;
@@ -50,6 +54,7 @@ angular.module('openproject.workPackages.controllers')
     $scope.groupSums = json.group_sums;
     $scope.page = json.page;
     $scope.perPage = json.per_page;
+    $scope.totalEntries = json.total_entries;
   };
 
   // Initially setup scope via gon

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

@@ -7,15 +7,38 @@ angular.module('openproject.uiComponents')
     scope: {
       page: '=',
       perPage: '=',
+      totalEntries: '=',
       rows: '='
     },
     link: function(scope, element, attributes){
       scope.selectPerPage = function(perPage){
         scope.perPage = perPage;
+        scope.page = 1;
+        scope.currentRange = currentRange();
+        scope.pageNumbers = pageNumbers();
       };
 
-      scope.possiblePerPages = [100, 500, 1000]; // TODO: These should come from somewhere sensible
+      scope.showPage = function(pageNumber){
-      scope.currentRange = "(" + ((scope.perPage * (scope.page - 1)) + 1) + " - " + scope.rows.length + "/" + scope.rows.length + ")"
+        scope.page = pageNumber;
+        scope.currentRange = currentRange();
+        scope.pageNumbers = pageNumbers();
+      };
+
+      currentRange = function(){
+        return "(" + ((scope.perPage * (scope.page - 1)) + 1) + " - " + scope.rows.length + "/" + scope.totalEntries + ")";
+      };
+
+      pageNumbers = function(){
+        var pageNumbers = [];
+        for (var i = 1; i <= Math.ceil(scope.totalEntries / scope.perPage); i++){
+          pageNumbers.push(i);
+        }
+        return pageNumbers;
+      }
+
+      scope.possiblePerPages = [10, 20, 50, 100, 500, 1000]; // TODO: These need to come from the settings and put into gon/json
+      scope.currentRange = currentRange();
+      scope.pageNumbers = pageNumbers();
     }
   }
 }])

app/assets/javascripts/angular/models/query.js

@@ -19,8 +19,8 @@ angular.module('openproject.models')
            }),
           'group_by': this.group_by,
           'sort': this.sortation.encode(),
-          'page': this.page, // These aren't on the query, hmm
+          'page': this.page,
-          'per_page': this.per_page // These aren't on the query, hmm
+          'per_page': this.per_page
         }].concat(this.getActiveConfiguredFilters().map(function(filter) {
           return filter.toParams();
         }))

app/controllers/work_packages_controller.rb

@@ -222,7 +222,6 @@ class WorkPackagesController < ApplicationController
                       []
                     end
 
-
     respond_to do |format|
       format.html do
         # push work packages to client as JSON
@@ -553,9 +552,7 @@ class WorkPackagesController < ApplicationController
       query:                        get_query_as_json(@query),
       columns:                      get_columns_for_json(@query.columns),
       available_columns:            get_columns_for_json(@query.available_columns),
-      sort_criteria:                @sort_criteria.to_param,
+      sort_criteria:                @sort_criteria.to_param
-      page:                         page_param,
-      per_page:                     per_page_param
     )
   end
 
@@ -566,7 +563,8 @@ class WorkPackagesController < ApplicationController
       sums:                         @query.columns.map { |column| results.total_sum_of(column) },
       group_sums:                   @query.group_by_column && @query.columns.map { |column| results.grouped_sums(column) },
       page:                         page_param,
-      per_page:                     per_page_param
+      per_page:                     per_page_param,
+      total_entries:                work_packages.total_entries
     }
   end
 

app/views/work_packages/_list.html.erb

@@ -49,6 +49,7 @@ See doc/COPYRIGHT.rdoc for more details.
 
     <table-pagination per-page="perPage"
                       page="page"
+                      total-entries="totalEntries"
                       rows="rows">
     </table-pagination>
     <work-packages-loading>

app/views/work_packages/index.html.erb

@@ -81,7 +81,6 @@ See doc/COPYRIGHT.rdoc for more details.
       <%= render :partial => 'work_packages/list', :locals => { :work_packages => work_packages,
                                                                 :query => query,
                                                                 :results => results } %>
-      <%= pagination_links_full work_packages %>
     <% end %>
 
     <%= other_formats_links do |f| %>

config/settings.yml

@@ -86,7 +86,7 @@ activity_days_default:
   format: int
   default: 30
 per_page_options:
-  default: '100, 500, 1000'
+  default: '10, 20, 50, 100, 500, 1000'
 mail_from:
   default: openproject@example.net
 bcc_recipients:

public/templates/components/table_pagination.html

@@ -1,5 +1,28 @@
 <p class="pagination">
+  <a ng-show="page != 1"
+     ng-click="showPage(page - 1)"
+     class="previous_page"
+     rel="prev start"
+     href="">Previous
+  </a>
+
+  <span ng-if="pageNumbers.length > 1" ng-repeat="pageNumber in pageNumbers">
+    <em ng-if="pageNumber == page" class="current">{{ pageNumber }}</em>
+    <a ng-if="pageNumber != page"
+       ng-click="showPage(pageNumber)"
+       rel="next"
+       href="">{{ pageNumber }}</a>
+  </span>
+
+  <a ng-show="page != pageNumbers.length"
+     ng-click="showPage(page + 1)"
+     class="next_page"
+     rel="next"
+     href="">Next
+  </a>
+
   <span class="range">{{ currentRange }}</span>
+
   <span class="per_page_options">
     Per page: <span class="current">{{ currentPerPage }}</span>
     <span ng-repeat="perPageSelection in possiblePerPages">