From 625d75a0f587b4ffecadb7e6a3c4715a6bacc09f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Alberto=20Hern=C3=A1ndez?=
 <44206706+josehernandezfintecheandomx@users.noreply.github.com>
Date: Mon, 24 Apr 2023 22:08:23 -0600
Subject: [PATCH] Fix/multirow data datatable (#1741)

* Fix charge payment method edition

* Fix DataTables due incorrect records shown

---------

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
---
 .../datatable-multi-row.component.html        | 22 ++++++------
 .../datatable-multi-row.component.ts          | 34 ++++++++-----------
 2 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html b/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html
index c54a5851a..3eef835e9 100644
--- a/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html
+++ b/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html
@@ -1,4 +1,4 @@
-<div class="tab-container mat-typography">
+<div class="tab-container mat-typography" id="selector-{{datatableName}}">
 
   <div fxLayout="row" fxLayoutAlign="start">
     <div class="m-b-10">
@@ -11,23 +11,25 @@
         </button>
       </span>
       <span *mifosxHasPermission="'DELETE_' + datatableName">
-        <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="hasEntityData">
+        <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data.length > 0">
           <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
         </button>
       </span>
     </div>
   </div>
 
-  <table #dataTable mat-table [hidden]="!hasEntityData" [dataSource]="datatableData" class="mat-elevation-z1 m-b-25">
+  <div class="m-t-10" *ngIf="dataObject.data.length > 0">
+    <table #dataTable mat-table [dataSource]="datatableData" class="mat-elevation-z1 m-b-25">
 
-    <ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
-      <th mat-header-cell class="right" *matHeaderCellDef> {{datatableColumn}} </th>
-      <td mat-cell class="right" *matCellDef="let data">{{ formatValue(i, data.row[i]) }}</td>
-    </ng-container>
+      <ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
+        <th mat-header-cell class="right" *matHeaderCellDef> {{datatableColumn}} </th>
+        <td mat-cell class="right" *matCellDef="let data">{{ formatValue(i, data.row[i]) }}</td>
+      </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: datatableColumns;"></tr>
+      <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: datatableColumns;"></tr>
 
-  </table>
+    </table>
+  </div>
 
 </div>
diff --git a/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.ts b/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.ts
index c2c8ba888..4f766c856 100644
--- a/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.ts
+++ b/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.ts
@@ -34,7 +34,6 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy {
 
   /** Toggle button visibility */
   showDeleteBotton: boolean;
-  hasEntityData = false;
 
   /** Data Table Reference */
   @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
@@ -56,9 +55,7 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy {
               private datatables: Datatables,
               private dateFormat: DateFormatPipe,
               private dateTimeFormat: DatetimeFormatPipe,
-              private numberFormat: DecimalPipe) {
-
-    }
+              private numberFormat: DecimalPipe) { }
 
   /**
    * Fetches data table name from route params.
@@ -72,17 +69,12 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy {
       return columnHeader.columnName;
     });
     this.datatableData = this.dataObject.data;
-    this.hasEntityData = (this.datatableData && this.datatableData.length > 0);
-    console.log(this.hasEntityData);
-    console.log(this.dataObject.data);
   }
 
   ngOnDestroy(): void {
+    this.datatableName = null;
     this.datatableColumns = null;
     this.datatableData = null;
-    this.hasEntityData = false;
-    console.log(this.hasEntityData);
-    console.log(this.dataObject.data);
   }
 
   /**
@@ -135,16 +127,18 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy {
   }
 
   formatValue(index: number, value: any): any {
-    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;
+    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;
+        }
       }
     }
     return value;