ngx-table-powerfull
Version:
Table with catalog of functionalities for free use based on the ngx-datatable component and other components
980 lines • 339 kB
JavaScript
import * as tslib_1 from "tslib";
import { Component, ViewChild, Input, Output, EventEmitter, HostListener, ViewEncapsulation } from '@angular/core';
import { fromEvent } from 'rxjs';
import { map, debounceTime } from 'rxjs/operators';
import { ColumnTableModel } from './models/columnTable.model';
import { NgxTableService } from './services/ngxTable.service';
import { NotificationNgxService } from './services/notificationNgx.service';
import { NgxTableDialogComponent } from './components/ngxTableDialog/ngxTableDialog.component';
import { MatDialog, MatDialogConfig } from '@angular/material';
import { NotificationTableModel } from './models/notificationTable.model';
import { EditColumnDialogComponent } from './components/editColumnDialog/editColumnDialog.component';
import { ActionColumnType } from './common/actionsColumn.type';
import { ConfigTableModel, ClassesAvailable } from './models/configTable.model';
import { SumaryTypes, FunctionTypes } from './models/sumaryColumn.model';
import { ExportsType } from './common/exports.type';
import { ActionsType } from './common/actions.type';
import { GridColumnsComponent } from './components/gridColumns/gridColumns.component';
import { StylesTypes, ThemeTypes } from './common/styles.types';
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.firstIndexAltKey === e.row[this.indexColumn]) {
this.firstIndexAltKey = null;
this.alt = false;
this.rowsTempTableAdd.forEach(function (r, i) {
if (r === e.row[_this.indexColumn]) {
_this.rowsTempTableAdd.splice(i, 1);
return;
}
});
return;
}
var found_1 = false;
this.rows.forEach(function (r) {
if (!!_this.asc) {
if (r[_this.indexColumn] === e.row[_this.indexColumn] && !!found_1) {
found_1 = false;
if (!_this.rowsTempTableAdd.includes(e.row[_this.indexColumn]))
_this.rowsTempTableAdd.push(e.row[_this.indexColumn]);
return;
}
}
else {
if (_this.firstIndexAltKey === r[_this.indexColumn] && !!found_1) {
found_1 = false;
return;
}
}
if (r[_this.indexColumn] === _this.firstIndexAltKey || r[_this.indexColumn] === e.row[_this.indexColumn] || !!found_1) {
if (r[_this.indexColumn] === e.row[_this.indexColumn] && !found_1) {
_this.asc = false;
_this.rowsTempTableAdd.push(r[_this.indexColumn]);
}
(!!found_1) ? (!_this.rowsTempTableAdd.includes(r[_this.indexColumn]) ? _this.rowsTempTableAdd.push(r[_this.indexColumn]) : '') : found_1 = true;
}
});
this.alt = false;
}
else {
this.firstIndexAltKey = e.row[this.indexColumn];
if (!this.rowsTempTableAdd.includes(this.firstIndexAltKey))
this.rowsTempTableAdd.push(e.row[this.indexColumn]);
this.alt = true;
this.asc = true;
}
}
if (!!e.event.shiftKey && !this.viewDialog && !e.event.ctrlKey && !!this.config.multipleSelection) {
this.rowsTempTableAdd = [];
this.firstIndexAltKey = null;
this.alt = false;
this.asc = true;
}
if (!!e.event.altKey && !!e.event.ctrlKey && !!this.config.multipleSelection) {
this.rowsTempTableAdd = this.rows.map(function (r) { return r[_this.indexColumn]; });
}
if (!!this.config.multipleSelection && (!!e.event.altKey || !!e.event.ctrlKey || !!e.event.shiftKey)) {
this.multipleSelection.emit({ name: ActionsType.MULTIPLE_SELECTION, rows: this.rowsTempTableAdd.map(function (data) { return _this.data.find(function (r) { return r[_this.indexColumn] === data; }); }) || [] });
}
if (!!this.config.singleSelection && !e.event.altKey && !e.event.ctrlKey && !e.event.shiftKey && (e.type == ActionsType.CLICK || e.type == ActionsType.DBL_CLICK)) {
this.singleSelection.emit({ name: ActionsType.SINGLE_SELECTION, row: (!!this.backgroundActiveRow) ? e.row : null });
}
}
};
/**
* updateFilter
*
* Update the table values when modifying the filter
*
* @param val input filter value
*/
NgxTableComponent.prototype.updateFilter = function (val) {
var _this = this;
var value = val.toString().toLowerCase().trim();
var count = this.columns.length;
var keys = Object.keys(this.temp[0]);
var columnsFilter = this.selectedColumnsFilter.map(function (c) { return c.item_id; });
this.rows = this.temp.filter(function (item) {
var keysColumn = Object.keys(item);
for (var i = 0; i < count; i++) {
if (!!columnsFilter.includes(keysColumn[i]) &&
keysColumn[i] != _this.indexColumn &&
(item[keys[i]] &&
item[keys[i]]
.toString()
.toLowerCase()
.indexOf(value) !== -1) ||
!value) {
return true;
}
}
});
};
/**
* onSort
*
* Recive the event when sorting the table
*/
NgxTableComponent.prototype.onSort = function (event) {
this.lastSortEvent = event;
this.sortRows(event);
};
/**
* getAll
*
* Get all the records in the table
*/
NgxTableComponent.prototype.getAll = function () {
var data = this.data;
this.temp = data;
this.rows = tslib_1.__spread(this.temp);
};
/**
* updateValue
*
* Update table cell value
*/
NgxTableComponent.prototype.updateValue = function (event, cell, rowIndex) {
var _this = this;
var row = null;
var column = null;
var oldValue = null;
var newValue = null;
var result = false;
this.editing[rowIndex + '-' + cell] = false;
this.rows.forEach(function (r) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var _a;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
if (!(r[this.indexColumn] === rowIndex)) return [3 /*break*/, 3];
column = this.columns.find(function (c) { return c.prop === cell; });
oldValue = r[cell];
newValue = event.target.value;
_a = !!this.beforeAction &&
this.actionsTocontrol.includes(ActionsType.UPDATE_ROW);
if (!_a) return [3 /*break*/, 2];
return [4 /*yield*/, this.beforeAction.call(this, { name: ActionsType.UPDATE_ROW, row: Object.assign({}, r), cell: { column: column, oldValue: oldValue, newValue: newValue } })];
case 1:
_a = !(_b.sent());
_b.label = 2;
case 2:
if (_a)
return [2 /*return*/];
r[cell] = event.target.value;
row = Object.assign({}, r);
result = true;
_b.label = 3;
case 3: return [2 /*return*/];
}
});
}); });
this.rows = tslib_1.__spread(this.rows);
this.updateSumaryColumns();
if (oldValue === newValue || !result)
return;
this.columns.filter(function (c) { return !!c.action; }).forEach(function (p) { return delete row[p.prop]; });
this.updateRow.emit({ name: ActionsType.UPDATE_ROW, row: row, cell: { column: column, oldValue: oldValue, newValue: newValue } });
};
/**
* sendEvent
*
* Sending the name of the event and the row to the parent
*/
NgxTableComponent.prototype.sendEvent = function (name, row) {
var action = {
name: name,
row: row
};
this.event.emit(action);
};
/**
* toggleFullscreen
*
* Maximize table to full screen
*/
NgxTableComponent.prototype.toggleFullscreen = function () {
this.fullscreen = !this.fullscreen;
this.resize(10);
};
/**
* sortRows
*
* Sorts the rows as they are visually found in the table
*/
NgxTableComponent.prototype.sortRows = function (sortEvent) {
var dir = "asc";
var prop = "";
if (!!sortEvent) {
dir = sortEvent.sorts[0].dir;
prop = sortEvent.sorts[0].prop;
var column_1 = this.columns.find(function (c) { return c.prop === prop; });
this.rows.sort(function (a, b) {
try {
var res = (a[prop].toString().localeCompare(b[prop], undefined, { numeric: column_1.sort.numeric }));
return (dir == 'asc') ? res : -1 * res;
}
catch (err) {
console.warn("Extended localeCompare() not supported in this browser.");
return (a[prop].toString().localeCompare(b[prop]));
}
});
}
};
/**
* export
*
* Build the object for export file and call the service to export it
*/
NgxTableComponent.prototype.export = function (type) {
var columnsExport = this.columns.filter(function (c) { return !c.hide && !c.action && !!c.visible; });
switch (type) {
case ExportsType.EXCEL:
var dataExport_1 = [];
if (!!this.lastSortEvent)
this.sortRows(this.lastSortEvent);
this.rows.forEach(function (row) {
var obj = {};
columnsExport.forEach(function (column) {
obj[column.name] = row[column.prop];
});
dataExport_1.push(obj);
});
this.ngxTableService.exportAsExcelFile(dataExport_1, this.name, columnsExport.length);
break;
case ExportsType.PDF:
var nameColumns = columnsExport.map(function (c) { return c.name; });
var propColumns_1 = columnsExport.map(function (c) { return c.prop; });
var rowsExportPdf = this.rows.map(function (r) {
var row = [];
propColumns_1.forEach(function (prop) {
row.push(r[prop]);
});
return row;
});
this.ngxTableService.exportAsPdf(this.name, [nameColumns], rowsExportPdf);
break;
default:
}
};
/**
* openDialog
*
* Build a dialog with the selected elements
*/
NgxTableComponent.prototype.openDialog = function () {
var _this = this;
var rows = this.rowsTempTableAdd.map(function (data) { return _this.data.find(function (r) { return r[_this.indexColumn] === data; }); });
this.dialog.open(NgxTableDialogComponent, {
width: '80vw',
height: 'auto',
data: {
name: this.name + ' ' + this.config.language.generated,
rows: rows,
columns: this.columns,
config: this.config
}
});
};
/**
* closeDialog
*
* Close dialog
*/
NgxTableComponent.prototype.closeDialog = function () {
this.dialog.closeAll();
this.resize(100);
};
/**
* resize
*
* Resize table
*/
NgxTableComponent.prototype.resize = function (time) {
setTimeout(function () { return window.dispatchEvent(new Event('resize')); }, time);
};
/**
* addColumn
*
* Add a new column to the table
*/
NgxTableComponent.prototype.addColumn = function () {
var _this = this;
this.dialog.open(EditColumnDialogComponent, {
width: '40vw',
height: 'auto',
data: {
action: ActionColumnType.ADD,
nColumns: this.columns.filter(function (c) { return (!c.hide && !c.action); }).length + 1,
config: this.config
}
}).afterClosed().subscribe(function (result) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var functionsType_1, functions_1, newColumn_1, _a, newPosition, numSumaryColumns;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
if (!(!!result && !!result.name && !!result.name.length)) return [3 /*break*/, 3];
functionsType_1 = FunctionTypes;
functions_1 = [];
result.functions.map(function (f, i) {
if (!!f) {
functions_1.push({ type: functionsType_1[i].type, unit: (!!result.unitsFuntions[i]) ? result.unitsFuntions[i] : '' });
}
});
newColumn_1 = {
prop: "c-" + this.indexNewColumn,
name: result.name.charAt(0).toUpperCase() + result.name.slice(1),
editable: result.editable,
sumary: functions_1,
predefinedData: result.predefined
};
_a = !!this.beforeAction && this.actionsTocontrol.includes(ActionsType.NEW_COLUMN);
if (!_a) return [3 /*break*/, 2];
return [4 /*yield*/, this.beforeAction.call(this, { name: ActionsType.NEW_COLUMN, column: new ColumnTableModel(newColumn_1) })];
case 1:
_a = !(_b.sent());
_b.label = 2;
case 2:
if (_a)
return [2 /*return*/];
this.data.forEach(function (r) {
var _a;
return Object.assign(r, (_a = {}, _a[newColumn_1.prop] = result.predefined, _a));
});
newPosition = (!this.columns[0].hide) ? result.position - 1 : result.position;
if (newPosition == this.columns.length)
this.columns.push(new ColumnTableModel(newColumn_1));
else
this.columns.splice(newPosition, 0, new ColumnTableModel(newColumn_1));
this.indexNewColumn++;
this.buildFilterByColumns();
numSumaryColumns = !!this.sumaryColumns.length;
this.sumaryColumns = this.columns.filter(function (c) { return !!c.visible && !!new ColumnTableModel(c).sumary.length; });
this.updateSumaryColumns();
if (numSumaryColumns !== !!this.sumaryColumns.length)
this.resize(10);
this.newColumn.emit({ name: ActionsType.NEW_COLUMN, column: new ColumnTableModel(newColumn_1) });
_b.label = 3;
case 3: return [2 /*return*/];
}
});
}); });
;
};
/**
* editColumn
*
* Edit a column from the table
*/
NgxTableComponent.prototype.editColumn = function () {
var _this = this;
this.dialog.open(EditColumnDialogComponent, {
width: '40vw',
height: 'auto',
data: {
action: ActionColumnType.EDIT,
columns: this.columns.filter(function (c) { return (!c.hide && !c.action); }),
config: this.config
}
}).afterClosed().subscribe(function (result) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var functionsType_2, functions_2, newPosition, selecColumn, oldColumn, columnTempReview, _a, columnTemp, numSumaryColumns;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
if (!(!!result && !!result.name && !!result.name.length && !!result.column)) return [3 /*break*/, 3];
functionsType_2 = FunctionTypes;
functions_2 = [];
result.functions.map(function (f, i) {
if (!!f) {
functions_2.push({ type: functionsType_2[i].type, unit: (!!result.unitsFuntions[i]) ? result.unitsFuntions[i] : '' });
}
});
newPosition = (!this.columns[0].hide) ? result.newPosition - 1 : result.newPosition;
selecColumn = (!this.columns[0].hide) ? result.column - 1 : result.column;
oldColumn = Object.assign({}, this.columns[selecColumn]);
columnTempReview = Object.assign({}, oldColumn);
columnTempReview.name = result.name;
columnTempReview.editable = result.editable;
columnTempReview.sumary = functions_2;
_a = !!this.beforeAction &&
this.actionsTocontrol.includes(ActionsType.EDIT_COLUMN);
if (!_a) return [3 /*break*/, 2];
return [4 /*yield*/, this.beforeAction.call(this, { name: ActionsType.EDIT_COLUMN, oldColumn: oldColumn, updatedColumn: new ColumnTableModel(columnTempReview) })];
case 1:
_a = !(_b.sent());
_b.label = 2;
case 2:
if (_a)
return [2 /*return*/];
this.columns[selecColumn].name = result.name;
this.columns[selecColumn].editable = result.editable;
this.columns[selecColumn].sumary = functions_2;
columnTemp = this.columns.splice(selecColumn, 1);
if (newPosition == this.columns.length)
this.columns.push(new ColumnTableModel(columnTemp[0]));
else
this.columns.splice(newPosition, 0, new ColumnTableModel(columnTemp[0]));
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 }); });
numSumaryColumns = !!this.sumaryColumns.length;
this.sumaryColumns = this.columns.filter(function (c) { return !!c.visible && !!new ColumnTableModel(c).sumary.length; });
this.updateSumaryColumns();
this.editColumnOuput.emit({ name: ActionsType.EDIT_COLUMN, oldColumn: oldColumn, updatedColumn: new ColumnTableModel(columnTemp[0]) });
if (numSumaryColumns !== !!this.sumaryColumns.length)
this.resize(10);
_b.label = 3;
case 3: return [2 /*return*/];
}
});
}); });
;
};
/**
* deleteColumn
*
* Remove a column from the table
*/
NgxTableComponent.prototype.deleteColumn = function () {
var _this = this;
this.dialog.open(EditColumnDialogComponent, {
width: '40vw',
height: 'auto',
data: {
action: ActionColumnType.DELETE,
columns: this.columns.filter(function (c) { return (!c.hide && !c.action); }),
config: this.config
}
}).afterClosed().subscribe(function (result) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var selecColumn, idColumn_1, _a, deleteColumn, numSumaryColumns;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
if (!(!!result && !!result.column)) return [3 /*break*/, 3];
selecColumn = (!this.columns[0].hide) ? result.column - 1 : result.column;
idColumn_1 = this.columns[selecColumn].prop;
_a = !!this.beforeAction && this.actionsTocontrol.includes(ActionsType.DELETE_COLUMN);
if (!_a) return [3 /*break*/, 2];
return [4 /*yield*/, this.beforeAction.call(this, { name: ActionsType.DELETE_COLUMN, column: this.columns[selecColumn] })];
case 1:
_a = !(_b.sent());
_b.label = 2;
case 2:
if (_a)
return [2 /*return*/];
deleteColumn = this.columns.splice(selecColumn, 1);
this.buildFilterByColumns();
this.rows.forEach(function (r) { return delete r[idColumn_1]; });
numSumaryColumns = !!this.sumaryColumns.length;
this.sumaryColumns = this.columns.filter(function (c) { return !!c.visible && !!new ColumnTableModel(c).sumary.length; });
this.updateSumaryColumns();
this.deleteColumnOuput.emit({ name: ActionsType.DELETE_COLUMN, column: deleteColumn[0] });
if (numSumaryColumns !== !!this.sumaryColumns.length)
this.resize(10);
_b.label = 3;
case 3: return [2 /*return*/];
}
});
}); });
};
/**
* updateSumaryColumns
*
* Update the data of the sumary displayed in the footer
*/
NgxTableComponent.prototype.updateSumaryColumns = function () {
var _this = this;
this.dataSumary = [];
this.sumaryColumns.forEach(function (c) {
c.sumary.forEach(function (sumary) {
switch (sumary.type) {
case SumaryTypes.SUM:
var sum_1 = 0;
_this.rows.forEach(function (r) {
if (!!_this.isNumeric(r[c.prop]))
sum_1 += parseFloat(r[c.prop]);
});
_this.dataSumary.push({ text: _this.config.language.total, column: c.name, data: sum_1, unit: sumary.unit });
break;
case SumaryTypes.AVERAGE:
var elements_1 = 0;
var total_1 = 0;
_this.rows.forEach(function (r) {
if (!!_this.isNumeric(r[c.prop])) {
total_1 += parseFloat(r[c.prop]);
}
elements_1++;
});
_this.dataSumary.push({ text: _this.config.language.avarage, column: c.name, data: (!!total_1) ? (total_1 / elements_1).toFixed(2) : 0, unit: sumary.unit });
break;
case SumaryTypes.MAX:
var max_1 = 0;
_this.rows.forEach(function (r) {
if (!!_this.isNumeric(r[c.prop]) && parseFloat(r[c.prop]) > max_1)
max_1 = parseFloat(r[c.prop]);
});
_this.dataSumary.push({ text: _this.config.language.maximum, column: c.name, data: max_1, unit: sumary.unit });
break;
case SumaryTypes.MIN:
var min_1 = (!!_this.rows.length && !!_this.isNumeric(_this.rows[0][c.prop])) ? parseFloat(_this.rows[0][c.prop]) : 0;
_this.rows.forEach(function (r) {
if (!!_this.isNumeric(r[c.prop]) && parseFloat(r[c.prop]) < min_1)
min_1 = parseFloat(r[c.prop]);
});
_this.dataSumary.push({ text: _this.config.language.minimum, column: c.name, data: min_1, unit: sumary.unit });
break;
default:
}
});
});
};
/**
* isNumeric
*
* Check if a data is numeric
*/
NgxTableComponent.prototype.isNumeric = function (value) {
return !isNaN(parseFloat(value)) && isFinite(value);
};
/**
* checkPredefinedDataColumn
*
* Enter default data to columns that have the predefinedData property only if it is not already defined in the row
*/
NgxTableComponent.prototype.checkPredefinedDataColumn = function () {
var _this = this;
var columnsPredefinedData = this.columns.filter(function (c) { return !!c.predefinedData; });
columnsPredefinedData.forEach(function (c) {
_this.data.forEach(function (r) {
if (!r.hasOwnProperty(c.prop))
r[c.prop] = c.predefinedData;
});
});
};
/**
* configureColumns
*
* Open the modal to configure the visibility, order and option to set columns
*/
NgxTableComponent.prototype.configureColumns = function () {
var _this = this;
var dialogConfig = Object.assign(new MatDialogConfig(), {
disableClose: true,
autoFocus: true,
top: 0,
right: 0,
panelClass: 'right-fixed',
data: {
columns: this.columns.filter(function (col) { return !col.hide && !col.action; }),
config: this.config
}
});
var dialog = this.dialog.open(GridColumnsComponent, dialogConfig);
dialog.afterClosed().subscribe(function (data) {
if (!data)
return;
var columns = [];
_this.columns.forEach(function (c) {
if (!!c.hide)
columns.push(new ColumnTableModel(c));
});
data.forEach(function (c) { return columns.push(new ColumnTableModel(c)); });
_this.columns.forEach(function (c) {
if (!!c.action)
columns.push(new ColumnTableModel(c));
});
_this.columns = columns;
_this.buildFilterByColumns();
var numSumaryColumns = !!_this.sumaryColumns.length;
_this.sumaryColumns = _this.columns.filter(function (c) { return c.visible && !!new ColumnTableModel(c).sumary.length; });
_this.updateSumaryColumns();
if (numSumaryColumns !== !!_this.sumaryColumns.length)
_this.resize(10);
});
};
NgxTableComponent.prototype.ngOnDestroy = function () {
if (!!this.subscriptionChanges)
this.subscriptionChanges.unsubscribe();
};
NgxTableComponent.ctorParameters = function () { return [
{ type: NgxTableService },
{ type: NotificationNgxService },
{ type: MatDialog }
]; };
tslib_1.__decorate([
ViewChild('search', { static: false })
], NgxTableComponent.prototype, "search", void 0);
tslib_1.__decorate([
Input()
], NgxTableComponent.prototype, "name", void 0);
tslib_1.__decorate([
Input()
], NgxTableComponent.prototype, "config", void 0);
tslib_1.__decorate([
Input()
], NgxTableComponent.prototype, "columns", void 0);
tslib_1.__decorate([
Input()
], NgxTableComponent.prototype, "data", void 0);
tslib_1.__decorate([
Input()
], NgxTableComponent.prototype, "viewDialog", void 0);
tslib_1.__decorate([
Input()
], NgxTableComponent.prototype, "beforeAction", void 0);
tslib_1.__decorate([
Input()
], NgxTableComponent.prototype, "actionsTocontrol", void 0);
tslib_1.__decorate([
Output()
], NgxTableComponent.prototype, "event", void 0);
tslib_1.__decorate([
Output()
], NgxTableComponent.prototype, "click", void 0);
tslib_1.__decorate([
Output()
], NgxTableComponent.prototype, "dblclick", void 0);
tslib_1.__decorate([
Output()
], NgxTableComponent.prototype, "singleSelection", void 0);
tslib_1.__decorate([
Output()
], NgxTableComponent.prototype, "multipleSelection", void 0);
tslib_1.__decorate([
Output()
], NgxTableComponent.prototype, "visibleDataTable", void 0);
tslib_1.__decorate([
Output()
], NgxTableComponent.prototype, "dataTable", void 0);
tslib_1.__decorate([
Output()
], NgxTableComponent.prototype, "updateRow", void 0);
tslib_1.__decorate([
Output()
], NgxTableComponent.prototype, "newColumn", void 0);
tslib_1.__decorate([
Output(ActionsType.EDIT_COLUMN)
], NgxTableComponent.prototype, "editColumnOuput", void 0);
tslib_1.__decorate([
Output(ActionsType.DELETE_COLUMN)
], NgxTableComponent.prototype, "deleteColumnOuput", void 0);
tslib_1.__decorate([
HostListener('window:resize', ['$event'])
], NgxTableComponent.prototype, "onResize", null);
NgxTableComponent = tslib_1.__decorate([
Component({
selector: 'ngx-table-powerfull',
template: "<div class=\"row\" [ngClass]=\"{ 'maximize': !!fullscreen }\">\r\n <div class=\"col-12 ngx-table-powerfull\">\r\n <div [ngClass]=\"{'card': (!!config.cardBody || !!fullscreen) && (!viewDialog || !!fullscreen)}\" >\r\n <div class=\"card-body\" [ngClass]=\"{ 'table-dialog': !!viewDialog && !!fullscreen }\">\r\n <h4 class=\"card-title\" [ngClass]=\"{ 'min-height': !!config.visibleTitle || !!config.fullscreen }\">{{ !!config.visibleTitle ? name : '' }}</h4>\r\n\r\n <div class=\"row mt-4 px-4\">\r\n <button *ngIf=\"!!config.fullscreen\" [ngClass]=\"{ 'button-fullscreen': !viewDialog, 'button-fullscreen-dialog': !!viewDialog, 'button-fullscreen-dialog-f': !!viewDialog && !!fullscreen }\" (click)=\"toggleFullscreen()\">\r\n <i *ngIf=\"!fullscreen\" class=\"material-icons\" [matTooltip]=\"config.language.maximize\">fullscreen</i>\r\n <i *ngIf=\"!!fullscreen\" class=\"material-icons\" [matTooltip]=\"config.language.restore\">fullscreen_exit</i>\r\n </button>\r\n\r\n <i *ngIf=\"!!viewDialog\" class=\"material-icons\" [ngClass]=\"{ 'default-close': !fullscreen, 'fullscreen-close': !!fullscreen }\" (click)=\"closeDialog()\" [matTooltip]=\"config.language.close\">close</i>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <div class=\"row\" style=\"min-height: 48px !important;\">\r\n\r\n <div class=\"col-12 filter-search\" [ngClass]=\"{'col-lg-6': !!rowsTempTableAdd.length && !!config.viewDialogTable , 'col-lg-7': !rowsTempTableAdd.length || !config.viewDialogTable }\">\r\n\r\n <mat-form-field *ngIf=\"!!config.filter && config.classTable === 'material'\" class=\"example-full-width\" style=\"width: 100%; margin-top: -10px !important;\">\r\n <mat-label>{{ config.language.filterResults }}</mat-label>\r\n <input matInput #search id=\"search\" type=\"text\">\r\n </mat-form-field>\r\n\r\n <input #search *ngIf=\"!!config.filter && config.classTable === 'boostrap'\" id=\"search\" class=\"form-control\" type=\"text\" [placeholder]=\"config.language.filterResults\"/>\r\n\r\n <ng-multiselect-dropdown\r\n *ngIf=\"!!selectColumnsFilter\"\r\n class=\"selected-columns\"\r\n [placeholder]=\"config.language.selectColumns\"\r\n [data]=\"columnsFilterList\"\r\n [(ngModel)]=\"selectedColumnsFilter\"\r\n [settings]=\"dropdownSettings\"\r\n (ngModelChange)=\"onChangeSelectFilter()\"\r\n >\r\n </ng-multiselect-dropdown>\r\n\r\n </div>\r\n\r\n <div class=\"col-12 col-lg-1 setting\">\r\n <i *ngIf=\"!selectColumnsFilter && !!config.filter && !!config.filterByColumn\" class=\"material-icons settings-search\" [matTooltip]=\"config.language.configureFilter\" (click)=\"openConfigFilter()\">settings</i>\r\n <i *ngIf=\"!!selectColumnsFilter && !!config.filter && !!config.filterByColumn\" class=\"material-icons settings-search\" [matTooltip]=\"config.language.closeConfigure\" (click)=\"openConfigFilter()\">close</i>\r\n </div>\r\n\r\n <div class=\"col-12 text-right\" [ngClass]=\"{'col-lg-5': !!rowsTempTableAdd.length && !!config.viewDialogTable , 'col-lg-4': !rowsTempTableAdd.length || !config.viewDialogTable}\">\r\n \r\n <button *ngIf=\"!!rowsTempTableAdd.length && !!config.viewDialogTable\" class=\"btn btnPrimary-outline-generate\" (click)=\"openDialog()\">\r\n {{ config.multipleButtonText }}\r\n {{ (!!config.visibleNumberRowsButton) ? ((rowsTempTableAdd.length > 1 ) ? rowsTempTableAdd.length + ' ' + config.language.rows : rowsTempTableAdd.length + ' ' + config.language.row) : ''}}\r\n </button>\r\n\r\n <button *ngIf=\"!!rows.length && (!!config.exportExcel || !!config.exportPdf)\" mat-raised-button class=\"btn btn-export btnPrimary-outline\" [matMenuTriggerFor]=\"exportMenu\">\r\n {{ config.language.export }} <i class=\"material-icons float