Added pagination on top of lists (Fixed #3667).

CHANGELOG

@@ -127,6 +127,7 @@ Core:
   easier development [#3566].
 - Reset scroll level for each new projection [#3686].
 - Scroll to top on every state change [#3689].
+- Added pagination on top of lists [#3698].
 
 Mediafiles:
 - New form for uploading multiple files [#3650].

openslides/agenda/static/js/agenda/site.js

@@ -173,7 +173,7 @@ angular.module('OpenSlidesApp.agenda.site', [
         };
 
         // pagination
-        $scope.pagination = osTablePagination.createInstance('AgendaTablePagination');
+        $scope.pagination = osTablePagination.createInstance('AgendaTablePagination', 50);
 
         // parse duration for inline editing
         $scope.generateDurationText = function (item) {

openslides/agenda/static/templates/agenda/item-list.html

@@ -170,8 +170,16 @@
     </div>
     <div class="col-md-6" ng-show="itemsFiltered.length > pagination.itemsPerPage">
       <span class="pull-right">
+        <a href="" class="pagination-arrow" ng-click="pagination.prevPage()"
+          ng-if="pagination.showPrevPageArrow()">
+          &laquo;
+        </a>
         <translate>Page</translate> {{ pagination.currentPage }} /
-        {{ Math.ceil(itemsFiltered.length/pagination.itemsPerPage) }}
+        {{ pagination.getPageCount(itemsFiltered) }}
+        <a href="" class="pagination-arrow" ng-click="pagination.nextPage(itemsFiltered)"
+          ng-if="pagination.showNextPageArrow(itemsFiltered)">
+          &raquo;
+        </a>
       </span>
     </div>
   </div>

openslides/assignments/static/templates/assignments/assignment-list.html

@@ -67,8 +67,16 @@
     </div>
     <div class="col-md-6" ng-show="assignmentsFiltered.length > pagination.itemsPerPage">
       <span class="pull-right">
+        <a href="" class="pagination-arrow" ng-click="pagination.prevPage()"
+          ng-if="pagination.showPrevPageArrow()">
+          &laquo;
+        </a>
         <translate>Page</translate> {{ pagination.currentPage }} /
-        {{ Math.ceil(assignmentsFiltered.length/pagination.itemsPerPage) }}
+        {{ pagination.getPageCount(assignmentsFiltered) }}
+        <a href="" class="pagination-arrow" ng-click="pagination.nextPage(assignmentsFiltered)"
+          ng-if="pagination.showNextPageArrow(assignmentsFiltered)">
+          &raquo;
+        </a>
       </span>
     </div>
   </div>

openslides/core/static/css/_helper.scss

@@ -209,6 +209,16 @@ tr.selected td {
     margin-left: 2px;
 }
 
+.pagination-arrow {
+    font-size: 150%;
+    padding: 3px;
+    text-decoration: none;
+
+    &:hover, &:focus {
+        text-decoration: none;
+    }
+}
+
 .grey {
     color: #9a9898;
 }

openslides/core/static/js/core/site.js

@@ -650,6 +650,31 @@ angular.module('OpenSlidesApp.core.site', [
                 self.save();
                 $rootScope.gotoTop();
             };
+            self.getPageCount = function (objs) {
+                if (objs) {
+                    return Math.ceil(objs.length/self.itemsPerPage);
+                }
+            };
+            self.showNextPageArrow = function (objs) {
+                if (objs) {
+                    return self.currentPage != self.getPageCount(objs);
+                }
+            };
+            self.showPrevPageArrow = function () {
+                return self.currentPage != 1;
+            };
+            self.nextPage = function (objs) {
+                if (objs && self.currentPage < self.getPageCount(objs)) {
+                    self.currentPage++;
+                    self.pageChanged();
+                }
+            };
+            self.prevPage = function () {
+                if (self.currentPage > 1) {
+                    self.currentPage--;
+                    self.pageChanged();
+                }
+            };
             return self;
         };
 

openslides/mediafiles/static/templates/mediafiles/mediafile-list.html

@@ -146,8 +146,16 @@
     </div>
     <div class="col-md-6" ng-show="mediafilesFiltered.length > pagination.itemsPerPage">
       <span class="pull-right">
+        <a href="" class="pagination-arrow" ng-click="pagination.prevPage()"
+          ng-if="pagination.showPrevPageArrow()">
+          &laquo;
+        </a>
         <translate>Page</translate> {{ pagination.currentPage }} /
-        {{ Math.ceil(mediafilesFiltered.length/pagination.itemsPerPage) }}
+        {{ pagination.getPageCount(mediafilesFiltered) }}
+        <a href="" class="pagination-arrow" ng-click="pagination.nextPage(mediafilesFiltered)"
+          ng-if="pagination.showNextPageArrow(mediafilesFiltered)">
+          &raquo;
+        </a>
       </span>
     </div>
   </div>

openslides/motions/static/templates/motions/motion-list.html

@@ -128,8 +128,16 @@
     </div>
     <div class="col-md-6" ng-show="motionsFiltered.length > pagination.itemsPerPage">
       <span class="pull-right">
+        <a href="" class="pagination-arrow" ng-click="pagination.prevPage()"
+          ng-if="pagination.showPrevPageArrow()">
+          &laquo;
+        </a>
         <translate>Page</translate> {{ pagination.currentPage }} /
-        {{ Math.ceil(motionsFiltered.length/pagination.itemsPerPage) }}
+        {{ pagination.getPageCount(motionsFiltered) }}
+        <a href="" class="pagination-arrow" ng-click="pagination.nextPage(motionsFiltered)"
+          ng-if="pagination.showNextPageArrow(motionsFiltered)">
+          &raquo;
+        </a>
       </span>
     </div>
   </div>

openslides/users/static/templates/users/user-list.html

@@ -149,8 +149,16 @@
     </div>
     <div class="col-md-6" ng-show="usersFiltered.length > pagination.itemsPerPage">
       <span class="pull-right">
+        <a href="" class="pagination-arrow" ng-click="pagination.prevPage()"
+          ng-if="pagination.showPrevPageArrow()">
+          &laquo;
+        </a>
         <translate>Page</translate> {{ pagination.currentPage }} /
-        {{ Math.ceil(usersFiltered.length/pagination.itemsPerPage) }}
+        {{ pagination.getPageCount(usersFiltered) }}
+        <a href="" class="pagination-arrow" ng-click="pagination.nextPage(usersFiltered)"
+          ng-if="pagination.showNextPageArrow(usersFiltered)">
+          &raquo;
+        </a>
       </span>
     </div>
   </div>