ss

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

@@ -8,12 +8,14 @@ import { FormsModule } from '@angular/forms';
 import { Observable, of, forkJoin } from 'rxjs';
 import { map, switchMap, tap } from 'rxjs/operators';
 import { DashboardLayoutModule, PanelModel } from '@syncfusion/ej2-angular-layouts'; // Import Syncfusion modules
+import { MatDialog, MatDialogModule } from '@angular/material/dialog'; // Import MatDialog
 
 import { DashboardModel, WidgetModel, DatasetModel } from '../models/widgets.model';
 import { DashboardDataService } from '../services/dashboard-data.service';
 import { WidgetDataService } from '../services/widget-data.service'; // Import new service
 import { WidgetService } from '../services/widgets.service'; // Import WidgetService
-import { DashboardStateService } from '../services/dashboard-state.service';
+import { DashboardStateService, SelectedDataset } from '../services/dashboard-state.service'; // Import SelectedDataset
+import { WidgetConfigComponent } from './widget-config/widget-config.component'; // Import WidgetConfigComponent
 
 // Import all the widget components
 import { CompanyInfoWidgetComponent } from '../widgets/company-info-widget.component';
@@ -52,6 +54,12 @@ import { SimpleTableWidgetComponent } from '../widgets/simple-table-widget/simpl
 import { WaterfallChartWidgetComponent } from '../widgets/waterfall-chart-widget/waterfall-chart-widget.component';
 import { TreemapWidgetComponent } from '../widgets/treemap-widget/treemap-widget.component';
 
+export interface DashboardPanel extends PanelModel {
+  componentType: Type<any>;
+  componentInputs?: { [key: string]: any };
+  originalWidget: WidgetModel;
+}
+
 @Component({
   selector: 'app-dashboard-management',
   standalone: true,
@@ -85,14 +93,15 @@ import { TreemapWidgetComponent } from '../widgets/treemap-widget/treemap-widget
     TreemapWidgetComponent,
     DashboardLayoutModule,
     ChartAllModule,
-    AccumulationChartAllModule // Add Syncfusion DashboardLayoutModule
+    AccumulationChartAllModule, // Add Syncfusion DashboardLayoutModule
+    MatDialogModule // Add MatDialogModule
   ],
   templateUrl: './dashboard-management.component.html',
   styleUrls: ['./dashboard-management.component.scss'],
 })
 export class DashboardManagementComponent implements OnInit {
 
-  public panels: (PanelModel & { componentType: Type<any>, componentInputs?: { [key: string]: any } })[] = [];
+  public panels: DashboardPanel[] = [];
   public cellSpacing: number[] = [10, 10];
 
   public availableWidgets: WidgetModel[] = [];
@@ -361,7 +370,8 @@ export class DashboardManagementComponent implements OnInit {
     private dashboardDataService: DashboardDataService,
     private widgetDataService: WidgetDataService, // Inject new service
     private widgetService: WidgetService, // Inject WidgetService
-    private dashboardStateService: DashboardStateService
+    private dashboardStateService: DashboardStateService,
+    private dialog: MatDialog
   ) { }
 
   ngOnInit(): void {
@@ -405,6 +415,9 @@ export class DashboardManagementComponent implements OnInit {
         if (dashboard) {
           this.dashboardData = dashboard;
           this.panels = this.mapWidgetsToPanels(dashboard.widgets || []);
+          if (dashboard.datasetId) {
+            this.dashboardStateService.selectDataset(dashboard.datasetId);
+          }
         }
       });
     }
@@ -432,7 +445,7 @@ export class DashboardManagementComponent implements OnInit {
     }
   }
 
-  mapWidgetsToPanels(widgets: WidgetModel[]): ({ componentType: Type<any>, componentInputs?: { [key: string]: any } })[] {
+  mapWidgetsToPanels(widgets: WidgetModel[]): DashboardPanel[] {
     return widgets.map(widget => {
       // Always pass the entire widget.config as the input to the component
       // Ensure widget.config exists, initialize if not.
@@ -448,7 +461,8 @@ export class DashboardManagementComponent implements OnInit {
         row: widget.y,
         col: widget.x,
         componentType: this.widgetComponentMap[widget.component],
-        componentInputs: { config: widgetConfig } // Pass the config object as 'config' input
+        componentInputs: { config: widgetConfig }, // Pass the config object as 'config' input
+        originalWidget: widget // Add the original widget here
       };
     });
   }
@@ -558,7 +572,7 @@ export class DashboardManagementComponent implements OnInit {
     }
   }
 
