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
824 lines (823 loc) • 40 kB
JavaScript
import { Component, Injectable, Input, NgModule } from '@angular/core';
import { Subject as Subject$1 } from 'rxjs/Subject';
import { Observable as Observable$1 } from 'rxjs/Observable';
import 'rxjs/add/observable/from';
import { CommonModule } from '@angular/common';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/switch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/map';
import { ReplaySubject as ReplaySubject$1 } from 'rxjs/ReplaySubject';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
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$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 {?}
*/
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: 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: 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: Input },],
'id': [{ type: Input },],
'disableSearch': [{ type: Input },],
'disablePaging': [{ type: Input },],
'paginateSettings': [{ type: Input },],
'searchSettings': [{ type: 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: Injectable },
];
/**
* @nocollapse
*/
NgPaginateService.ctorParameters = function () { return [
{ type: 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: 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: Input },],
'path': [{ type: Input },],
'limit': [{ type: Input },],
'from': [{ type: Input },],
'perNav': [{ type: Input },],
'viewPage': [{ type: Input },],
'paginate': [{ type: Input },],
'textColor': [{ type: 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$1();
result.next(this.searched);
return Observable$1.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: Injectable },
];
/**
* @nocollapse
*/
NgSearchService.ctorParameters = function () { return [
{ type: 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$1();
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$1.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: 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: Input },],
};
var NgPureDatatableModule = (function () {
function NgPureDatatableModule() {
}
/**
* @return {?}
*/
NgPureDatatableModule.forRoot = function () {
return {
ngModule: NgPureDatatableModule,
providers: [NgPureDataTableEventService, NgSearchService, NgPaginateService]
};
};
return NgPureDatatableModule;
}());
NgPureDatatableModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule
],
declarations: [NgPureDatatableComponent, NgPaginateComponent, NgSearchComponent],
exports: [NgPureDatatableComponent, NgPaginateComponent, NgSearchComponent],
},] },
];
/**
* @nocollapse
*/
NgPureDatatableModule.ctorParameters = function () { return []; };
/**
* Generated bundle index. Do not edit.
*/
export { NgSearchTypesEnum, NgPureDataTableEventService, NgPureDatatableModule, NgPaginateComponent as ɵb, NgPaginateService as ɵc, NgPureDatatableComponent as ɵa, NgSearchComponent as ɵd, NgSearchService as ɵe };
//# sourceMappingURL=ng-pure-datatable.es5.js.map