Parcourir la source

users pagination

develop
Robin Thoni il y a 9 ans
Parent
révision
d386072661

+ 35
- 2
luticate/controllers/users.controller.js Voir le fichier

@@ -1,5 +1,38 @@
1 1
 angular.module('luticate')
2
-    .controller('UsersController', ['$scope', '$state', 'luticatePromises',
3
-        function($scope, $state, luticatePromises) {
2
+    .controller('UsersController', ['$scope', '$state', 'luticateAuthUsers',
3
+        function($scope, $state, luticateAuthUsers) {
4
+            $scope.page = 0;
5
+            $scope.perPage = 20;
6
+            $scope.users = [];
7
+            $scope.pages = [];
4 8
 
9
+            var promiseUsers = {
10
+                id: "promiseUsers",
11
+                groups: ['userList']
12
+            };
13
+
14
+            $scope.loadUsers = function()
15
+            {
16
+                luticateAuthUsers.getAll({page: $scope.page, perPage: $scope.perPage}, promiseUsers)
17
+                    .then(function(users)
18
+                    {
19
+                        $scope.users = users;
20
+                        $scope.pages = [];
21
+                        var start = Math.max(0, $scope.page - 5);
22
+                        var end = Math.min(start + 10, (users.Count / $scope.perPage) + (users.Count % $scope.perPage == 0 ? -1 : 0));
23
+                        for (var i = start; i < end; ++i) {
24
+                            $scope.pages.push(i);
25
+                        }
26
+                    }, function(error)
27
+                    {
28
+                    });
29
+            };
30
+
31
+            $scope.goToPage = function(page)
32
+            {
33
+                $scope.page = page;
34
+                $scope.loadUsers();
35
+            };
36
+
37
+            $scope.loadUsers();
5 38
     }]);

+ 9
- 2
luticate/css/app.less Voir le fichier

@@ -2,8 +2,6 @@ body {
2 2
   padding-top: 70px;
3 3
 }
4 4
 
5
-
6
-
7 5
 .caption {
8 6
   height: 100%;
9 7
   overflow: hidden;
@@ -40,3 +38,12 @@ body {
40 38
 footer {
41 39
   margin: 50px 0;
42 40
 }
41
+
42
+
43
+.pagination-current {
44
+  font-weight: bold;
45
+}
46
+
47
+.pagination-not-current {
48
+
49
+}

+ 1
- 5
luticate/views/footer.html Voir le fichier

@@ -13,8 +13,4 @@
13 13
         </div>
14 14
     </footer>
15 15
 
16
-</div>
17
-
18
-</body>
19
-
20
-</html>
16
+</div>

+ 1
- 1
luticate/views/navbar.html Voir le fichier

@@ -1,4 +1,4 @@
1
-<body>
1
+
2 2
 <!-- Navigation -->
3 3
 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller="NavBarController">
4 4
     <div class="container">

+ 24
- 1
luticate/views/users.html Voir le fichier

@@ -1,7 +1,30 @@
1 1
 <!-- Page Content -->
2 2
 <div class="container">
3 3
 
4
-    <div class="row">
4
+    <div class="row col-sm-8 col-sm-offset-2">
5
+
6
+        <table class="col-sm-12 table" lu-busy="userList">
7
+            <thead>
8
+                <tr>
9
+                    <th class="col-sm-2">Id</th>
10
+                    <th class="col-sm-3">Username</th>
11
+                    <th class="col-sm-3">Email</th>
12
+                    <th class="col-sm-3">Profile Id</th>
13
+                </tr>
14
+            </thead>
15
+            <tbody>
16
+                <tr ng-repeat="user in users.Data">
17
+                    <td>{{ user.Id }}</td>
18
+                    <td>{{ user.Username }}</td>
19
+                    <td>{{ user.Email }}</td>
20
+                    <td>{{ user.ProfileId }}</td>
21
+                </tr>
22
+            </tbody>
23
+        </table>
24
+
25
+        <div class="col-sm-12 text-center">
26
+            <a class="{{ p == page ? 'pagination-current' : 'pagination-not-current'}}" href="" ng-repeat="p in pages" ng-click="goToPage(p)">{{ p + 1 }}&nbsp;</a>
27
+        </div>
5 28
 
6 29
     </div>
7 30
 </div>

Chargement…
Annuler
Enregistrer