ngx-config-datatable
Version:
use configuration to generate datatable
458 lines (453 loc) • 15.4 kB
JavaScript
import { Component, Input, Output, EventEmitter, ContentChild, NgModule } from '@angular/core';
import { __values, __read } from 'tslib';
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
*/
var BtnSortComponent = /** @class */ (function () {
function BtnSortComponent() {
this.clickLink = new EventEmitter();
}
/**
* @return {?}
*/
BtnSortComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
/**
* @param {?} event
* @return {?}
*/
BtnSortComponent.prototype.click = /**
* @param {?} event
* @return {?}
*/
function (event) {
event.preventDefault();
event.stopImmediatePropagation();
if (!this.info.isSortable) {
return;
}
this.changeSort();
this.clickLink.emit(this.info);
};
/**
* @private
* @return {?}
*/
BtnSortComponent.prototype.changeSort = /**
* @private
* @return {?}
*/
function () {
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 = function () { return []; };
BtnSortComponent.propDecorators = {
info: [{ type: Input }],
clickLink: [{ type: Output }]
};
return BtnSortComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DatatableComponent = /** @class */ (function () {
function DatatableComponent() {
var _this = this;
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 {?}
*/
function (_a) {
var _b = __read(_a, 2), datatableSetting = _b[0], data = _b[1];
return datatableSetting ? true : false;
}))).subscribe((/**
* @param {?} __0
* @return {?}
*/
function (_a) {
var _b = __read(_a, 2), datatableSetting = _b[0], data = _b[1];
_this.render();
})));
}
Object.defineProperty(DatatableComponent.prototype, "datatableSetting", {
get: /**
* @return {?}
*/
function () {
return this.datatableSetting$.getValue();
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this.datatableSetting$.next(v);
},
enumerable: true,
configurable: true
});
Object.defineProperty(DatatableComponent.prototype, "data", {
get: /**
* @return {?}
*/
function () {
return this.data$.getValue();
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this.data$.next(v);
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
DatatableComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.sub.unsubscribe();
};
/**
* @private
* @return {?}
*/
DatatableComponent.prototype.render = /**
* @private
* @return {?}
*/
function () {
this.rows = [];
this.footers = [];
this.addRows();
this.addSummaryRow();
};
/**
* @param {?} sortInfo
* @return {?}
*/
DatatableComponent.prototype.changeSort = /**
* @param {?} sortInfo
* @return {?}
*/
function (sortInfo) {
var e_1, _a;
try {
for (var _b = __values(this.datatableSetting.headers), _c = _b.next(); !_c.done; _c = _b.next()) {
var item = _c.value;
if (item.propName !== sortInfo.propName) {
item.sort = 'none';
}
else {
item.sort = sortInfo.sort;
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
this.sortCommand.emit(sortInfo);
};
/**
* @param {?} event
* @return {?}
*/
DatatableComponent.prototype.headerCheckIt = /**
* @param {?} event
* @return {?}
*/
function (event) {
var e_2, _a;
event.preventDefault();
this.headerChecked = !this.headerChecked;
try {
for (var _b = __values(this.rows), _c = _b.next(); !_c.done; _c = _b.next()) {
var row = _c.value;
// tslint:disable-next-line:no-string-literal
row['cbk__checked'] = this.headerChecked;
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_2) throw e_2.error; }
}
this.checkAllCheckbox();
};
/**
* @param {?} event
* @param {?} row
* @return {?}
*/
DatatableComponent.prototype.rowCheckIt = /**
* @param {?} event
* @param {?} row
* @return {?}
*/
function (event, row) {
event.preventDefault();
this.checkAllCheckbox();
};
/**
* @private
* @return {?}
*/
DatatableComponent.prototype.checkAllCheckbox = /**
* @private
* @return {?}
*/
function () {
// tslint:disable-next-line:no-string-literal
this.headerChecked = !this.rows.some((/**
* @param {?} a
* @return {?}
*/
function (a) { return !a['cbk__checked']; }));
// tslint:disable-next-line:no-string-literal
/** @type {?} */
var ids = this.rows.filter((/**
* @param {?} a
* @return {?}
*/
function (a) { return !!a['cbk__checked']; })).map((/**
* @param {?} a
* @return {?}
*/
function (a) { return a.id; }));
this.checkRowCommand.emit(ids);
};
/**
* @private
* @return {?}
*/
DatatableComponent.prototype.addRows = /**
* @private
* @return {?}
*/
function () {
var e_3, _a, e_4, _b;
this.checkDatatableSetting();
try {
for (var _c = __values(this.data), _d = _c.next(); !_d.done; _d = _c.next()) {
var row = _d.value;
/** @type {?} */
var cs = {
id: row.id,
rowData: row,
columns: []
};
try {
for (var _e = __values(this.datatableSetting.headers), _f = _e.next(); !_f.done; _f = _e.next()) {
var item = _f.value;
if (!item.isEnabled) {
continue;
}
/** @type {?} */
var vv = row[item.propName];
if (item.converter) {
vv = item.converter.to(vv);
}
cs.columns.push({
isHtml: item.isHtml,
content: vv
});
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
}
finally { if (e_4) throw e_4.error; }
}
this.rows.push(cs);
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
}
finally { if (e_3) throw e_3.error; }
}
};
/**
* @private
* @return {?}
*/
DatatableComponent.prototype.addSummaryRow = /**
* @private
* @return {?}
*/
function () {
var e_5, _a, e_6, _b;
this.checkDatatableSetting();
/** @type {?} */
var fs = {
id: '',
rowData: { id: '' },
columns: []
};
if (!this.datatableSetting.headers.some((/**
* @param {?} a
* @return {?}
*/
function (a) { return a.isSum; }))) {
return;
}
try {
for (var _c = __values(this.datatableSetting.headers), _d = _c.next(); !_d.done; _d = _c.next()) {
var item = _d.value;
if (!item.isEnabled) {
continue;
}
if (!item.isSum) {
fs.columns.push({
isHtml: item.isHtml,
content: ''
});
continue;
}
/** @type {?} */
var tTotal = 0;
try {
for (var _e = __values(this.data), _f = _e.next(); !_f.done; _f = _e.next()) {
var row = _f.value;
/** @type {?} */
var vv = row[item.propName];
tTotal += +vv;
}
}
catch (e_6_1) { e_6 = { error: e_6_1 }; }
finally {
try {
if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
}
finally { if (e_6) throw e_6.error; }
}
if (item.converter) {
tTotal = item.converter.to(tTotal);
}
fs.columns.push({
isHtml: item.isHtml,
content: tTotal
});
}
}
catch (e_5_1) { e_5 = { error: e_5_1 }; }
finally {
try {
if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
}
finally { if (e_5) throw e_5.error; }
}
this.footers.push(fs);
};
/**
* @private
* @return {?}
*/
DatatableComponent.prototype.checkDatatableSetting = /**
* @private
* @return {?}
*/
function () {
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 = function () { return []; };
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 }]
};
return DatatableComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxConfigDatatableModule = /** @class */ (function () {
function NgxConfigDatatableModule() {
}
NgxConfigDatatableModule.decorators = [
{ type: NgModule, args: [{
declarations: [
BtnSortComponent,
DatatableComponent
],
imports: [
CommonModule
],
exports: [
BtnSortComponent,
DatatableComponent
]
},] }
];
return NgxConfigDatatableModule;
}());
export { BtnSortComponent, DatatableComponent, NgxConfigDatatableModule };
//# sourceMappingURL=ngx-config-datatable.js.map