svogv
Version:
A decorator based approach for model driven forms, including an advanced DataGrid and a TreeView component.
81 lines • 10.6 kB
JavaScript
import { Component, Input, Output, EventEmitter } from '@angular/core';
/**
* The pagination component creates a few buttons to navigate a grid. The underlaying model
* is going to handle the date on the client. The pagination does not support a server backend,
* all relevant data must be loaded first.
*
* Example of usage:
* @example
* ```html
* <ac-pagination></ac-pagination>
* ```
*
* <example-url>/#/widget/grid</example-url>
*/
export class DataGridPaginationComponent {
constructor() {
/**
* An event fired once the user has changed the page by clicking a button.
*/
this.pageNumberChanged = new EventEmitter();
this.currentPageNumber = 1;
}
ngOnInit() {
this.setCurrentPage(1);
}
ngOnChanges(changes) {
if (changes['maxPageIndex']) {
const change = changes['maxPageIndex'];
if (this.currentPageNumber > change.currentValue) {
// throws ExpressionChangedAfterItHasBeenCheckedException
// if there's no setTimeout.
// no need to add setTimeout if ngOnChanges
// is fired after changes made on root component.
setTimeout(() => this.setCurrentPage(1), 1);
}
}
}
setCurrentPage(pageNumber, event) {
if (event) {
event.preventDefault();
}
if (pageNumber === 0 || pageNumber > this.maxPageIndex
|| pageNumber === this.currentPageNumber) {
return;
}
this.pageNumberChanged.emit(pageNumber);
this.currentPageNumber = pageNumber;
}
range(min, max) {
const result = new Array();
for (let i = min; i <= max; i++) {
result.push(i);
}
return result;
}
get pageStartNumber() {
const startNumber = this.currentPageNumber <= 4
? 1
: this.currentPageNumber >= this.maxPageIndex - 3
? this.maxPageIndex - 6
: this.currentPageNumber - 3;
return startNumber < 1 ? 1 : startNumber;
}
get pageEndNumber() {
const pageEnd = this.pageStartNumber + 6;
return pageEnd > this.maxPageIndex ? this.maxPageIndex : pageEnd;
}
}
DataGridPaginationComponent.decorators = [
{ type: Component, args: [{
selector: 'ac-datagrid-pagination',
template: "<div>\n <ul class=\"pagination float-right\" [ngClass]=\"{ 'pagination-sm': size == 'sm', 'pagination-lg': size == 'lg' }\">\n <li [class.disabled]=\"currentPageNumber === 1 || !maxPageIndex\" class=\"page-item\">\n <a href (click)=\"setCurrentPage(1, $event)\" aria-label=\"Previous\" class=\"page-link\">\n <span aria-hidden=\"true\">\u00AB</span>\n </a>\n </li>\n <li [class.disabled]=\"currentPageNumber === 1 || !maxPageIndex\" class=\"page-item\">\n <a\n href\n aria-label=\"Previous\"\n (click)=\"setCurrentPage(currentPageNumber - 1, $event)\"\n class=\"page-link\">\n <span aria-hidden=\"true\">\u2039</span>\n </a>\n </li>\n <li\n *ngFor=\"let index of range(pageStartNumber, pageEndNumber)\"\n [class.active]=\"currentPageNumber === index\"\n class=\"page-item\">\n <a href (click)=\"setCurrentPage(index, $event)\" class=\"page-link\">\n <span aria-hidden=\"true\">{{ index }}</span>\n </a>\n </li>\n <li [class.disabled]=\"currentPageNumber === maxPageIndex || !maxPageIndex\">\n <a class=\"page-link\"\n href\n (click)=\"setCurrentPage(currentPageNumber + 1, $event)\"\n aria-label=\"Last\"\n >\n <span aria-hidden=\"true\">\u203A</span>\n </a>\n </li>\n <li [class.disabled]=\"currentPageNumber === maxPageIndex || !maxPageIndex\" class=\"page-item\">\n <a href (click)=\"setCurrentPage(maxPageIndex, $event)\" aria-label=\"Last\" class=\"page-link\">\n <span aria-hidden=\"true\">\u00BB</span>\n </a>\n </li>\n </ul>\n</div>\n",
styles: [""]
},] }
];
DataGridPaginationComponent.propDecorators = {
maxPageIndex: [{ type: Input }],
pageNumberChanged: [{ type: Output }],
size: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YWdyaWRwYWdpbmF0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIuLi8uLi8uLi9wcm9qZWN0cy9zdm9ndi9zcmMvIiwic291cmNlcyI6WyJsaWIvd2lkZ2V0cy9kYXRhZ3JpZC9wYWdpbmF0aW9uL2RhdGFncmlkcGFnaW5hdGlvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFBbUMsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQ3hFLE1BQU0sZUFBZSxDQUFDO0FBRXZCOzs7Ozs7Ozs7Ozs7R0FZRztBQU1ILE1BQU0sT0FBTywyQkFBMkI7SUFMeEM7UUFXRTs7V0FFRztRQUNPLHNCQUFpQixHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFRakQsc0JBQWlCLEdBQUcsQ0FBQyxDQUFDO0lBcUR4QixDQUFDO0lBbkRDLFFBQVE7UUFDTixJQUFJLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ3pCLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBaUQ7UUFDM0QsSUFBSSxPQUFPLENBQUMsY0FBYyxDQUFDLEVBQUU7WUFDM0IsTUFBTSxNQUFNLEdBQUcsT0FBTyxDQUFDLGNBQWMsQ0FBQyxDQUFDO1lBQ3ZDLElBQUksSUFBSSxDQUFDLGlCQUFpQixHQUFHLE1BQU0sQ0FBQyxZQUFZLEVBQUU7Z0JBQ2hELHlEQUF5RDtnQkFDekQsNEJBQTRCO2dCQUM1QiwyQ0FBMkM7Z0JBQzNDLGlEQUFpRDtnQkFDakQsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7YUFDN0M7U0FDRjtJQUNILENBQUM7SUFFRCxjQUFjLENBQUMsVUFBa0IsRUFBRSxLQUFrQjtRQUNuRCxJQUFJLEtBQUssRUFBRTtZQUNULEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztTQUN4QjtRQUNELElBQUksVUFBVSxLQUFLLENBQUMsSUFBSSxVQUFVLEdBQUcsSUFBSSxDQUFDLFlBQVk7ZUFDakQsVUFBVSxLQUFLLElBQUksQ0FBQyxpQkFBaUIsRUFBRTtZQUMxQyxPQUFPO1NBQ1I7UUFFRCxJQUFJLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQ3hDLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxVQUFVLENBQUM7SUFDdEMsQ0FBQztJQUVELEtBQUssQ0FBQyxHQUFXLEVBQUUsR0FBVztRQUM1QixNQUFNLE1BQU0sR0FBRyxJQUFJLEtBQUssRUFBTyxDQUFDO1FBQ2hDLEtBQUssSUFBSSxDQUFDLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxHQUFHLEVBQUUsQ0FBQyxFQUFFLEVBQUU7WUFDL0IsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQztTQUNoQjtRQUNELE9BQU8sTUFBTSxDQUFDO0lBQ2hCLENBQUM7SUFFRCxJQUFJLGVBQWU7UUFDakIsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLGlCQUFpQixJQUFJLENBQUM7WUFDN0MsQ0FBQyxDQUFDLENBQUM7WUFDSCxDQUFDLENBQUMsSUFBSSxDQUFDLGlCQUFpQixJQUFJLElBQUksQ0FBQyxZQUFZLEdBQUcsQ0FBQztnQkFDL0MsQ0FBQyxDQUFDLElBQUksQ0FBQyxZQUFZLEdBQUcsQ0FBQztnQkFDdkIsQ0FBQyxDQUFDLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxDQUFDLENBQUM7UUFDakMsT0FBTyxXQUFXLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLFdBQVcsQ0FBQztJQUMzQyxDQUFDO0lBRUQsSUFBSSxhQUFhO1FBQ2YsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLGVBQWUsR0FBRyxDQUFDLENBQUM7UUFDekMsT0FBTyxPQUFPLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDO0lBQ25FLENBQUM7OztZQTFFRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLHdCQUF3QjtnQkFFbEMsd21EQUFrRDs7YUFDbkQ7OzsyQkFLRSxLQUFLO2dDQUtMLE1BQU07bUJBTU4sS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCwgT25Jbml0LCBPbkNoYW5nZXMsIFNpbXBsZUNoYW5nZSwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG4vKipcbiAqIFRoZSBwYWdpbmF0aW9uIGNvbXBvbmVudCBjcmVhdGVzIGEgZmV3IGJ1dHRvbnMgdG8gbmF2aWdhdGUgYSBncmlkLiBUaGUgdW5kZXJsYXlpbmcgbW9kZWxcbiAqIGlzIGdvaW5nIHRvIGhhbmRsZSB0aGUgZGF0ZSBvbiB0aGUgY2xpZW50LiBUaGUgcGFnaW5hdGlvbiBkb2VzIG5vdCBzdXBwb3J0IGEgc2VydmVyIGJhY2tlbmQsXG4gKiBhbGwgcmVsZXZhbnQgZGF0YSBtdXN0IGJlIGxvYWRlZCBmaXJzdC5cbiAqXG4gKiBFeGFtcGxlIG9mIHVzYWdlOlxuICogQGV4YW1wbGVcbiAqIGBgYGh0bWxcbiAqIDxhYy1wYWdpbmF0aW9uPjwvYWMtcGFnaW5hdGlvbj5cbiAqIGBgYFxuICpcbiAqIDxleGFtcGxlLXVybD4vIy93aWRnZXQvZ3JpZDwvZXhhbXBsZS11cmw+XG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FjLWRhdGFncmlkLXBhZ2luYXRpb24nLFxuICBzdHlsZVVybHM6IFsnLi9kYXRhZ3JpZHBhZ2luYXRpb24uY29tcG9uZW50LnNjc3MnIF0sXG4gIHRlbXBsYXRlVXJsOiAnLi9kYXRhZ3JpZHBhZ2luYXRpb24uY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIERhdGFHcmlkUGFnaW5hdGlvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzIHtcbiAgLyoqXG4gICAqIFRoZSBwYXJlbnQgY29tcG9uZW50IGNhbGN1bGF0ZWQgdGhlIHBhZ2VzIHRoZSBjb21wb25lbnQgY2FuIGhhbmRsZS5cbiAgICovXG4gIEBJbnB1dCgpIG1heFBhZ2VJbmRleDogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBBbiBldmVudCBmaXJlZCBvbmNlIHRoZSB1c2VyIGhhcyBjaGFuZ2VkIHRoZSBwYWdlIGJ5IGNsaWNraW5nIGEgYnV0dG9uLlxuICAgKi9cbiAgQE91dHB1dCgpIHBhZ2VOdW1iZXJDaGFuZ2VkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIC8qKlxuICAgKiBUaGUgc2l6ZSBmb3IgcGFnaW5hdGlvbiwgYWNjb3JkaW5nIGJvb3RzdHJhcCBydWxlcy4gKCdzbScgPT0gJ3BhZ2luYXRpb24tc20nLCAnbGcnID0gJ3BhZ2luYXRpb24tbGcnKS5cbiAgICogRGVmYXVsdCBpcyBtZWRpdW0uXG4gICAqL1xuICBASW5wdXQoKSBzaXplOiBzdHJpbmc7XG5cbiAgY3VycmVudFBhZ2VOdW1iZXIgPSAxO1xuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuc2V0Q3VycmVudFBhZ2UoMSk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiB7IFtwcm9wZXJ0eU5hbWU6IHN0cmluZ106IFNpbXBsZUNoYW5nZSB9KSB7XG4gICAgaWYgKGNoYW5nZXNbJ21heFBhZ2VJbmRleCddKSB7XG4gICAgICBjb25zdCBjaGFuZ2UgPSBjaGFuZ2VzWydtYXhQYWdlSW5kZXgnXTtcbiAgICAgIGlmICh0aGlzLmN1cnJlbnRQYWdlTnVtYmVyID4gY2hhbmdlLmN1cnJlbnRWYWx1ZSkge1xuICAgICAgICAvLyB0aHJvd3MgRXhwcmVzc2lvbkNoYW5nZWRBZnRlckl0SGFzQmVlbkNoZWNrZWRFeGNlcHRpb25cbiAgICAgICAgLy8gaWYgdGhlcmUncyBubyBzZXRUaW1lb3V0LlxuICAgICAgICAvLyBubyBuZWVkIHRvIGFkZCBzZXRUaW1lb3V0IGlmIG5nT25DaGFuZ2VzXG4gICAgICAgIC8vIGlzIGZpcmVkIGFmdGVyIGNoYW5nZXMgbWFkZSBvbiByb290IGNvbXBvbmVudC5cbiAgICAgICAgc2V0VGltZW91dCgoKSA9PiB0aGlzLnNldEN1cnJlbnRQYWdlKDEpLCAxKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBzZXRDdXJyZW50UGFnZShwYWdlTnVtYmVyOiBudW1iZXIsIGV2ZW50PzogTW91c2VFdmVudCk6IHZvaWQge1xuICAgIGlmIChldmVudCkge1xuICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICB9XG4gICAgaWYgKHBhZ2VOdW1iZXIgPT09IDAgfHwgcGFnZU51bWJlciA+IHRoaXMubWF4UGFnZUluZGV4XG4gICAgICB8fCBwYWdlTnVtYmVyID09PSB0aGlzLmN1cnJlbnRQYWdlTnVtYmVyKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5wYWdlTnVtYmVyQ2hhbmdlZC5lbWl0KHBhZ2VOdW1iZXIpO1xuICAgIHRoaXMuY3VycmVudFBhZ2VOdW1iZXIgPSBwYWdlTnVtYmVyO1xuICB9XG5cbiAgcmFuZ2UobWluOiBudW1iZXIsIG1heDogbnVtYmVyKTogbnVtYmVyW10ge1xuICAgIGNvbnN0IHJlc3VsdCA9IG5ldyBBcnJheTxhbnk+KCk7XG4gICAgZm9yIChsZXQgaSA9IG1pbjsgaSA8PSBtYXg7IGkrKykge1xuICAgICAgcmVzdWx0LnB1c2goaSk7XG4gICAgfVxuICAgIHJldHVybiByZXN1bHQ7XG4gIH1cblxuICBnZXQgcGFnZVN0YXJ0TnVtYmVyKCk6IG51bWJlciB7XG4gICAgY29uc3Qgc3RhcnROdW1iZXIgPSB0aGlzLmN1cnJlbnRQYWdlTnVtYmVyIDw9IDRcbiAgICAgID8gMVxuICAgICAgOiB0aGlzLmN1cnJlbnRQYWdlTnVtYmVyID49IHRoaXMubWF4UGFnZUluZGV4IC0gM1xuICAgICAgICA/IHRoaXMubWF4UGFnZUluZGV4IC0gNlxuICAgICAgICA6IHRoaXMuY3VycmVudFBhZ2VOdW1iZXIgLSAzO1xuICAgIHJldHVybiBzdGFydE51bWJlciA8IDEgPyAxIDogc3RhcnROdW1iZXI7XG4gIH1cblxuICBnZXQgcGFnZUVuZE51bWJlcigpOiBudW1iZXIge1xuICAgIGNvbnN0IHBhZ2VFbmQgPSB0aGlzLnBhZ2VTdGFydE51bWJlciArIDY7XG4gICAgcmV0dXJuIHBhZ2VFbmQgPiB0aGlzLm1heFBhZ2VJbmRleCA/IHRoaXMubWF4UGFnZUluZGV4IDogcGFnZUVuZDtcbiAgfVxufVxuIl19