feat(component): add paged component

src/aurelia-orm.js

@@ -15,6 +15,7 @@ import {validation} from './decorator/validation';
import {type} from './decorator/type';
import {validatedResource} from './decorator/validated-resource';
import './component/association-select';
import './component/paged';

function configure(aurelia, configCallback) {
  let entityManagerInstance = aurelia.container.get(EntityManager);
@@ -26,6 +27,7 @@ function configure(aurelia, configCallback) {
  };

  aurelia.globalResources('./component/association-select');
  aurelia.globalResources('./component/paged');
}

export {

src/component/README.md

@@ -1,5 +1,5 @@
# Components
Aurelia-orm comes bundled with some (at the time of writing just one) components to simplify working with entity data.
Aurelia-orm comes bundled with some components to simplify working with entity data.

## association-select
> The `<association-select />` component composes a `<select />` element, of which the options have been populated from an endpoint.
@@ -74,3 +74,30 @@ _This attribute does **not** accept arrays, but can be combined with the `associ

### criteria
Pass along filter criteria to the element. These will be used to restrict the data returned from the API.

## Paged
Paged component for aurelia. Allows you to display paged information.

### resource
A repository, simple `EntityManager.getRepository('resource')`.

### criteria (optional)
Parameter gets passed straight to the query field of `.find()`.

### limit (optional)
This will determine the amount of items to fetch, default is 30.

### page (optional)
Which page to load.

### Example:

```html
<paged resource.bind="userRepository" limit.bind="30" data.bind="data">

  <div class="user" repeat.for="user of data">
    ${user.id} - ${user.name}
  </div>

</paged>
```

src/component/paged.html

@@ -0,0 +1,3 @@
<template>
  <content></content>
</template>

src/component/paged.js

@@ -0,0 +1,87 @@
import {bindable, customElement, bindingMode} from 'aurelia-framework';

@customElement('paged')
export class Paged {

  // https://github.com/aurelia/templating/issues/73, you still had to set `data` on .two-way when global
  @bindable({defaultBindingMode: bindingMode.twoWay}) data = [];
  @bindable({defaultBindingMode: bindingMode.twoWay}) page = 1;
  @bindable criteria                                       = {};
  @bindable resource                                       = null;
  @bindable limit                                          = 30;

  /**
   * Attach to view
   */
  attached() {
    if (!this.page) {
      this.page = 1;
    }

    if (!this.criteria) {
      this.criteria = {};
    }

    this.reloadData();
  }

  /**
   * Reload data
   */
  reloadData() {
    this.getData();
  }

  /**
   * Check if the value is changed
   *
   * @param  {string|{}}   newVal New value
   * @param  {[string|{}]} oldVal Old value
   * @return {Boolean}     Whenever the value is changed
   */
  isChanged(newVal, oldVal) {
    return !this.resource || !newVal || (newVal === oldVal);
  }

  /**
   * Change page
   *
   * @param  {integer} newVal New page value
   * @param  {integer} oldVal Old page value
   */
  pageChanged(newVal, oldVal) {
    if (this.isChanged(newVal, oldVal)) {
      return;
    }

    this.reloadData();
  }

  /**
   * Change criteria
   *
   * @param  {{}} newVal New criteria value
   * @param  {{}} oldVal Old criteria value
   */
  criteriaChanged(newVal, oldVal) {
    if (this.isChanged(newVal, oldVal)) {
      return;
    }

    this.reloadData();
  }

  /**
   * Get data from repository
   */
  getData() {
    this.criteria.skip  = this.page * this.limit - this.limit;
    this.criteria.limit = this.limit;

    this.resource.find(this.criteria, true).then(result => {
      this.data = result;
    }).catch(error => {
      console.error('Something went wrong.', error);
    });
  }
}