From 8f1417b5705611192aaf1fc1fc33eda2a45a0f49 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: Thu, 4 May 2023 01:02:27 -0600
Subject: [PATCH] Fix datatable multirow resfresh (#1746)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
---
 .../datatable-multi-row.component.html        |  4 +--
 .../datatable-multi-row.component.ts          | 34 ++++++++++++++-----
 2 files changed, 27 insertions(+), 11 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 3eef835e9..a3e87b4b4 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" id="selector-{{datatableName}}">
+<div class="tab-container mat-typography">
 
   <div fxLayout="row" fxLayoutAlign="start">
     <div class="m-b-10">
@@ -18,7 +18,7 @@
     </div>
   </div>
 
-  <div class="m-t-10" *ngIf="dataObject.data.length > 0">
+  <div class="m-t-10">
     <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">
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 4f766c856..a9c50c40b 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
@@ -1,5 +1,5 @@
 import { DecimalPipe } from '@angular/common';
-import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatTable } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
@@ -18,7 +18,7 @@ import { SystemService } from 'app/system/system.service';
   templateUrl: './datatable-multi-row.component.html',
   styleUrls: ['./datatable-multi-row.component.scss']
 })
-export class DatatableMultiRowComponent implements OnInit, OnDestroy {
+export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges {
 
   /** Data Object */
   @Input() dataObject: any;
@@ -36,7 +36,7 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy {
   showDeleteBotton: boolean;
 
   /** Data Table Reference */
-  @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
+  @ViewChild('dataTable') dataTableRef: MatTable<Element>;
 
   /**
    * Fetches center Id from parent route params.
@@ -65,10 +65,7 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy {
     this.route.params.subscribe((routeParams: any) => {
       this.datatableName = routeParams.datatableName;
     });
-    this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => {
-      return columnHeader.columnName;
-    });
-    this.datatableData = this.dataObject.data;
+    this.setData();
   }
 
   ngOnDestroy(): void {
@@ -77,6 +74,21 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy {
     this.datatableData = null;
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    this.setData();
+  }
+
+  setData() {
+    this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => {
+      return columnHeader.columnName;
+    });
+    this.datatableData = this.dataObject.data;
+
+    if (this.dataTableRef) {
+      this.dataTableRef.renderRows();
+    }
+  }
+
   /**
    * Adds a new row to the given multi row data table.
    */
@@ -99,7 +111,9 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy {
         this.systemService.addEntityDatatableEntry(this.entityId, this.datatableName, dataTableEntryObject).subscribe(() => {
           this.systemService.getEntityDatatable(this.entityId, this.datatableName).subscribe((dataObject: any) => {
             this.datatableData = dataObject.data;
-            this.dataTableRef.renderRows();
+            if (this.dataTableRef) {
+              this.dataTableRef.renderRows();
+            }
           });
         });
       }
@@ -119,7 +133,9 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy {
           this.systemService.getEntityDatatable(this.entityId, this.datatableName).subscribe((dataObject: any) => {
             this.datatableData = dataObject.data;
             this.showDeleteBotton = false;
-            this.dataTableRef.renderRows();
+            if (this.dataTableRef) {
+              this.dataTableRef.renderRows();
+            }
            });
         });
       }