Update editnewdash.component.ts

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts

@@ -688,9 +688,15 @@ export class EditnewdashComponent implements OnInit {
     console.log(this.entryForm.value);
     this.dashboardCollection.dashboard = this.dashboardCollection.dashboard.map(item => {
       if (item.chartid == num) {
+        // Preserve the component reference
+        const componentRef = item.component;
+        
         //item["product_id"] = "thisistest";
         const xyz = { ...item, ...formdata }
         
+        // Restore the component reference
+        xyz.component = componentRef;
+        
         // Explicitly ensure drilldown properties are preserved
         xyz.drilldownEnabled = this.gadgetsEditdata.drilldownEnabled;
         xyz.drilldownApiUrl = this.gadgetsEditdata.drilldownApiUrl;
@@ -708,6 +714,23 @@ export class EditnewdashComponent implements OnInit {
       return item
     });
     console.log('dashboard collection ', this.dashboardCollection.dashboard);
+    
+    // Force gridster to refresh by triggering change detection
+    if (this.options && this.options.api) {
+      this.options.api.optionsChanged();
+    }
+    
+    // Trigger change detection manually
+    // This is a workaround to ensure the gridster re-renders the components
+    setTimeout(() => {
+      // Force a refresh by temporarily setting dashboardArray to empty and then back
+      const tempArray = [...this.dashboardArray];
+      this.dashboardArray = [];
+      setTimeout(() => {
+        this.dashboardArray = tempArray;
+      }, 0);
+    }, 0);
+    
     this.modeledit = false;
 
     // this.entryForm.reset();
@@ -782,9 +805,15 @@ export class EditnewdashComponent implements OnInit {
     // Update the dashboard collection with the new configuration
     this.dashboardCollection.dashboard = this.dashboardCollection.dashboard.map(item => {
       if (item.chartid == num) {
+        // Preserve the component reference
+        const componentRef = item.component;
+        
         // Merge the existing item with the new form data
         const updatedItem = { ...item, ...formdata }
         
+        // Restore the component reference
+        updatedItem.component = componentRef;
+        
         // Explicitly ensure drilldown properties are preserved
         updatedItem.drilldownEnabled = this.gadgetsEditdata.drilldownEnabled;
         updatedItem.drilldownApiUrl = this.gadgetsEditdata.drilldownApiUrl;
@@ -806,13 +835,31 @@ export class EditnewdashComponent implements OnInit {
     
     // Update the dashboardArray to reflect changes immediately
     // Create a new array with new object references to ensure change detection
-    this.dashboardArray = this.dashboardCollection.dashboard.map(item => ({ ...item }));
+    this.dashboardArray = this.dashboardCollection.dashboard.map(item => {
+      // Preserve the component reference
+      const componentRef = item.component;
+      const newItem = { ...item };
+      // Restore the component reference
+      newItem.component = componentRef;
+      return newItem;
+    });
     
-    // Force gridster to refresh
+    // Force gridster to refresh by triggering change detection
     if (this.options && this.options.api) {
       this.options.api.optionsChanged();
     }
     
+    // Trigger change detection manually
+    // This is a workaround to ensure the gridster re-renders the components
+    setTimeout(() => {
+      // Force a refresh by temporarily setting dashboardArray to empty and then back
+      const tempArray = [...this.dashboardArray];
+      this.dashboardArray = [];
+      setTimeout(() => {
+        this.dashboardArray = tempArray;
+      }, 0);
+    }, 0);
+    
     // Note: We don't close the modal here, allowing the user to make additional changes
     // The user can click "Save" when they're done with all changes
   }