linker

src/app/portal-manage/widget-management/dataset-widget-linker.component.html

@@ -11,7 +11,7 @@
           id='dataset-select'
           [dataSource]="datasets"
           [(ngModel)]="selectedDatasetId"
-          (change)="onDatasetChange()"
+          (change)="onDatasetChange($event)"
           [fields]="{ text: 'tdesc', value: 'itemId' }"
           placeholder="Select a Dataset"
           floatLabelType="Never"
@@ -72,23 +72,13 @@
             <ng-container *ngIf="previewPanel" [ngComponentOutlet]="previewPanel.componentType" [ngComponentOutletInputs]="previewPanel.componentInputs"></ng-container>
         </div>
 
-        <!-- Editable Configuration Form -->
+        <!-- Configuration Display -->
         <div class="p-4 border rounded-lg bg-gray-50">
-           <h3 class="text-md font-bold mb-2">Configuration</h3>
-           <form #configForm="ngForm" (ngSubmit)="saveConfiguration()">
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div *ngFor="let key of getObjectKeys(configAsObject)" class="flex flex-col">
-                  <label [for]="key" class="text-sm font-medium text-gray-600 mb-1 capitalize">{{ key }}</label>
-                  <input type="text" [id]="key" [name]="key" [(ngModel)]="configAsObject[key]" class="p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
-                </div>
-              </div>
-              <div *ngIf="getObjectKeys(configAsObject).length === 0" class="text-center text-gray-500">
-                This widget has no configurable properties.
-              </div>
-              <div class="mt-4 flex justify-end" *ngIf="getObjectKeys(configAsObject).length > 0">
-                <button ejs-button type="submit" cssClass="e-primary">Save Configuration</button>
-              </div>
-           </form>
+           <div class="flex justify-between items-center mb-2">
+             <h3 class="text-md font-bold">Configuration</h3>
+             <button ejs-button (click)="openEditConfigDialog()" cssClass="e-small e-primary">Edit Configuration</button>
+           </div>
+           <pre class="bg-gray-900 text-white p-2 rounded-md text-xs">{{ configAsObject | json }}</pre>
         </div>
       </div>
     </div>

src/app/portal-manage/widget-management/dataset-widget-linker.component.ts

@@ -136,11 +136,18 @@ export class DatasetWidgetLinkerComponent implements OnInit {
     this.widgetService.getListWidgets().subscribe(widgets => { this.masterWidgets = widgets; });
   }
 
-  getObjectKeys(obj: any): string[] {
-    return Object.keys(obj);
-  }
-
-  onDatasetChange(): void {
+  onDatasetChange(event: any): void {
+    // The change event's value is the new ID. This is more reliable than waiting for ngModel.
+    if (!event.value) {
+      this.selectedDatasetId = null;
+      this.linkedWidgets = [];
+      this.dashboardStateService.selectDataset(null);
+      this.clearPreview();
+      return;
+    }
+    this.selectedDatasetId = event.value;
+    console.log('Dataset selection changed. New ID:', this.selectedDatasetId);
+    
     this.clearPreview();
     if (this.selectedDatasetId) {
       this.loadLinkedWidgetsForDataset(this.selectedDatasetId);
@@ -169,6 +176,7 @@ export class DatasetWidgetLinkerComponent implements OnInit {
       this.previewPanel = {
         id: widget.widget.widgetId,
         componentType: componentType,
+        // Pass the parsed object to the component
         componentInputs: { config: this.configAsObject },
         row: 0, col: 0, sizeX: 1, sizeY: 1 // Dummy values, not used for layout here
       };
@@ -178,14 +186,34 @@ export class DatasetWidgetLinkerComponent implements OnInit {
     }
   }
 
-  saveConfiguration(): void {
+  openEditConfigDialog(): void {
     if (!this.widgetToPreview) return;
 
-    this.widgetToPreview.config = JSON.stringify(this.configAsObject);
-    this.mMenuitemsWidgetService.saveLinkedWidget(this.widgetToPreview).subscribe(() => {
-      this.notificationService.success('Success', 'Configuration saved successfully!');
-      // Refresh the preview to apply the new config
-      this.viewWidget(this.widgetToPreview!);
+    this.dashboardStateService.selectedDataset$.pipe(take(1)).subscribe(selectedDataset => {
+      const availableColumns = selectedDataset ? selectedDataset.columns : [];
+
+      const dialogRef = this.dialog.open(WidgetConfigComponent, {
+        width: '600px',
+        data: {
+          widget: this.widgetToPreview!.widget, // The base widget model
+          currentConfig: this.configAsObject, // The existing configuration
+          availableColumns: availableColumns
+        }
+      });
+
+      dialogRef.afterClosed().subscribe(resultConfig => {
+        if (resultConfig) {
+          // Update the config on the preview object
+          this.widgetToPreview!.config = JSON.stringify(resultConfig);
+
+          // Persist the changes to the backend
+          this.mMenuitemsWidgetService.saveLinkedWidget(this.widgetToPreview!).subscribe(() => {
+            this.notificationService.success('Success', 'Configuration saved successfully!');
+            // Refresh the entire preview to reflect the changes
+            this.viewWidget(this.widgetToPreview!);
+          });
+        }
+      });
     });
   }