Merge pull request #25 from coding-blocks/question_pagination

add: pagination in question route

Author: jatinkatyal13

app/pods/components/pagination-pills/component.js

@@ -0,0 +1,8 @@
+import Component from '@ember/component';
+
+export default class PaginationPillsComponent extends Component {
+  didReceiveAttrs() {
+    const length = this.pages
+    this.set('pagesArray', Array.from({length}, (v, i) => ++i))
+  }
+}

app/pods/components/pagination-pills/template.hbs

@@ -0,0 +1,31 @@
+<nav aria-label="Page navigation">
+  <ul class="pagination justify-content-center">
+    <li class="page-item">
+      <button 
+        class="page-link" 
+        {{action setPage (dec pagination.currentPage)}} 
+        disabled={{eq pagination.currentPage 1}}>
+        Previous
+      </button>
+    </li>
+
+    {{#each pagesArray as |page|}}
+      <li class="page-item">
+        <button 
+          class="page-link active {{if (eq page pagination.currentPage) "bg-red white"}}" 
+          {{action setPage page}} >
+          {{page}}
+        </button>
+      </li>
+    {{/each}}
+
+    <li class="page-item">
+      <button 
+        class="page-link" 
+        {{action setPage (inc pagination.currentPage)}} 
+        disabled={{not pagination.nextOffset}}>
+        Next
+      </button>
+    </li>
+  </ul>
+</nav>

app/pods/questions/index/controller.js

@@ -1,13 +1,17 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import { task, timeout } from 'ember-concurrency';
+import { computed } from '@ember/object';
 
 export default Controller.extend({
   store: service(),
   queryParams: ['page', 'limit'],
   page: 1,
   limit: 10,
   searchString: '',
+  pageCount: computed('limit', 'questions', function() {
+    return Math.ceil(this.questions.meta.pagination.count / this.limit)
+  }),
   searchTask: task(function * () {
     yield timeout(250)
 

app/pods/questions/index/template.hbs

@@ -65,5 +65,9 @@
     </div>
   </div>
   {{/each}}
+  {{pagination-pills 
+    pagination=questions.meta.pagination 
+    pages=pageCount
+    setPage=(action (mut page))}}
 </div>
 {{outlet}}

tests/integration/pods/components/pagination-pills/component-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | pagination-pills', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`{{pagination-pills}}`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      {{#pagination-pills}}
+        template block text
+      {{/pagination-pills}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});