Useful snippets to abstract out EmberIgniter's Rails JSONAPI + Pagination Example

pagination-serializer.js

import Ember from 'ember';

export default Ember.Mixin.create({
  normalizeQueryResponse(store, clazz, payload) {
    const result = this._super(...arguments);
    result.meta = result.meta || {};

    if (payload.links) {
      result.meta.pagination = this.createPageMeta(payload.links);
    }

    return result;
  },

  createPageMeta(data) {
    let meta = {};
    Object.keys(data).forEach(type => {
      const link = data[type];
      meta[type] = {};
      let anchor = document.createElement('a');
      anchor.href = link;
      anchor.search.slice(1).split('&').forEach(pairs => {
        const [param, value] = pairs.split('=');
        if (param == 'page%5Bnumber%5D') {
          meta[type].number = parseInt(value);
        }
        if (param == 'page%5Bsize%5D') {
          meta[type].size = parseInt(value);
        }
      });
      anchor = null;
    });
    return meta;
  }
});

paginator-links.hbs

{{#each-in pagination as |key value|}}
  {{link-to key routeName (query-params page=value.number)}}
{{/each-in}}

<br>

{{#each count as |number|}}
  {{#if (eq number pagination.self.number) }}
    {{ number }}
  {{else}}
    {{link-to number routeName (query-params page=number)}}
  {{/if}}
{{/each}}

paginator-links.js

import Ember from 'ember';

// Usage: {{paginator-links pagination=model.meta.pagination routeName="admin.submissions"}}
export default Ember.Component.extend({
  pagination: null, // Object of form:  { first: { number: 1, size: 20 }, next: {...}, ... }
  routeName: null, // The route to link to
  
  count: Ember.computed('pagination.last.number', 'pagination.self.number', function() {
    const total = this.get('pagination.last.number') || this.get('pagination.self.number');
    if (!total) return [];
    return new Array(total+1).join('x').split('').map((e,i) => i+1);
  }),
});