-  openWidgetConfigDialog(panel: PanelModel & { originalWidget: WidgetModel }): void {
+  openWidgetConfigDialog(panel: PanelModel & { componentType: Type<any>, componentInputs?: { [key: string]: any }, originalWidget: WidgetModel }): void {
     const widget = panel.originalWidget;
     this.dashboardStateService.selectedDataset$.subscribe((selectedDataset: SelectedDataset | null) => {
       const availableColumns = selectedDataset ? selectedDataset.columns : [];

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

 import { Component, Inject, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { MatInputModule } from '@angular/material/input';
@@ -22,7 +23,8 @@ export interface WidgetConfigDialogData {
     MatFormFieldModule,
     MatInputModule,
     MatSelectModule,
-    MatButtonModule
+    MatButtonModule,
+    MatDialogModule // Add MatDialogModule
   ],
   templateUrl: './widget-config.component.html',
   styleUrls: ['./widget-config.component.scss']

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

@@ -2,12 +2,12 @@ import { Component, OnInit, Type, ChangeDetectionStrategy } from '@angular/core'
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { DashboardLayoutModule, PanelModel } from '@syncfusion/ej2-angular-layouts';
-import { Observable, of, forkJoin } from 'rxjs'; // Import forkJoin
-import { map, switchMap, tap } from 'rxjs/operators'; // Import tap
+import { Observable, of } from 'rxjs'; // Import forkJoin
+import { map, switchMap } from 'rxjs/operators'; // Import tap
 import { NgComponentOutlet } from '@angular/common'; // Import NgComponentOutlet
 import { DashboardDataService } from '../services/dashboard-data.service';
-import { WidgetDataService } from '../services/widget-data.service'; // Import WidgetDataService
 import { DashboardModel } from '../models/widgets.model';
+import { DashboardStateService } from '../services/dashboard-state.service'; // Import DashboardStateService
 
 // Import all the widget components
 import { CompanyInfoWidgetComponent } from '../widgets/company-info-widget.component';
@@ -53,7 +53,6 @@ import { HttpClientModule } from '@angular/common/http';
     RouterModule,
     DashboardLayoutModule,
     NgComponentOutlet,
-    HttpClientModule,
     SyncfusionDatagridWidgetComponent,
     SyncfusionPivotWidgetComponent,
     SyncfusionChartWidgetComponent,
@@ -124,7 +123,7 @@ export class DashboardViewerComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private dashboardDataService: DashboardDataService,
-    private widgetDataService: WidgetDataService // Inject WidgetDataService
+    private dashboardStateService: DashboardStateService // Inject DashboardStateService
   ) { }
 
   ngOnInit(): void {
@@ -150,72 +149,24 @@ export class DashboardViewerComponent implements OnInit {
   loadDashboard(dashboard: DashboardModel): void {
     this.dashboardName = dashboard.name;
 
-    const dataFetchTasks: Observable<any>[] = [];
+    if (dashboard.datasetId) {
+      this.dashboardStateService.selectDataset(dashboard.datasetId);
+    }
 
-    // Prepare data fetching tasks for NewDataTableWidget components
-    dashboard.widgets.forEach(widget => {
-      if (widget.component === 'NewDataTableWidget' && widget.config?.source?.url && (!widget.config.data || widget.config.data.length === 0)) {
-        dataFetchTasks.push(
-          this.widgetDataService.fetchDataForWidget(widget.config).pipe(
-            tap(data => {
-              // Mutate the config object to include the fetched data
-              widget.config.data = data;
-            })
-          )
-        );
-      }
+    this.panels = dashboard.widgets.map(widget => {
+      const widgetConfig = widget.config || {};
+
+      return {
+        id: widget.id,
+        row: widget.y,
+        col: widget.x,
+        sizeX: widget.cols,
+        sizeY: widget.rows,
+        header: widget.name,
+        componentName: widget.component, // Add componentName
+        componentType: this.widgetComponentMap[widget.component], // Attach the component Type
+        componentInputs: { config: widgetConfig } // Pass the config object as 'config' input
+      };
     });
-
-    if (dataFetchTasks.length > 0) {
-      forkJoin(dataFetchTasks).subscribe(() => {
-        console.log('All widget data fetched for viewer.');
-        this.panels = dashboard.widgets.map(widget => {
-          // Always pass the entire widget.config as the input to the component
-          // Ensure widget.config exists, initialize if not.
-          const widgetConfig = widget.config || {};
-
-          // Add datasetId to the config if it exists in the dashboardData
-          if (dashboard.datasetId) {
-            widgetConfig.datasetId = dashboard.datasetId;
-          }
-
-          return {
-            id: widget.id,
-            row: widget.y,
-            col: widget.x,
-            sizeX: widget.cols,
-            sizeY: widget.rows,
-            header: widget.name,
-            componentName: widget.component, // Add componentName
-            componentType: this.widgetComponentMap[widget.component], // Attach the component Type
-            componentInputs: { config: widgetConfig } // Pass the config object as 'config' input
-          };
-        });
-      });
-    } else {
-      // No data to fetch, directly map panels
-      this.panels = dashboard.widgets.map(widget => {
-        // Always pass the entire widget.config as the input to the component
-        // Ensure widget.config exists, initialize if not.
-        const widgetConfig = widget.config || {};
-
-        // Add datasetId to the config if it exists in the dashboardData
-        if (dashboard.datasetId) {
-          widgetConfig.datasetId = dashboard.datasetId;
-        }
-
-        return {
-          id: widget.id,
-          row: widget.y,
-          col: widget.x,
-          sizeX: widget.cols,
-          sizeY: widget.rows,
-          header: widget.name,
-          componentName: widget.component, // Add componentName
-          componentType: this.widgetComponentMap[widget.component], // Attach the component Type
-          componentInputs: { config: widgetConfig } // Pass the config object as 'config' input
-        };
-      });
-    }
   }
 }

src/app/DPU/widgets/simple-kpi-widget/simple-kpi-widget.component.ts

 import { Component, Input, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { DashboardStateService } from '../../services/dashboard-state.service';
+import { DashboardStateService, SelectedDataset } from '../../services/dashboard-state.service';
 
 @Component({
   selector: 'app-simple-kpi-widget',

src/app/shared/services/dashboard.service.ts

 
 import { Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
+import { map, Observable, of } from 'rxjs';
 import { DashboardLayout, Widget } from '../models/dashboard.model';
+import { environment } from '../../../environments/environment';
+import { HttpClient, HttpParams } from '@angular/common/http';
 
 // More realistic mock data for an HR system
 const HR_WIDGETS: Widget[] = [
@@ -155,27 +157,31 @@ const HR_DASHBOARDS: DashboardLayout[] = [
   providedIn: 'root'
 })
 export class DashboardService {
+  apiUrl = environment.url + ""
 
-  constructor() { }
+  constructor(private http: HttpClient) { }
 
-  getDashboards(appName: string): Observable<DashboardLayout[]> {
-    const dashboards = HR_DASHBOARDS.filter(d => d.appName === appName);
-    return of(dashboards);
+  searchLists(queryParams?: any): Observable<DashboardLayout[]> {
+    let params = new HttpParams();
+    if (queryParams) {
+      Object.keys(queryParams).forEach(key => {
+        params = params.set(key, queryParams[key]);
+      });
+    }
+    return this.http.get<DashboardLayout[]>(`${this.apiUrl}/lists/search`, { params }).pipe(
+      map((responseArray: DashboardLayout[]) => {
+        return responseArray
+      })
+    );;;
   }
 
   getDashboardLayout(dashboardId: string): Observable<DashboardLayout | undefined> {
-    const dashboard = HR_DASHBOARDS.find(d => d.id === dashboardId);
-    return of(dashboard ? JSON.parse(JSON.stringify(dashboard)) : undefined);
+    return this.http
+      .get<DashboardLayout>(this.apiUrl + "/" + dashboardId)
   }
 
   saveDashboardLayout(layout: DashboardLayout): Observable<DashboardLayout> {
-    const index = HR_DASHBOARDS.findIndex(d => d.id === layout.id);
-    if (index !== -1) {
-      HR_DASHBOARDS[index] = layout;
-    } else {
-      HR_DASHBOARDS.push(layout);
-    }
-    return of(layout);
+    return this.http.post<DashboardLayout>(this.apiUrl, layout);
   }
 
   getWidgets(appName: string): Observable<Widget[]> {