#244 add pagination

alfio-event · Apr 21, 2017 · 38e27be · 38e27be
1 parent b0c2c0f
commit 38e27be
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/src/main/webapp/resources/js/admin/feature/reservations-list/reservations-list.html b/src/main/webapp/resources/js/admin/feature/reservations-list/reservations-list.html
@@ -6,7 +6,10 @@ <h3>Reservations for {{$ctrl.event.displayName}}</h3>
     <div class="form-inline">
         <label>
             <div class="input-group">
-                <select class="form-control input-sm" ng-options="s.value as s.label for s in $ctrl.allStatus" ng-model="$ctrl.statusFilter">
+                <select class="form-control input-sm"
+                        ng-options="s.value as s.label for s in $ctrl.allStatus"
+                        ng-model="$ctrl.statusFilter"
+                        ng-change="$ctrl.updateFilteredData()">
                 </select>
             </div>
         </label>
@@ -15,12 +18,12 @@ <h3>Reservations for {{$ctrl.event.displayName}}</h3>
                 <div class="input-group-addon">
                     <i class="fa fa-search"></i>
                 </div>
-                <input type="text" class="form-control input-sm" ng-model="$ctrl.toSearch">
+                <input type="text" class="form-control input-sm" ng-model="$ctrl.toSearch" ng-change="$ctrl.updateFilteredData()">
             </div>
         </label>
     </div>
     <div class="table-responsive">
-        <table class="table">
+        <table class="table table-striped">
             <thead>
                 <tr>
                     <th>Id</th>
@@ -33,8 +36,8 @@ <h3>Reservations for {{$ctrl.event.displayName}}</h3>
                 </tr>
             </thead>
             <tbody>
-                <tr ng-repeat="r in $ctrl.reservations | filter: $ctrl.toSearch | filter : {status: $ctrl.statusFilter}">
-                    <td><a ui-sref="events.single.view-reservation({eventName : $ctrl.event.shortName,reservationId: r.id})" ng-bind="r.id"></a> </td>
+                <tr ng-repeat="r in $ctrl.filteredReservations | limitTo: $ctrl.itemsPerPage : $ctrl.itemsPerPage * ($ctrl.currentPage - 1)">
+                    <td><a ui-sref="events.single.view-reservation({eventName : $ctrl.event.shortName,reservationId: r.id})" ng-bind="r.id"></a></td>
                     <td ng-bind="$ctrl.formatFullName(r)"></td>
                     <td ng-bind="r.email"></td>
                     <td ng-bind="r.status"></td>
@@ -44,5 +47,8 @@ <h3>Reservations for {{$ctrl.event.displayName}}</h3>
                 </tr>
             </tbody>
         </table>
+        <div class="text-center wMarginBottom">
+            <uib-pagination total-items="$ctrl.filteredReservations.length" ng-model="$ctrl.currentPage" items-per-page="$ctrl.itemsPerPage"></uib-pagination>
+        </div>
     </div>
 </div>
diff --git a/src/main/webapp/resources/js/admin/feature/reservations-list/reservations-list.js b/src/main/webapp/resources/js/admin/feature/reservations-list/reservations-list.js
@@ -5,20 +5,25 @@
         bindings: {
             event: '<'
         },
-        controller: ['EventService', ReservationsListCtrl],
+        controller: ['EventService', '$filter', ReservationsListCtrl],
         templateUrl: '../resources/js/admin/feature/reservations-list/reservations-list.html'
     });
 
 
 
-    function ReservationsListCtrl(EventService) {
+    function ReservationsListCtrl(EventService, $filter) {
         var ctrl = this;
 
+        ctrl.currentPage = 1;
+        ctrl.itemsPerPage = 50;
         ctrl.statusFilter = '';
+        ctrl.toSearch = '';
         ctrl.formatFullName = formatFullName;
+        ctrl.updateFilteredData = updateFilteredData;
 
-        this.$onInit = function() {
+        var filter = $filter('filter');
 
+        this.$onInit = function() {
             EventService.findAllReservations(ctrl.event.shortName).then(function(res) {
                 var statuses = {};
                 ctrl.reservations = res.data;
@@ -27,6 +32,7 @@
                 });
                 ctrl.allStatus = Object.keys(statuses).sort().map(function(v) {return {value: v, label: v}});
                 ctrl.allStatus.unshift({value: '', label: 'Show all'});
+                updateFilteredData();
             })
         }
 
@@ -37,5 +43,9 @@
                 return r.fullName;
             }
         }
+
+        function updateFilteredData() {
+            ctrl.filteredReservations = filter(filter(ctrl.reservations, ctrl.toSearch), {status: ctrl.statusFilter});
+        }
     }
 })();