วิดเจ็ท

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

@@ -161,12 +161,13 @@
         [panels]="panels"
         #editLayout
         [allowResizing]="true"
+        [allowDragging]="true"
 
       >
         <e-panels>
           <e-panel
             *ngFor="let panel of panels"
-            [id]="panel.id"
+            [id]="panel.id + '-' + panel.row + '-' + panel.col"
             [sizeX]="panel.sizeX"
             [sizeY]="panel.sizeY"
             [row]="panel.row"
@@ -183,7 +184,7 @@
                     <i class="bi bi-gear"></i>
                   </button>
                   <button
-                    (click)="removeWidgetFromDashboard(panel.id!)"
+                    (click)="removeWidgetFromDashboard(panel.id + '-' + panel.row + '-' + panel.col)"
                     class="text-red-500 hover:text-red-700"
                   >
                     <i class="bi bi-trash"></i>

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

@@ -74,7 +74,8 @@ export class DashboardManagementComponent implements OnInit {
   @ViewChild('editLayout') public layout!: DashboardLayoutComponent;
   public panels: DashboardPanel[] = [];
   public cellSpacing: number[] = [10, 10];
-  public columns: number = 5;
+  public columns: number = 6;
+  public rows: number = 6;
   public availableWidgets: MenuItemsWidget[] = [];
   public filteredAvailableWidgets: MenuItemsWidget[] = [];
   public widgetSearchTerm: string = '';
@@ -143,6 +144,16 @@ export class DashboardManagementComponent implements OnInit {
       ).subscribe(dashboard => {
         if (dashboard) {
           this.dashboardData = dashboard;
+
+          // Ensure all widgets have a unique instanceId for this session
+          if (dashboard.widgets) {
+            dashboard.widgets.forEach((widget: any) => {
+              if (!widget.instanceId) {
+                widget.instanceId = `inst_${Date.now()}_${Math.random()}`;
+              }
+            });
+          }
+
           this.panels = this.mapWidgetsToPanels(dashboard.widgets || []);
           if (dashboard.datasetId) {
             this.dashboardStateService.selectDataset(dashboard.datasetId);
@@ -231,28 +242,30 @@ export class DashboardManagementComponent implements OnInit {
     }
   }
 
-  onPanelChange(args: any): void {
-    if (this.dashboardData && args.changedPanels) {
-      args.changedPanels.forEach((changedPanel: PanelModel) => {
-        const widgetIndex = this.dashboardData!.widgets.findIndex(w => w.widgetId === changedPanel.id);
-        if (widgetIndex > -1) {
-          const updatedWidget = { ...this.dashboardData!.widgets[widgetIndex] };
-          updatedWidget.cols = changedPanel.sizeX!;
-          updatedWidget.rows = changedPanel.sizeY!;
-          updatedWidget.x = changedPanel.col!;
-          updatedWidget.y = changedPanel.row!;
-          this.dashboardData!.widgets[widgetIndex] = updatedWidget;
-        }
-      });
-    }
-  }
+  // onPanelChange(args: any): void {
+  //   if (this.dashboardData && args.changedPanels) {
+  //     args.changedPanels.forEach((changedPanel: PanelModel) => {
+  //       const widgetIndex = this.dashboardData!.widgets.findIndex(w => w.widgetId+"-" + w.y + "-" + w.x === changedPanel.id);
+  //       if (widgetIndex > -1) {
+  //         const updatedWidget = { ...this.dashboardData!.widgets[widgetIndex] };
+  //         updatedWidget.cols = changedPanel.sizeX!;
+  //         updatedWidget.rows = changedPanel.sizeY!;
+  //         updatedWidget.x = changedPanel.col!;
+  //         updatedWidget.y = changedPanel.row!;
+  //         this.dashboardData!.widgets[widgetIndex] = updatedWidget;
+  //       }
+  //     });
+  //   }
+  // }
 
   saveLayout(): void {
     if (!this.dashboardData || !this.layout) return;
 
     const currentPanels = this.layout.serialize();
     currentPanels.forEach((panel: PanelModel) => {
-      const widgetIndex = this.dashboardData!.widgets.findIndex(w => w.widgetId === panel.id);
+      console.log(`Panel ID: ${panel.id}, Col: ${panel.col}, Row: ${panel.row}, SizeX: ${panel.sizeX}, SizeY: ${panel.sizeY}`);
+
+      const widgetIndex = this.dashboardData!.widgets.findIndex((w: any) => panel.id && panel.id.startsWith(w.instanceId));
       if (widgetIndex > -1) {
         this.dashboardData!.widgets[widgetIndex].x = panel.col!;
         this.dashboardData!.widgets[widgetIndex].y = panel.row!;
@@ -260,12 +273,16 @@ export class DashboardManagementComponent implements OnInit {
         this.dashboardData!.widgets[widgetIndex].rows = panel.sizeY!;
       }
     });
-
+    console.log('Current panels from layout:', currentPanels);
+    console.log('Updated widget positions:', this.dashboardData.widgets);
     const dashboardToSave = JSON.parse(JSON.stringify(this.dashboardData));
     if (dashboardToSave.widgets) {
       const allWidgetStates = this.widgetStateService.getAllWidgetStates(); // Get all current widget states
 
-      dashboardToSave.widgets.forEach((widget: WidgetModel) => {
+      dashboardToSave.widgets.forEach((widget: any) => {
+        // Remove the internal-only instanceId before saving
+        delete widget.instanceId;
+
         if (widget.config && typeof widget.config === 'object') {
           widget.config = JSON.stringify(widget.config);
         }
@@ -301,8 +318,16 @@ export class DashboardManagementComponent implements OnInit {
     }
 
     // Create a new widget instance from the menu item's widget template
-    const newWidgetInstance = new WidgetModel(menuItem.widget);
-    if(menuItem.config) {
+    const newWidgetInstance = new WidgetModel(menuItem.widget) as any;
+    newWidgetInstance.instanceId = `inst_${Date.now()}_${Math.random()}`;
+
+    // --- FIX: Calculate next available position ---
+    const nextY = Math.max(0, ...this.dashboardData.widgets.map(w => (w.y || 0) + (w.rows || 1)));
+    newWidgetInstance.y = nextY;
+    newWidgetInstance.x = 0;
+    // --- END FIX ---
+
+    if (menuItem.config) {
       newWidgetInstance.config = menuItem.config;
     }
     // Ensure the config is an object
@@ -322,8 +347,8 @@ export class DashboardManagementComponent implements OnInit {
 
   removeWidgetFromDashboard(panelId: string): void {
     if (!this.dashboardData) return;
-    if (confirm('Are you sure you want to remove this widget?')) {
-      this.dashboardData.widgets = this.dashboardData.widgets.filter(w => w.widgetId !== panelId);
+    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);
     }
   }
@@ -350,7 +375,7 @@ export class DashboardManagementComponent implements OnInit {
 
       dialogRef.afterClosed().subscribe(result => {
         if (result && this.dashboardData) {
-          const widgetIndex = this.dashboardData.widgets.findIndex(w => w.widgetId === widget.widgetId);
+          const widgetIndex = this.dashboardData.widgets.indexOf(panel.originalWidget);
           if (widgetIndex > -1) {
             this.dashboardData.widgets[widgetIndex].config = result;
             this.panels = this.mapWidgetsToPanels(this.dashboardData.widgets);
@@ -376,9 +401,9 @@ export class DashboardManagementComponent implements OnInit {
 
       // Inject widgetId into the config for the component
       configObject.widgetId = widget.widgetId;
-
+      console.log(`Mapping widget ${widget.widgetId} to panel with config:`, configObject);
       return {
-        id: widget.widgetId,
+        id: `${(widget as any).instanceId}-${widget.y}-${widget.x}`,
         header: widget.thName,
         sizeX: widget.cols,
         sizeY: widget.rows,

src/app/portal-manage/dashboard-viewer/dashboard-viewer.component.scss

-::ng-deep {
-  #dashboard_viewer.e-dashboardlayout .e-panel {
-    background-color: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-  }
-
-  #dashboard_viewer.e-dashboardlayout .e-panel .e-panel-header {
-    display: none !important;
-  }
-}
-
-.dashboard-viewer-container {
-  width: 100%;
-  height: 100%;
-}

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

@@ -114,8 +114,13 @@ export class DashboardViewerComponent implements OnInit {
     ).subscribe({
       next: dashboard => {
         if (dashboard) {
+          // Ensure all widgets have a unique instanceId for this session
           if (dashboard.widgets) {
-            dashboard.widgets.forEach(widget => {
+            dashboard.widgets.forEach((widget: any) => {
+              if (!widget.instanceId) {
+                widget.instanceId = `inst_${Date.now()}_${Math.random()}`;
+              }
+
               const keysToProcess: Array<keyof WidgetModel> = ['config', 'data'];
               keysToProcess.forEach(key => {
                 if ((widget as any)[key] && typeof (widget as any)[key] === 'string') {
@@ -146,7 +151,7 @@ export class DashboardViewerComponent implements OnInit {
   mapWidgetsToPanels(widgets: WidgetModel[]): DashboardPanel[] {
     return widgets.map(widget => {
       return {
-        id: widget.widgetId,
+        id: `${(widget as any).instanceId}-${widget.y}-${widget.x}`,
         header: widget.thName,
         sizeX: widget.cols,
         sizeY: widget.rows,