viewchile

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

@@ -5,7 +5,7 @@ import { NgComponentOutlet } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Observable, of, forkJoin, throwError } from 'rxjs';
 import { map, switchMap, tap, catchError, take } from 'rxjs/operators';
-import { DashboardLayoutModule, PanelModel } from '@syncfusion/ej2-angular-layouts'; // Import Syncfusion modules
+import { DashboardLayoutComponent, DashboardLayoutModule, PanelModel } from '@syncfusion/ej2-angular-layouts'; // Import Syncfusion modules
 import { MatDialog, MatDialogModule } from '@angular/material/dialog'; // Import MatDialog
 import { NotificationService } from '../../shared/services/notification.service';
 
@@ -101,7 +101,7 @@ export interface DashboardPanel extends PanelModel {
   styleUrls: ['./dashboard-management.component.scss'],
 })
 export class DashboardManagementComponent implements OnInit {
-
+  @ViewChild('editLayout') public layout!: DashboardLayoutComponent;
   public panels: DashboardPanel[] = [];
   public cellSpacing: number[] = [10, 10];
   public mediaQuery: string = 'max-width: 700px';
@@ -177,7 +177,7 @@ export class DashboardManagementComponent implements OnInit {
     ).subscribe(widgets => {
       this.availableWidgets = [...widgets].map(widget => ({
         ...widget,
-        config: widget.config || {} 
+        config: widget.config || {}
       }));
       this.filterWidgets();
     });
@@ -284,18 +284,35 @@ export class DashboardManagementComponent implements OnInit {
   }
 
   saveLayout(): void {
-    if (!this.dashboardData) return;
+    if (!this.dashboardData || !this.layout) return;
+
+    // Get the current layout state directly from the Syncfusion component
+    const currentPanels = this.layout.serialize();
+
+    // Update the widgets array with the latest positions and sizes
+    currentPanels.forEach((panel: PanelModel) => {
+      const widgetIndex = this.dashboardData!.widgets.findIndex(w => w.widgetId === panel.id);
+      if (widgetIndex > -1) {
+        this.dashboardData!.widgets[widgetIndex].x = panel.col!;
+        this.dashboardData!.widgets[widgetIndex].y = panel.row!;
+        this.dashboardData!.widgets[widgetIndex].cols = panel.sizeX!;
+        this.dashboardData!.widgets[widgetIndex].rows = panel.sizeY!;
+      }
+    });
+
+    // Now, prepare the data for saving (deep copy and stringify)
     const dashboardToSave = JSON.parse(JSON.stringify(this.dashboardData));
     if (dashboardToSave.widgets) {
       dashboardToSave.widgets.forEach((widget: WidgetModel) => {
         const keysToProcess: Array<keyof WidgetModel> = ['config', 'perspective', 'data'];
         keysToProcess.forEach(key => {
-            if ((widget as any)[key] && typeof (widget as any)[key] === 'object') {
-                (widget as any)[key] = JSON.stringify((widget as any)[key]);
-            }
+          if ((widget as any)[key] && typeof (widget as any)[key] === 'object') {
+            (widget as any)[key] = JSON.stringify((widget as any)[key]);
+          }
         });
       });
     }
+
     this.dashboardDataService.saveDashboard(dashboardToSave).pipe(
       catchError(error => {
         this.notificationService.error('Error', 'Failed to save dashboard layout.');
@@ -309,28 +326,28 @@ export class DashboardManagementComponent implements OnInit {
 
   addWidgetToDashboard(widget: WidgetModel): void {
     if (!this.dashboardData) {
-        this.notificationService.warning('Warning', 'Please select or create a dashboard first.');
-        return;
+      this.notificationService.warning('Warning', 'Please select or create a dashboard first.');
+      return;
     }
     if (!this.dashboardData.datasetId) {
-        this.notificationService.warning('Warning', 'Please select a dataset for the dashboard first.');
-        return;
+      this.notificationService.warning('Warning', 'Please select a dataset for the dashboard first.');
+      return;
     }
 
     this.dashboardStateService.selectedDataset$.pipe(
-        take(1)
+      take(1)
     ).subscribe(selectedDataset => {
-        if (!selectedDataset || !selectedDataset.columns || selectedDataset.columns.length === 0) {
-            this.notificationService.error('Error', 'The selected dataset has no columns available.');
-            return;
-        }
+      if (!selectedDataset || !selectedDataset.columns || selectedDataset.columns.length === 0) {
+        this.notificationService.error('Error', 'The selected dataset has no columns available.');
+        return;
+      }
 
-        const newWidgetInstance = new WidgetModel(widget);
-        newWidgetInstance.config = this.widgetConfigGenerator.generateConfig(widget, selectedDataset.columns);
+      const newWidgetInstance = new WidgetModel(widget);
+      newWidgetInstance.config = this.widgetConfigGenerator.generateConfig(widget, selectedDataset.columns);
 
-        this.dashboardData!.widgets.push(newWidgetInstance);
-        this.panels = this.mapWidgetsToPanels(this.dashboardData!.widgets);
-        this.notificationService.info('Info', `Added widget: ${widget.thName}`);
+      this.dashboardData!.widgets.push(newWidgetInstance);
+      this.panels = this.mapWidgetsToPanels(this.dashboardData!.widgets);
+      this.notificationService.info('Info', `Added widget: ${widget.thName}`);
     });
   }
 
@@ -410,4 +427,4 @@ export class DashboardManagementComponent implements OnInit {
       });
     }
   }
-}
\ No newline at end of file
+}