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';
@@ -284,7 +284,23 @@ 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) => {
@@ -296,6 +312,7 @@ export class DashboardManagementComponent implements OnInit {
         });
       });
     }
+
     this.dashboardDataService.saveDashboard(dashboardToSave).pipe(
       catchError(error => {
         this.notificationService.error('Error', 'Failed to save dashboard layout.');