linker

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

@@ -64,13 +64,31 @@
         </div>
       </div>
       <div *ngIf="widgetToPreview">
-        <div class="mb-4 p-4 border rounded-lg">
-          <h3 class="text-md font-bold mb-2">{{ widgetToPreview.widget.thName }}</h3>
-          <p class="text-sm text-gray-600">{{ widgetToPreview.widget.component }}</p>
+        <!-- Dynamic Widget Rendering Area -->
+        <div class="p-4 border rounded-lg mb-4">
+            <div *ngIf="!previewPanel" class="text-center text-red-500">
+                Preview not available for this widget type.
+            </div>
+            <ng-container *ngIf="previewPanel" [ngComponentOutlet]="previewPanel.componentType" [ngComponentOutletInputs]="previewPanel.componentInputs"></ng-container>
         </div>
+
+        <!-- Editable Configuration Form -->
         <div class="p-4 border rounded-lg bg-gray-50">
            <h3 class="text-md font-bold mb-2">Configuration</h3>
-           <pre class="bg-gray-900 text-white p-2 rounded-md text-xs">{{ widgetToPreview.config | json }}</pre>
+           <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>
       </div>
     </div>