remove widget

src/app/portal-manage/dashboard-management/dashboard-management.component.html

@@ -111,7 +111,7 @@
             <e-panels>
               <e-panel
                 *ngFor="let panel of panels"
-                [id]="panel.id + '-' + panel.row + '-' + panel.col"
+                [id]="panel.id"
                 [sizeX]="panel.sizeX"
                 [sizeY]="panel.sizeY"
                 [row]="panel.row"
@@ -131,11 +131,7 @@
                         <i class="bi bi-gear"></i>
                       </button>
                       <button
-                        (click)="
-                          removeWidgetFromDashboard(
-                            panel.id + '-' + panel.row + '-' + panel.col
-                          )
-                        "
+                        (click)="removeWidgetFromDashboard(panel.id!)"
                         class="text-red-500 hover:text-red-700 p-1 rounded hover:bg-red-50 transition-colors"
                         title="Remove widget"
                         aria-label="Remove widget"

src/app/portal-manage/dashboard-management/dashboard-management.component.ts

@@ -321,10 +321,33 @@ export class DashboardManagementComponent implements OnInit {
   }
 
   removeWidgetFromDashboard(panelId: string): void {
-    if (!this.dashboardData) return;
-    if (confirm('Are you sure you want to remove this widget?' + panelId)) {
-      this.dashboardData.widgets = this.dashboardData.widgets.filter((w: any) => w.instanceId !== panelId);
-      this.panels = this.mapWidgetsToPanels(this.dashboardData.widgets);
+    if (!this.dashboardData || !panelId) return;
+    if (confirm('Are you sure you want to remove this widget?')) {
+      // Find the widget by matching the panel ID
+      // Panel ID format: instanceId-y-x
+      const widgetToRemove = this.dashboardData.widgets.find((w: any) => {
+        const expectedPanelId = `${w.instanceId}-${w.y}-${w.x}`;
+        return expectedPanelId === panelId;
+      });
+
+      if (widgetToRemove) {
+        this.dashboardData.widgets = this.dashboardData.widgets.filter((w: any) => w !== widgetToRemove);
+        this.panels = this.mapWidgetsToPanels(this.dashboardData.widgets);
+
+        // Save the dashboard after removing the widget
+        const dashboardToSave = this.convertWidgetsToStrings(this.dashboardData);
+        this.dashboardDataService.saveDashboard(dashboardToSave).pipe(
+          catchError(error => {
+            this.notificationService.error('Error', 'Failed to save dashboard after widget removal.');
+            return throwError(() => error);
+          })
+        ).subscribe(() => {
+          this.notificationService.success('Success', 'Widget removed and dashboard saved successfully!');
+        });
+      } else {
+        this.notificationService.error('Error', 'Widget not found for removal.');
+        console.error('Panel ID not found:', panelId, 'Available widgets:', this.dashboardData.widgets.map(w => `${(w as any).instanceId}-${w.y}-${w.x}`));
+      }
     }
   }