ngx-config-datatable
Version:
use configuration to generate datatable
328 lines (323 loc) • 10.5 kB
JavaScript
import { EventEmitter, Component, Input, Output, ContentChild, NgModule } from '@angular/core';
import { Subscription, BehaviorSubject, combineLatest } from 'rxjs';
import { filter } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class BtnSortComponent {
constructor() {
this.clickLink = new EventEmitter();
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @param {?} event
* @return {?}
*/
click(event) {
event.preventDefault();
event.stopImmediatePropagation();
if (!this.info.isSortable) {
return;
}
this.changeSort();
this.clickLink.emit(this.info);
}
/**
* @private
* @return {?}
*/
changeSort() {
if (this.info.sort === 'none') {
this.info.sort = 'asc';
return;
}
if (this.info.sort === 'asc') {
this.info.sort = 'desc';
return;
}
if (this.info.sort === 'desc') {
this.info.sort = 'asc';
return;
}
}
}
BtnSortComponent.decorators = [
{ type: 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:\"\u21C2\"}a.desc::after{content:\"\u21BE\"}a.none::after{font-size:.8rem;content:\"\u21CC\";display:inline-block;-webkit-transform:rotate(90deg);transform:rotate(90deg)}a.noneSort::after{content:\"\"}"]
}] }
];
/** @nocollapse */
BtnSortComponent.ctorParameters = () => [];
BtnSortComponent.propDecorators = {
info: [{ type: Input }],
clickLink: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class DatatableComponent {
constructor() {
this.isShowCheckbox = true;
this.isShowRowNumber = true;
this.className = '';
this.sortCommand = new EventEmitter();
this.checkRowCommand = new EventEmitter();
this.sub = new Subscription();
this.datatableSetting$ = new BehaviorSubject(null);
this.data$ = new BehaviorSubject([]);
this.rows = [];
this.footers = [];
this.headerChecked = false;
this.sub.add(combineLatest(this.datatableSetting$, this.data$).pipe(filter((/**
* @param {?} __0
* @return {?}
*/
([datatableSetting, data]) => datatableSetting ? true : false))).subscribe((/**
* @param {?} __0
* @return {?}
*/
([datatableSetting, data]) => {
this.render();
})));
}
/**
* @param {?} v
* @return {?}
*/
set datatableSetting(v) {
this.datatableSetting$.next(v);
}
/**
* @return {?}
*/
get datatableSetting() {
return this.datatableSetting$.getValue();
}
/**
* @param {?} v
* @return {?}
*/
set data(v) {
this.data$.next(v);
}
/**
* @return {?}
*/
get data() {
return this.data$.getValue();
}
/**
* @return {?}
*/
ngOnDestroy() {
this.sub.unsubscribe();
}
/**
* @private
* @return {?}
*/
render() {
this.rows = [];
this.footers = [];
this.addRows();
this.addSummaryRow();
}
/**
* @param {?} sortInfo
* @return {?}
*/
changeSort(sortInfo) {
for (const item of this.datatableSetting.headers) {
if (item.propName !== sortInfo.propName) {
item.sort = 'none';
}
else {
item.sort = sortInfo.sort;
}
}
this.sortCommand.emit(sortInfo);
}
/**
* @param {?} event
* @return {?}
*/
headerCheckIt(event) {
event.preventDefault();
this.headerChecked = !this.headerChecked;
for (const row of this.rows) {
// tslint:disable-next-line:no-string-literal
row['cbk__checked'] = this.headerChecked;
}
this.checkAllCheckbox();
}
/**
* @param {?} event
* @param {?} row
* @return {?}
*/
rowCheckIt(event, row) {
event.preventDefault();
this.checkAllCheckbox();
}
/**
* @private
* @return {?}
*/
checkAllCheckbox() {
// tslint:disable-next-line:no-string-literal
this.headerChecked = !this.rows.some((/**
* @param {?} a
* @return {?}
*/
a => !a['cbk__checked']));
// tslint:disable-next-line:no-string-literal
/** @type {?} */
const ids = this.rows.filter((/**
* @param {?} a
* @return {?}
*/
a => !!a['cbk__checked'])).map((/**
* @param {?} a
* @return {?}
*/
a => a.id));
this.checkRowCommand.emit(ids);
}
/**
* @private
* @return {?}
*/
addRows() {
this.checkDatatableSetting();
for (const row of this.data) {
/** @type {?} */
const cs = {
id: row.id,
rowData: row,
columns: []
};
for (const item of this.datatableSetting.headers) {
if (!item.isEnabled) {
continue;
}
/** @type {?} */
let vv = row[item.propName];
if (item.converter) {
vv = item.converter.to(vv);
}
cs.columns.push({
isHtml: item.isHtml,
content: vv
});
}
this.rows.push(cs);
}
}
/**
* @private
* @return {?}
*/
addSummaryRow() {
this.checkDatatableSetting();
/** @type {?} */
const fs = {
id: '',
rowData: { id: '' },
columns: []
};
if (!this.datatableSetting.headers.some((/**
* @param {?} a
* @return {?}
*/
a => a.isSum))) {
return;
}
for (const item of this.datatableSetting.headers) {
if (!item.isEnabled) {
continue;
}
if (!item.isSum) {
fs.columns.push({
isHtml: item.isHtml,
content: ''
});
continue;
}
/** @type {?} */
let tTotal = 0;
for (const row of this.data) {
/** @type {?} */
const vv = row[item.propName];
tTotal += +vv;
}
if (item.converter) {
tTotal = item.converter.to(tTotal);
}
fs.columns.push({
isHtml: item.isHtml,
content: tTotal
});
}
this.footers.push(fs);
}
/**
* @private
* @return {?}
*/
checkDatatableSetting() {
if (!this.datatableSetting) {
throw new Error('please set up the datatableSetting property');
}
}
}
DatatableComponent.decorators = [
{ type: 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: [""]
}] }
];
/** @nocollapse */
DatatableComponent.ctorParameters = () => [];
DatatableComponent.propDecorators = {
rowTmpl: [{ type: ContentChild, args: ['rowCommand', { static: true },] }],
isShowCheckbox: [{ type: Input }],
isShowRowNumber: [{ type: Input }],
className: [{ type: Input }],
datatableSetting: [{ type: Input }],
data: [{ type: Input }],
sortCommand: [{ type: Output }],
checkRowCommand: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NgxConfigDatatableModule {
}
NgxConfigDatatableModule.decorators = [
{ type: NgModule, args: [{
declarations: [
BtnSortComponent,
DatatableComponent
],
imports: [
CommonModule
],
exports: [
BtnSortComponent,
DatatableComponent
]
},] }
];
export { BtnSortComponent, DatatableComponent, NgxConfigDatatableModule };
//# sourceMappingURL=ngx-config-datatable.js.map