layout

angular.json

@@ -60,8 +60,7 @@
               "src/.htaccess"
             ],
             "styles": [
-              "src/styles.scss",
-              "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+              "src/styles.scss"
             ],
             "scripts": [
               "node_modules/preline/dist/preline.js"

src/app/DPU/dashboard-management/dashboard-management.component.html

@@ -88,12 +88,12 @@
           (datasetSelected)="onDatasetSelected($event)"
         ></app-dataset-picker>
         <div *ngIf="dashboardData" class="relative flex items-center">
-          <input
+          <!-- <input
             type="text"
             [(ngModel)]="dashboardData.thName"
             (blur)="saveDashboardName()"
             class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white text-gray-800 font-semibold"
-          />
+          /> -->
           <button
             (click)="saveDashboardName()"
             class="ml-2 text-emerald-500 hover:text-emerald-700 focus:outline-none"
@@ -107,12 +107,12 @@
         >
           <i class="bi bi-plus-circle-fill"></i> New Dashboard
         </button>
-        <button
+        <!-- <button
           (click)="addDataDrivenWidget()"
           class="ti-btn ti-btn-info-full flex items-center gap-2"
         >
           <i class="bi bi-plus-circle-fill"></i> Add Data-Driven Widget (Test)
-        </button>
+        </button> -->
         <button
           *ngIf="selectedDashboardId"
           (click)="deleteDashboard()"
@@ -137,11 +137,12 @@
     </div>
 
     <div class="dashboard-content">
-
       <ejs-dashboardlayout
         [columns]="6"
         #editLayout
         [cellSpacing]="cellSpacing"
+        [allowResizing]="true"
+        (change)="onPanelChange($event)"
       >
         <e-panels>
           <e-panel

src/app/DPU/dashboard-management/dashboard-management.component.ts

@@ -771,4 +771,22 @@ 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.id === 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;
+        }
+      });
+      // Save the updated dashboard after all panels have been processed
+      this.dashboardDataService.saveDashboard(this.dashboardData!).subscribe();
+    }
+  }
 }