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);
+    });
+  }
+}