larang-paginator
Version:
This is a Laravel Angular Paginator for tables. For other backend language to use this library. Please make sure your success response conforms with this response:
359 lines (338 loc) • 10.6 kB
JavaScript
import { Component, Injectable, Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Subject as Subject$1 } from 'rxjs/Subject';
import { Observable as Observable$1 } from 'rxjs/Observable';
import 'rxjs/add/observable/from';
import { HttpClient, HttpClientModule } from '@angular/common/http';
class EventsService {
constructor() {
this.listeners = {};
this.eventsSubject = new Subject$1();
this.events = Observable$1.from(this.eventsSubject);
this.events.subscribe(({ name, args }) => {
if (this.listeners[name]) {
for (const listener of this.listeners[name]) {
listener(...args);
}
}
});
}
/**
* @param {?} name
* @param {?} listener
* @return {?}
*/
on(name, listener) {
if (!this.listeners[name]) {
this.listeners[name] = [];
this.listeners[name].push(listener);
}
if (this.listeners[name]) {
this.listeners[name][0] = listener;
}
}
/**
* @param {?} name
* @param {...?} args
* @return {?}
*/
broadcast(name, ...args) {
// console.log('name=', name);
this.eventsSubject.next({
name,
args
});
}
}
EventsService.decorators = [
{ type: Injectable },
];
/**
* @nocollapse
*/
EventsService.ctorParameters = () => [];
class PaginatorService {
/**
* @param {?} http
*/
constructor(http$$1) {
this.http = http$$1;
}
/**
* This is used to list all by paginator
* @param {?} url
* @return {?}
*/
listByPaginator(url) {
return this.http.get(url);
}
}
PaginatorService.decorators = [
{ type: Injectable },
];
/**
* @nocollapse
*/
PaginatorService.ctorParameters = () => [
{ type: HttpClient, },
];
class PaginatorComponent {
/**
* @param {?} paginatorService
* @param {?} eventsService
*/
constructor(paginatorService, eventsService) {
this.paginatorService = paginatorService;
this.eventsService = eventsService;
this.path = '';
this.limit = 50;
this.from = '';
this.perNav = 5;
this.viewPage = 'page';
this.paginate = 'paginate';
this.next_page = '';
this.prev_page = '';
this.showLoad = 0;
this.totalPages = [];
this.pages = [];
this.eventsService.on('getUrlPath', (path) => {
this.path = path;
});
}
/**
* This is used to get total pages array
* @return {?}
*/
getPages() {
for (let /** @type {?} */ i = 1; i <= this.data['last_page']; i++) {
this.totalPages.push(i);
}
this.getPaging();
// console.log('pages=', this.totalPages, this.data['last_page'], this.data['current_page']);
}
/**
* This is used get list of page navigation
* @return {?}
*/
getPaging() {
this.perNav += this.pages.length;
this.pages = this.totalPages.slice(0, this.perNav);
}
/**
* This is used to load data
* @param {?} queryPath
* @param {?=} page
* @return {?}
*/
loadData(queryPath, page) {
const /** @type {?} */ posQ = this.path.indexOf('?');
let /** @type {?} */ url = '';
if (posQ === -1) {
url = this.path + '?' + queryPath;
}
else {
url = this.path + '&' + queryPath;
}
this.showLoad = (typeof (page) === 'string') ? parseInt((page.substr(page.indexOf('=') + 1)), 10) : page;
// console.log('showLoad= ', this.showLoad, page);
this.paginatorService.listByPaginator(url).subscribe((res) => {
if (this.showLoad > this.pages.length) {
this.getPaging();
}
this.data = (res['last_page']) ? res : res.data || res.content || res.contents || res.resource || res.resources || res.list || res.items;
this.nextPrevPage();
this.eventsService.broadcast(this.from, res);
this.showLoad = 0;
// console.log('data=>', data);
}, err => {
this.showLoad = 0;
});
}
/**
* This is used to get next page number format from page url.
* @return {?}
*/
nextPrevPage() {
const /** @type {?} */ queryString = this.viewPage.trim() + '=';
if (Object.keys(this.data).length === 0) {
return null;
}
if (this.data['next_page_url']) {
const /** @type {?} */ nextPos = this.data['next_page_url'].indexOf(queryString);
this.next_page = this.data['next_page_url'].substr(nextPos).trim();
// console.log('pois=', nextPos, this.next_page);
}
if (this.data['prev_page_url']) {
const /** @type {?} */ prevPos = this.data['prev_page_url'].indexOf(queryString);
this.prev_page = this.data['prev_page_url'].substr(prevPos).trim();
// console.log('prpos=', prevPos, this.prev_page);
}
}
/**
* @return {?}
*/
ngOnInit() {
// console.log('this.data=', this.data);
this.nextPrevPage();
this.getPages();
}
/**
* @return {?}
*/
ngAfterViewInit() {
// console.log('this.data=', this.data);
}
}
PaginatorComponent.decorators = [
{ type: Component, args: [{
selector: 'app-paginator',
template: `
<nav aria-label="..." *ngIf="pages.length !== 0">
<ul class="pagination justify-content-center">
<li class="page-item" [class.disabled]="data['prev_page_url'] === null" >
<a class="page-link" (click)="loadData((prev_page + '&' + paginate + '=' + limit), prev_page)" role="button" tabindex="-1">Previous</a>
</li>
<li [class.hide]="pages.length === 0" [class.show]="pages.length > 0" *ngFor="let page of pages" id="page_{{page}}" [class.active]="data['current_page'] === page" class="animated fadeInRight page-item">
<a class="page-link" (click)="loadData((viewPage + '=' + page + '&' + paginate + '=' + limit), page)" role="button">
<i *ngIf="page === showLoad" class="fa fa-spin fa-spinner"></i> {{page}}
</a>
</li>
<li *ngIf="totalPages.length > perNav">
<a (click)="getPaging()" title="Load More Navigation" role="button" class="page-link">...</a>
</li>
<li *ngIf="pages.length === 0">
<a role="button" class="page-link"><i class="fa fa-spin fa-spinner"></i></a>
</li>
<li class="page-item" [class.disabled]="data['next_page_url'] === null" >
<a class="page-link" (click)="loadData((next_page + '&' + paginate + '=' + limit), next_page)" role="button">Next</a>
</li>
</ul>
</nav>
`,
styles: [`
.pagination {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
padding-left: 0;
list-style: none;
border-radius: 0.25rem;
}
.page-item:first-child .page-link {
margin-left: 0;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.page-item:last-child .page-link {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.page-item.active .page-link {
z-index: 2;
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.page-item.disabled .page-link {
color: #868e96;
pointer-events: none;
background-color: #fff;
border-color: #ddd;
}
.page-link {
position: relative;
display: block;
padding: 0.5rem 0.75rem;
margin-left: -1px;
line-height: 1.25;
color: #007bff;
background-color: #fff;
border: 1px solid #ddd;
cursor: pointer;
}
.page-link:focus, .page-link:hover {
color: #0056b3;
text-decoration: none;
background-color: #e9ecef;
border-color: #ddd;
}
.pagination-lg .page-link {
padding: 0.75rem 1.5rem;
font-size: 1.25rem;
line-height: 1.5;
}
.pagination-lg .page-item:first-child .page-link {
border-top-left-radius: 0.3rem;
border-bottom-left-radius: 0.3rem;
}
.pagination-lg .page-item:last-child .page-link {
border-top-right-radius: 0.3rem;
border-bottom-right-radius: 0.3rem;
}
.pagination-sm .page-link {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
}
.pagination-sm .page-item:first-child .page-link {
border-top-left-radius: 0.2rem;
border-bottom-left-radius: 0.2rem;
}
.pagination-sm .page-item:last-child .page-link {
border-top-right-radius: 0.2rem;
border-bottom-right-radius: 0.2rem;
}
.justify-content-center {
-ms-flex-pack: center !important;
-webkit-box-pack: center !important;
justify-content: center !important;
}
`]
},] },
];
/**
* @nocollapse
*/
PaginatorComponent.ctorParameters = () => [
{ type: PaginatorService, },
{ type: EventsService, },
];
PaginatorComponent.propDecorators = {
'data': [{ type: Input },],
'path': [{ type: Input },],
'limit': [{ type: Input },],
'from': [{ type: Input },],
'perNav': [{ type: Input },],
'viewPage': [{ type: Input },],
'paginate': [{ type: Input },],
};
class LarangPaginatorModule {
/**
* @return {?}
*/
static forRoot() {
return {
ngModule: LarangPaginatorModule,
providers: [PaginatorService, EventsService]
};
}
}
LarangPaginatorModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
HttpClientModule
],
declarations: [PaginatorComponent],
exports: [PaginatorComponent]
},] },
];
/**
* @nocollapse
*/
LarangPaginatorModule.ctorParameters = () => [];
/**
* Generated bundle index. Do not edit.
*/
export { LarangPaginatorModule, EventsService, PaginatorService, PaginatorComponent as ɵa };
//# sourceMappingURL=larang-paginator.js.map