pagination for All tickets page

angular_app/js/controllers.js

@@ -66,8 +66,8 @@ eventManControllers.controller('ModalConfirmInstanceCtrl', ['$scope', '$uibModal
 );
 
 
-eventManControllers.controller('EventsListCtrl', ['$scope', 'Event', '$uibModal', '$log', '$translate', '$rootScope', '$state',
-    function ($scope, Event, $uibModal, $log, $translate, $rootScope, $state) {
+eventManControllers.controller('EventsListCtrl', ['$scope', 'Event', '$uibModal', '$log', '$translate', '$rootScope', '$state', '$filter',
+    function ($scope, Event, $uibModal, $log, $translate, $rootScope, $state, $filter) {
         $scope.tickets = [];
         $scope.events = Event.all(function(events) {
             if (events && $state.is('tickets')) {
@@ -79,11 +79,35 @@ eventManControllers.controller('EventsListCtrl', ['$scope', 'Event', '$uibModal'
                     });
                     $scope.tickets.push.apply($scope.tickets, evt_tickets || []);
                 });
+                $scope.filterTickets();
             }
         });
         $scope.eventsOrderProp = "-begin_date";
         $scope.ticketsOrderProp = ["name", "surname"];
 
+        $scope.shownItems = [];
+        $scope.currentPage = 1;
+        $scope.itemsPerPage = 20;
+        $scope.filteredLength = 0;
+        $scope.maxPaginationSize = 5;
+
+        $scope.filterTickets = function() {
+            var tickets = $scope.tickets || [];
+            tickets = $filter('splittedFilter')(tickets, $scope['query-tickets']);
+            tickets = $filter('orderBy')(tickets, $scope.ticketsOrderProp);
+            $scope.filteredLength = tickets.length;
+            tickets = $filter('pagination')(tickets, $scope.currentPage, $scope.itemsPerPage);
+            $scope.shownItems = tickets;
+        };
+
+        $scope.$watch('query-tickets', function() {
+            $scope.filterTickets();
+        });
+
+        $scope.$watch('currentPage + itemsPerPage', function() {
+            $scope.filterTickets();
+        });
+
         $scope.confirm_delete = 'Do you really want to delete this event?';
         $rootScope.$on('$translateChangeSuccess', function () {
             $translate('Do you really want to delete this event?').then(function (translation) {
@@ -123,8 +147,8 @@ eventManControllers.controller('EventsListCtrl', ['$scope', 'Event', '$uibModal'
                 }
             );
             $scope.ticketsOrderProp = new_order;
+            $scope.filterTickets();
         };
-
     }]
 );
 

angular_app/tickets-list.html

@@ -15,6 +15,9 @@
                 </div>
             </form>
 
+            <pagination ng-model="currentPage" total-items="filteredLength" items-per-page="itemsPerPage"
+                        boundary-links="true" boundary-link-numbers="true" max-size="maxPaginationSize">
+            </pagination>
             <table class="table table-striped">
                 <thead>
                     <tr>
@@ -25,7 +28,7 @@
                     </tr>
                 </thead>
                 <tbody>
-                <tr ng-repeat="ticket in tickets | splittedFilter:query | orderBy:ticketsOrderProp">
+                <tr ng-repeat="ticket in shownItems">
                     <td class="text-right">{{$index+1}}</td>
                     <td>
                         <span><strong><a ui-sref="event.ticket.edit({id: ticket.event_id, ticket_id: ticket._id})"><span>{{ticket.name}}</span>&nbsp;<span>{{ticket.surname}}</span></a></strong></span><span ng-if="ticket.email">&nbsp;&lt;{{ticket.email}}&gt;</span>
@@ -40,6 +43,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>