basic pagination for tickets

angular_app/event-tickets.html

@@ -43,7 +43,7 @@
                                 </tr>
                             </thead>
                             <tbody>
-                                <tr ng-repeat="ticket in (event.tickets || []) | splittedFilter:query | registeredFilter:registeredFilterOptions | orderBy:ticketsOrder">
+                                <tr ng-repeat="ticket in shownItems">
                                     <td class="text-right">{{$index+1}}</td>
                                     <td>
                                         <span>
@@ -71,6 +71,9 @@
                                 </tr>
                             </tbody>
                         </table>
+						<pagination ng-model="currentPage" total-items="filteredLength" items-per-page="itemsPerPage"
+                                    boundary-links="true" boundary-link-numbers="true" max-size="maxPaginationSize">
+                        </pagination>
                     </div>
                 </div>
             </div>

angular_app/js/controllers.js

@@ -166,13 +166,15 @@ eventManControllers.controller('EventDetailsCtrl', ['$scope', '$state', 'Event',
 );
 
 
-eventManControllers.controller('EventTicketsCtrl', ['$scope', '$state', 'Event', 'EventTicket', 'Setting', '$log', '$translate', '$rootScope', 'EventUpdates', '$uibModal',
-    function ($scope, $state, Event, EventTicket, Setting, $log, $translate, $rootScope, EventUpdates, $uibModal) {
+eventManControllers.controller('EventTicketsCtrl', ['$scope', '$state', 'Event', 'EventTicket', 'Setting', '$log', '$translate', '$rootScope', 'EventUpdates', '$uibModal', '$filter',
+    function ($scope, $state, Event, EventTicket, Setting, $log, $translate, $rootScope, EventUpdates, $uibModal, $filter) {
         $scope.ticketsOrder = ["name", "surname"];
         $scope.countAttendees = 0;
         $scope.message = {};
+        $scope.query = '';
         $scope.event = {};
         $scope.event.tickets = [];
+        $scope.shownItems = [];
         $scope.ticket = {}; // current ticket, for the event.ticket.* states
         $scope.tickets = []; // list of all tickets, for the 'tickets' state
         $scope.formSchema = {};
@@ -181,6 +183,29 @@ eventManControllers.controller('EventTicketsCtrl', ['$scope', '$state', 'Event',
         $scope.customFields = Setting.query({setting: 'ticket_custom_field', in_event_details: true});
         $scope.registeredFilterOptions = {all: false};
 
+        $scope.currentPage = 1;
+        $scope.itemsPerPage = 20;
+        $scope.filteredLength = 0;
+        $scope.maxPaginationSize = 5;
+
+        $scope.filterTickets = function() {
+            var tickets = $scope.event.tickets || [];
+            tickets = $filter('splittedFilter')(tickets, $scope.query);
+            tickets = $filter('registeredFilter')(tickets, $scope.registeredFilterOptions);
+            tickets = $filter('orderBy')(tickets, $scope.ticketsOrder);
+            $scope.filteredLength = tickets.length;
+            tickets = $filter('pagination')(tickets, $scope.currentPage, $scope.itemsPerPage);
+            $scope.shownItems = tickets;
+        };
+
+        $scope.$watch('query', function() {
+            $scope.filterTickets();
+        });
+
+        $scope.$watch('currentPage + itemsPerPage', function() {
+            $scope.filterTickets();
+        });
+
         $scope.formFieldsMap = {};
         $scope.formFieldsMapRev = {};
 
@@ -190,6 +215,7 @@ eventManControllers.controller('EventTicketsCtrl', ['$scope', '$state', 'Event',
                         return $scope.event.tickets;
                     }, function(new_collection, old_collection) {
                         $scope.calcAttendees();
+                        $scope.filterTickets();
                     }
                 );
 

angular_app/js/filters.js

@@ -68,6 +68,18 @@ eventManApp.filter('registeredFilter', ['$filter',
 );
 
 
+/* Filter that implements a generic pagination. */
+eventManApp.filter('pagination', ['$filter',
+    function($filter) {
+        return function(inputArray, page, itemsPerPage) {
+            var begin = (page - 1) * itemsPerPage;
+            var end = begin + itemsPerPage;
+            return inputArray.slice(begin, end);;
+        };
+    }]
+);
+
+
 /* Filter that returns only the attendees at an event. */
 eventManApp.filter('attendeesFilter', ['$filter',
     function($filter) {