Add pagination to Group index page

Author: achan

app/controllers/group/index.js

@@ -0,0 +1,8 @@
+import Ember from 'ember';
+import Pagination from 'ember-cli-jsonapi-pagination/mixins/controllers/jsonapi-pagination';
+
+export default Ember.Controller.extend(Pagination, {
+  totalPages: Ember.computed('size', 'number', 'model.posts.[]', function() {
+    return this.get('posts.meta.total-pages');
+  })
+});

app/routes/group/index.js

@@ -1,19 +1,21 @@
 import Ember from 'ember';
+import Pagination from 'ember-cli-jsonapi-pagination/mixins/routes/jsonapi-pagination';
 
 const KIND_POST = 0;
 
-export default Ember.Route.extend({
-  model() {
+export default Ember.Route.extend(Pagination, {
+  model(params) {
     const group = this.modelFor("group");
 
     const filter = {
       group: group.get("id"),
       kind: KIND_POST
     };
 
-    const posts = this.store.query("post", {
+    const posts = this.queryPaginated("post", {
       filter: filter,
-      page: { size: 5 },
+      size: params.size,
+      number: params.number,
       sort: "-published_at"
     });
 

app/templates/group/index.hbs

@@ -10,6 +10,7 @@
               {{post-view post=post snippets=true}}
             </div>
           {{/each}}
+          {{paginate-collection totalPages=totalPages currentPage=number setCurrentPage=(action "setCurrentPage")}}
         </div>
       </section>
     {{/if}}

mirage/config.js

@@ -52,10 +52,17 @@ export default function() {
 
   this.get("/posts", function(schema, request) {
     const groupId = request.queryParams["filter[group]"];
+    const pageSize = parseInt(request.queryParams["page[size]"]);
+    const pageNumber = parseInt(request.queryParams["page[number]"]);
 
     if (groupId) {
       const group = schema.groups.find(groupId);
-      return group.posts;
+      const postIds = group.posts.models.map(model => model.id);
+      const offset = (pageNumber - 1) * pageSize;
+
+      let json = this.serialize(schema.posts.find(postIds.slice(offset, offset + pageSize)));
+      json.meta = { "total-pages": Math.ceil(group.posts.models.length / pageSize) };
+      return json;
     }
 
     return schema.posts.all();

mirage/scenarios/default.js

@@ -21,7 +21,7 @@ export default function(server) {
     server.createList("announcement", 5, { bulletin });
   }
 
-  server.createList("post", 10, { group: englishService });
+  server.createList("post", 40, { group: englishService });
 
   server.create("user", { email: "[email protected]", name: "Test User" });
 }

package.json

@@ -40,6 +40,7 @@
     "ember-cli-htmlbars": "^1.0.11",
     "ember-cli-htmlbars-inline-precompile": "^0.3.1",
     "ember-cli-inject-live-reload": "^1.3.1",
+    "ember-cli-jsonapi-pagination": "0.0.2",
     "ember-cli-mirage": "^0.2.0",
     "ember-cli-moment-shim": "1.0.0",
     "ember-cli-page-object": "^1.1.0",

tests/unit/controllers/group/index-test.js

@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:group/index', 'Unit | Controller | group/index', {
+  // 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);
+});