ngx-config-datatable
Version:
use configuration to generate datatable
507 lines (495 loc) • 19.6 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ngx-config-datatable', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@angular/common'], factory) :
(global = global || self, factory(global['ngx-config-datatable'] = {}, global.ng.core, global.rxjs, global.rxjs.operators, global.ng.common));
}(this, function (exports, core, rxjs, operators, common) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function __values(o) {
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
if (m) return m.call(o);
return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BtnSortComponent = /** @class */ (function () {
function BtnSortComponent() {
this.clickLink = new core.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: core.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: core.Input }],
clickLink: [{ type: core.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 core.EventEmitter();
this.checkRowCommand = new core.EventEmitter();
this.sub = new rxjs.Subscription();
this.datatableSetting$ = new rxjs.BehaviorSubject(null);
this.data$ = new rxjs.BehaviorSubject([]);
this.rows = [];
this.footers = [];
this.headerChecked = false;
this.sub.add(rxjs.combineLatest(this.datatableSetting$, this.data$).pipe(operators.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: core.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: core.ContentChild, args: ['rowCommand', { static: true },] }],
isShowCheckbox: [{ type: core.Input }],
isShowRowNumber: [{ type: core.Input }],
className: [{ type: core.Input }],
datatableSetting: [{ type: core.Input }],
data: [{ type: core.Input }],
sortCommand: [{ type: core.Output }],
checkRowCommand: [{ type: core.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: core.NgModule, args: [{
declarations: [
BtnSortComponent,
DatatableComponent
],
imports: [
common.CommonModule
],
exports: [
BtnSortComponent,
DatatableComponent
]
},] }
];
return NgxConfigDatatableModule;
}());
exports.BtnSortComponent = BtnSortComponent;
exports.DatatableComponent = DatatableComponent;
exports.NgxConfigDatatableModule = NgxConfigDatatableModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ngx-config-datatable.umd.js.map