ng-pure-datatable
Version:
This is a Angular datatable for tables which is not dependent on jquery. This is fully written with typescript and it uses observables to communicate events across the user defined table. This is inspired by previous libraries I wrote for `Larang-Paginato
823 lines (818 loc) • 41.3 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/Subject'), require('rxjs/Observable'), require('rxjs/add/observable/from'), require('@angular/common'), require('@angular/common/http'), require('rxjs/add/observable/fromEvent'), require('rxjs/add/operator/filter'), require('rxjs/add/operator/debounceTime'), require('rxjs/add/operator/switch'), require('rxjs/add/operator/do'), require('rxjs/add/operator/distinctUntilChanged'), require('rxjs/add/observable/throw'), require('rxjs/add/operator/map'), require('rxjs/ReplaySubject'), require('@angular/forms')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'rxjs/Subject', 'rxjs/Observable', 'rxjs/add/observable/from', '@angular/common', '@angular/common/http', 'rxjs/add/observable/fromEvent', 'rxjs/add/operator/filter', 'rxjs/add/operator/debounceTime', 'rxjs/add/operator/switch', 'rxjs/add/operator/do', 'rxjs/add/operator/distinctUntilChanged', 'rxjs/add/observable/throw', 'rxjs/add/operator/map', 'rxjs/ReplaySubject', '@angular/forms'], factory) :
(factory((global['ng-pure-datatable'] = {}),global.ng.core,global.Rx,global.Rx,global.Rx.Observable,global.ng.common,global.ng.common.http,global.Rx.Observable,global.Rx.Observable.prototype,global.Rx.Observable.prototype,global.Rx.Observable.prototype,global.Rx.Observable.prototype,global.Rx.Observable.prototype,global.Rx.Observable,global.Rx.Observable.prototype,global.Rx,global.ng.forms));
}(this, (function (exports,core,Subject,Observable,from,common,http,fromEvent,filter,debounceTime,_switch,_do,distinctUntilChanged,_throw,map,ReplaySubject,forms) { 'use strict';
var NgSearchTypesEnum = {};
NgSearchTypesEnum.ON_TABLE = 0;
NgSearchTypesEnum.ON_BACKEND = 1;
NgSearchTypesEnum.EMPTY_TABLE_APPLY_BACKEND = 2;
NgSearchTypesEnum[NgSearchTypesEnum.ON_TABLE] = "ON_TABLE";
NgSearchTypesEnum[NgSearchTypesEnum.ON_BACKEND] = "ON_BACKEND";
NgSearchTypesEnum[NgSearchTypesEnum.EMPTY_TABLE_APPLY_BACKEND] = "EMPTY_TABLE_APPLY_BACKEND";
var NgPureDataTableEventService = (function () {
function NgPureDataTableEventService() {
var _this = this;
this.listeners = {};
this.eventsSubject = new Subject.Subject();
this.events = Observable.Observable.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 {?}
*/
NgPureDataTableEventService.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 {?}
*/
NgPureDataTableEventService.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 NgPureDataTableEventService;
}());
NgPureDataTableEventService.decorators = [
{ type: core.Injectable },
];
/**
* @nocollapse
*/
NgPureDataTableEventService.ctorParameters = function () { return []; };
var NgPureDatatableComponent = (function () {
/**
* @param {?} ngPureDataTableEventService
*/
function NgPureDatatableComponent(ngPureDataTableEventService) {
this.ngPureDataTableEventService = ngPureDataTableEventService;
this.key = '';
this.id = '';
this.disableSearch = false;
this.disablePaging = false;
this.paginateSettings = {
data: {},
path: '',
limit: 50,
from: '',
perNav: 5,
viewPage: 'page',
paginate: 'paginate',
textColor: '#000'
};
this.searchSettings = {
path: null,
placeholder: 'What are you looking for?',
data: [],
searchKeys: [],
position: 'right',
positionStyle: {
right: null,
top: null,
},
width: 40,
from: null,
queryField: 'search',
borderColor: '#eee000',
buttonColor: '#83e6bc',
searchType: NgSearchTypesEnum.EMPTY_TABLE_APPLY_BACKEND
};
this.top = 0;
this.style = { position: 'absolute', 'margin-bottom': '100px' };
this.ranges = [];
}
/**
* @return {?}
*/
NgPureDatatableComponent.prototype.ngOnInit = function () {
this.paginateSettings['viewPage'] = (!this.paginateSettings['viewPage']) ? 'page' : this.paginateSettings['viewPage'];
this.paginateSettings['paginate'] = (!this.paginateSettings['paginate']) ? 'paginate' : this.paginateSettings['paginate'];
this.paginateSettings['from'] = this.key;
this.searchSettings['from'] = this.key;
this.searchSettings['position'] = (this.searchSettings['position']) ? this.searchSettings['position'] : 'right';
this.searchSettings['positionStyle'] = (this.searchSettings['positionStyle']) ? this.searchSettings['positionStyle'] : null;
this.searchSettings['width'] = (this.searchSettings['width']) ? this.searchSettings['width'] : 40;
this.paginateSettings['textColor'] = (this.paginateSettings['textColor']) ? this.paginateSettings['textColor'] : '#000';
this.style['width'] = this.searchSettings['width'] + '%';
this.limitStyle = JSON.parse(JSON.stringify(this.style));
this.limitStyle['width'] = '200px';
// console.log('width', this.searchSettings['width'], this.searchSettings['position']);
this.configSearchDisplay();
this.processLimit();
};
/**
* This is used to generate limit range.
* @return {?}
*/
NgPureDatatableComponent.prototype.processLimit = function () {
var /** @type {?} */ div = Math.floor(+this.paginateSettings.limit / 2);
this.ranges = [];
var /** @type {?} */ range = 0;
// console.log('div=', div);
if ((div % 2) === 0) {
range = 10;
}
else {
range = 15;
}
var /** @type {?} */ ranges = (range === 10) ? 101 : 106;
for (var /** @type {?} */ i = range; i < ranges; i += range) {
if (i > this.paginateSettings.data['total']) {
break;
}
this.ranges.push(i);
}
};
/**
* This is used to update limit
* @param {?} limit
* @return {?}
*/
NgPureDatatableComponent.prototype.updateLimit = function (limit) {
this.paginateSettings.limit = +limit;
// console.log('this.paginateSettings.limit', this.paginateSettings.limit);
this.ngPureDataTableEventService.broadcast('resetLimitCalled', this.paginateSettings.limit);
};
/**
* This is used to set the border color for the div
* @return {?}
*/
NgPureDatatableComponent.prototype.setBorderColor = function () {
this.searchSettings.borderColor = (this.searchSettings.borderColor) ? this.searchSettings.borderColor : '#eee000';
return { 'border-bottom': '3px solid ' + this.searchSettings.borderColor };
};
/**
* This is used to configure search and limit position
* @return {?}
*/
NgPureDatatableComponent.prototype.configSearchDisplay = function () {
this.id = (this.id.indexOf('#') > -1) ? this.id : '#' + this.id;
var /** @type {?} */ element = document.querySelector(this.id);
this.top = element.getBoundingClientRect().top;
if (this.top < 50) {
this.style['margin-top'] = '20px';
this.limitStyle['margin-top'] = this.style['margin-top'];
element['style'].marginTop = '80px';
}
var /** @type {?} */ right = (this.searchSettings['positionStyle'] && (this.searchSettings['positionStyle']['right'] <= -1 || this.searchSettings['positionStyle']['right'] >= 0)) ? this.searchSettings['positionStyle']['right'] : '10px';
var /** @type {?} */ top = (this.searchSettings['positionStyle'] && (this.searchSettings['positionStyle']['top'] >= 0 || this.searchSettings['positionStyle']['top'] <= -1)) ? this.searchSettings['positionStyle']['top'] : null;
if (this.searchSettings['position'].toLowerCase() === 'right') {
this.style['right'] = right + 'px';
this.limitStyle['left'] = this.style['right'];
}
else {
this.style['left'] = right + 'px';
this.limitStyle['right'] = this.style['left'];
}
this.top = (top) ? top : (this.top && this.top > 50) ? this.top - 50 : this.top;
this.style['top'] = this.top + 'px';
this.limitStyle['top'] = this.style['top'];
// console.log('element=', element.getBoundingClientRect().top);
};
return NgPureDatatableComponent;
}());
NgPureDatatableComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ng-pure-datatable',
template: "\n <div *ngIf=\"paginateSettings.data\">\n\n <div class=\"limit-style\" *ngIf=\"limitStyle && !disablePaging\" [ngStyle]=\"limitStyle\">\n <!--<label for=\"limit\">Limit: </label>-->\n <select id=\"limit\" [ngStyle]=\"setBorderColor()\" [(ngModel)]=\"paginateSettings.limit\"\n (change)=\"updateLimit(+limit.value)\" #limit>\n <option value=\"\" disabled selected>Select Limit</option>\n <option *ngFor=\"let num of ranges\" value=\"{{num}}\">{{num}}</option>\n </select>\n </div>\n <div class=\"search-app\" *ngIf=\"!disableSearch\" [ngStyle]=\"style\">\n <ng-search [allSettings]=\"searchSettings\"></ng-search>\n <div style=\"clear: both;\"></div>\n </div>\n\n <ng-paginate *ngIf=\"!disablePaging\" [from]=\"paginateSettings.from\" [data]=\"paginateSettings.data\"\n [path]=\"paginateSettings.path\"\n [limit]=\"paginateSettings.limit\" [perNav]=\"paginateSettings.perNav\"\n [viewPage]=\"paginateSettings.viewPage\" [paginate]=\"paginateSettings.paginate\"\n [textColor]=\"paginateSettings.textColor\"></ng-paginate>\n </div>\n ",
styles: ["\n select {\n width: 100% !important;\n height: 30px !important;\n padding: 5px !important;\n color: #000 !important;\n border: 1px solid #ccc;\n border-bottom: 3px solid #eee000;\n }\n\n\n select:visited, select:active, select:link, select:after, select:hover, select:focus, button:focus {\n outline: none;\n }\n\n\n @media (max-width: 768px) {\n .search-app {\n width: 55% !important;\n }\n .limit-style {\n width: 100px !important;\n }\n }\n "]
},] },
];
/**
* @nocollapse
*/
NgPureDatatableComponent.ctorParameters = function () { return [
{ type: NgPureDataTableEventService, },
]; };
NgPureDatatableComponent.propDecorators = {
'key': [{ type: core.Input },],
'id': [{ type: core.Input },],
'disableSearch': [{ type: core.Input },],
'disablePaging': [{ type: core.Input },],
'paginateSettings': [{ type: core.Input },],
'searchSettings': [{ type: core.Input },],
};
var NgPaginateService = (function () {
/**
* @param {?} http
*/
function NgPaginateService(http$$1) {
this.http = http$$1;
}
/**
* This is used to list all by paginator
* @param {?} url
* @return {?}
*/
NgPaginateService.prototype.listByPaginator = function (url) {
return this.http.get(url);
};
return NgPaginateService;
}());
NgPaginateService.decorators = [
{ type: core.Injectable },
];
/**
* @nocollapse
*/
NgPaginateService.ctorParameters = function () { return [
{ type: http.HttpClient, },
]; };
var NgPaginateComponent = (function () {
/**
* @param {?} ngPaginateService
* @param {?} ngPureDataTableEventService
*/
function NgPaginateComponent(ngPaginateService, ngPureDataTableEventService) {
var _this = this;
this.ngPaginateService = ngPaginateService;
this.ngPureDataTableEventService = ngPureDataTableEventService;
this.path = '';
this.limit = 50;
this.from = '';
this.perNav = 5;
this.viewPage = 'page';
this.paginate = 'paginate';
this.textColor = '#000';
this.next_page = '';
this.prev_page = '';
this.showLoad = 0;
this.totalPages = [];
this.pages = [];
this.total = 0;
this.perNavCopy = {
nav: 5
};
this.ngPureDataTableEventService.on('getUrlPath', function (path) {
_this.path = path;
});
this.ngPureDataTableEventService.on('resetLimitCalled', function (limit) {
setTimeout(function () {
var buildPage = _this.viewPage + '=' + 1;
_this.limit = limit;
_this.loadData((buildPage + '&' + _this.paginate + '=' + _this.limit), buildPage);
}, 200);
});
}
/**
* This is used to get total pages array
* @return {?}
*/
NgPaginateComponent.prototype.getPages = function () {
for (var /** @type {?} */ i = 1; i <= this.data['last_page']; i++) {
this.totalPages.push(i);
}
var /** @type {?} */ perNav = JSON.parse(JSON.stringify(this.perNavCopy));
this.perNav = perNav.nav;
// console.log('thperVa=', this.perNav);
this.getPaging();
// console.log('pages=', this.totalPages, this.data['last_page'], this.data['current_page']);
};
/**
* This is used get list of page navigation
* @return {?}
*/
NgPaginateComponent.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 {?}
*/
NgPaginateComponent.prototype.loadData = function (queryPath, page) {
var _this = this;
// console.log('queryPath=', queryPath, page);
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.ngPaginateService.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();
res['type'] = 'paging';
_this.ngPureDataTableEventService.broadcast(_this.from, res);
_this.showLoad = 0;
_this.total = _this.data['total'] || _this.limit;
// console.log('data=>', data);
_this.processPerNav();
}, function (err) {
err['type'] = 'paging';
_this.ngPureDataTableEventService.broadcast(_this.from, err);
_this.showLoad = 0;
});
};
/**
* This is used to adjust content per nav display based on limit selected
* @return {?}
*/
NgPaginateComponent.prototype.processPerNav = function () {
var _this = this;
var /** @type {?} */ page = Math.ceil(this.data['total'] / this.limit);
// console.log('page==>', page, 'perNav=', this.perNav );
if (this.perNav > page) {
setTimeout(function () {
_this.totalPages = _this.totalPages.slice(0, page);
_this.pages = _this.totalPages.slice(0, page);
}, 200);
}
else {
setTimeout(function () {
_this.totalPages = [];
_this.pages = [];
_this.getPages();
// console.log('this.totalPages', this.totalPages.toString());
}, 200);
}
};
/**
* This is used to get next page number format from page url.
* @return {?}
*/
NgPaginateComponent.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 {?}
*/
NgPaginateComponent.prototype.ngOnInit = function () {
// console.log('this.data=', this.data);
this.nextPrevPage();
this.getPages();
this.perNavCopy = JSON.parse(JSON.stringify({ nav: this.perNav }));
this.total = this.data['total'] || this.limit;
};
/**
* @return {?}
*/
NgPaginateComponent.prototype.ngAfterViewInit = function () {
// console.log('this.data=', this.data);
};
return NgPaginateComponent;
}());
NgPaginateComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ng-paginate',
template: "\n <nav aria-label=\"...\" style=\"position: relative\" *ngIf=\"pages.length !== 0\">\n <div class=\"showing\" [ngStyle]=\"{'text-color': textColor}\">\n Showing {{((data['current_page'] - 1) * (limit <= total ? limit : total) + 1)}} - {{(data['current_page']) * (limit <= total ? limit : total)}} of {{total}} entries\n </div>\n <ul *ngIf=\"limit <= data['total']\" class=\"pagination justify-content-end\">\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 .showing {\n color: #000 !important;\n font-size: 0.95em;\n line-height: 10px;\n left: 10px;\n top: 15px;\n position: absolute;\n }\n @media (max-width: 768px) {\n .showing {\n position: relative;\n margin: 10px;\n text-align: center;\n }\n .justify-content-end {\n -ms-flex-pack: center !important;\n -webkit-box-pack: center !important;\n justify-content: center !important;\n padding-top: 20px;\n }\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-end {\n -ms-flex-pack: end;\n -webkit-box-pack: end;\n justify-content: flex-end;\n }\n\n .justify-content-start {\n -ms-flex-pack: start !important;\n -webkit-box-pack: start !important;\n justify-content: flex-start !important;\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
*/
NgPaginateComponent.ctorParameters = function () { return [
{ type: NgPaginateService, },
{ type: NgPureDataTableEventService, },
]; };
NgPaginateComponent.propDecorators = {
'data': [{ type: core.Input },],
'path': [{ type: core.Input },],
'limit': [{ type: core.Input },],
'from': [{ type: core.Input },],
'perNav': [{ type: core.Input },],
'viewPage': [{ type: core.Input },],
'paginate': [{ type: core.Input },],
'textColor': [{ type: core.Input },],
};
var NgSearchService = (function () {
/**
* @param {?} http
*/
function NgSearchService(http$$1) {
this.http = http$$1;
this.searched = [];
}
/**
* This is used to initialize searching of data from the object passed.
* @param {?} values
* @param {?=} toFind
* @param {?=} keys
* @return {?}
*/
NgSearchService.prototype.initSearch = function (values, toFind, keys) {
var _this = this;
if (toFind === void 0) { toFind = ''; }
this.searched = [];
// console.log('keys= ', keys);
if (keys && keys.length > 0) {
keys.forEach(function (key) {
// console.log('key=', key);
_this.startSearching(values, toFind, key);
});
}
else {
this.startSearching(values, toFind);
}
// console.log('searched=', this.searched);
var /** @type {?} */ result = new ReplaySubject.ReplaySubject();
result.next(this.searched);
return Observable.Observable.from(result);
// return this.searched;
};
/**
* This is used to start the search after initialization has taken place.
* @param {?} values
* @param {?} toFind
* @param {?=} key
* @return {?}
*/
NgSearchService.prototype.startSearching = function (values, toFind, key) {
var _this = this;
// console.log('values=', values);
values.filter(function (value) {
var /** @type {?} */ status = (key) ? _this.processObject(value, toFind, key) : _this.processObject(value, toFind);
if (status && _this.searched.indexOf(value) === -1) {
_this.searched.push(value);
// console.log('Finalsaerched=', status, this.searched);
}
return status;
});
// console.log('ReturnFinalsaerched=', this.searched);
};
/**
* This is used to start an object search for the input values toFind.
* @param {?} values
* @param {?} toFind
* @param {?=} key
* @return {?}
*/
NgSearchService.prototype.processObject = function (values, toFind, key) {
var /** @type {?} */ status = null;
for (var /** @type {?} */ valKey in values) {
if (status) {
// console.log('this is true');
break;
}
else {
var /** @type {?} */ value = values[valKey];
// console.log('value=', values[valKey], 'KeyVal=', valKey, 'key=', key);
if (!value || (key && key !== valKey)) {
status = false;
continue;
}
// console.log('key=', valKey, value);
switch (value.constructor) {
case Array:
status = (key) ? this.processArray(value, toFind, [key, valKey]) : this.processArray(value, toFind);
// console.log('status1=', status);
break;
case Object:
var /** @type {?} */ innerKeys = Object.keys(value);
if (key && innerKeys.indexOf(key) === -1) {
status = false;
continue;
}
status = (key) ? this.processObject(value, toFind, key) : this.processObject(value, toFind);
// console.log('status2=', status);
break;
case String:
status = (key) ? this.processValidation(value, toFind, [key, valKey]) : this.processValidation(value, toFind);
// console.log('status=', status);
break;
case Number:
status = (key) ? this.processValidation(value, toFind, [key, valKey]) : this.processValidation(value, toFind);
// console.log('status=', status);
break;
default:
status = false;
break;
}
}
}
return !!(status);
};
/**
* This is used to filter depth object having multiple level objects or arrays
* @param {?} values
* @param {?} toFind
* @param {?=} keys
* @return {?}
*/
NgSearchService.prototype.processArray = function (values, toFind, keys) {
var _this = this;
values.filter(function (value) {
if (!value || (keys && keys[0] !== keys[1])) {
return false;
}
switch (value.constructor) {
case Array:
return !!((keys[0]) ? _this.processArray(value, toFind, keys) : _this.processArray(value, toFind));
case Object:
var /** @type {?} */ innerKeys = Object.keys(value);
if (keys[0] && innerKeys.indexOf(keys[0]) === -1) {
return false;
}
return (keys[0]) ? _this.processObject(value, toFind, keys[0]) : _this.processObject(value, toFind);
case String:
return (keys[0]) ? _this.processValidation(value, toFind, keys) : _this.processValidation(value, toFind);
case Number:
return (keys[0]) ? _this.processValidation(value, toFind, keys) : _this.processValidation(value, toFind);
default:
return false;
}
});
return (values && values.length > 0);
};
/**
* This is used to compare if data lookup is valid or not
* @param {?} value
* @param {?} toFind
* @param {?=} keys
* @return {?}
*/
NgSearchService.prototype.processValidation = function (value, toFind, keys) {
value = String(value).toLowerCase().trim();
toFind = String(toFind).toLowerCase().trim();
// console.log('toFind=', toFind, 'Value=', value, keys.toString(), (keys[0] === keys[1] && value.indexOf(toFind) > -1));
return (keys) ? (keys[0] === keys[1] && value.indexOf(toFind) > -1) : (value.indexOf(toFind) > -1);
};
/**
* This is used to search backend if empty list is encountered.
* @param {?} url
* @return {?}
*/
NgSearchService.prototype.searchResource = function (url) {
return this.http.get(url);
};
return NgSearchService;
}());
NgSearchService.decorators = [
{ type: core.Injectable },
];
/**
* @nocollapse
*/
NgSearchService.ctorParameters = function () { return [
{ type: http.HttpClient, },
]; };
var NgSearchComponent = (function () {
/**
* @param {?} ngSearchService
* @param {?} ngPureDataTableEventService
*/
function NgSearchComponent(ngSearchService, ngPureDataTableEventService) {
var _this = this;
this.ngSearchService = ngSearchService;
this.ngPureDataTableEventService = ngPureDataTableEventService;
this.search$ = new Subject.Subject();
this.allSettings = {
path: null,
placeholder: 'What are you looking for?',
data: [],
searchKeys: [],
from: null,
position: 'right',
positionStyle: {
right: null,
top: null
},
width: 40,
queryField: 'search',
borderColor: '#eee000',
buttonColor: '#83e6bc',
searchType: NgSearchTypesEnum.EMPTY_TABLE_APPLY_BACKEND
};
this.searching = false;
this.copyData = [];
this.search$
.distinctUntilChanged()
.debounceTime(400)
.subscribe(function (res) {
if (res && res.length > 1) {
_this.doSearch(res);
return;
}
if (res.length === 0) {
_this.ngPureDataTableEventService.broadcast(_this.allSettings.from, { type: 'search', result: _this.copyData, data: _this.copyData });
}
}, function (err) {
});
}
/**
* This is used to set the border color for the div
* @return {?}
*/
NgSearchComponent.prototype.setBorderColor = function () {
return { 'border-bottom': '3px solid ' + this.allSettings.borderColor };
};
/**
* This is used to style the button background
* @return {?}
*/
NgSearchComponent.prototype.setButtonColor = function () {
return { 'background': this.allSettings.buttonColor };
};
/**
* This is used to initialize searching on a table.
* @param {?} query
* @return {?}
*/
NgSearchComponent.prototype.doSearch = function (query) {
var _this = this;
this.copyData = JSON.parse(JSON.stringify(this.allSettings.data));
if (!query) {
return null;
}
this.searching = true;
setTimeout(function () {
switch (_this.allSettings.searchType) {
case NgSearchTypesEnum.EMPTY_TABLE_APPLY_BACKEND:
_this.processSearching(NgSearchTypesEnum.EMPTY_TABLE_APPLY_BACKEND, query);
break;
case NgSearchTypesEnum.ON_BACKEND:
_this.doSearchBackend(query);
break;
case NgSearchTypesEnum.ON_TABLE:
_this.processSearching(NgSearchTypesEnum.ON_TABLE, query);
break;
default:
Observable.Observable.throw('Unknown search type');
break;
}
}, 200);
};
/**
* This is used to search query strings
* @param {?} type
* @param {?} query
* @return {?}
*/
NgSearchComponent.prototype.processSearching = function (type, query) {
var _this = this;
this.ngSearchService.initSearch(this.allSettings.data, query, this.allSettings.searchKeys)
.subscribe(function (result) {
// console.log('saerchResult=', result);
if (result.length === 0 && type === NgSearchTypesEnum.EMPTY_TABLE_APPLY_BACKEND) {
_this.doSearchBackend(query);
return;
}
_this.ngPureDataTableEventService.broadcast(_this.allSettings.from, { type: 'search', result: result, data: _this.copyData });
_this.searching = false;
// console.log('searching=', this.searching);
}, function (err) {
_this.searching = false;
_this.ngPureDataTableEventService.broadcast(_this.allSettings.from, { type: 'search', error: err, data: _this.copyData });
});
};
/**
* This is used to make a request to a backend api for searching.
* @param {?} query
* @return {?}
*/
NgSearchComponent.prototype.doSearchBackend = function (query) {
var _this = this;
var /** @type {?} */ pos = this.allSettings.path.indexOf('?');
var /** @type {?} */ path = (pos > -1) ? this.allSettings.path + ("&" + this.allSettings.queryField + "=" + query) : this.allSettings.path + ("?" + this.allSettings.queryField + "=" + query);
this.ngSearchService.searchResource(path)
.subscribe(function (res) {
_this.ngPureDataTableEventService.broadcast(_this.allSettings.from, { type: 'search', result: res, data: _this.copyData });
_this.searching = false;
}, function (err) {
_this.searching = false;
_this.ngPureDataTableEventService.broadcast(_this.allSettings.from, { type: 'search', error: err, data: _this.copyData });
});
};
/**
* This is used to validate object passed down to table searcher.
* @return {?}
*/
NgSearchComponent.prototype.ValidateSettings = function () {
for (var /** @type {?} */ key in this.allSettings) {
if (!this.allSettings[key]) {
this.allSettings[key] = NgSearchComponent.defaultAllSettings[key];
}
}
};
/**
* @return {?}
*/
NgSearchComponent.prototype.ngOnInit = function () {
this.ValidateSettings();
this.copyData = JSON.parse(JSON.stringify(this.allSettings.data));
};
return NgSearchComponent;
}());
NgSearchComponent.defaultAllSettings = {
path: null,
placeholder: 'What are you looking for?',
data: [],
searchKeys: [],
from: null,
position: 'right',
width: 40,
positionStyle: {
right: null,
top: null
},
queryField: 'search',
borderColor: '#eee000',
buttonColor: '#83e6bc',
searchType: NgSearchTypesEnum.EMPTY_TABLE_APPLY_BACKEND
};
NgSearchComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ng-search',
template: "\n <div class=\"ng-search\" [ngStyle]=\"setBorderColor()\" [class.disabled]=\"searching\">\n <input [disabled]=\"searching\" (keyup)=\"search$.next(searchItem.value)\" #searchItem type=\"text\" placeholder=\"{{allSettings.placeholder}}\">\n <!--<i *ngIf=\"searching\" class=\"fa fa-spin fa-spinner\"></i>-->\n <!-- <button [disabled]=\"searching\" type=\"button\" (click)=\"doSearch(searchItem.value)\" class=\"button\" [ngStyle]=\"setButtonColor()\">\n <i *ngIf=\"searching\" class=\"fa fa-spin fa-spinner\"></i> <i class=\"fa fa-search\"></i>\n </button>-->\n </div>\n <span class=\"clearOut\"></span>\n ",
styles: ["\n input {\n width: 80% !important;\n border: 0 !important;\n height: 20px !important;\n padding: 5px !important;\n }\n\n input:visited, input:active, input:link, input:after, input:hover, input:focus, button:focus {\n border: 0 !important;\n outline: none;\n }\n\n .ng-search {\n border-radius: 5px !important;\n -moz-border-radius: 5px !important;\n -webkit-border-radius: 5px !important;\n width: 100% !important;\n color: #000;\n border: 1px solid #ccc;\n border-bottom: 3px solid #eee000;\n padding: 0 !important;\n margin: 0 !important;\n font-size: 11px !important;\n }\n\n .disabled {\n background: rgb(235, 235, 228) !important;\n }\n\n .button {\n background: #83e6bc;\n padding: 9px !important;\n color: #fff !important;\n border: 0 !important;\n cursor: pointer !important;\n font-size: 11px;\n float: right;\n border-radius: 0 5px 5px 0 !important;\n -moz-border-radius: 0 5px 5px 0 !important;\n -webkit-border-radius: 0 5px 5px 0 !important;\n }\n .clearOut {\n clear: both;\n }\n "],
},] },
];
/**
* @nocollapse
*/
NgSearchComponent.ctorParameters = function () { return [
{ type: NgSearchService, },
{ type: NgPureDataTableEventService, },
]; };
NgSearchComponent.propDecorators = {
'allSettings': [{ type: core.Input },],
};
var NgPureDatatableModule = (function () {
function NgPureDatatableModule() {
}
/**
* @return {?}
*/
NgPureDatatableModule.forRoot = function () {
return {
ngModule: NgPureDatatableModule,
providers: [NgPureDataTableEventService, NgSearchService, NgPaginateService]
};
};
return NgPureDatatableModule;
}());
NgPureDatatableModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
forms.FormsModule,
forms.ReactiveFormsModule,
http.HttpClientModule
],
declarations: [NgPureDatatableComponent, NgPaginateComponent, NgSearchComponent],
exports: [NgPureDatatableComponent, NgPaginateComponent, NgSearchComponent],
},] },
];
/**
* @nocollapse
*/
NgPureDatatableModule.ctorParameters = function () { return []; };
exports.NgSearchTypesEnum = NgSearchTypesEnum;
exports.NgPureDataTableEventService = NgPureDataTableEventService;
exports.NgPureDatatableModule = NgPureDatatableModule;
exports.ɵb = NgPaginateComponent;
exports.ɵc = NgPaginateService;
exports.ɵa = NgPureDatatableComponent;
exports.ɵd = NgSearchComponent;
exports.ɵe = NgSearchService;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-pure-datatable.umd.js.map