Implemented pagination of users on admin page

kurator-org · Nov 7, 2017 · 02a070a · 02a070a
1 parent 89bb8ff
commit 02a070a
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 14 deletions.
diff --git a/app/models/db/user/User.java b/app/models/db/user/User.java
@@ -73,7 +73,8 @@ public class User extends Model implements Subject {
     public List<WorkflowRun> workflowRuns;
 
     private boolean active;
-
+
+    @Transient
     @Formula(select = "_b${ta}.run_count", join = "join (select owner_id, count(*) as run_count from workflow_run group by owner_id) as _b${ta} on _b${ta}.owner_id = ${ta}.id")
     public int runCount;
 

diff --git a/public/javascripts/templates/users.html b/public/javascripts/templates/users.html
@@ -1,5 +1,5 @@
 <div style="margin-top: -1.5em">
-    <div style="float: left; padding-top: 1.5em;"><h4>Showing <span class="start">1</span> to <span class="limit">10</span> of <span class="total">50</span> users</h4></div>
+    <div style="float: left; padding-top: 1.5em;"><h4>Showing <span class="start">1</span> to <span class="limit">10</span> of <span class="total"><%= total %></span> users</h4></div>
     <div style="float: right;" >
         <nav aria-label="Page navigation">
         <ul class="pagination">
@@ -8,11 +8,9 @@
                     <span aria-hidden="true">&laquo;</span>
                 </a>
             </li>
-            <li class="page active" id="1"><a href="#">1</a></li>
-            <li class="page" id="2"><a href="#">2</a></li>
-            <li class="page" id="3"><a href="#">3</a></li>
-            <li class="page" id="4"><a href="#">4</a></li>
-            <li class="page" id="5"><a href="#">5</a></li>
+            <% for(i = 0; i < pages; i++) { %>
+            <li class="page"><a class="page-btn" id="<%= i %>" href="#"><%= i+1 %></a></li>
+            <% } %>
             <li>
                 <a class="next" href="#" aria-label="Next">
                     <span aria-hidden="true">&raquo;</span>

diff --git a/public/javascripts/views/users.js b/public/javascripts/views/users.js
@@ -10,7 +10,7 @@ define([
         template: _.template(usersTpl),
 
         events: {
-
+            'click .page-btn': 'viewPage'
         },
 
         initialize: function() {
@@ -20,6 +20,7 @@ define([
             this.collection.fetch();
 
             this.filter = { }; // all users
+            this.currPage = 0;
         },
 
         addUser: function (user) {
@@ -32,7 +33,7 @@ define([
         },
 
         render: function() {
-            this.$el.html(this.template({ }));
+            users = [ ];
 
             // apply the filter to the collection and display
             this.collection.each(function (user) {
@@ -42,27 +43,44 @@ define([
                     var group = app.currentGroups.get(groupId);
 
                     if (user.hasGroup(group)) {
-                        this.addUser(user);
+                        users.push(user);
                     }
                 } else if (this.filter.role) {
                     var role = this.filter.role;
 
                     if (user.get('role') == role) {
-                        this.addUser(user);
+                        users.push(user);
                     }
                 } else if('active' in this.filter) {
                     var active = this.filter.active;
-                    console.log(user.get('active'));
+
                     if (user.get('active') == active) {
-                        this.addUser(user);
+                        users.push(user);
                     }
                 } else {
                     // display all users
-                    this.addUser(user);
+                    users.push(user);
                 }
 
             }, this);
 
+            var total = users.length;
+            var pages = total/10;
+
+            this.$el.html(this.template({ total : users.length, pages: pages }));
+
+            var start = (this.currPage * 10);
+            var limit = (start + 10) < users.length ? 10 : users.length - start;
+
+            for (i = 0; i < limit; i++) {
+                var user = users[start + i];
+                this.addUser(user);
+            }
+
+            $('.start').html(start+1);
+            $('.limit').html(start+limit);
+
+            // Set total user count
             return this;
         },
 
@@ -72,6 +90,11 @@ define([
 
         droppedUser: function (user) {
             this.trigger('dropped', user);
+        },
+
+        viewPage: function (e) {
+            this.currPage = $(e.target).attr('id');
+            this.render();
         }
     });