ngx-table-powerfull
Version:
Table with catalog of functionalities for free use based on the ngx-datatable component and other components
981 lines (962 loc) • 274 kB
JavaScript
import { __decorate, __param, __spread, __awaiter, __generator } from 'tslib';
import { Injectable, Inject, Component, ViewEncapsulation, EventEmitter, ViewChild, Input, Output, HostListener, NgModule } from '@angular/core';
import { Subject, fromEvent } from 'rxjs';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { debounceTime, map } from 'rxjs/operators';
import { saveAs } from 'file-saver';
import { utils, write } from 'xlsx';
import * as jsPDF from 'jspdf';
import 'jspdf-autotable';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogConfig, MatDialog, MatAutocompleteModule, MatBadgeModule, MatBottomSheetModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatDividerModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatStepperModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, MatTreeModule } from '@angular/material';
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
import { A11yModule } from '@angular/cdk/a11y';
import { BidiModule } from '@angular/cdk/bidi';
import { ObserversModule } from '@angular/cdk/observers';
import { OverlayModule } from '@angular/cdk/overlay';
import { PlatformModule } from '@angular/cdk/platform';
import { PortalModule } from '@angular/cdk/portal';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
var Queue = /** @class */ (function () {
function Queue(name) {
this.name = name;
this.event = new Subject();
}
return Queue;
}());
var NotificationNgxService = /** @class */ (function () {
function NotificationNgxService() {
this.queues = [];
}
NotificationNgxService.prototype.create_queue = function (name) {
var queue = new Queue(name);
this.queues.push(queue);
return queue;
};
NotificationNgxService.prototype.raise = function (name, event) {
var queue = (this.queues.find(function (q) { return q.name === name; }) || this.create_queue(name));
queue.event.next(event);
return queue;
};
NotificationNgxService.prototype.on = function (name) {
var queue = (this.queues.find(function (q) { return q.name === name; }) || this.create_queue(name));
return queue.event;
};
;
NotificationNgxService = __decorate([
Injectable()
], NotificationNgxService);
return NotificationNgxService;
}());
var AttributesModel = /** @class */ (function () {
function AttributesModel(item) {
if (!!item) {
Object.assign(this, item);
}
}
return AttributesModel;
}());
var AttributesTypes;
(function (AttributesTypes) {
AttributesTypes["CLASS"] = "class";
AttributesTypes["HREF"] = "href";
AttributesTypes["ID"] = "id";
AttributesTypes["STYLE"] = "style";
})(AttributesTypes || (AttributesTypes = {}));
var SortTableModel = /** @class */ (function () {
function SortTableModel(item) {
if (!!item) {
Object.assign(this, item);
}
}
return SortTableModel;
}());
var SumaryColumnModel = /** @class */ (function () {
function SumaryColumnModel(item) {
this.type = null;
this.unit = '';
if (!!item) {
Object.assign(this, item);
}
}
return SumaryColumnModel;
}());
var SumaryTypes;
(function (SumaryTypes) {
SumaryTypes[SumaryTypes["SUM"] = 0] = "SUM";
SumaryTypes[SumaryTypes["AVERAGE"] = 1] = "AVERAGE";
SumaryTypes[SumaryTypes["MAX"] = 2] = "MAX";
SumaryTypes[SumaryTypes["MIN"] = 3] = "MIN";
})(SumaryTypes || (SumaryTypes = {}));
var FunctionTypes = [
{ name: 'total', type: SumaryTypes.SUM },
{ name: 'avarage', type: SumaryTypes.AVERAGE },
{ name: 'maximum', type: SumaryTypes.MAX },
{ name: 'minimum', type: SumaryTypes.MIN },
];
var ColumnTableModel = /** @class */ (function () {
function ColumnTableModel(item) {
this.action = null;
this.index = false;
this.hide = false;
this.tag = null;
this.attributes = [];
this.editable = false;
this.sortable = true;
this.sort = new SortTableModel({ numeric: true });
this.tooltip = false;
this.tooltipText = '';
this.sumary = [];
this.predefinedData = null;
this.visible = true;
this.fixed = false;
this.filtered = true;
if (!!item) {
Object.assign(this, item);
this.attributes = (!!item.attributes) ? item.attributes.map(function (a) { return new AttributesModel(a); }) : [];
this.sort = (!!item.sort) ? new SortTableModel(item.sort) : new SortTableModel({ numeric: true });
(item.sumary || []).map(function (s) { return new SumaryColumnModel(s); });
this.hide = (!!item.index) ? item.hide : false;
}
}
return ColumnTableModel;
}());
var TagTypes;
(function (TagTypes) {
TagTypes["ICON"] = "i";
TagTypes["LINK"] = "a";
TagTypes["BUTTON"] = "button";
})(TagTypes || (TagTypes = {}));
var EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
var EXCEL_EXTENSION = '.xlsx';
var NgxTableService = /** @class */ (function () {
function NgxTableService() {
}
NgxTableService.prototype.exportAsExcelFile = function (json, excelFileName, col) {
var worksheet = utils.json_to_sheet(json);
var wscols = [];
for (var i = 0; i < col; i++) {
wscols.push({ wch: 25 });
}
worksheet["!cols"] = wscols;
var workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
var excelBuffer = write(workbook, { bookType: 'xlsx', type: 'array' });
this.saveAsExcelFile(excelBuffer, excelFileName);
};
NgxTableService.prototype.saveAsExcelFile = function (buffer, fileName) {
var data = new Blob([buffer], {
type: EXCEL_TYPE
});
saveAs(data, fileName + '_' + new Date().getTime() + EXCEL_EXTENSION);
};
NgxTableService.prototype.exportAsPdf = function (fileName, columns, rows) {
var doc = new jsPDF();
doc.autoTable({
head: columns,
body: rows,
didDrawCell: function (data) {
//console.log(data.column.index)
},
});
doc.save(fileName + '_' + new Date().getTime() + ".pdf");
};
NgxTableService = __decorate([
Injectable()
], NgxTableService);
return NgxTableService;
}());
var LanguageModel = /** @class */ (function () {
function LanguageModel(item) {
this.selectColumns = '';
this.filterResults = '';
this.rows = '';
this.row = '';
this.emptyMessage = '';
this.selectAll = '';
this.unSelectAll = '';
this.search = '';
this.generated = '';
this.total = '';
this.avarage = '';
this.maximum = '';
this.minimum = '';
this.deleteRow = '';
this.close = '';
this.save = '';
this.column = '';
this.columns = '';
this.show = '';
this.fix = '';
this.name = '';
this.predefinedContent = '';
this.position = '';
this.newPosition = '';
this.editable = '';
this.applyFunction = '';
this.units = '';
this.accept = '';
this.configureFilter = '';
this.closeConfigure = '';
this.configureColumns = '';
this.editColumn = '';
this.newColumn = '';
this.deleteColumn = '';
this.export = '';
this.maximize = '';
this.restore = '';
this.visualize = '';
if (!!item) {
Object.assign(this, item);
}
}
return LanguageModel;
}());
var Language = [
{
name: 'spanish',
setting: {
selectColumns: 'Seleccionar Columnas',
filterResults: 'Filtrar resultados',
rows: 'Filas',
row: 'Fila',
emptyMessage: 'No se encontro ningún resultado',
selectAll: 'Marcar Todas',
unSelectAll: 'Desmarcar Todas',
search: 'Buscar',
generated: 'Generada',
total: 'Total',
avarage: 'Media',
maximum: 'Máximo',
minimum: 'Mínimo',
deleteRow: 'Eliminar fila',
close: 'Cerrar',
save: 'Guardar',
column: 'Columna',
columns: 'Columnas',
show: 'Mostrar',
fix: 'Fijar',
name: 'Nombre',
predefinedContent: 'Contenido predefinido',
position: 'Posición',
newPosition: 'Nueva posición',
editable: 'Editable',
applyFunction: 'Aplicar función',
units: 'Ud.',
accept: 'Aceptar',
configureFilter: 'Configurar filtro',
closeConfigure: 'Cerrar configuración',
configureColumns: 'Configurar columnas',
editColumn: 'Editar columna',
newColumn: 'Nueva columna',
deleteColumn: 'Eliminar columna',
export: 'Exportar',
maximize: 'Maximizar',
restore: 'Restaurar',
visualize: 'Visualizar'
}
},
{
name: 'english',
setting: {
selectColumns: 'Select Columns',
filterResults: 'Filter results',
rows: 'Rows',
row: 'Row',
emptyMessage: 'No data to display',
selectAll: 'Select All',
unSelectAll: 'UnSelect All',
search: 'Search',
generated: 'Generated',
total: 'Total',
avarage: 'Average',
maximum: 'Maximum',
minimum: 'Minimum',
deleteRow: 'Delete row',
close: 'Close',
save: 'Save',
column: 'Column',
columns: 'Columns',
show: 'Show',
fix: 'Fix',
name: 'Name',
predefinedContent: 'Predefined content',
position: 'Position',
newPosition: 'New position',
editable: 'Editable',
applyFunction: 'Apply function',
units: 'Unit',
accept: 'Accept',
configureFilter: 'Configure filter',
closeConfigure: 'Close setting',
configureColumns: 'Configure column',
editColumn: 'Edit columns',
newColumn: 'New column',
deleteColumn: 'Delete column',
export: 'Export',
maximize: 'Maximize',
restore: 'Restore',
visualize: 'Visualize'
}
}
];
var LanguageBuildModel = /** @class */ (function () {
function LanguageBuildModel(item) {
if (!!item) {
Object.assign(this, item);
this.setting = (!!item.setting) ? new LanguageModel(item.setting) : null;
}
}
return LanguageBuildModel;
}());
var ConfigTableModel = /** @class */ (function () {
function ConfigTableModel(item) {
this.visibleTitle = true;
this.filter = true;
this.filterByColumn = true;
this.fullscreen = true;
this.exportExcel = true;
this.exportPdf = true;
this.editableColumns = true;
this.configureColumns = true;
this.addColumn = true;
this.editColumn = true;
this.deleteColumn = true;
this.sortable = true;
this.resizeColumns = true;
this.limitResult = 0;
this.striped = true;
this.singleSelection = true;
this.multipleSelection = true;
this.multipleButtonText = '';
this.visibleNumberRowsButton = true;
this.viewDialogTable = true;
this.collapsed = false;
this.subtractHeight = 550;
this.subtractHeightCollapsed = 788;
this.positionSumary = 'left';
this.primaryColor = '#17703E';
this.secondaryColor = '#EC7063';
this.hoverRowColor = '#0066363d';
this.headerBackground = '#fff';
this.headerFontColor = '#757575';
this.borderTableColor = '#EEEFF0';
this.cardBody = true;
this.rowHeight = 50;
this.footerHeight = 50;
this.sumaryFooterHeight = 50;
this.headerHeight = 50;
this.classTable = 'boostrap';
this.language = new LanguageBuildModel(Language[0]).setting;
if (!!item) {
Object.assign(this, item);
if (!!item.language)
(!!(item.language instanceof LanguageModel)) ? this.language = new LanguageModel(item.language) : this.buildLanguage(item.language);
this.multipleButtonText = (!!item.multipleButtonText) ? item.multipleButtonText : this.language.visualize;
}
}
ConfigTableModel.prototype.buildLanguage = function (language) {
if (!language.name)
return;
var languageSelect = Language.find(function (l) { return l.name === language.name; }) || null;
if (!!languageSelect)
this.language = (!!language.setting) ? Object.assign(new LanguageModel(languageSelect.setting), language.setting) : new LanguageModel(languageSelect.setting);
else
this.language = new LanguageModel(language.setting);
};
return ConfigTableModel;
}());
var ClassesAvailable = ['boostrap', 'material'];
var NgxTableDialogComponent = /** @class */ (function () {
function NgxTableDialogComponent(dialogRef, data, notification) {
this.dialogRef = dialogRef;
this.data = data;
this.notification = notification;
this.indexNewColumn = 0;
this.tableConfig = new ConfigTableModel({
primaryColor: this.data.config.primaryColor,
secondaryColor: this.data.config.secondaryColor,
hoverRowColor: this.data.config.hoverRowColor,
headerBackground: this.data.config.headerBackground,
headerFontColor: this.data.config.headerFontColor,
borderTableColor: this.data.config.borderTableColor,
multipleSelection: false,
classTable: this.data.config.classTable,
language: this.data.config.language
});
}
NgxTableDialogComponent.prototype.ngOnInit = function () {
var columnClose = {
prop: 'delete',
name: '',
action: 'delete',
predefinedData: 'delete',
tooltip: true,
tooltipText: this.data.config.language.deleteRow,
tag: TagTypes.ICON,
attributes: [
new AttributesModel({
name: AttributesTypes.CLASS,
value: 'material-icons delete-icon'
})
]
};
this.rows = JSON.parse(JSON.stringify(this.data.rows));
this.columns = (this.data.columns.filter(function (c) { return !c.action; })).map(function (c) { return new ColumnTableModel(c); });
this.columns.push(new ColumnTableModel(columnClose));
};
NgxTableDialogComponent.prototype.ngAfterViewInit = function () {
setTimeout(function () { return window.dispatchEvent(new Event('resize')); }, 100);
setTimeout(function () { return window.dispatchEvent(new Event('resize')); }, 200);
};
NgxTableDialogComponent.prototype.eventRow = function (e) {
var _this = this;
if (e.name === 'delete') {
this.rows.forEach(function (r, i) {
if (r.id === e.row.id) {
_this.rows.splice(i, 1);
_this.notification.raise(_this.data.name, { rows: _this.rows });
return;
}
});
}
};
NgxTableDialogComponent.prototype.close = function () {
this.dialogRef.close();
};
NgxTableDialogComponent.ctorParameters = function () { return [
{ type: MatDialogRef },
{ type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] },
{ type: NotificationNgxService }
]; };
NgxTableDialogComponent = __decorate([
Component({
selector: 'ngx-table-dialog-component',
template: "<div class=\"dialog\"> \r\n <mat-dialog-content>\r\n <ngx-table-powerfull [config]=\"tableConfig\" [name]=\"data.name\" [columns]=\"columns\" [data]=\"rows\" [viewDialog]=\"'true'\" (event)=\"eventRow($event)\"></ngx-table-powerfull>\r\n </mat-dialog-content>\r\n</div>",
styles: ["mat-dialog-content{margin:-20px!important}"]
}),
__param(1, Inject(MAT_DIALOG_DATA))
], NgxTableDialogComponent);
return NgxTableDialogComponent;
}());
var NotificationTableModel = /** @class */ (function () {
function NotificationTableModel(item) {
this.collapsed = null;
this.rows = [];
this.columns = [];
this.visibleDataTable = false;
this.dataTable = false;
this.exportExcel = false;
this.exportPdf = false;
if (!!item) {
Object.assign(this, item);
this.columns = (!!item.columns) ? item.columns.map(function (c) { return new ColumnTableModel(c); }) : [];
}
}
return NotificationTableModel;
}());
var ActionColumnType;
(function (ActionColumnType) {
ActionColumnType[ActionColumnType["ADD"] = 1] = "ADD";
ActionColumnType[ActionColumnType["EDIT"] = 2] = "EDIT";
ActionColumnType[ActionColumnType["DELETE"] = 3] = "DELETE";
})(ActionColumnType || (ActionColumnType = {}));
;
var EditColumnDialogComponent = /** @class */ (function () {
function EditColumnDialogComponent(dialogRef, data) {
this.dialogRef = dialogRef;
this.data = data;
this.nameColumn = '';
this.predefinedText = '-';
this.numberColumns = [];
this.column = 1;
this.functions = FunctionTypes;
this.applyFunctions = new Array(FunctionTypes.length);
this.unitsFunctions = new Array(FunctionTypes.length);
this.editable = false;
switch (this.data.action) {
case ActionColumnType.ADD:
this.numberColumns = new Array(this.data.nColumns);
this.positionColumn = this.data.nColumns;
this.title = this.data.config.language.newColumn;
this.editable = true;
break;
case ActionColumnType.EDIT:
this.columns = this.data.columns;
this.nameColumn = this.columns[0]['name'];
this.numberColumns = new Array(this.columns.length);
this.positionColumn = 1;
this.title = this.data.config.language.editColumn;
this.checkFunctionColumn();
this.editable = this.isEditable();
break;
case ActionColumnType.DELETE:
this.columns = this.data.columns;
this.title = this.data.config.language.deleteColumn;
break;
default:
this.close();
}
}
EditColumnDialogComponent.prototype.changeColumn = function () {
if (this.data.action === ActionColumnType.EDIT) {
this.nameColumn = this.columns[this.column - 1]['name'];
this.positionColumn = this.column;
}
this.applyFunctions = new Array(FunctionTypes.length);
this.unitsFunctions = new Array(FunctionTypes.length);
this.checkFunctionColumn();
this.editable = this.isEditable();
};
EditColumnDialogComponent.prototype.onSubmit = function () {
switch (this.data.action) {
case ActionColumnType.ADD:
this.dialogRef.close({ name: this.nameColumn.trim(), predefined: this.predefinedText, position: this.positionColumn, functions: this.applyFunctions, unitsFuntions: this.unitsFunctions, editable: this.editable });
break;
case ActionColumnType.EDIT:
this.dialogRef.close({ name: this.nameColumn.trim(), column: this.column, newPosition: this.positionColumn, functions: this.applyFunctions, unitsFuntions: this.unitsFunctions, editable: this.editable });
break;
case ActionColumnType.DELETE:
this.dialogRef.close({ column: this.column });
break;
default:
this.close();
}
};
EditColumnDialogComponent.prototype.isEditable = function () {
return new ColumnTableModel(this.columns[this.column - 1]).editable;
};
EditColumnDialogComponent.prototype.checkFunctionColumn = function () {
var _this = this;
var sumary = new ColumnTableModel(this.columns[this.column - 1]).sumary;
if (!!sumary.length) {
sumary.forEach(function (s) {
if (s.type != null) {
_this.functions.forEach(function (f) {
if (f.type === s.type) {
_this.applyFunctions[s.type] = true;
_this.unitsFunctions[s.type] = s.unit;
}
});
}
});
}
else {
this.applyFunctions = new Array(FunctionTypes.length);
this.unitsFunctions = new Array(FunctionTypes.length);
}
};
EditColumnDialogComponent.prototype.close = function () {
this.dialogRef.close();
};
EditColumnDialogComponent.ctorParameters = function () { return [
{ type: MatDialogRef },
{ type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
]; };
EditColumnDialogComponent = __decorate([
Component({
selector: 'edit-column-dialog-component',
template: "<header class=\"header-title\">{{ title }}</header>\r\n<!-- <title class=\"title\" mat-dialog-title>{{ title }}</title> -->\r\n\r\n<mat-dialog-content *ngIf=\"data.config.classTable === 'boostrap'\"> \r\n\r\n <div *ngIf=\"data.action === 1 || data.action === 2\" class=\"form-group\">\r\n\r\n <label for=\"name\">{{ data.config.language.name }}</label>\r\n <input id=\"name\" name=\"name\" class=\"form-control\" required\r\n [(ngModel)]=\"nameColumn\" #name=\"ngModel\" />\r\n\r\n <label *ngIf=\"data.action === 1\" for=\"textN\" style=\"margin-top: 20px;\">{{ data.config.language.predefinedContent }}</label>\r\n <input *ngIf=\"data.action === 1\" id=\"textN\" name=\"textN\" class=\"form-control\" required\r\n [(ngModel)]=\"predefinedText\" #name=\"ngModel\" />\r\n\r\n <label for=\"position\" style=\"margin-top: 20px;\">{{ (data.action === 1) ? data.config.language.position : data.config.language.newPosition }}</label>\r\n <select id=\"position\" name=\"position\" class=\"form-control\" required\r\n [(ngModel)]=\"positionColumn\" #name=\"ngModel\">\r\n <option *ngFor=\"let c of numberColumns; let i = index\" [value]=\"i + 1\">{{ i + 1}}</option>\r\n </select>\r\n\r\n </div>\r\n\r\n <div *ngIf=\"data.action === 3|| data.action === 2\" class=\"form-group\">\r\n\r\n <label for=\"col\">{{ data.config.language.column }}</label>\r\n <select id=\"col\" name=\"col\" class=\"form-control\" required\r\n [(ngModel)]=\"column\" #name=\"ngModel\" (change)=\"changeColumn()\">\r\n <option *ngFor=\"let c of columns; let i = index\" [value]=\"i + 1\">{{ c.name }}</option>\r\n </select>\r\n\r\n </div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-content *ngIf=\"data.config.classTable === 'material'\"> \r\n\r\n <div *ngIf=\"data.action === 1 || data.action === 2\">\r\n\r\n <mat-form-field class=\"col-12\">\r\n <mat-label>{{ data.config.language.name }}</mat-label>\r\n <input matInput id=\"name\" name=\"name\" [(ngModel)]=\"nameColumn\" #name=\"ngModel\">\r\n </mat-form-field>\r\n\r\n <mat-form-field *ngIf=\"data.action === 1\" class=\"col-12\" style=\"margin-top: 20px;\">\r\n <mat-label>{{ data.config.language.predefinedContent }}</mat-label>\r\n <input matInput id=\"textN\" name=\"textN\" [(ngModel)]=\"predefinedText\" #name=\"ngModel\">\r\n </mat-form-field>\r\n\r\n <mat-form-field class=\"col-12\" style=\"margin-top: 20px;\">\r\n <mat-label>{{ (data.action === 1) ? data.config.language.position : data.config.language.newPosition }}</mat-label>\r\n <mat-select id=\"position\" name=\"position\" [(ngModel)]=\"positionColumn\" #name=\"ngModel\">\r\n <mat-option *ngFor=\"let c of numberColumns; let i = index\" [value]=\"i + 1\">\r\n {{ i + 1 }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n </div>\r\n\r\n <div *ngIf=\"data.action === 3|| data.action === 2\" class=\"form-group\">\r\n\r\n <mat-form-field class=\"col-12\" style=\"margin-top: 20px;\">\r\n <mat-label>{{ data.config.language.column }}</mat-label>\r\n <mat-select id=\"col\" name=\"col\" [(ngModel)]=\"column\" #name=\"ngModel\" (selectionChange)=\"changeColumn()\">\r\n <mat-option *ngFor=\"let c of columns; let i = index\" [value]=\"i + 1\">\r\n {{ c.name }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n </div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-content [style.marginLeft]=\"(data.config.classTable === 'material') ? '-10px' : '-20px'\">\r\n\r\n <div *ngIf=\"data.action === 1 || data.action === 2\">\r\n <mat-checkbox [color]=\"'primary'\" [(ngModel)]=\"editable\">{{ data.config.language.editable }}</mat-checkbox>\r\n </div>\r\n\r\n <div *ngIf=\"data.action === 1 || data.action === 2\">\r\n <label for=\"position\" style=\"margin-top: 20px;\">{{ data.config.language.applyFunction }}:</label>\r\n <table>\r\n <tr *ngFor=\"let f of functions; let i = index\">\r\n <td><mat-checkbox [color]=\"'primary'\" [(ngModel)]=\"applyFunctions[i]\">{{ data.config.language[f.name] }}</mat-checkbox></td>\r\n <td class=\"unit\">\r\n <div *ngIf=\"data.config.classTable === 'boostrap'\" class=\"row\">\r\n <div class=\"unit-text\">{{ data.config.language.units }} </div>\r\n <input id=\"unit\" name=\"unit\" class=\"form-control\" [(ngModel)]=\"unitsFunctions[i]\" style=\"width: 70px;\" [disabled]=\"!applyFunctions[i]\"/>\r\n </div>\r\n\r\n <mat-form-field *ngIf=\"data.config.classTable === 'material'\" style=\"width: 70px;\">\r\n <mat-label>{{ data.config.language.units }}</mat-label>\r\n <input matInput id=\"unit\" name=\"unit\" [(ngModel)]=\"unitsFunctions[i]\" #name=\"ngModel\" [disabled]=\"!applyFunctions[i]\">\r\n </mat-form-field>\r\n\r\n </td>\r\n </tr>\r\n </table>\r\n </div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions class=\"footer-actions\" style=\"float: right;\">\r\n\r\n <button mat-button (click)=\"close()\">{{ data.config.language.close }}</button>\r\n <button mat-button class=\"btn btnPrimary\" (click)=\"onSubmit()\">{{ data.config.language.accept }}</button>\r\n\r\n</mat-dialog-actions>",
encapsulation: ViewEncapsulation.None,
styles: [".unit{font-size:16px;padding-left:40px}.unit-text{margin-right:10px;margin-top:8px}.header-title{padding:15px .5rem .5rem 25px;font-size:1.5rem;background:#efefef;margin:-25px 0 20px -25px!important;width:40vw}.footer-actions{background:#efefef;width:40vw;padding:1rem 20px 1rem 1rem!important;margin-left:-25px!important;margin-right:-24px;margin-top:20px;display:flex;justify-content:flex-end}"]
}),
__param(1, Inject(MAT_DIALOG_DATA))
], EditColumnDialogComponent);
return EditColumnDialogComponent;
}());
var ExportsType;
(function (ExportsType) {
ExportsType[ExportsType["EXCEL"] = 1] = "EXCEL";
ExportsType[ExportsType["PDF"] = 2] = "PDF";
})(ExportsType || (ExportsType = {}));
;
var ActionsType;
(function (ActionsType) {
ActionsType["NEW_COLUMN"] = "newColumn";
ActionsType["DELETE_COLUMN"] = "deleteColumn";
ActionsType["EDIT_COLUMN"] = "editColumn";
ActionsType["UPDATE_ROW"] = "updateRow";
ActionsType["CLICK"] = "click";
ActionsType["DBL_CLICK"] = "dblclick";
ActionsType["SINGLE_SELECTION"] = "singleSelection";
ActionsType["MULTIPLE_SELECTION"] = "multipleSelection";
ActionsType["VISIBLE_DATA_TABLE"] = "visibleDataTable";
ActionsType["DATA_TABLE"] = "dataTable";
})(ActionsType || (ActionsType = {}));
;
var GridColumnsComponent = /** @class */ (function () {
function GridColumnsComponent(dialogRef, data) {
this.dialogRef = dialogRef;
this.data = data;
this.columns = [];
this.description = '';
this.columns = data.columns.map(function (d) { return Object.assign({}, d); });
}
GridColumnsComponent.prototype.ngOnInit = function () {
};
GridColumnsComponent.prototype.save = function () {
this.dialogRef.close(this.columns);
};
GridColumnsComponent.prototype.close = function () {
this.dialogRef.close();
};
GridColumnsComponent.prototype.drop = function (event) {
moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
};
GridColumnsComponent.ctorParameters = function () { return [
{ type: MatDialogRef },
{ type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
]; };
GridColumnsComponent = __decorate([
Component({
selector: 'grid-columns-component',
template: "<h2 mat-dialog-title>{{description}}</h2>\r\n<header>{{ data.config.language.columns }}</header>\r\n<mat-dialog-content>\r\n\r\n <div class=\"row py-2 mx-0 list-header\">\r\n <div class=\"col-6 px-1\"><strong>{{ data.config.language.column }}</strong></div>\r\n <div class=\"col-3 text-center\"><strong>{{ data.config.language.show }}</strong></div>\r\n <div class=\"col-3 text-center\"><strong>{{ data.config.language.fix }}</strong></div>\r\n </div>\r\n\r\n <div cdkDropList class=\"example-list\" (cdkDropListDropped)=\"drop($event)\" cdkDropListOrientation=\"vertical\">\r\n\r\n <div class=\"example-box row\" *ngFor=\"let c of columns\" cdkDrag>\r\n <div class=\"col-6 column-name\">{{c.name}}</div>\r\n <div class=\"col-3 text-center pt-2\">\r\n <mat-checkbox [color]=\"'primary'\" [(ngModel)]=\"c.visible\"></mat-checkbox>\r\n </div>\r\n <div class=\"col-3 text-center pt-2\">\r\n <mat-checkbox [color]=\"'primary'\" [disabled]=\"!c.visible\" [(ngModel)]=\"c.fixed\"></mat-checkbox>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions class=\"row m-0 py-2\">\r\n <div class=\"col-6\">\r\n <button class=\"col-12 btn btn-default\" (click)=\"close()\">{{ data.config.language.close }}</button>\r\n </div>\r\n <div class=\"col-6\">\r\n <button class=\"col-12 btn btnPrimary\" (click)=\"save()\">{{ data.config.language.save }}</button>\r\n </div>\r\n</mat-dialog-actions>",
encapsulation: ViewEncapsulation.None,
styles: [".right-fixed{position:fixed!important;height:100vh;width:400px;max-width:400px;right:0}.right-fixed mat-dialog-container{border-radius:0;padding:0;overflow:hidden;margin:0}grid-columns-component{margin:-20px 0 0;display:block;height:100vh}grid-columns-component mat-dialog-content{height:calc(100% - 125px)!important;max-height:unset!important;padding:.5rem!important;margin:15px 0 0!important;overflow-y:hidden!important;overflow-x:hidden!important}grid-columns-component mat-dialog-content .list-header{border:1px solid #ccc;background:#efefef}grid-columns-component mat-dialog-content [cdkdroplist]{border-radius:0;border-top:0}grid-columns-component header{padding:.5rem;font-size:1.5rem;background:#efefef}grid-columns-component mat-dialog-actions{background:#efefef;padding:1rem!important;text-align:center}grid-columns-component .example-list{width:100%;max-width:100%;border:1px solid #ccc;display:block;background:#fff;border-radius:4px;overflow:hidden}grid-columns-component .example-box{padding:2px 5px 0;border-bottom:1px solid #ccc;color:rgba(0,0,0,.87);display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff}grid-columns-component .cdk-drag-placeholder{opacity:.6;background:InfoBackground}grid-columns-component .cdk-drag-animating{transition:transform 250ms cubic-bezier(0,0,.2,1)}grid-columns-component .example-box:last-child{border:none}grid-columns-component .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform 250ms cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:1;cursor:move;background:#fff;box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.column-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:30px}"]
}),
__param(1, Inject(MAT_DIALOG_DATA))
], GridColumnsComponent);
return GridColumnsComponent;
}());
var ThemeTypes;
(function (ThemeTypes) {
ThemeTypes["BOOSTRAP"] = "boostrap";
ThemeTypes["MATERIAL"] = "material";
})(ThemeTypes || (ThemeTypes = {}));
var StylesTypes;
(function (StylesTypes) {
StylesTypes["PRIMARY_COLOR"] = "--primary-color";
StylesTypes["HOVER_ROW_COLOR"] = "--hover-row-color";
StylesTypes["SECONDARY_COLOR"] = "--secondary-color";
StylesTypes["HEADER_BACKGROUND"] = "--header-background";
StylesTypes["HEADER_FONT_COLOR"] = "--header-font-color";
StylesTypes["BORDER_TABLE_COLOR"] = "--border-table-color";
StylesTypes["RESIZE_COLUMNS"] = "--resize-columns";
StylesTypes["DROPDOWN_BORDER"] = "--dropdown-border";
StylesTypes["DROPDOWN_BORDER_RADIUS"] = "--dropdown-border-radius";
StylesTypes["DROPDOWN_BORDER_BOTTOM"] = "--dropdown-border-bottom";
StylesTypes["BOX_SHADOW_TABLE"] = "--box-shadow-table";
})(StylesTypes || (StylesTypes = {}));
;
var NgxTableComponent = /** @class */ (function () {
function NgxTableComponent(ngxTableService, notification, dialog) {
var _this = this;
this.ngxTableService = ngxTableService;
this.notification = notification;
this.dialog = dialog;
this.config = new ConfigTableModel();
this.viewDialog = false;
this.beforeAction = null;
this.actionsTocontrol = [];
this.event = new EventEmitter();
this.click = new EventEmitter();
this.dblclick = new EventEmitter();
this.singleSelection = new EventEmitter();
this.multipleSelection = new EventEmitter();
this.visibleDataTable = new EventEmitter();
this.dataTable = new EventEmitter();
this.updateRow = new EventEmitter();
this.newColumn = new EventEmitter();
this.editColumnOuput = new EventEmitter();
this.deleteColumnOuput = new EventEmitter();
this.editing = {};
this.alt = false;
this.asc = true;
this.columnsFilterList = [];
this.selectedColumnsFilter = [];
this.dropdownSettings = {};
this.selectColumnsFilter = false;
this.height = {};
this.indexNewColumn = 0;
this.sumaryColumns = [];
this.dataSumary = [];
this.getRowClass = function (row) {
return {
'row-active-add': _this.rowsTempTableAdd.includes(row[_this.indexColumn]) && !!_this.config.multipleSelection,
'row-active': (_this.backgroundActiveRow == row[_this.indexColumn] && !!_this.config.singleSelection) ? true : false
};
};
this.rowsTempTableAdd = [];
this.fullscreen = false;
this.temp = [];
this.rows = [];
this.indexColumn = '';
this.lastSortEvent = null;
}
NgxTableComponent.prototype.ngOnInit = function () {
this.config = new ConfigTableModel(this.config);
if (!ClassesAvailable.includes(this.config.classTable))
this.config.classTable = ClassesAvailable[0];
this.setThemeStyles();
this.buildIndex();
this.checkPredefinedDataColumn();
this.searchActions();
this.getAll();
this.buildFilterByColumns();
this.dropdownSettings = {
singleSelection: false,
idField: 'item_id',
textField: 'item_text',
selectAllText: this.config.language.selectAll,
unSelectAllText: this.config.language.unSelectAll,
itemsShowLimit: 3,
allowSearchFilter: true,
searchPlaceholderText: this.config.language.search
};
this.primitiveHeight = (!!this.config.editableColumns) ? { fullscreen: 180, fullscreenFilter: 220 } : { fullscreen: 150, fullscreenFilter: 190 };
this.height = {
fullscreen: this.primitiveHeight.fullscreen,
fullscreenFilter: this.primitiveHeight.fullscreenFilter
};
this.sumaryColumns = this.columns.filter(function (c) { return !!new ColumnTableModel(c).sumary.length; });
this.updateSumaryColumns();
};
NgxTableComponent.prototype.ngAfterViewInit = function () {
var _this = this;
if (!!this.config.filter) {
fromEvent(this.search.nativeElement, 'keydown')
.pipe(debounceTime(550), map(function (x) { return x['target']['value']; }))
.subscribe(function (value) {
_this.updateFilter(value);
_this.updateSumaryColumns();
});
}
this.columns.forEach(function (c) {
if (!!c.index)
_this.indexColumn = c.prop;
});
this.resize(10);
};
NgxTableComponent.prototype.ngAfterViewChecked = function () {
var _this = this;
if (!!this.subscriptionChanges)
return;
this.subscriptionChanges = this.notification.on(this.name).subscribe(function (value) {
var data = new NotificationTableModel(value);
if (data.collapsed != null)
_this.config.collapsed = data.collapsed;
if (!!data.rows.length) {
_this.data = data.rows;
_this.getAll();
if (!!_this.config.filter && !!_this.search.nativeElement.value)
_this.updateFilter(_this.search.nativeElement.value);
_this.updateSumaryColumns();
}
if (!!data.columns.length) {
_this.columns = data.columns;
_this.buildFilterByColumns();
if (!!_this.config.filter && !!_this.search.nativeElement.value)
_this.updateFilter(_this.search.nativeElement.value);
_this.updateSumaryColumns();
}
if (!!data.visibleDataTable) {
var columnsProp_1 = (_this.columns.filter(function (c) { return !c.hide && !c.action && !!c.visible; })).map(function (c) { return c.prop; });
_this.visibleDataTable.emit({
name: ActionsType.VISIBLE_DATA_TABLE,
columns: _this.columns.filter(function (c) { return !c.hide && !c.action && !!c.visible; }),
rows: _this.rows.map(function (data) {
var obj = {};
Object.keys(data).forEach(function (k) {
var _a;
if (!!columnsProp_1.includes(k)) {
Object.assign(obj, (_a = {}, _a[k] = data[k], _a));
}
});
return obj;
})
});
}
if (!!data.dataTable) {
var columnsProp_2 = (_this.columns.filter(function (c) { return !c.action; })).map(function (c) { return c.prop; });
_this.dataTable.emit({
name: ActionsType.DATA_TABLE,
columns: _this.columns.filter(function (c) { return !c.action; }),
rows: _this.data.map(function (data) {
var obj = {};
Object.keys(data).forEach(function (k) {
var _a;
if (!!columnsProp_2.includes(k)) {
Object.assign(obj, (_a = {}, _a[k] = data[k], _a));
}
});
return obj;
})
});
}
if (!!data.exportExcel)
_this.export(ExportsType.EXCEL);
if (!!data.exportPdf)
_this.export(ExportsType.PDF);
if (!!_this.config.filter && !!_this.search.nativeElement.value)
_this.updateFilter(_this.search.nativeElement.value);
_this.resize(10);
});
};
/**
* onResize
*
* Calculates the height with the values indicated in the table configuration
*
*/
NgxTableComponent.prototype.onResize = function (event) {
this.height = (event.target.innerWidth < 992)
? { fullscreen: this.primitiveHeight.fullscreen + 55, fullscreenFilter: this.primitiveHeight.fullscreenFilter + 54 }
: { fullscreen: this.primitiveHeight.fullscreen, fullscreenFilter: this.primitiveHeight.fullscreenFilter };
};
/**
* setThemeStyles
*
* Apply the styles indicated in the table config
*
*/
NgxTableComponent.prototype.setThemeStyles = function () {
this.setPropertyCss({ key: StylesTypes.PRIMARY_COLOR, value: this.config.primaryColor }, { key: StylesTypes.HOVER_ROW_COLOR, value: this.config.hoverRowColor }, { key: StylesTypes.SECONDARY_COLOR, value: this.config.secondaryColor }, { key: StylesTypes.HEADER_BACKGROUND, value: this.config.headerBackground }, { key: StylesTypes.HEADER_FONT_COLOR, value: this.config.headerFontColor }, { key: StylesTypes.BORDER_TABLE_COLOR, value: this.config.borderTableColor });
if (!this.config.resizeColumns)
this.setPropertyCss({ key: StylesTypes.RESIZE_COLUMNS, value: 'none' });
if (this.config.classTable === ThemeTypes.MATERIAL) {
this.setPropertyCss({ key: StylesTypes.DROPDOWN_BORDER, value: 'transparent' }, { key: StylesTypes.DROPDOWN_BORDER_RADIUS, value: '0' }, { key: StylesTypes.DROPDOWN_BORDER_BOTTOM, value: 'grey' });
}
else
this.setPropertyCss({ key: StylesTypes.BOX_SHADOW_TABLE, value: 'none' });
};
/**
* setPropertyCss
*
* Notify css property
*
*/
NgxTableComponent.prototype.setPropertyCss = function () {
var property = [];
for (var _i = 0; _i < arguments.length; _i++) {
property[_i] = arguments[_i];
}
property.forEach(function (p) { return document.documentElement.style.setProperty(p.key, p.value); });
};
/**
* buildIndex
*
* Look for the index column, in addition to discarding if there are more and if there is not, generate one automatically
*
*/
NgxTableComponent.prototype.buildIndex = function () {
var foundIndex = null;
var indexColumn;
this.columns = this.columns.map(function (col, i) {
if (foundIndex != null && !!col.index)
col.index = false;
if (!!col.index) {
foundIndex = i;
indexColumn = col;
}
return new ColumnTableModel(col);
});
if (foundIndex === null) {
var defaultProp_1 = 'index_genrete_automatically_by_powerfull';
var index = {
prop: defaultProp_1,
name: 'Index',
index: true,
hide: true
};
this.columns.splice(0, 0, new ColumnTableModel(index));
this.data.forEach(function (data, i) {
data[defaultProp_1] = i;
});
}
else {
if (foundIndex != 0) {
this.columns.splice(foundIndex, 1);
this.columns.splice(0, 0, new ColumnTableModel(indexColumn));
}
}
};
/**
* onChangeSelectFilter
*
* Update search filter when changing column selection
*
*/
NgxTableComponent.prototype.onChangeSelectFilter = function () {
this.updateFilter(this.search.nativeElement.value);
this.updateSumaryColumns();
};
/**
* openConfigFilter
*
* Open config and close config filter table
*
*/
NgxTableComponent.prototype.openConfigFilter = function () {
this.selectColumnsFilter = !this.selectColumnsFilter;
this.resize(10);
};
/**
* buildFilterByColumns
*
* Build the list of items to show in the filter by columns
*
*/
NgxTableComponent.prototype.buildFilterByColumns = function () {
this.columnsFilterList = this.selectedColumnsFilter = this.columns.filter(function (col) { return !col.hide && !col.action && !!col.visible && !!col.filtered; }).map(function (col) { return Object.assign({ item_id: col.prop, item_text: col.name }); });
};
/**
* searchActions
*
* Find columns with actions and build value and position finish
*
*/
NgxTableComponent.prototype.searchActions = function () {
var _this = this;
var columnsAction = this.columns.filter(function (c) { return !!c.action; });
if (!!columnsAction.length) {
columnsAction.forEach(function (c) {
_this.data.forEach(function (r) {
var value = "<" + c.tag;
if (!!c.attributes.length) {
c.attributes.forEach(function (a) {
value += " " + a.name + "='" + a.value + "'";
});
}
value += ">" + r[c.prop] + "</" + c.tag + ">";
r[c.prop] = value;
});
});
}
this.columns = this.columns.filter(function (c) { return !c.action; });
columnsAction.forEach(function (c) { return _this.columns.push(c); });
};
/**
* onActivate
*
* Capture and manage the different events on the table for row selection
*
* @param e $event
*/
NgxTableComponent.prototype.onActivate = function (e) {
var _this = this;
if (e.type == ActionsType.CLICK || e.type == ActionsType.DBL_CLICK) {
if (!e.event.shiftKey) {
(this.backgroundActiveRow != e.row[this.indexColumn]) ? this.backgroundActiveRow = e.row[this.indexColumn] : ((e.type != ActionsType.DBL_CLICK) ? this.backgroundActiveRow = null : '');
(e.type == ActionsType.CLICK) ? this.click.emit({ name: e.type, row: e.row }) : this.dblclick.emit({ name: e.type, row: e.row });
}
if (e.event.ctrlKey && !this.viewDialog && !e.event.altKey && !!this.config.multipleSelection) {
this.backgroundActiveRow = null;
if (!!this.rowsTempTableAdd.includes(e.row[this.indexColumn])) {
this.rowsTempTableAdd.forEach(function (r, i) {
if (r === e.row[_this.indexColumn]) {
_this.rowsTempTableAdd.splice(i, 1);
}
});
}
else
this.rowsTempTableAdd.push(e.row[this.indexColumn]);
}
if (e.event.altKey && !this.viewDialog && !e.event.ctrlKey && !!this.config.multipleSelection) {
this.backgroundActiveRow = null;
if (!!this.alt) {
if (!!this.lastSortEvent)
this.sortRows(this.lastSortEvent);
if (this.firstIndexA