วิดเจ็ท service

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

@@ -15,6 +15,7 @@ import { DashboardDataService } from '../services/dashboard-data.service';
 import { MMenuitemsWidgetService } from '../services/m-menuitems-widget.service';
 import { DashboardStateService, SelectedDataset } from '../services/dashboard-state.service';
 import { WidgetStateService } from '../services/widget-state.service'; // Import WidgetStateService
+import { WidgetComponentRegistryService } from '../services/widget-component-registry.service';
 
 import { WidgetConfigComponent } from './widget-config/widget-config.component';
 
@@ -84,27 +85,14 @@ export class DashboardManagementComponent implements OnInit {
   public userDashboards: DashboardModel[] = [];
   public selectedDashboardId: DashboardModel | null = null;
 
-  private widgetComponentMap: { [key: string]: Type<any> } = {
-    CompanyInfoWidgetComponent,
-    HeadcountWidgetComponent,
-    AttendanceOverviewWidgetComponent,
-    PayrollSummaryWidgetComponent,
-    EmployeeDirectoryWidgetComponent,
-    WelcomeWidgetComponent,
-    QuickLinksWidgetComponent,
-    SyncfusionDatagridWidgetComponent,
-    SyncfusionPivotWidgetComponent,
-    SyncfusionChartWidgetComponent,
-    SimpleKpiWidgetComponent,
-  };
-
   constructor(
     private dashboardDataService: DashboardDataService,
     private mMenuitemsWidgetService: MMenuitemsWidgetService,
     private dashboardStateService: DashboardStateService,
     private widgetStateService: WidgetStateService, // Inject WidgetStateService
     private dialog: MatDialog,
-    private notificationService: NotificationService
+    private notificationService: NotificationService,
+    private widgetComponentRegistryService: WidgetComponentRegistryService
   ) { }
 
   ngOnInit(): void {
@@ -409,7 +397,7 @@ export class DashboardManagementComponent implements OnInit {
         sizeY: widget.rows,
         row: widget.y,
         col: widget.x,
-        componentType: this.widgetComponentMap[widget.component],
+        componentType: this.widgetComponentRegistryService.getComponent(widget.component),
         componentInputs: {
           config: configObject,
           perspective: widget.perspective

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

@@ -8,6 +8,7 @@ import { NgComponentOutlet } from '@angular/common';
 import { DashboardDataService } from '../services/dashboard-data.service';
 import { DashboardModel, WidgetModel } from '../models/widgets.model';
 import { DashboardStateService } from '../services/dashboard-state.service';
+import { WidgetComponentRegistryService } from '../services/widget-component-registry.service';
 
 // Import all widget components
 import { CompanyInfoWidgetComponent } from '../widgets/company-info-widget.component';
@@ -63,42 +64,11 @@ export class DashboardViewerComponent implements OnInit {
   public dashboardData: DashboardModel | null = null;
   public errorMessage: string | null = null;
 
-  private widgetComponentMap: { [key: string]: Type<any> } = {
-    'CompanyInfoWidgetComponent': CompanyInfoWidgetComponent,
-    'HeadcountWidgetComponent': HeadcountWidgetComponent,
-    'AttendanceOverviewWidgetComponent': AttendanceOverviewWidgetComponent,
-    'PayrollSummaryWidgetComponent': PayrollSummaryWidgetComponent,
-    'EmployeeDirectoryWidgetComponent': EmployeeDirectoryWidgetComponent,
-    'KpiWidgetComponent': KpiWidgetComponent,
-    'WelcomeWidgetComponent': WelcomeWidgetComponent,
-    'ChartWidgetComponent': ChartWidgetComponent,
-    'QuickLinksWidgetComponent': QuickLinksWidgetComponent,
-    'SyncfusionDatagridWidgetComponent': SyncfusionDatagridWidgetComponent,
-    'SyncfusionPivotWidgetComponent': SyncfusionPivotWidgetComponent,
-    'SyncfusionChartWidgetComponent': SyncfusionChartWidgetComponent,
-    'NewDataTableWidget': DataTableWidgetComponent,
-    'AreaChartWidgetComponent': AreaChartWidgetComponent,
-    'BarChartWidgetComponent': BarChartWidgetComponent,
-    'PieChartWidgetComponent': PieChartWidgetComponent,
-    'ScatterBubbleChartWidgetComponent': ScatterBubbleChartWidgetComponent,
-    'MultiRowCardWidgetComponent': MultiRowCardWidgetComponent,
-    'ComboChartWidgetComponent': ComboChartWidgetComponent,
-    'DoughnutChartWidgetComponent': DoughnutChartWidgetComponent,
-    'FunnelChartWidgetComponent': FunnelChartWidgetComponent,
-    'GaugeChartWidgetComponent': GaugeChartWidgetComponent,
-    'SimpleKpiWidgetComponent': SimpleKpiWidgetComponent,
-    'FilledMapWidgetComponent': FilledMapWidgetComponent,
-    'MatrixWidgetComponent': MatrixWidgetComponent,
-    'SlicerWidgetComponent': SlicerWidgetComponent,
-    'SimpleTableWidgetComponent': SimpleTableWidgetComponent,
-    'WaterfallChartWidgetComponent': WaterfallChartWidgetComponent,
-    'TreemapWidgetComponent': TreemapWidgetComponent,
-  };
-
   constructor(
     private route: ActivatedRoute,
     private dashboardDataService: DashboardDataService,
     private dashboardStateService: DashboardStateService,
+    private widgetComponentRegistryService: WidgetComponentRegistryService
   ) { }
 
   ngOnInit(): void {
@@ -157,7 +127,7 @@ export class DashboardViewerComponent implements OnInit {
         sizeY: widget.rows,
         row: widget.y,
         col: widget.x,
-        componentType: this.widgetComponentMap[widget.component],
+        componentType: this.widgetComponentRegistryService.getComponent(widget.component),
         componentInputs: { config: widget.config || {}, perspective: widget.perspective },
       };
     });

src/app/portal-manage/services/widget-component-registry.service.ts

+import { Injectable, Type } from '@angular/core';
+
+// Import all widget components
+import { CompanyInfoWidgetComponent } from '../widgets/company-info-widget.component';
+import { HeadcountWidgetComponent } from '../widgets/headcount-widget.component';
+import { AttendanceOverviewWidgetComponent } from '../widgets/attendance-overview-widget.component';
+import { PayrollSummaryWidgetComponent } from '../widgets/payroll-summary-widget.component';
+import { EmployeeDirectoryWidgetComponent } from '../widgets/employee-directory-widget.component';
+import { KpiWidgetComponent } from '../widgets/kpi-widget/kpi-widget.component';
+import { WelcomeWidgetComponent } from '../widgets/welcome-widget/welcome-widget.component';
+import { ChartWidgetComponent } from '../widgets/chart-widget/chart-widget.component';
+import { QuickLinksWidgetComponent } from '../widgets/quick-links-widget/quick-links-widget.component';
+import { SyncfusionDatagridWidgetComponent } from '../widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component';
+import { SyncfusionPivotWidgetComponent } from '../widgets/syncfusion-pivot-widget/syncfusion-pivot-widget.component';
+import { SyncfusionChartWidgetComponent } from '../widgets/syncfusion-chart-widget/syncfusion-chart-widget.component';
+import { DataTableWidgetComponent } from '../widgets/dynamic-widgets/data-table-widget.component';
+import { AreaChartWidgetComponent } from '../widgets/area-chart-widget/area-chart-widget.component';
+import { BarChartWidgetComponent } from '../widgets/bar-chart-widget/bar-chart-widget.component';
+import { PieChartWidgetComponent } from '../widgets/pie-chart-widget/pie-chart-widget.component';
+import { ScatterBubbleChartWidgetComponent } from '../widgets/scatter-bubble-chart-widget/scatter-bubble-chart-widget.component';
+import { MultiRowCardWidgetComponent } from '../widgets/multi-row-card-widget/multi-row-card-widget.component';
+import { ComboChartWidgetComponent } from '../widgets/combo-chart-widget/combo-chart-widget.component';
+import { DoughnutChartWidgetComponent } from '../widgets/doughnut-chart-widget/doughnut-chart-widget.component';
+import { FunnelChartWidgetComponent } from '../widgets/funnel-chart-widget/funnel-chart-widget.component';
+import { GaugeChartWidgetComponent } from '../widgets/gauge-chart-widget/gauge-chart-widget.component';
+import { SimpleKpiWidgetComponent } from '../widgets/simple-kpi-widget/simple-kpi-widget.component';
+import { FilledMapWidgetComponent } from '../widgets/filled-map-widget/filled-map-widget.component';
+import { MatrixWidgetComponent } from '../widgets/matrix-widget/matrix-widget.component';
+import { SlicerWidgetComponent } from '../widgets/slicer-widget/slicer-widget.component';
+import { SimpleTableWidgetComponent } from '../widgets/simple-table-widget/simple-table-widget.component';
+import { WaterfallChartWidgetComponent } from '../widgets/waterfall-chart-widget/waterfall-chart-widget.component';
+import { TreemapWidgetComponent } from '../widgets/treemap-widget/treemap-widget.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class WidgetComponentRegistryService {
+  private widgetComponentMap: { [key: string]: Type<any> } = {
+    CompanyInfoWidgetComponent: CompanyInfoWidgetComponent,
+    HeadcountWidgetComponent: HeadcountWidgetComponent,
+    AttendanceOverviewWidgetComponent: AttendanceOverviewWidgetComponent,
+    PayrollSummaryWidgetComponent: PayrollSummaryWidgetComponent,
+    EmployeeDirectoryWidgetComponent: EmployeeDirectoryWidgetComponent,
+    KpiWidgetComponent: KpiWidgetComponent,
+    WelcomeWidgetComponent: WelcomeWidgetComponent,
+    ChartWidgetComponent: ChartWidgetComponent,
+    QuickLinksWidgetComponent: QuickLinksWidgetComponent,
+    SyncfusionDatagridWidgetComponent: SyncfusionDatagridWidgetComponent,
+    SyncfusionPivotWidgetComponent: SyncfusionPivotWidgetComponent,
+    SyncfusionChartWidgetComponent: SyncfusionChartWidgetComponent,
+    NewDataTableWidget: DataTableWidgetComponent, // Note: Key is NewDataTableWidget
+    AreaChartWidgetComponent: AreaChartWidgetComponent,
+    BarChartWidgetComponent: BarChartWidgetComponent,
+    PieChartWidgetComponent: PieChartWidgetComponent,
+    ScatterBubbleChartWidgetComponent: ScatterBubbleChartWidgetComponent,
+    MultiRowCardWidgetComponent: MultiRowCardWidgetComponent,
+    ComboChartWidgetComponent: ComboChartWidgetComponent,
+    DoughnutChartWidgetComponent: DoughnutChartWidgetComponent,
+    FunnelChartWidgetComponent: FunnelChartWidgetComponent,
+    GaugeChartWidgetComponent: GaugeChartWidgetComponent,
+    SimpleKpiWidgetComponent: SimpleKpiWidgetComponent,
+    FilledMapWidgetComponent: FilledMapWidgetComponent,
+    MatrixWidgetComponent: MatrixWidgetComponent,
+    SlicerWidgetComponent: SlicerWidgetComponent,
+    SimpleTableWidgetComponent: SimpleTableWidgetComponent,
+    WaterfallChartWidgetComponent: WaterfallChartWidgetComponent,
+    TreemapWidgetComponent: TreemapWidgetComponent,
+  };
+
+  getComponent(componentName: string): Type<any> {
+    const component = this.widgetComponentMap[componentName];
+    if (!component) {
+      console.warn(
+        `Warning: Widget component "${componentName}" not found in registry.`
+      );
+      // Consider returning a default/error component here
+    }
+    return component;
+  }
+
+  getComponentNames(): string[] {
+    return Object.keys(this.widgetComponentMap);
+  }
+}

src/app/portal-manage/widget-management/widget-form.component.ts

@@ -12,6 +12,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';
 import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs';
 import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
+import { WidgetComponentRegistryService } from '../services/widget-component-registry.service';
 
 // import * as DashboardActions from '../state/dashboard.actions';
 import { WidgetModel } from '../models/widgets.model';
@@ -64,38 +65,25 @@ export class WidgetFormComponent implements OnInit {
   public componentData: { [key: string]: string }[] = [];
   public componentFields: object = { text: 'name', value: 'id' };
 
-  // Map string names to actual component classes
-  private widgetComponentMap: { [key: string]: Type<any> } = {
-    CompanyInfoWidgetComponent: CompanyInfoWidgetComponent,
-    HeadcountWidgetComponent: HeadcountWidgetComponent,
-    AttendanceOverviewWidgetComponent: AttendanceOverviewWidgetComponent,
-    PayrollSummaryWidgetComponent: PayrollSummaryWidgetComponent,
-    EmployeeDirectoryWidgetComponent: EmployeeDirectoryWidgetComponent,
-    KpiWidgetComponent: KpiWidgetComponent,
-    WelcomeWidgetComponent: WelcomeWidgetComponent,
-    ChartWidgetComponent: ChartWidgetComponent,
-    QuickLinksWidgetComponent: QuickLinksWidgetComponent,
-    SyncfusionDatagridWidgetComponent: SyncfusionDatagridWidgetComponent,
-    SyncfusionPivotWidgetComponent: SyncfusionPivotWidgetComponent,
-    SyncfusionChartWidgetComponent: SyncfusionChartWidgetComponent,
-  };
-
   constructor(
     private fb: FormBuilder,
     public dialogRef: MatDialogRef<WidgetFormComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: { widget: WidgetModel; isNew: boolean }
+    @Inject(MAT_DIALOG_DATA) public data: { widget: WidgetModel; isNew: boolean },
+    private widgetComponentRegistryService: WidgetComponentRegistryService
   ) {}
 
   ngOnInit(): void {
     this.isNew = this.data.isNew;
 
-    this.componentData = Object.keys(this.widgetComponentMap).map((key) => ({
-      id: key,
-      name: key,
-    }));
+    this.componentData = this.widgetComponentRegistryService
+      .getComponentNames()
+      .map((key) => ({
+        id: key,
+        name: key,
+      }));
 
     this.widgetForm = this.fb.group({
-      widgetId: [this.data.widget?.widgetId || new Date().getTime()],
+      widgetId: [null],
       thName: ['', Validators.required],
       engName: ['', Validators.required],
       component: ['', Validators.required],
@@ -118,7 +106,8 @@ export class WidgetFormComponent implements OnInit {
   }
 
   updatePreview(componentName: string): void {
-    this.previewComponentType = this.widgetComponentMap[componentName] || null;
+    this.previewComponentType =
+      this.widgetComponentRegistryService.getComponent(componentName);
   }
 
   onSubmit(): void {