This repository has been archived by the owner. It is now read-only.
Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
with
120 additions
and 1 deletion.
- +2 −0 src/aurelia-orm.js
- +28 −1 src/component/README.md
- +3 −0 src/component/paged.html
- +87 −0 src/component/paged.js
@@ -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); | ||
}); | ||
} | ||
} |