Permalink
Browse files

Implemented pagination of users on admin page

  • Loading branch information...
lowery committed Nov 7, 2017
1 parent 89bb8ff commit 02a070ac7f2a06f38a8fbae3cd740e3ebd06b405
Showing with 36 additions and 14 deletions.
  1. +2 −1 app/models/db/user/User.java
  2. +4 −6 public/javascripts/templates/users.html
  3. +30 −7 public/javascripts/views/users.js
@@ -73,7 +73,8 @@
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;

@@ -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>
@@ -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();
}
});

0 comments on commit 02a070a

Please sign in to comment.