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
3 lines (2 loc) • 22.1 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(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")):"function"==typeof define&&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"],e):e(t["ng-pure-datatable"]={},t.ng.core,t.Rx,t.Rx,t.Rx.Observable,t.ng.common,t.ng.common.http,t.Rx.Observable,t.Rx.Observable.prototype,t.Rx.Observable.prototype,t.Rx.Observable.prototype,t.Rx.Observable.prototype,t.Rx.Observable.prototype,t.Rx.Observable,t.Rx.Observable.prototype,t.Rx,t.ng.forms)}(this,function(t,e,i,s,n,a,r,o,p,l,c,g,h,d,u,f,b){"use strict";var m={ON_TABLE:0,ON_BACKEND:1,EMPTY_TABLE_APPLY_BACKEND:2};m[m.ON_TABLE]="ON_TABLE",m[m.ON_BACKEND]="ON_BACKEND",m[m.EMPTY_TABLE_APPLY_BACKEND]="EMPTY_TABLE_APPLY_BACKEND";var y=function(){function t(){var r=this;this.listeners={},this.eventsSubject=new i.Subject,this.events=s.Observable.from(this.eventsSubject),this.events.subscribe(function(t){var e=t.name,n=t.args;if(r.listeners[e])for(var i=0,a=r.listeners[e];i<a.length;i++){a[i].apply(void 0,n)}})}return t.prototype.on=function(t,e){this.listeners[t]||(this.listeners[t]=[],this.listeners[t].push(e)),this.listeners[t]&&(this.listeners[t][0]=e)},t.prototype.broadcast=function(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];this.eventsSubject.next({name:t,args:e})},t}();y.decorators=[{type:e.Injectable}],y.ctorParameters=function(){return[]};var v=function(){function t(t){this.ngPureDataTableEventService=t,this.key="",this.id="",this.disableSearch=!1,this.disablePaging=!1,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:m.EMPTY_TABLE_APPLY_BACKEND},this.top=0,this.style={position:"absolute","margin-bottom":"100px"},this.ranges=[]}return t.prototype.ngOnInit=function(){this.paginateSettings.viewPage=this.paginateSettings.viewPage?this.paginateSettings.viewPage:"page",this.paginateSettings.paginate=this.paginateSettings.paginate?this.paginateSettings.paginate:"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",this.configSearchDisplay(),this.processLimit()},t.prototype.processLimit=function(){var t=Math.floor(+this.paginateSettings.limit/2);this.ranges=[];for(var e=0,n=10===(e=t%2==0?10:15)?101:106,i=e;i<n&&!(i>this.paginateSettings.data.total);i+=e)this.ranges.push(i)},t.prototype.updateLimit=function(t){this.paginateSettings.limit=+t,this.ngPureDataTableEventService.broadcast("resetLimitCalled",this.paginateSettings.limit)},t.prototype.setBorderColor=function(){return this.searchSettings.borderColor=this.searchSettings.borderColor?this.searchSettings.borderColor:"#eee000",{"border-bottom":"3px solid "+this.searchSettings.borderColor}},t.prototype.configSearchDisplay=function(){this.id=-1<this.id.indexOf("#")?this.id:"#"+this.id;var t=document.querySelector(this.id);this.top=t.getBoundingClientRect().top,this.top<50&&(this.style["margin-top"]="20px",this.limitStyle["margin-top"]=this.style["margin-top"],t.style.marginTop="80px");var e=this.searchSettings.positionStyle&&(this.searchSettings.positionStyle.right<=-1||0<=this.searchSettings.positionStyle.right)?this.searchSettings.positionStyle.right:"10px",n=this.searchSettings.positionStyle&&(0<=this.searchSettings.positionStyle.top||this.searchSettings.positionStyle.top<=-1)?this.searchSettings.positionStyle.top:null;"right"===this.searchSettings.position.toLowerCase()?(this.style.right=e+"px",this.limitStyle.left=this.style.right):(this.style.left=e+"px",this.limitStyle.right=this.style.left),this.top=n||(this.top&&50<this.top?this.top-50:this.top),this.style.top=this.top+"px",this.limitStyle.top=this.style.top},t}();v.decorators=[{type:e.Component,args:[{selector:"ng-pure-datatable",template:'\n <div *ngIf="paginateSettings.data">\n\n <div class="limit-style" *ngIf="limitStyle && !disablePaging" [ngStyle]="limitStyle">\n \x3c!--<label for="limit">Limit: </label>--\x3e\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 "]}]}],v.ctorParameters=function(){return[{type:y}]},v.propDecorators={key:[{type:e.Input}],id:[{type:e.Input}],disableSearch:[{type:e.Input}],disablePaging:[{type:e.Input}],paginateSettings:[{type:e.Input}],searchSettings:[{type:e.Input}]};var S=function(){function t(t){this.http=t}return t.prototype.listByPaginator=function(t){return this.http.get(t)},t}();S.decorators=[{type:e.Injectable}],S.ctorParameters=function(){return[{type:r.HttpClient}]};var x=function(){function t(t,e){var n=this;this.ngPaginateService=t,this.ngPureDataTableEventService=e,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(t){n.path=t}),this.ngPureDataTableEventService.on("resetLimitCalled",function(e){setTimeout(function(){var t=n.viewPage+"=1";n.limit=e,n.loadData(t+"&"+n.paginate+"="+n.limit,t)},200)})}return t.prototype.getPages=function(){for(var t=1;t<=this.data.last_page;t++)this.totalPages.push(t);var e=JSON.parse(JSON.stringify(this.perNavCopy));this.perNav=e.nav,this.getPaging()},t.prototype.getPaging=function(){this.perNav+=this.pages.length,this.pages=this.totalPages.slice(0,this.perNav)},t.prototype.loadData=function(t,e){var n=this,i="";i=-1===this.path.indexOf("?")?this.path+"?"+t:this.path+"&"+t,this.showLoad="string"==typeof e?parseInt(e.substr(e.indexOf("=")+1),10):e,this.ngPaginateService.listByPaginator(i).subscribe(function(t){n.showLoad>n.pages.length&&n.getPaging(),n.data=t.last_page?t:t.data||t.content||t.contents||t.resource||t.resources||t.list||t.items,n.nextPrevPage(),t.type="paging",n.ngPureDataTableEventService.broadcast(n.from,t),n.showLoad=0,n.total=n.data.total||n.limit,n.processPerNav()},function(t){t.type="paging",n.ngPureDataTableEventService.broadcast(n.from,t),n.showLoad=0})},t.prototype.processPerNav=function(){var t=this,e=Math.ceil(this.data.total/this.limit);this.perNav>e?setTimeout(function(){t.totalPages=t.totalPages.slice(0,e),t.pages=t.totalPages.slice(0,e)},200):setTimeout(function(){t.totalPages=[],t.pages=[],t.getPages()},200)},t.prototype.nextPrevPage=function(){var t=this.viewPage.trim()+"=";if(0===Object.keys(this.data).length)return null;if(this.data.next_page_url){var e=this.data.next_page_url.indexOf(t);this.next_page=this.data.next_page_url.substr(e).trim()}if(this.data.prev_page_url){var n=this.data.prev_page_url.indexOf(t);this.prev_page=this.data.prev_page_url.substr(n).trim()}},t.prototype.ngOnInit=function(){this.nextPrevPage(),this.getPages(),this.perNavCopy=JSON.parse(JSON.stringify({nav:this.perNav})),this.total=this.data.total||this.limit},t.prototype.ngAfterViewInit=function(){},t}();x.decorators=[{type:e.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 "]}]}],x.ctorParameters=function(){return[{type:S},{type:y}]},x.propDecorators={data:[{type:e.Input}],path:[{type:e.Input}],limit:[{type:e.Input}],from:[{type:e.Input}],perNav:[{type:e.Input}],viewPage:[{type:e.Input}],paginate:[{type:e.Input}],textColor:[{type:e.Input}]};var P=function(){function t(t){this.http=t,this.searched=[]}return t.prototype.initSearch=function(e,n,t){var i=this;void 0===n&&(n=""),this.searched=[],t&&0<t.length?t.forEach(function(t){i.startSearching(e,n,t)}):this.startSearching(e,n);var a=new f.ReplaySubject;return a.next(this.searched),s.Observable.from(a)},t.prototype.startSearching=function(t,n,i){var a=this;t.filter(function(t){var e=i?a.processObject(t,n,i):a.processObject(t,n);return e&&-1===a.searched.indexOf(t)&&a.searched.push(t),e})},t.prototype.processObject=function(t,e,n){var i=null;for(var a in t){if(i)break;var r=t[a];if(!r||n&&n!==a)i=!1;else switch(r.constructor){case Array:i=n?this.processArray(r,e,[n,a]):this.processArray(r,e);break;case Object:var s=Object.keys(r);if(n&&-1===s.indexOf(n)){i=!1;continue}i=n?this.processObject(r,e,n):this.processObject(r,e);break;case String:case Number:i=n?this.processValidation(r,e,[n,a]):this.processValidation(r,e);break;default:i=!1}}return!!i},t.prototype.processArray=function(t,n,i){var a=this;return t.filter(function(t){if(!t||i&&i[0]!==i[1])return!1;switch(t.constructor){case Array:return!!(i[0]?a.processArray(t,n,i):a.processArray(t,n));case Object:var e=Object.keys(t);return(!i[0]||-1!==e.indexOf(i[0]))&&(i[0]?a.processObject(t,n,i[0]):a.processObject(t,n));case String:case Number:return i[0]?a.processValidation(t,n,i):a.processValidation(t,n);default:return!1}}),t&&0<t.length},t.prototype.processValidation=function(t,e,n){return t=String(t).toLowerCase().trim(),e=String(e).toLowerCase().trim(),n?n[0]===n[1]&&-1<t.indexOf(e):-1<t.indexOf(e)},t.prototype.searchResource=function(t){return this.http.get(t)},t}();P.decorators=[{type:e.Injectable}],P.ctorParameters=function(){return[{type:r.HttpClient}]};var k=function(){function e(t,e){var n=this;this.ngSearchService=t,this.ngPureDataTableEventService=e,this.search$=new i.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:m.EMPTY_TABLE_APPLY_BACKEND},this.searching=!1,this.copyData=[],this.search$.distinctUntilChanged().debounceTime(400).subscribe(function(t){t&&1<t.length?n.doSearch(t):0===t.length&&n.ngPureDataTableEventService.broadcast(n.allSettings.from,{type:"search",result:n.copyData,data:n.copyData})},function(t){})}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(t){var e=this;if(this.copyData=JSON.parse(JSON.stringify(this.allSettings.data)),!t)return null;this.searching=!0,setTimeout(function(){switch(e.allSettings.searchType){case m.EMPTY_TABLE_APPLY_BACKEND:e.processSearching(m.EMPTY_TABLE_APPLY_BACKEND,t);break;case m.ON_BACKEND:e.doSearchBackend(t);break;case m.ON_TABLE:e.processSearching(m.ON_TABLE,t);break;default:s.Observable["throw"]("Unknown search type")}},200)},e.prototype.processSearching=function(e,n){var i=this;this.ngSearchService.initSearch(this.allSettings.data,n,this.allSettings.searchKeys).subscribe(function(t){0!==t.length||e!==m.EMPTY_TABLE_APPLY_BACKEND?(i.ngPureDataTableEventService.broadcast(i.allSettings.from,{type:"search",result:t,data:i.copyData}),i.searching=!1):i.doSearchBackend(n)},function(t){i.searching=!1,i.ngPureDataTableEventService.broadcast(i.allSettings.from,{type:"search",error:t,data:i.copyData})})},e.prototype.doSearchBackend=function(t){var e=this,n=-1<this.allSettings.path.indexOf("?")?this.allSettings.path+"&"+this.allSettings.queryField+"="+t:this.allSettings.path+"?"+this.allSettings.queryField+"="+t;this.ngSearchService.searchResource(n).subscribe(function(t){e.ngPureDataTableEventService.broadcast(e.allSettings.from,{type:"search",result:t,data:e.copyData}),e.searching=!1},function(t){e.searching=!1,e.ngPureDataTableEventService.broadcast(e.allSettings.from,{type:"search",error:t,data:e.copyData})})},e.prototype.ValidateSettings=function(){for(var t in this.allSettings)this.allSettings[t]||(this.allSettings[t]=e.defaultAllSettings[t])},e.prototype.ngOnInit=function(){this.ValidateSettings(),this.copyData=JSON.parse(JSON.stringify(this.allSettings.data))},e}();k.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:m.EMPTY_TABLE_APPLY_BACKEND},k.decorators=[{type:e.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 \x3c!--<i *ngIf="searching" class="fa fa-spin fa-spinner"></i>--\x3e\n \x3c!-- <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>--\x3e\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 "]}]}],k.ctorParameters=function(){return[{type:P},{type:y}]},k.propDecorators={allSettings:[{type:e.Input}]};var _=function(){function t(){}return t.forRoot=function(){return{ngModule:t,providers:[y,P,S]}},t}();_.decorators=[{type:e.NgModule,args:[{imports:[a.CommonModule,b.FormsModule,b.ReactiveFormsModule,r.HttpClientModule],declarations:[v,x,k],exports:[v,x,k]}]}],_.ctorParameters=function(){return[]},t.NgSearchTypesEnum=m,t.NgPureDataTableEventService=y,t.NgPureDatatableModule=_,t.ɵb=x,t.ɵc=S,t.ɵa=v,t.ɵd=k,t.ɵe=P,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=ng-pure-datatable.umd.min.js.map