Fix datatable multirow delete rows (#1766)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html

@@ -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

@@ -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.resetData();
-    this.datatableColumns = null;
-    this.datatableData = null;
   }
 
   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.addEntityDatatableEntry(this.entityId, this.datatableName, dataTableEntryObject).subscribe((result: any) => {
-          this.systemService.getEntityDatatable(this.entityId, this.datatableName).subscribe((dataObject: any) => {
+          this.getData();
-            this.datatableData = dataObject.data;
-            if (this.dataTableRef) {
-              this.dataTableRef.renderRows();
-            }
-          });
         });
       }
     });
@@ -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.getData();
-            this.datatableData = dataObject.data;
-            this.showDeleteBotton = false;
-            if (this.dataTableRef) {
-              this.dataTableRef.renderRows();
-            }
-           });
         });
       }
     });
@@ -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]) {
+              if (item.row[0] === data.row[0]) {
-                delete this.datatableData[index];
+                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 {
+  formatValue(data: any, columnName: string): any {
-    if (this.dataObject.columnHeaders && this.dataObject.columnHeaders[index]) {
+    let value: any = '';
-      const columnDisplayType = this.dataObject.columnHeaders[index].columnDisplayType;
+    if (this.dataObject.columnHeaders) {
-      if (columnDisplayType === 'DATE') {
+      let idx = 0;
-        return this.dateFormat.transform(value);
+      this.dataObject.columnHeaders.some((columnHeader: any) => {
-      } else if (columnDisplayType === 'DATETIME') {
+        if (columnHeader.columnName === columnName) {
-        return this.dateTimeFormat.transform(value);
+          const columnDisplayType = columnHeader.columnDisplayType;
-      } else if (columnDisplayType === 'INTEGER' || columnDisplayType === 'DECIMAL') {
+          value = data.row[idx];
-        if (typeof value === 'number') {
+          if (columnDisplayType === 'DATE') {
-          return this.numberFormat.transform(value);
+            value = this.dateFormat.transform(value);
-        } else {
+          } else if (columnDisplayType === 'DATETIME') {
-          return value;
+            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;
   }