Aurelia pagination components

paginate.js

export class PaginateValueConverter {
  toView(array, pageSize, currentPage) {
  	if(array === undefined || pageSize === undefined || pageSize == '0') 
  		return array;
  	
    if(currentPage === undefined || currentPage == '')
      currentPage = 0;

    let first = parseInt(currentPage) * parseInt(pageSize);
    let end = Math.min(first + parseInt(pageSize), array.length);
  	return array.slice(first, end);
  }
}

pagination.html

<template>
  <nav if.bind="last > 0">
    <ul class="pagination pagination-sm nav navbar-nav">
      <li class="${(currentPage == 0)?'disabled':''}">
        <a href="#" aria-label="Previous" click.delegate="currentPage = currentPage - 1">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li repeat.for="i of pages" class="${currentPage==i?'active':''}"><a href="#" click.delegate="setPage(i)">${i}</a></li>
      <li class="${(currentPage >= last)?'disabled':''}">
        <a href="#" aria-label="Next" click.delegate="currentPage = currentPage + 1">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
</template>

pagination.js

import {computedFrom, bindable, bindingMode} from 'aurelia-framework';

// @bindable ({name: 'currentPage', attribute: 'current-page', defaultBindingMode: bindingMode.twoWay, defaultValue: 0})
// @bindable ({name: 'pageSize', attribute: 'page-size', defaultBindingMode: bindingMode.twoWay, defaultValue: 20})
export class Pagination {
  @bindable ({attribute: 'current-page', defaultBindingMode: bindingMode.twoWay}) currentPage = 0;
  @bindable ({attribute: 'page-size', defaultBindingMode: bindingMode.twoWay}) pageSize = 20;
  @bindable data;

  @computedFrom('data', 'pageSize')
  get pages() {
    if(this.pageSize === undefined || this.pageSize < 1 || this.data === undefined) {
      return [];
    }

    let pageCount = Math.ceil(this.data.length / parseInt(this.pageSize));
    let pages = Array.from(Array(pageCount).keys());
    return pages;		
  }

  @computedFrom('data', 'pageSize')
  get last() {
    if(this.pageSize === undefined || this.pageSize < 1 || this.data === undefined) {
      return 0;
    }
    return Math.ceil(this.data.length / parseInt(this.pageSize)) - 1;
  }

  setPage(value) {
    this.currentPage = value;
  }

  pageSizeChanged(newValue, oldValue) {	
    if(newValue === undefined || newValue < 1 || this.data === undefined)  {
      this.currentPage = 0;
    }
    let firstItem = oldValue * this.currentPage;
    this.currentPage = Math.floor(firstItem / newValue)
  }

  dataChanged(newValue, olValue) {
    if(newValue === undefined || newValue.length < this.currentPage * this.pageSize)
      this.currentPage = 0;
  }
}

Usage:

  <require from="value_converters/sort"></require>
  <require from="pagination"></require>

          <tr repeat.for="port of filteredPvidTable  | paginate:pageSize:currentPage">
            <td>${port.sysName}</td>
            <td>${port.pvid}</td>
            <td>${port.ifName}</td>
          </tr>
          <pagination data.bind="filteredPvidTable" page-size.bind="pageSize" current-page.bind="currentPage"/>