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:
254 lines (253 loc) • 11.9 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';
var EventsService = (function () {
function EventsService() {
var _this = this;
this.listeners = {};
this.eventsSubject = new Subject$1();
this.events = Observable$1.from(this.eventsSubject);
this.events.subscribe(function (_a) {
var name = _a.name, args = _a.args;
if (_this.listeners[name]) {
for (var _i = 0, _b = _this.listeners[name]; _i < _b.length; _i++) {
var listener = _b[_i];
listener.apply(void 0, args);
}
}
});
}
/**
* @param {?} name
* @param {?} listener
* @return {?}
*/
EventsService.prototype.on = function (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 {?}
*/
EventsService.prototype.broadcast = function (name) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
// console.log('name=', name);
this.eventsSubject.next({
name: name,
args: args
});
};
return EventsService;
}());
EventsService.decorators = [
{ type: Injectable },
];
/**
* @nocollapse
*/
EventsService.ctorParameters = function () { return []; };
var PaginatorService = (function () {
/**
* @param {?} http
*/
function PaginatorService(http$$1) {
this.http = http$$1;
}
/**
* This is used to list all by paginator
* @param {?} url
* @return {?}
*/
PaginatorService.prototype.listByPaginator = function (url) {
return this.http.get(url);
};
return PaginatorService;
}());
PaginatorService.decorators = [
{ type: Injectable },
];
/**
* @nocollapse
*/
PaginatorService.ctorParameters = function () { return [
{ type: HttpClient, },
]; };
var PaginatorComponent = (function () {
/**
* @param {?} paginatorService
* @param {?} eventsService
*/
function PaginatorComponent(paginatorService, eventsService) {
var _this = this;
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', function (path) {
_this.path = path;
});
}
/**
* This is used to get total pages array
* @return {?}
*/
PaginatorComponent.prototype.getPages = function () {
for (var /** @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 {?}
*/
PaginatorComponent.prototype.getPaging = function () {
this.perNav += this.pages.length;
this.pages = this.totalPages.slice(0, this.perNav);
};
/**
* This is used to load data
* @param {?} queryPath
* @param {?=} page
* @return {?}
*/
PaginatorComponent.prototype.loadData = function (queryPath, page) {
var _this = this;
var /** @type {?} */ posQ = this.path.indexOf('?');
var /** @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(function (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);
}, function (err) {
_this.showLoad = 0;
});
};
/**
* This is used to get next page number format from page url.
* @return {?}
*/
PaginatorComponent.prototype.nextPrevPage = function () {
var /** @type {?} */ queryString = this.viewPage.trim() + '=';
if (Object.keys(this.data).length === 0) {
return null;
}
if (this.data['next_page_url']) {
var /** @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']) {
var /** @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 {?}
*/
PaginatorComponent.prototype.ngOnInit = function () {
// console.log('this.data=', this.data);
this.nextPrevPage();
this.getPages();
};
/**
* @return {?}
*/
PaginatorComponent.prototype.ngAfterViewInit = function () {
// console.log('this.data=', this.data);
};
return PaginatorComponent;
}());
PaginatorComponent.decorators = [
{ type: Component, args: [{
selector: 'app-paginator',
template: "\n <nav aria-label=\"...\" *ngIf=\"pages.length !== 0\">\n <ul class=\"pagination justify-content-center\">\n <li class=\"page-item\" [class.disabled]=\"data['prev_page_url'] === null\" >\n <a class=\"page-link\" (click)=\"loadData((prev_page + '&' + paginate + '=' + limit), prev_page)\" role=\"button\" tabindex=\"-1\">Previous</a>\n </li>\n <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\">\n <a class=\"page-link\" (click)=\"loadData((viewPage + '=' + page + '&' + paginate + '=' + limit), page)\" role=\"button\">\n <i *ngIf=\"page === showLoad\" class=\"fa fa-spin fa-spinner\"></i> {{page}}\n </a>\n </li>\n <li *ngIf=\"totalPages.length > perNav\">\n <a (click)=\"getPaging()\" title=\"Load More Navigation\" role=\"button\" class=\"page-link\">...</a>\n </li>\n <li *ngIf=\"pages.length === 0\">\n <a role=\"button\" class=\"page-link\"><i class=\"fa fa-spin fa-spinner\"></i></a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"data['next_page_url'] === null\" >\n <a class=\"page-link\" (click)=\"loadData((next_page + '&' + paginate + '=' + limit), next_page)\" role=\"button\">Next</a>\n </li>\n </ul>\n </nav>\n ",
styles: ["\n\n .pagination {\n display: -ms-flexbox;\n display: -webkit-box;\n display: flex;\n padding-left: 0;\n list-style: none;\n border-radius: 0.25rem;\n }\n\n .page-item:first-child .page-link {\n margin-left: 0;\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n }\n\n .page-item:last-child .page-link {\n border-top-right-radius: 0.25rem;\n border-bottom-right-radius: 0.25rem;\n }\n\n .page-item.active .page-link {\n z-index: 2;\n color: #fff;\n background-color: #007bff;\n border-color: #007bff;\n }\n\n .page-item.disabled .page-link {\n color: #868e96;\n pointer-events: none;\n background-color: #fff;\n border-color: #ddd;\n }\n\n .page-link {\n position: relative;\n display: block;\n padding: 0.5rem 0.75rem;\n margin-left: -1px;\n line-height: 1.25;\n color: #007bff;\n background-color: #fff;\n border: 1px solid #ddd;\n cursor: pointer;\n }\n\n .page-link:focus, .page-link:hover {\n color: #0056b3;\n text-decoration: none;\n background-color: #e9ecef;\n border-color: #ddd;\n }\n\n .pagination-lg .page-link {\n padding: 0.75rem 1.5rem;\n font-size: 1.25rem;\n line-height: 1.5;\n }\n\n .pagination-lg .page-item:first-child .page-link {\n border-top-left-radius: 0.3rem;\n border-bottom-left-radius: 0.3rem;\n }\n\n .pagination-lg .page-item:last-child .page-link {\n border-top-right-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n }\n\n .pagination-sm .page-link {\n padding: 0.25rem 0.5rem;\n font-size: 0.875rem;\n line-height: 1.5;\n }\n\n .pagination-sm .page-item:first-child .page-link {\n border-top-left-radius: 0.2rem;\n border-bottom-left-radius: 0.2rem;\n }\n\n .pagination-sm .page-item:last-child .page-link {\n border-top-right-radius: 0.2rem;\n border-bottom-right-radius: 0.2rem;\n }\n\n .justify-content-center {\n -ms-flex-pack: center !important;\n -webkit-box-pack: center !important;\n justify-content: center !important;\n }\n "]
},] },
];
/**
* @nocollapse
*/
PaginatorComponent.ctorParameters = function () { return [
{ 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 },],
};
var LarangPaginatorModule = (function () {
function LarangPaginatorModule() {
}
/**
* @return {?}
*/
LarangPaginatorModule.forRoot = function () {
return {
ngModule: LarangPaginatorModule,
providers: [PaginatorService, EventsService]
};
};
return LarangPaginatorModule;
}());
LarangPaginatorModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
HttpClientModule
],
declarations: [PaginatorComponent],
exports: [PaginatorComponent]
},] },
];
/**
* @nocollapse
*/
LarangPaginatorModule.ctorParameters = function () { return []; };
/**
* Generated bundle index. Do not edit.
*/
export { LarangPaginatorModule, EventsService, PaginatorService, PaginatorComponent as ɵa };
//# sourceMappingURL=larang-paginator.es5.js.map