widget

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

-<div class="dashboard-container">
-  <!-- Widget Sidebar -->
-  <div class="widget-sidebar">
-    <h2 class="text-xl font-bold mb-4 text-gray-800">Widgets</h2>
-
-    <!-- Widget Search -->
-    <div class="relative mb-4">
-      <input
-        type="text"
-        [(ngModel)]="widgetSearchTerm"
-        (input)="filterWidgets()"
-        placeholder="Search widgets..."
-        class="w-full p-2 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
-      />
-      <svg
-        class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-        ></path>
-      </svg>
-      <button
-        *ngIf="widgetSearchTerm"
-        (click)="clearSearch()"
-        class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
-      >
-        <svg
-          class="h-5 w-5"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M6 18L18 6M6 6l12 12"
-          ></path>
-        </svg>
-      </button>
-    </div>
-
-    <!-- Widget List -->
-    <div class="widget-list space-y-2">
-      <div
-        *ngFor="let menuItem of filteredAvailableWidgets"
-        (click)="addWidgetToDashboard(menuItem)"
-        class="widget-item p-3 rounded-lg hover:bg-gray-100 cursor-pointer transition-colors duration-200"
-      >
-        <p class="font-semibold text-gray-700">{{ menuItem.widget.thName }}</p>
-        <p class="text-xs text-gray-500">
-          Size: {{ menuItem.widget.cols }}x{{ menuItem.widget.rows }}
-        </p>
-      </div>
-      <p
-        *ngIf="filteredAvailableWidgets.length === 0"
-        class="text-gray-500 text-center mt-4"
-      >
-        No widgets found for this dataset.
-      </p>
-    </div>
-  </div>
-
+<div class="dashboard-container-fluid">
   <!-- Dashboard Area -->
   <div class="dashboard-area">
     <div class="dashboard-header flex justify-between items-center shadow-sm">
@@ -108,12 +38,12 @@
         >
           <i class="bi bi-plus-circle-fill"></i> New Dashboard
         </button>
-        <!-- <button
-          (click)="addDataDrivenWidget()"
+        <button
+          (click)="openWidgetDialog()"
           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> -->
+          <i class="bi bi-plus-circle-fill"></i> Add Widget
+        </button>
         <button
           *ngIf="selectedDashboardId"
           (click)="deleteDashboard()"
@@ -204,3 +134,74 @@
     </div>
   </div>
 </div>
+
+<ejs-dialog #widgetSelectDialog header='Select a Widget' [visible]="isWidgetDialogVisible" (close)="closeWidgetDialog()" [showCloseIcon]="true" width="400px" [isModal]="true">
+    <ng-template #content>
+        <div class="widget-sidebar-dialog">
+            <!-- Widget Search -->
+            <div class="relative mb-4">
+              <input
+                type="text"
+                [(ngModel)]="widgetSearchTerm"
+                (input)="filterWidgets()"
+                placeholder="Search widgets..."
+                class="w-full p-2 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              />
+              <svg
+                class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                ></path>
+              </svg>
+              <button
+                *ngIf="widgetSearchTerm"
+                (click)="clearSearch()"
+                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
+              >
+                <svg
+                  class="h-5 w-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M6 18L18 6M6 6l12 12"
+                  ></path>
+                </svg>
+              </button>
+            </div>
+        
+            <!-- Widget List -->
+            <div class="widget-list space-y-2">
+              <div
+                *ngFor="let menuItem of filteredAvailableWidgets"
+                (click)="addWidgetToDashboard(menuItem)"
+                class="widget-item p-3 rounded-lg hover:bg-gray-100 cursor-pointer transition-colors duration-200"
+              >
+                <p class="font-semibold text-gray-700">{{ menuItem.widget.thName }}</p>
+                <p class="text-xs text-gray-500">
+                  Size: {{ menuItem.widget.cols }}x{{ menuItem.widget.rows }}
+                </p>
+              </div>
+              <p
+                *ngIf="filteredAvailableWidgets.length === 0"
+                class="text-gray-500 text-center mt-4"
+              >
+                No widgets found for this dataset.
+              </p>
+            </div>
+          </div>
+    </ng-template>
+</ejs-dialog>

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

@@ -8,6 +8,7 @@ import { map, switchMap, catchError, take } from 'rxjs/operators';
 import { DashboardLayoutComponent, DashboardLayoutModule, PanelModel } from '@syncfusion/ej2-angular-layouts';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { NotificationService } from '../../shared/services/notification.service';
+import { DialogModule, DialogComponent } from '@syncfusion/ej2-angular-popups';
 
 import { DashboardModel, WidgetModel, DatasetModel } from '../models/widgets.model';
 import { MenuItemsWidget } from '../models/m-menuitems-widget.model';
@@ -65,7 +66,8 @@ export interface DashboardPanel extends PanelModel {
     DashboardLayoutModule,
     ChartAllModule,
     AccumulationChartAllModule,
-    MatDialogModule
+    MatDialogModule,
+    DialogModule
   ],
   templateUrl: './dashboard-management.component.html',
   styleUrls: ['./dashboard-management.component.scss'],
@@ -73,6 +75,8 @@ export interface DashboardPanel extends PanelModel {
 })
 export class DashboardManagementComponent implements OnInit {
   @ViewChild('editLayout') public layout!: DashboardLayoutComponent;
+  @ViewChild('widgetSelectDialog') public widgetSelectDialog!: DialogComponent;
+  public isWidgetDialogVisible = false;
   public panels: DashboardPanel[] = [];
   public cellSpacing: number[] = [10, 10];
   public columns: number = 6;
@@ -230,22 +234,6 @@ 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+"-" + 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;
 
@@ -331,6 +319,7 @@ export class DashboardManagementComponent implements OnInit {
     this.dashboardData.widgets.push(newWidgetInstance);
     this.panels = this.mapWidgetsToPanels(this.dashboardData.widgets);
     this.notificationService.info('Info', `Added widget: ${newWidgetInstance.thName}`);
+    this.closeWidgetDialog();
   }
 
   removeWidgetFromDashboard(panelId: string): void {
@@ -406,5 +395,13 @@ export class DashboardManagementComponent implements OnInit {
       };
     });
   }
+
+  openWidgetDialog(): void {
+    this.isWidgetDialogVisible = true;
+  }
+
+  closeWidgetDialog(): void {
+    this.isWidgetDialogVisible = false;
+  }
 }