ENH: Support table pagination (#24)

Fixes #22

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'); }),
+});

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'));

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', },

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);
+    },
+  },
+});

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));
+  },
 });

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;

app/templates/collections.hbs

@@ -1 +1 @@
-{{collections-container model=model}}
+{{collections-container model=model changePage=(action 'changePage')}}

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>

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}}

app/templates/components/collections-container.hbs

@@ -1 +1 @@
-{{ccdb-table model=model columns=columns}}
+{{ccdb-table model=model columns=columns changePage=(action changePage)}}

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);
+});