UNPKG

angular-table-searcher

Version:

This is an angular table searcher. it helps to use keys provided to search through a list of objects and if no keys are provided, it searches for the occurrence of the input value. it also makes request to endpoint if url is provided for backend search.

3 lines (2 loc) 8.31 kB
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("@angular/core"),require("rxjs/Subject"),require("rxjs/Observable"),require("rxjs/add/observable/from"),require("rxjs/ReplaySubject"),require("rxjs/add/observable/throw"),require("@angular/common/http"),require("@angular/common"),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/map")):"function"==typeof define&&define.amd?define(["exports","@angular/core","rxjs/Subject","rxjs/Observable","rxjs/add/observable/from","rxjs/ReplaySubject","rxjs/add/observable/throw","@angular/common/http","@angular/common","rxjs/add/observable/fromEvent","rxjs/add/operator/filter","rxjs/add/operator/debounceTime","rxjs/add/operator/switch","rxjs/add/operator/do","rxjs/add/operator/map"],r):r(e["angular-table-searcher"]={},e.ng.core,e.Rx,e.Rx,e.Rx.Observable,e.Rx,e.Rx.Observable,e.ng.common.http,e.ng.common)}(this,function(e,r,t,n,a,o,s,i,c){"use strict";var l=function(){function e(){var e=this;this.listeners={},this.eventsSubject=new t.Subject,this.events=n.Observable.from(this.eventsSubject),this.events.subscribe(function(r){var t=r.name,n=r.args;if(e.listeners[t])for(var a=0,o=e.listeners[t];a<o.length;a++){o[a].apply(void 0,n)}})}return e.prototype.on=function(e,r){this.listeners[e]||(this.listeners[e]=[],this.listeners[e].push(r)),this.listeners[e]&&(this.listeners[e][0]=r)},e.prototype.broadcast=function(e){for(var r=[],t=1;t<arguments.length;t++)r[t-1]=arguments[t];this.eventsSubject.next({name:e,args:r})},e}();l.decorators=[{type:r.Injectable}],l.ctorParameters=function(){return[]};var p=function(){function e(e){this.http=e,this.searched=[]}return e.prototype.initSearch=function(e,r,t){var a=this;void 0===r&&(r=""),this.searched=[],t&&t.length>0?t.forEach(function(t){a.startSearching(e,r,t)}):this.startSearching(e,r);var s=new o.ReplaySubject;return s.next(this.searched),n.Observable.from(s)},e.prototype.startSearching=function(e,r,t){var n=this;e.filter(function(e){var a=t?n.processObject(e,r,t):n.processObject(e,r);return a&&-1===n.searched.indexOf(e)&&n.searched.push(e),a})},e.prototype.processObject=function(e,r,t){var n=null;for(var a in e){if(n)break;var o=e[a];if(!o||t&&t!==a)n=!1;else switch(o.constructor){case Array:n=t?this.processArray(o,r,[t,a]):this.processArray(o,r);break;case Object:var s=Object.keys(o);if(t&&-1===s.indexOf(t)){n=!1;continue}n=t?this.processObject(o,r,t):this.processObject(o,r);break;case String:case Number:n=t?this.processValidation(o,r,[t,a]):this.processValidation(o,r);break;default:n=!1}}return!!n},e.prototype.processArray=function(e,r,t){var n=this;return e.filter(function(e){if(!e||t&&t[0]!==t[1])return!1;switch(e.constructor){case Array:return!!(t[0]?n.processArray(e,r,t):n.processArray(e,r));case Object:var a=Object.keys(e);return(!t[0]||-1!==a.indexOf(t[0]))&&(t[0]?n.processObject(e,r,t[0]):n.processObject(e,r));case String:case Number:return t[0]?n.processValidation(e,r,t):n.processValidation(e,r);default:return!1}}),e&&e.length>0},e.prototype.processValidation=function(e,r,t){return e=String(e).toLowerCase().trim(),r=String(r).toLowerCase().trim(),t?t[0]===t[1]&&e.indexOf(r)>-1:e.indexOf(r)>-1},e.prototype.searchResource=function(e){return this.http.get(e)},e}();p.decorators=[{type:r.Injectable}],p.ctorParameters=function(){return[{type:i.HttpClient}]};var u={};u.ON_TABLE=0,u.ON_BACKEND=1,u.EMPTY_TABLE_APPLY_BACKEND=2,u[u.ON_TABLE]="ON_TABLE",u[u.ON_BACKEND]="ON_BACKEND",u[u.EMPTY_TABLE_APPLY_BACKEND]="EMPTY_TABLE_APPLY_BACKEND";var d=function(){function e(e,r){this.tableSearcherService=e,this.eventsService=r,this.allSettings={path:null,placeholder:"What are you looking for?",data:[],searchKeys:[],from:null,queryField:"search",borderColor:"#eee000",buttonColor:"#83e6bc",searchType:u.EMPTY_TABLE_APPLY_BACKEND},this.searching=!1,this.copyData=[]}return e.prototype.setBorderColor=function(){return{"border-bottom":"3px solid "+this.allSettings.borderColor}},e.prototype.setButtonColor=function(){return{background:this.allSettings.buttonColor}},e.prototype.doSearch=function(e){var r=this;if(!e)return null;this.searching=!0,setTimeout(function(){switch(r.allSettings.searchType){case u.EMPTY_TABLE_APPLY_BACKEND:r.processSearching(u.EMPTY_TABLE_APPLY_BACKEND,e);break;case u.ON_BACKEND:r.doSearchBackend(e);break;case u.ON_TABLE:r.processSearching(u.ON_TABLE,e);break;default:n.Observable["throw"]("Unknown search type")}},200)},e.prototype.processSearching=function(e,r){var t=this;this.tableSearcherService.initSearch(this.allSettings.data,r,this.allSettings.searchKeys).subscribe(function(n){0!==n.length||e!==u.EMPTY_TABLE_APPLY_BACKEND?(t.eventsService.broadcast(t.allSettings.from,{result:n,data:t.copyData}),t.searching=!1):t.doSearchBackend(r)},function(e){t.searching=!1,n.Observable["throw"](e)})},e.prototype.doSearchBackend=function(e){var r=this,t=this.allSettings.path.indexOf("?")>-1?this.allSettings.path+"&"+this.allSettings.queryField+"="+e:this.allSettings.path+"?"+this.allSettings.queryField+"="+e;this.tableSearcherService.searchResource(t).subscribe(function(e){r.eventsService.broadcast(r.allSettings.from,{result:e,data:r.copyData}),r.searching=!1},function(e){r.searching=!1,n.Observable["throw"](e)})},e.prototype.ValidateSettings=function(){for(var r in this.allSettings)this.allSettings[r]||(this.allSettings[r]=e.defaultAllSettings[r])},e.prototype.ngOnInit=function(){this.ValidateSettings(),this.copyData=JSON.parse(JSON.stringify(this.allSettings.data))},e}();d.defaultAllSettings={path:null,placeholder:"What are you looking for?",data:[],searchKeys:[],from:null,queryField:"search",borderColor:"#eee000",buttonColor:"#83e6bc",searchType:u.EMPTY_TABLE_APPLY_BACKEND},d.decorators=[{type:r.Component,args:[{selector:"app-table-searcher",template:'\n <div class="table-searcher" [ngStyle]="setBorderColor()" [class.disabled]="searching">\n <input [disabled]="searching" (keyup.enter)="doSearch(searchItem.value)" #searchItem type="text" placeholder="{{allSettings.placeholder}}">\n \x3c!--<i *ngIf="searching" class="fa fa-spin fa-spinner"></i>--\x3e\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 .table-searcher {\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 "]}]}],d.ctorParameters=function(){return[{type:p},{type:l}]},d.propDecorators={allSettings:[{type:r.Input}]};var h=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[p,l]}},e}();h.decorators=[{type:r.NgModule,args:[{imports:[i.HttpClientModule,c.CommonModule],declarations:[d],exports:[d]}]}],h.ctorParameters=function(){return[]},e.EventsService=l,e.TableSearcherService=p,e.TableSearcherTypesEnum=u,e.AngularTableSearcherModule=h,e.ɵa=d,Object.defineProperty(e,"__esModule",{value:!0})}); //# sourceMappingURL=angular-table-searcher.umd.min.js.map