ngx-config-datatable
Version:
use configuration to generate datatable
2 lines • 7.66 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-config-datatable",["exports","@angular/core","rxjs","rxjs/operators","@angular/common"],e):e((t=t||self)["ngx-config-datatable"]={},t.ng.core,t.rxjs,t.rxjs.operators,t.ng.common)}(this,function(t,e,n,o,r){"use strict";function a(t){var e="function"==typeof Symbol&&t[Symbol.iterator],n=0;return e?e.call(t):{next:function(){return t&&n>=t.length&&(t=void 0),{value:t&&t[n++],done:!t}}}}function i(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var o,r,a=n.call(t),i=[];try{for(;(void 0===e||e-- >0)&&!(o=a.next()).done;)i.push(o.value)}catch(c){r={error:c}}finally{try{o&&!o.done&&(n=a["return"])&&n.call(a)}finally{if(r)throw r.error}}return i}var c=function(){function t(){this.clickLink=new e.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.click=function(t){t.preventDefault(),t.stopImmediatePropagation(),this.info.isSortable&&(this.changeSort(),this.clickLink.emit(this.info))},t.prototype.changeSort=function(){"none"!==this.info.sort?"asc"!==this.info.sort?"desc"!==this.info.sort||(this.info.sort="asc"):this.info.sort="desc":this.info.sort="asc"},t.decorators=[{type:e.Component,args:[{selector:"cdt-btn-sort",template:'<a href="#" [class]="info.sort" [ngClass]="{\'noneSort\': !info.isSortable}" (click)="click($event)">\n {{info.text}}\n</a>\n\n',styles:['@charset "UTF-8";a{color:inherit}a.asc::after{content:"⇂"}a.desc::after{content:"↾"}a.none::after{font-size:.8rem;content:"⇌";display:inline-block;-webkit-transform:rotate(90deg);transform:rotate(90deg)}a.noneSort::after{content:""}']}]}],t.ctorParameters=function(){return[]},t.propDecorators={info:[{type:e.Input}],clickLink:[{type:e.Output}]},t}(),s=function(){function t(){var t=this;this.isShowCheckbox=!0,this.isShowRowNumber=!0,this.className="",this.sortCommand=new e.EventEmitter,this.checkRowCommand=new e.EventEmitter,this.sub=new n.Subscription,this.datatableSetting$=new n.BehaviorSubject(null),this.data$=new n.BehaviorSubject([]),this.rows=[],this.footers=[],this.headerChecked=!1,this.sub.add(n.combineLatest(this.datatableSetting$,this.data$).pipe(o.filter(function(t){var e=i(t,2),n=e[0];e[1];return!!n})).subscribe(function(e){var n=i(e,2);n[0],n[1];t.render()}))}return Object.defineProperty(t.prototype,"datatableSetting",{get:function(){return this.datatableSetting$.getValue()},set:function(t){this.datatableSetting$.next(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"data",{get:function(){return this.data$.getValue()},set:function(t){this.data$.next(t)},enumerable:!0,configurable:!0}),t.prototype.ngOnDestroy=function(){this.sub.unsubscribe()},t.prototype.render=function(){this.rows=[],this.footers=[],this.addRows(),this.addSummaryRow()},t.prototype.changeSort=function(t){var e,n;try{for(var o=a(this.datatableSetting.headers),r=o.next();!r.done;r=o.next()){var i=r.value;i.propName!==t.propName?i.sort="none":i.sort=t.sort}}catch(c){e={error:c}}finally{try{r&&!r.done&&(n=o["return"])&&n.call(o)}finally{if(e)throw e.error}}this.sortCommand.emit(t)},t.prototype.headerCheckIt=function(t){var e,n;t.preventDefault(),this.headerChecked=!this.headerChecked;try{for(var o=a(this.rows),r=o.next();!r.done;r=o.next()){r.value.cbk__checked=this.headerChecked}}catch(i){e={error:i}}finally{try{r&&!r.done&&(n=o["return"])&&n.call(o)}finally{if(e)throw e.error}}this.checkAllCheckbox()},t.prototype.rowCheckIt=function(t,e){t.preventDefault(),this.checkAllCheckbox()},t.prototype.checkAllCheckbox=function(){this.headerChecked=!this.rows.some(function(t){return!t.cbk__checked});var t=this.rows.filter(function(t){return!!t.cbk__checked}).map(function(t){return t.id});this.checkRowCommand.emit(t)},t.prototype.addRows=function(){var t,e,n,o;this.checkDatatableSetting();try{for(var r=a(this.data),i=r.next();!i.done;i=r.next()){var c=i.value,s={id:c.id,rowData:c,columns:[]};try{for(var l=a(this.datatableSetting.headers),h=l.next();!h.done;h=l.next()){var u=h.value;if(u.isEnabled){var d=c[u.propName];u.converter&&(d=u.converter.to(d)),s.columns.push({isHtml:u.isHtml,content:d})}}}catch(f){n={error:f}}finally{try{h&&!h.done&&(o=l["return"])&&o.call(l)}finally{if(n)throw n.error}}this.rows.push(s)}}catch(p){t={error:p}}finally{try{i&&!i.done&&(e=r["return"])&&e.call(r)}finally{if(t)throw t.error}}},t.prototype.addSummaryRow=function(){var t,e,n,o;this.checkDatatableSetting();var r={id:"",rowData:{id:""},columns:[]};if(this.datatableSetting.headers.some(function(t){return t.isSum})){try{for(var i=a(this.datatableSetting.headers),c=i.next();!c.done;c=i.next()){var s=c.value;if(s.isEnabled)if(s.isSum){var l=0;try{for(var h=a(this.data),u=h.next();!u.done;u=h.next()){l+=+u.value[s.propName]}}catch(d){n={error:d}}finally{try{u&&!u.done&&(o=h["return"])&&o.call(h)}finally{if(n)throw n.error}}s.converter&&(l=s.converter.to(l)),r.columns.push({isHtml:s.isHtml,content:l})}else r.columns.push({isHtml:s.isHtml,content:""})}}catch(f){t={error:f}}finally{try{c&&!c.done&&(e=i["return"])&&e.call(i)}finally{if(t)throw t.error}}this.footers.push(r)}},t.prototype.checkDatatableSetting=function(){if(!this.datatableSetting)throw new Error("please set up the datatableSetting property")},t.decorators=[{type:e.Component,args:[{selector:"cdt-datatable",template:'<table *ngIf="datatableSetting" [class]="className">\n <thead>\n <tr>\n <th *ngIf="isShowCheckbox">\n <input type="checkbox" \n [checked]=" headerChecked"\n (change)="headerCheckIt($event)">\n </th>\n <th *ngIf="isShowRowNumber">#</th>\n <th [ngClass]="{\'d-none\': !item.isEnabled}" *ngFor="let item of datatableSetting.headers">\n <cdt-btn-sort [info]="item" (clickLink)="changeSort($event)"></cdt-btn-sort>\n </th>\n <th></th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor="let row of rows; let i=index">\n\n <td *ngIf="isShowCheckbox">\n <input type="checkbox" \n [checked]="!!row.cbk__checked" \n (change)="row.cbk__checked=!row.cbk__checked;rowCheckIt($event, row)">\n </td>\n\n <td *ngIf="isShowRowNumber"><span>{{i+1}}</span></td>\n\n <ng-container *ngFor="let column of row.columns">\n <td *ngIf="column.isHtml" [innerHTML]="column.content"></td>\n <td *ngIf="!column.isHtml" [innerText]="column.content"></td>\n </ng-container>\n\n <td>\n <ng-container *ngTemplateOutlet="rowTmpl, context: { $implicit: row }"></ng-container>\n </td>\n\n </tr>\n </tbody>\n <tfoot>\n <tr *ngFor="let row of footers">\n <th *ngIf="isShowCheckbox">\n </th>\n <th *ngIf="isShowRowNumber"></th>\n <ng-container *ngFor="let column of row.columns">\n <td>{{column.content}}</td>\n </ng-container>\n <th>\n </th>\n </tr>\n </tfoot>\n</table>',styles:[""]}]}],t.ctorParameters=function(){return[]},t.propDecorators={rowTmpl:[{type:e.ContentChild,args:["rowCommand",{"static":!0}]}],isShowCheckbox:[{type:e.Input}],isShowRowNumber:[{type:e.Input}],className:[{type:e.Input}],datatableSetting:[{type:e.Input}],data:[{type:e.Input}],sortCommand:[{type:e.Output}],checkRowCommand:[{type:e.Output}]},t}(),l=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[c,s],imports:[r.CommonModule],exports:[c,s]}]}],t}();t.BtnSortComponent=c,t.DatatableComponent=s,t.NgxConfigDatatableModule=l,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-config-datatable.umd.min.js.map