added paginator to the token page

Author: jricher

openid-connect-server-webapp/src/main/webapp/resources/js/client.js

@@ -304,7 +304,7 @@ var ClientListView = Backbone.View.extend({
  "click .refresh-table":"refreshTable",
  'keyup .search-query':'searchTable',
  'click .form-search button':'clearSearch',
- 'page #paginator':'changePage'
+ 'page .paginator':'changePage'
  },
 
  newClient:function (e) {
@@ -328,13 +328,13 @@ var ClientListView = Backbone.View.extend({
  // set up pagination
  var numPages = Math.ceil(this.filteredModel.length / 10);
  if (numPages > 1) {
- $('#paginator').show();
- $('#paginator', this.el).bootpag({
+ $('.paginator', this.el).show();
+ $('.paginator', this.el).bootpag({
  total: numPages,
  page: 1
  }); 
  } else {
- $('#paginator', this.el).hide();
+ $('.paginator', this.el).hide();
  }
 
  // render the rows
@@ -377,9 +377,7 @@ var ClientListView = Backbone.View.extend({
 },
 
 changePage:function(event, num) {
-this.page = num;
 $('#client-table tbody tr', this.el).each(function(index, element) {
-console.log([num, index]);
 if (Math.ceil((index + 1) / 10) != num) {
  $(element).hide();
  } else {

openid-connect-server-webapp/src/main/webapp/resources/js/token.js

@@ -290,10 +290,12 @@ var RefreshTokenView = Backbone.View.extend({
 // hide it
 $('.moreInformation', this.el).hide('fast');
 $('.toggleMoreInformation i', this.el).attr('class', 'icon-chevron-right');
+$('.moreInformationContainer', this.el).removeClass('alert').removeClass('alert-info').addClass('muted');
 } else {
 // show it
 $('.moreInformation', this.el).show('fast');
 $('.toggleMoreInformation i', this.el).attr('class', 'icon-chevron-down');
+$('.moreInformationContainer', this.el).addClass('alert').addClass('alert-info').removeClass('muted');
 }
 
 },
@@ -314,7 +316,9 @@ var TokenListView = Backbone.View.extend({
 tagName: 'span',
 
 events:{
-"click .refresh-table":"refreshTable"
+"click .refresh-table":"refreshTable",
+ 'page .paginator-access':'changePageAccess',
+ 'page .paginator-refresh':'changePageRefresh'
 },
 
  load:function(callback) {
@@ -344,6 +348,28 @@ var TokenListView = Backbone.View.extend({
 
  },
 
+changePageAccess:function(event, num) {
+$('.paginator-access', this.el).bootpag({page: num});
+$('#access-token-table tbody tr', this.el).each(function(index, element) {
+if (Math.ceil((index + 1) / 10) != num) {
+ $(element).hide();
+ } else {
+ $(element).show();
+ }
+});
+},
+
+changePageRefresh:function(event, num) {
+$('.paginator-refresh', this.el).bootpag({page: num});
+$('#refresh-token-table tbody tr', this.el).each(function(index, element) {
+if (Math.ceil((index + 1) / 10) != num) {
+ $(element).hide();
+ } else {
+ $(element).show();
+ }
+});
+},
+
  refreshTable:function(e) {
  e.preventDefault();
  $('#loadingbox').sheet('show');
@@ -387,19 +413,49 @@ var TokenListView = Backbone.View.extend({
 
 var _self = this;
 
-_.each(this.model.access.models, function (token) {
+ // set up pagination
+ var numPagesAccess = Math.ceil(this.model.access.length / 10);
+ if (numPagesAccess > 1) {
+ $('.paginator-access', this.el).show();
+ $('.paginator-access', this.el).bootpag({
+ total: numPagesAccess,
+ page: 1
+ }); 
+ } else {
+ $('.paginator-access', this.el).hide();
+ }
+
+ _.each(this.model.access.models, function (token, index) {
 // look up client
 var client = _self.options.clientList.getByClientId(token.get('clientId'));
-
-$('#access-token-table', _self.el).append(new AccessTokenView({model: token, client: client, systemScopeList: _self.options.systemScopeList}).render().el);
+var element = new AccessTokenView({model: token, client: client, systemScopeList: _self.options.systemScopeList}).render().el;
+$('#access-token-table', _self.el).append(element);
+ if (Math.ceil((index + 1) / 10) != 1) {
+ $(element).hide();
+ }
 
 });
 
-_.each(this.model.refresh.models, function (token) {
+ // set up pagination
+ var numPagesRefresh = Math.ceil(this.model.refresh.length / 10);
+ if (numPagesRefresh > 1) {
+ $('.paginator-refresh', this.el).show();
+ $('.paginator-refresh', this.el).bootpag({
+ total: numPagesRefresh,
+ page: 1
+ }); 
+ } else {
+ $('.paginator-refresh', this.el).hide();
+ }
+
+ _.each(this.model.refresh.models, function (token, index) {
 // look up client
 var client = _self.options.clientList.getByClientId(token.get('clientId'));
-
-$('#refresh-token-table', _self.el).append(new RefreshTokenView({model: token, client: client, systemScopeList: _self.options.systemScopeList}).render().el);
+var element = new RefreshTokenView({model: token, client: client, systemScopeList: _self.options.systemScopeList}).render().el;
+$('#refresh-token-table', _self.el).append(element);
+ if (Math.ceil((index + 1) / 10) != 1) {
+ $(element).hide();
+ }
 
 });
 

openid-connect-server-webapp/src/main/webapp/resources/template/client.html

@@ -54,12 +54,12 @@
 <script type="text/html" id="tmpl-client-more-info-block">
 <% if (client.clientDescription || client.clientUri || client.policyUri || client.tosUri || client.contacts != null && client.contacts.length > 0) { %>
 <div class="muted moreInformationContainer">
-<%=client.clientDescription%>
 <% if (client.clientUri || client.policyUri || client.tosUri || client.contacts) { %>
 <div class="toggleMoreInformation" style="cursor: pointer;">
 <i class="icon-chevron-right"></i> <small>more information</small>
 </div>
 <div class="moreInformation hide">
+<%=client.clientDescription%>
 <ul>
 <% if (client.clientUri) { %>
 <li>Home page: <a href="<%= client.clientUri %>"><%= client.clientUri %></a></li>
@@ -114,7 +114,7 @@
  </tbody>
  </table>
 
-<div id="paginator" class="pagination"> </div>
+<div class="pagination paginator"></div>
 
  <div class="well well-small">
 <button class="btn btn-small refresh-table"><i class="icon-refresh"></i> Refresh</button> &nbsp; 

openid-connect-server-webapp/src/main/webapp/resources/template/token.html

@@ -28,6 +28,8 @@ <h2>Access Tokens</h2>
 There are no active access tokens.
 </div>
 
+<div class="pagination paginator-access"></div>
+
  <table id="access-token-table" class="table table-hover table-striped">
  <thead>
  <tr>
@@ -41,6 +43,8 @@ <h2>Access Tokens</h2>
  </tbody>
  </table>
 
+<div class="pagination paginator-access"></div>
+
 <h2>Refresh Tokens</h2>
 
 <div><p>Refresh tokens are usually long-lived and provide clients with the ability to get new access tokens without end-user involvement.</p></div>
@@ -49,6 +53,8 @@ <h2>Refresh Tokens</h2>
 There are no active refresh tokens.
 </div>
 
+<div class="pagination paginator-refresh"></div>
+
  <table id="refresh-token-table" class="table table-hover table-striped">
  <thead>
  <tr>
@@ -62,6 +68,8 @@ <h2>Refresh Tokens</h2>
  </tbody>
  </table>
 
+<div class="pagination paginator-refresh"></div>
+
  <div class="well well-small">
 <button class="btn btn-small refresh-table"><i class="icon-refresh"></i> Refresh</button> &nbsp; 
  </div>