scss config

src/app/portal-manage/dashboard-management/widget-config/services/widget-config-registry.service.ts

@@ -123,6 +123,14 @@ export class WidgetConfigRegistryService {
         urlField: '',
         iconField: ''
       },
+      'SyncfusionDatagridWidgetComponent': {
+        title: 'Data Grid',
+        columns: [],
+        dataSource: '',
+        allowPaging: true,
+        allowSorting: true,
+        allowFiltering: true
+      },
       'SyncfusionPivotWidgetComponent': {
         title: 'Pivot Table',
         expandAll: false,

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

-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, OnDestroy, AfterViewInit, ViewChild, ViewContainerRef, ComponentRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
@@ -10,6 +10,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { FormsModule } from '@angular/forms';
 import { WidgetConfigGeneratorService } from '../services/widget-config-generator.service';
+import { WidgetConfigRegistryService } from './services/widget-config-registry.service';
 import { WidgetModel } from '../models/widgets.model';
 
 export interface WidgetConfigDialogData {
@@ -35,16 +36,20 @@ export interface WidgetConfigDialogData {
   templateUrl: './widget-config.component.html',
   styleUrls: ['./widget-config.component.scss']
 })
-export class WidgetConfigComponent implements OnInit {
+export class WidgetConfigComponent implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild('configContainer', { read: ViewContainerRef }) configContainer!: ViewContainerRef;
+
   currentConfig: any;
   availableColumns: string[];
   widgetType: string;
   comboChartTypes: string[] = ['Line', 'Column', 'Area', 'Spline'];
+  private configComponentRef: ComponentRef<any> | null = null;
 
   constructor(
     public dialogRef: MatDialogRef<WidgetConfigComponent>,
     @Inject(MAT_DIALOG_DATA) public data: WidgetConfigDialogData,
-    private widgetConfigGenerator: WidgetConfigGeneratorService
+    private widgetConfigGenerator: WidgetConfigGeneratorService,
+    public widgetConfigRegistry: WidgetConfigRegistryService
   ) { }
 
   ngOnInit(): void {
@@ -67,6 +72,13 @@ export class WidgetConfigComponent implements OnInit {
       }
     }
 
+    // Use fallback config if no config is available
+    if (!this.currentConfig || Object.keys(this.currentConfig).length === 0) {
+      this.currentConfig = this.widgetConfigRegistry.getFallbackConfig(this.widgetType);
+    }
+
+    // Load dynamic config component will be called in ngAfterViewInit
+
     const gridLikeWidgets = ['SyncfusionDatagridWidgetComponent', 'NewDataTableWidget', 'MatrixWidgetComponent'];
     if (gridLikeWidgets.includes(this.widgetType) && !this.currentConfig.columns) {
       this.currentConfig.columns = [];
@@ -273,12 +285,45 @@ export class WidgetConfigComponent implements OnInit {
   addPivotFilter() { this.currentConfig.filters.push({ name: '' }); }
   removePivotFilter(index: number) { this.currentConfig.filters.splice(index, 1); }
 
+  ngAfterViewInit(): void {
+    // Load dynamic config component after view is initialized
+    this.loadConfigComponent();
+  }
+
+  private loadConfigComponent(): void {
+    const configComponentType = this.widgetConfigRegistry.getConfigComponent(this.widgetType);
+
+    if (configComponentType) {
+      // Load the specific config component
+      this.configComponentRef = this.configContainer.createComponent(configComponentType);
+      this.configComponentRef.instance.currentConfig = this.currentConfig;
+      this.configComponentRef.instance.availableColumns = this.availableColumns;
+
+      // Subscribe to config changes
+      if (this.configComponentRef.instance.configChange) {
+        this.configComponentRef.instance.configChange.subscribe((config: any) => {
+          this.currentConfig = config;
+        });
+      }
+    }
+    // If no specific config component is found, the template will show the fallback config
+  }
 
   onSave(): void {
+    // Get the latest config from the dynamic component if it exists
+    if (this.configComponentRef && this.configComponentRef.instance.currentConfig) {
+      this.currentConfig = this.configComponentRef.instance.currentConfig;
+    }
     this.dialogRef.close(this.currentConfig);
   }
 
   onCancel(): void {
     this.dialogRef.close();
   }
+
+  ngOnDestroy(): void {
+    if (this.configComponentRef) {
+      this.configComponentRef.destroy();
+    }
+  }
 }