CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix datatable multirow delete rows (#1766)

Browse Source 
Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>
This commit is contained in:
José Alberto Hernández
2023-06-10 21:27:36 -06:00
committed by GitHub
co-authored by Jose Alberto Hernandez
parent 6bba522108
commit 1b60a8f43c
2 changed files with 56 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html
+2 -2
View File
@@ -24,7 +24,7 @@
</div>
<div class="m-t-10">
<table #dataTable mat-table [dataSource]="datatableData" class="mat-elevation-z1 m-b-25">
<table #dataTable mat-table [dataSource]="datatableData" class="mat-elevation-z1 m-b-25" [fxHide]="isLoading">
<ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
<ng-container *ngIf="i == 0">
@@ -39,7 +39,7 @@
<ng-container *ngIf="i > 0">
<th mat-header-cell class="right" *matHeaderCellDef> {{datatableColumn}} </th>
<td mat-cell class="right" *matCellDef="let data" [ngClass]="isToDelete(data)">
{{ formatValue(i, data.row[i - 1]) }}
{{ formatValue(data, datatableColumn) }}
</td>
</ng-container>
</ng-container>
src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.ts
+54 -33
View File
@@ -41,6 +41,7 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
/** Row Selection Data */
selection: SelectionModel<any>;
isSelected = false;
isLoading = false;
/** Data Table Reference */
@ViewChild('dataTable') dataTableRef: MatTable<Element>;
@@ -78,9 +79,7 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
}
ngOnDestroy(): void {
this.datatableName = null;
this.datatableColumns = null;
this.datatableData = null;
this.resetData();
}
ngOnChanges(changes: SimpleChanges): void {
@@ -102,6 +101,25 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
}
}
resetData() {
this.datatableName = null;
this.datatableColumns = null;
this.datatableData = null;
}
getData() {
this.isLoading = true;
this.systemService.getEntityDatatable(this.entityId, this.datatableName).subscribe((dataObject: any) => {
this.dataObject.data = dataObject.data;
this.showDeleteBotton = false;
if (this.dataTableRef) {
this.setData();
}
this.isSelected = false;
this.isLoading = false;
});
}
/**
* Adds a new row to the given multi row data table.
*/
@@ -121,13 +139,8 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
});
dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
this.systemService.addEntityDatatableEntry(this.entityId, this.datatableName, dataTableEntryObject).subscribe(() => {
this.systemService.getEntityDatatable(this.entityId, this.datatableName).subscribe((dataObject: any) => {
this.datatableData = dataObject.data;
if (this.dataTableRef) {
this.dataTableRef.renderRows();
}
});
this.systemService.addEntityDatatableEntry(this.entityId, this.datatableName, dataTableEntryObject).subscribe((result: any) => {
this.getData();
});
}
});
@@ -143,13 +156,7 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
if (response.delete) {
this.systemService.deleteDatatableContent(this.entityId, this.datatableName).subscribe(() => {
this.systemService.getEntityDatatable(this.entityId, this.datatableName).subscribe((dataObject: any) => {
this.datatableData = dataObject.data;
this.showDeleteBotton = false;
if (this.dataTableRef) {
this.dataTableRef.renderRows();
}
});
this.getData();
});
}
});
@@ -164,33 +171,47 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
});
deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
if (response.delete) {
this.isSelected = false;
this.selection.selected.forEach((data) => {
this.systemService.deleteDatatableEntry(this.entityId, data.row[1], this.datatableName).subscribe(() => {
this.systemService.deleteDatatableEntry(this.entityId, data.row[0], this.datatableName).subscribe(() => {
this.datatableData.forEach((item: any, index: any) => {
if (item.row[1] === data.row[1]) {
delete this.datatableData[index];
if (item.row[0] === data.row[0]) {
this.datatableData.splice(index, 1);
this.dataTableRef.renderRows();
this.selection = new SelectionModel(true, []);
this.isSelected = (this.selection.selected.length > 0);
}
});
});
});
} else {
this.selection = new SelectionModel(true, []);
this.isSelected = (this.selection.selected.length > 0);
}
});
}
formatValue(index: number, value: any): any {
if (this.dataObject.columnHeaders && this.dataObject.columnHeaders[index]) {
const columnDisplayType = this.dataObject.columnHeaders[index].columnDisplayType;
if (columnDisplayType === 'DATE') {
return this.dateFormat.transform(value);
} else if (columnDisplayType === 'DATETIME') {
return this.dateTimeFormat.transform(value);
} else if (columnDisplayType === 'INTEGER' || columnDisplayType === 'DECIMAL') {
if (typeof value === 'number') {
return this.numberFormat.transform(value);
} else {
return value;
formatValue(data: any, columnName: string): any {
let value: any = '';
if (this.dataObject.columnHeaders) {
let idx = 0;
this.dataObject.columnHeaders.some((columnHeader: any) => {
if (columnHeader.columnName === columnName) {
const columnDisplayType = columnHeader.columnDisplayType;
value = data.row[idx];
if (columnDisplayType === 'DATE') {
value = this.dateFormat.transform(value);
} else if (columnDisplayType === 'DATETIME') {
value = this.dateTimeFormat.transform(value);
} else if (columnDisplayType === 'INTEGER' || columnDisplayType === 'DECIMAL') {
if (typeof value === 'number') {
value = this.numberFormat.transform(value);
}
}
return true;
}
}
idx += 1;
});
}
return value;
}