From 578b8daa32518df00c0044b6adcc360538bf2034 Mon Sep 17 00:00:00 2001
From: Matthew Dillon <matthewrdillon@gmail.com>
Date: Sat, 23 Sep 2017 14:35:50 -0700
Subject: [PATCH] ENH: Support table pagination (#24)

Fixes #22
---
 app/components/ccdb-pagination.js             | 41 +++++++++++++++++++
 app/components/ccdb-table.js                  |  3 +-
 app/components/collections-container.js       |  3 ++
 app/controllers/collections.js                | 14 +++++++
 app/routes/collections.js                     | 13 +++---
 app/styles/app.css                            | 12 ++++++
 app/templates/collections.hbs                 |  2 +-
 app/templates/components/ccdb-pagination.hbs  | 35 ++++++++++++++++
 app/templates/components/ccdb-table.hbs       |  2 +
 .../components/collections-container.hbs      |  2 +-
 tests/unit/controllers/collections-test.js    | 12 ++++++
 11 files changed, 131 insertions(+), 8 deletions(-)
 create mode 100644 app/components/ccdb-pagination.js
 create mode 100644 app/controllers/collections.js
 create mode 100644 app/templates/components/ccdb-pagination.hbs
 create mode 100644 tests/unit/controllers/collections-test.js

diff --git a/app/components/ccdb-pagination.js b/app/components/ccdb-pagination.js
new file mode 100644
index 0000000..df61fea
--- /dev/null
+++ b/app/components/ccdb-pagination.js
@@ -0,0 +1,41 @@
+import Ember from 'ember';
+
+const { Component, computed: { alias }, computed } = Ember;
+
+export default Component.extend({
+  // ARGS
+  model: null,
+
+  // COMPUTED
+  meta: alias('model.meta'),
+  links: alias('model.links'),
+
+  currentPage: alias('meta.pagination.page'),
+  totalRecords: alias('meta.pagination.count'),
+
+  firstLink: alias('links.first'),
+  lastLink: alias('links.last'),
+  nextLink: alias('links.next'),
+  prevLink: alias('links.prev'),
+
+  _getPage(link) {
+    link = this.get(link);
+    if (link === null) {
+      return null;
+    }
+    const url = new URL(link);
+    return parseInt(url.searchParams.get('page'));
+  },
+
+  _notEqual(a, b) {
+    return this.get(a) !== this.get(b);
+  },
+
+  first: computed('firstLink', function() { return this._getPage('firstLink'); }),
+  last: computed('lastLink', function() { return this._getPage('lastLink'); }),
+  next: computed('nextLink', function() { return this._getPage('nextLink'); }),
+  prev: computed('prevLink', function() { return this._getPage('prevLink'); }),
+
+  notOnFirst: computed('first', 'currentPage', function() { return this._notEqual('first', 'currentPage'); }),
+  notOnLast: computed('last', 'currentPage', function() { return this._notEqual('last', 'currentPage'); }),
+});
diff --git a/app/components/ccdb-table.js b/app/components/ccdb-table.js
index 328b9d3..fc40b1d 100644
--- a/app/components/ccdb-table.js
+++ b/app/components/ccdb-table.js
@@ -4,10 +4,11 @@ import Table from 'ember-light-table';
 const { Component } = Ember;
 
 export default Component.extend({
+  // ARGS
   model: null,
   columns: null,
-  table: null,
 
+  table: null,
   init() {
     this._super(...arguments);
     const table = new Table(this.get('columns'), this.get('model'));
diff --git a/app/components/collections-container.js b/app/components/collections-container.js
index 376c977..e26790e 100644
--- a/app/components/collections-container.js
+++ b/app/components/collections-container.js
@@ -3,6 +3,9 @@ import Ember from 'ember';
 const { Component } = Ember;
 
 export default Component.extend({
+  // ARGS
+  model: null,
+
   columns: [
     { label: 'Project', valuePath: 'project.name', },
     { label: 'Study Location', valuePath: 'studyLocation.code', },
diff --git a/app/controllers/collections.js b/app/controllers/collections.js
new file mode 100644
index 0000000..73da5ae
--- /dev/null
+++ b/app/controllers/collections.js
@@ -0,0 +1,14 @@
+import Ember from 'ember';
+
+const { Controller } = Ember;
+
+export default Controller.extend({
+  queryParams: ['page'],
+  page: 1,
+
+  actions: {
+    changePage(page) {
+      this.set('page', page);
+    },
+  },
+});
diff --git a/app/routes/collections.js b/app/routes/collections.js
index 9b3a78a..08d7b8d 100644
--- a/app/routes/collections.js
+++ b/app/routes/collections.js
@@ -3,9 +3,12 @@ import Ember from 'ember';
 const { Route } = Ember;
 
 export default Route.extend({
-  model() {
-    return this.get('store').findAll('collection', {
-      include: 'project,study-location,collection-method,collection-type'
-    });
-  }
+  queryParams: {
+    page: { refreshModel: true },
+  },
+
+  model(params) {
+    const include = {include: 'project,study-location,collection-method,collection-type'};
+    return this.get('store').query('collection', Object.assign(params, include));
+  },
 });
diff --git a/app/styles/app.css b/app/styles/app.css
index 1a8070d..680bff1 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -1,3 +1,15 @@
+[data-ember-action]:not(:disabled) {
+  cursor: pointer;
+}
+
+.table-nav .pager {
+  margin-top: 10px;
+}
+
+.table-stats {
+  margin-top: 10px;
+}
+
 .form-signin {
   max-width: 330px;
   padding: 15px;
diff --git a/app/templates/collections.hbs b/app/templates/collections.hbs
index f91170d..a2b1217 100644
--- a/app/templates/collections.hbs
+++ b/app/templates/collections.hbs
@@ -1 +1 @@
-{{collections-container model=model}}
+{{collections-container model=model changePage=(action 'changePage')}}
diff --git a/app/templates/components/ccdb-pagination.hbs b/app/templates/components/ccdb-pagination.hbs
new file mode 100644
index 0000000..c5db21e
--- /dev/null
+++ b/app/templates/components/ccdb-pagination.hbs
@@ -0,0 +1,35 @@
+<div class="row">
+  <div class="col-md-6 table-nav">
+      <ul class="pager pull-left">
+        {{#if notOnFirst}}
+          <li><a {{action (action changePage first)}}>First</a></li>
+        {{else}}
+          <li class="disabled"><a>First</a></li>
+        {{/if}}
+
+        {{#if prev}}
+          <li><a {{action (action changePage prev)}}>Previous</a></li>
+        {{else}}
+          <li class="disabled"><a>Previous</a></li>
+        {{/if}}
+
+        {{#if next}}
+          <li><a {{action (action changePage next)}}>Next</a></li>
+        {{else}}
+          <li class="disabled"><a>Next</a></li>
+        {{/if}}
+
+        {{#if notOnLast}}
+          <li><a {{action (action changePage last)}}>Last</a></li>
+        {{else}}
+          <li class="disabled"><a>Last</a></li>
+        {{/if}}
+      </ul>
+  </div>
+  <div class="col-md-6">
+    <div class="pull-right table-stats">
+      <span class="label label-default">Current Page: {{currentPage}}</span>
+      <span class="label label-default">Total Records: {{totalRecords}}</span>
+    </div>
+  </div>
+</div>
diff --git a/app/templates/components/ccdb-table.hbs b/app/templates/components/ccdb-table.hbs
index 2d95f07..685c2ee 100644
--- a/app/templates/components/ccdb-table.hbs
+++ b/app/templates/components/ccdb-table.hbs
@@ -1,8 +1,10 @@
 {{#if hasBlock}}
   {{yield (hash
     table=(component 'light-table' table=table)
+    pagination=(component 'ccdb-pagination' model=model changePage=(action changePage))
   )}}
 {{else}}
+  {{ccdb-pagination model=model changePage=(action changePage)}}
   {{#light-table table tableClassNames="table table-striped" as |t|}}
     {{t.head}}
     {{t.body}}
diff --git a/app/templates/components/collections-container.hbs b/app/templates/components/collections-container.hbs
index b6a7d07..ab74bb0 100644
--- a/app/templates/components/collections-container.hbs
+++ b/app/templates/components/collections-container.hbs
@@ -1 +1 @@
-{{ccdb-table model=model columns=columns}}
+{{ccdb-table model=model columns=columns changePage=(action changePage)}}
diff --git a/tests/unit/controllers/collections-test.js b/tests/unit/controllers/collections-test.js
new file mode 100644
index 0000000..b92a9ac
--- /dev/null
+++ b/tests/unit/controllers/collections-test.js
@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:collections', 'Unit | Controller | collections', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let controller = this.subject();
+  assert.ok(controller);
+});