Permalink
Browse files

feat(component): add paged component

  • Loading branch information...
VMBindraban
VMBindraban committed Jun 8, 2016
1 parent 35c096a commit 23df688b63b4186d5232e48232ffca7f7c1e4ac7
Showing with 120 additions and 1 deletion.
  1. +2 −0 src/aurelia-orm.js
  2. +28 −1 src/component/README.md
  3. +3 −0 src/component/paged.html
  4. +87 −0 src/component/paged.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 {
@@ -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>
```
@@ -0,0 +1,3 @@
<template>
<content></content>
</template>
@@ -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);
});
}
}

0 comments on commit 23df688

Please sign in to comment.