ng2-stable-nxtc
Version:
Angular Smart Table neXtCode Version
179 lines (176 loc) • 7.85 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { DataSource } from '../../lib/data-source/data-source';
let PagerComponent = class PagerComponent {
constructor() {
this.perPageSelect = [];
this.changePage = new EventEmitter();
this.count = 0;
}
ngOnChanges(changes) {
if (changes.source) {
if (!changes.source.firstChange) {
this.dataChangedSub.unsubscribe();
}
this.dataChangedSub = this.source.onChanged().subscribe((dataChanges) => {
this.page = this.source.getPaging().page;
this.perPage = this.source.getPaging().perPage;
this.currentPerPage = this.perPage;
this.count = this.source.count();
if (this.isPageOutOfBounce()) {
this.source.setPage(--this.page);
}
this.processPageChange(dataChanges);
this.initPages();
});
}
}
/**
* We change the page here depending on the action performed against data source
* if a new element was added to the end of the table - then change the page to the last
* if a new element was added to the beginning of the table - then to the first page
* @param changes
*/
processPageChange(changes) {
if (changes['action'] === 'prepend') {
this.source.setPage(1);
}
if (changes['action'] === 'append') {
this.source.setPage(this.getLast());
}
}
shouldShow() {
return this.source.count() > this.perPage;
}
paginate(page) {
this.source.setPage(page);
this.page = page;
this.changePage.emit({ page });
return false;
}
next() {
return this.paginate(this.getPage() + 1);
}
prev() {
return this.paginate(this.getPage() - 1);
}
getPage() {
return this.page;
}
getPages() {
return this.pages;
}
getLast() {
return Math.ceil(this.count / this.perPage);
}
isPageOutOfBounce() {
return (this.page * this.perPage) >= (this.count + this.perPage) && this.page > 1;
}
initPages() {
const pagesCount = this.getLast();
let showPagesCount = 4;
showPagesCount = pagesCount < showPagesCount ? pagesCount : showPagesCount;
this.pages = [];
if (this.shouldShow()) {
let middleOne = Math.ceil(showPagesCount / 2);
middleOne = this.page >= middleOne ? this.page : middleOne;
let lastOne = middleOne + Math.floor(showPagesCount / 2);
lastOne = lastOne >= pagesCount ? pagesCount : lastOne;
const firstOne = lastOne - showPagesCount + 1;
for (let i = firstOne; i <= lastOne; i++) {
this.pages.push(i);
}
}
}
onChangePerPage(event) {
if (this.currentPerPage) {
if (typeof this.currentPerPage === 'string' && this.currentPerPage.toLowerCase() === 'all') {
this.source.getPaging().perPage = null;
}
else {
this.source.getPaging().perPage = this.currentPerPage * 1;
this.source.refresh();
}
this.initPages();
}
}
};
__decorate([
Input(),
__metadata("design:type", DataSource)
], PagerComponent.prototype, "source", void 0);
__decorate([
Input(),
__metadata("design:type", Array)
], PagerComponent.prototype, "perPageSelect", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], PagerComponent.prototype, "changePage", void 0);
PagerComponent = __decorate([
Component({
selector: 'ng2-smart-table-pager',
styles: [".ng2-smart-pagination{display:inline-flex;font-size:.875em;padding:0}.ng2-smart-pagination .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}:host{display:flex;justify-content:space-between}:host select{margin:1rem 0 1rem 1rem}:host label{margin:1rem 0 1rem 1rem;line-height:2.5rem} /*# sourceMappingURL=pager.component.css.map */ "],
template: `
<nav *ngIf="shouldShow()" class="ng2-smart-pagination-nav">
<ul class="ng2-smart-pagination pagination">
<li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
<a class="ng2-smart-page-link page-link" href="#"
(click)="getPage() == 1 ? false : paginate(1)" aria-label="First">
<span aria-hidden="true">«</span>
<span class="sr-only">First</span>
</a>
</li>
<li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
<a class="ng2-smart-page-link page-link page-link-prev" href="#"
(click)="getPage() == 1 ? false : prev()" aria-label="Prev">
<span aria-hidden="true"><</span>
<span class="sr-only">Prev</span>
</a>
</li>
<li class="ng2-smart-page-item page-item"
[ngClass]="{active: getPage() == page}" *ngFor="let page of getPages()">
<span class="ng2-smart-page-link page-link"
*ngIf="getPage() == page">{{ page }} <span class="sr-only">(current)</span></span>
<a class="ng2-smart-page-link page-link" href="#"
(click)="paginate(page)" *ngIf="getPage() != page">{{ page }}</a>
</li>
<li class="ng2-smart-page-item page-item"
[ngClass]="{disabled: getPage() == getLast()}">
<a class="ng2-smart-page-link page-link page-link-next" href="#"
(click)="getPage() == getLast() ? false : next()" aria-label="Next">
<span aria-hidden="true">></span>
<span class="sr-only">Next</span>
</a>
</li>
<li class="ng2-smart-page-item page-item"
[ngClass]="{disabled: getPage() == getLast()}">
<a class="ng2-smart-page-link page-link" href="#"
(click)="getPage() == getLast() ? false : paginate(getLast())" aria-label="Last">
<span aria-hidden="true">»</span>
<span class="sr-only">Last</span>
</a>
</li>
</ul>
</nav>
<nav *ngIf="perPageSelect && perPageSelect.length > 0" class="ng2-smart-pagination-per-page">
<label for="per-page">
Per Page:
</label>
<select (change)="onChangePerPage($event)" [(ngModel)]="currentPerPage" id="per-page">
<option *ngFor="let item of perPageSelect" [value]="item">{{ item }}</option>
</select>
</nav>
`,
})
], PagerComponent);
export { PagerComponent };
//# sourceMappingURL=pager.component.js.map