Ember pagination components with truncated page display

ember-page.hbs

<a class='page-link' {{action 'setPage' page}} href=''>{{page}}</a>

ember-page.js

import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  tagName: 'li',
  classNames: ['page-item'],
  classNameBindings: ['active'],

  active: computed('page', 'current', function() {
    return this.get('page') === this.get('current');
  }),

  actions: {
    setPage() {
      return this.set('current', this.get('page'));
    }
  }
});

ember-pagination.hbs

  {{#if paginate}}
    <li class='page-item'><a class='page-link' {{action 'goToPrev'}}>&laquo;</a></li>

    {{#if showTruncated}}
      <li class='page-item'><a class='page-link' {{action 'goToPrevTruncated'}}>&hellip;</a></li>
    {{/if}}

    {{#each pages as |page|}}
      {{neuron-page page=page current=current}}
    {{/each}}

    {{#if showLastTruncated}}
      <li class='page-item'><a class='page-link' {{action 'goToNextTruncated'}}>&hellip;</a></li>
    {{/if}}

    <li class='page-item'><a class='page-link' {{action 'goToNext'}}>&raquo;</a></li>
  {{/if}}

ember-pagination.js

import Component from '@ember/component';
import { computed } from '@ember/object';
import { gt } from '@ember/object/computed';
import { range } from 'lodash';

export default Component.extend({
  tagName: 'ul',
  classNames: ['pagination'],

  paginate: gt('total', 1),
  truncate: gt('total', 5),
  hasPrev: gt('current', 1),
  hasNext: computed('current', 'total', function() {
    return this.get('current') < this.get('total');
  }),

  pages: computed('total', 'current', 'showTruncated', 'firstTruncated', 'lastTruncated', function() {
    let lastPage = this.get('total');

    if (!this.get('truncate')) {
      return range(1, lastPage + 1);
    }

    if (!this.get('showTruncated')) {
      return range(1, 6);
    }

    let firstPage = this.get('firstTruncated');
    lastPage = this.get('lastTruncated');
    return range(firstPage, lastPage + 1);
  }),

  showTruncated: computed('truncate', 'current', function() {
    return this.get('truncate') && this.get('current') > 3;
  }),

  showLastTruncated: computed('truncate', 'current', 'total', function() {
    let distance = this.get('total') - this.get('page');
    return this.get('truncate') && distance > 2;
  }),

  firstTruncated: computed('current', function() {
    let first = this.get('current') - 2;
    if (first < 0) {
      return 1;
    }
    return first;
  }),

  lastTruncated: computed('current', 'total', function() {
    let count = this.get('total');
    let last = this.get('current') + 2;
    if (last > count) {
      return count;
    }
    return last;
  }),

  actions: {
    setPerPage(perPage) {
      return this.set('perPage', perPage);
    },

    goToPage(page) {
      this.set('current', page);
    },

    goToNext() {
      if (this.get('hasNext')) {
        this.incrementProperty('current');
      }
    },

    goToPrev() {
      if (this.get('hasPrev')) {
        this.decrementProperty('current');
      }
    },

    goToNextTruncated() {
      let current = this.get('current');
      let count = this.get('total');
      let last = current + 5;

      if (last > count) {
        return this.set('current', count);
      }

      return this.incrementProperty('current', 5);
    },

    goToPrevTruncated() {
      let previous = this.get('current') - 5;
      if (previous <= 0) {
        return this.set('current', 1);
      }

      return this.decrementProperty('current', 5);
    }
  }
});