Pagination

decorator.js

import { action } from '@ember/object';

export default function withPagination(Controller) {
  return class extends Controller {
    @action
    previousPage() {
      this.page--;
    }

    @action
    nextPage() {
      this.page++;
    }
  };
}

example-controller.js

@withPagination
export default class extends Controller {
  @tracked items = [];
  @tracked page = 1;

  // If you need pagination on a page, just stick this getter on it
  
  get pagination() {
    return pagination({
      page: this.page,
      perPage: 10,
      items: this.items
    });
  }
}

pagination.hbs

<ButtonGroup class="pagination">
  <Button
    class="pagination__prev"
    disabled={{@pagination.isFirstPage}}
    aria-label={{t "previous"}}
    {{on "click" @onPreviousPage}}
  >
    <Svg::Prev />
  </Button>
  <Button
    class="pagination__next"
    disabled={{@pagination.isLastPage}}
    aria-label={{t "next"}}
    {{on "click" @onNextPage}}
  >
    <Svg::Next />
  </Button>
</ButtonGroup>

template.hbs

Showing {{this.startCount}} to {{this.endCount}} of {{this.totalCount}}

<Pagination @paginaton={{this.paginaton}}

utils.js

export function pagination(data) {
  return new PaginationViewModel(data);
}

view-model.js

export default class PaginationViewModel {
  constructor({ page, perPage, items }) {
    this.page = page;
    this.perPage = perPage;
    this.items = items ?? [];
  }

  get hasMore() {
    return this.items.meta.paginationHasMore === 'true';
  }

  get startCount() {
    return (this.page - 1) * this.perPage + 1;
  }

  get endCount() {
    return this.startCount + this.items.length - 1;
  }

  get isFirstPage() {
    return this.page === 1;
  }

  get isLastPage() {
    return !this.hasMore;
  }

  get totalCount() {
    return 'totalCount' in this.items.meta ? this.items.meta.totalCount : null;
  }

  get isSinglePage() {
    return this.isFirstPage && this.isLastPage;
  }
}