Browse Source

#194: pagination for users list

Davide Alberani 4 years ago
parent
commit
1c7e6b03e6
2 changed files with 43 additions and 3 deletions
  1. 34 2
      angular_app/js/controllers.js
  2. 9 1
      angular_app/users-list.html

+ 34 - 2
angular_app/js/controllers.js

@@ -998,16 +998,46 @@ eventManControllers.controller('UsersCtrl', ['$scope', '$rootScope', '$state', '
         $scope.updateUserInfo = {};
         $scope.users = [];
         $scope.usersOrderProp = 'username';
+
         $scope.query = "";
+        $scope.currentPage = 1;
+        $scope.itemsPerPage = 10;
+        $scope.filteredLength = 0;
+        $scope.maxPaginationSize = 10;
+        $scope.shownItems = [];
 
         $scope.userQuery = "";
         $scope.userCurrentPage = 1;
         $scope.userItemsPerPage = 10;
         $scope.userFilteredLength = 0;
         $scope.userMaxPaginationSize = 10;
-        $scope.userMaxAllPersons = 10;
         $scope.userShownItems = [];
 
+        $scope.filterUsers = function() {
+            var users = $scope.users || [];
+            users = $filter('splittedFilter')(users, $scope.query);
+            users = $filter('orderBy')(users, $scope.usersOrderProp);
+            $scope.filteredUsers = angular.copy(users);
+            $scope.filteredUsersLength = $scope.filteredUsers.length;
+            users = $filter('pagination')(users, $scope.currentPage, $scope.itemsPerPage);
+            $scope.shownItems = users;
+        };
+
+        $scope.$watch('query', function() {
+            if (!$scope.query) {
+                $scope.currentPage = 1;
+            }
+            $scope.filterUsers();
+        });
+
+        $scope.$watch('currentPage + itemsPerPage', function() {
+            $scope.filterUsers();
+        });
+
+        $scope.$watch('usersOrderProp', function() {
+            $scope.filterUsers();
+        });
+
         $scope.userFilterTickets = function() {
             var tickets = $scope.user.tickets || [];
             tickets = $filter('splittedFilter')(tickets, $scope.userQuery);
@@ -1037,7 +1067,9 @@ eventManControllers.controller('UsersCtrl', ['$scope', '$rootScope', '$state', '
 
         $scope.updateUsersList = function() {
             if ($state.is('users')) {
-                $scope.users = User.all();
+                $scope.users = User.all(function() {
+                    $scope.filterUsers();
+                });
             }
         };
 

+ 9 - 1
angular_app/users-list.html

@@ -28,15 +28,20 @@
             </form>
 
             <div ng-include=" 'modal-confirm-action.html' " class="hidden"></div>
+            <uib-pagination ng-model="currentPage" total-items="filteredUsersLength" items-per-page="itemsPerPage"
+                        direction-links="false" boundary-links="true" boundary-link-numbers="true" max-size="maxPaginationSize">
+            </uib-pagination>
             <table class="table table-striped">
                 <thead>
                     <tr>
+                        <th class="text-right nowrap">#</th>
                         <th><strong>{{'User' | translate}}</strong></th>
                         <th><strong>{{'Actions' | translate}}</strong></th>
                     </tr>
                 </thead>
                 <tbody>
-                    <tr ng-repeat="user in users | splittedFilter:query | orderBy:usersOrderProp">
+                    <tr ng-repeat="user in shownItems">
+                        <td class="text-right">{{$index + 1 + ((currentPage-1)*itemsPerPage)}}</td>
                         <td>
                             <span>
                                 <strong>
@@ -50,6 +55,9 @@
                     </tr>
                 </tbody>
             </table>
+            <uib-pagination ng-model="currentPage" total-items="filteredUsersLength" items-per-page="itemsPerPage"
+                        direction-links="false" boundary-links="true" boundary-link-numbers="true" max-size="maxPaginationSize">
+            </uib-pagination>
         </div>
     </div>
 </div>