หห

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

@@ -10,9 +10,12 @@
                     <ng-template [e-header]>
                         <div class="p-2 bg-white border-b border-gray-200 text-gray-700 font-semibold">{{panel.header}}</div>
                     </ng-template>
-                    <ng-template [e-content]>
-                        <ng-container [ngComponentOutlet]="panel.componentType" [ngComponentOutletInputs]="panel.componentInputs"></ng-container>
-                    </ng-template>
+                    <!-- Direct content for testing -->
+                    <div style="padding: 10px; background-color: #fff; border: 1px solid #ccc;">
+                        <h3>Panel Content Test</h3>
+                        <p>This is panel: {{ panel.header }}</p>
+                        <p>Component: {{ panel.componentName }}</p>
+                    </div>
                 </e-panel>
             </e-panels>
         </ejs-dashboardlayout>

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

@@ -54,7 +54,7 @@ import { DataTableWidgetComponent } from '../widgets/dynamic-widgets/data-table-
 })
 export class DashboardViewerComponent implements OnInit {
 
-  public panels: (PanelModel & { componentType: Type<any>, componentInputs?: { [key: string]: any } })[] = []; // Update type
+  public panels: (PanelModel & { componentType: Type<any>, componentInputs?: { [key: string]: any }, componentName?: string })[] = []; // Update type
   public cellSpacing: number[] = [10, 10];
   public dashboardName: string = '';
 
@@ -111,7 +111,7 @@ export class DashboardViewerComponent implements OnInit {
 
     // Prepare data fetching tasks for NewDataTableWidget components
     dashboard.widgets.forEach(widget => {
-      if (widget.component === 'NewDataTableWidget' && widget.config?.source?.url && !widget.config.data) {
+      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 => {
@@ -127,6 +127,7 @@ export class DashboardViewerComponent implements OnInit {
       forkJoin(dataFetchTasks).subscribe(() => {
         console.log('All widget data fetched for viewer.');
         this.panels = dashboard.widgets.map(widget => {
+          console.log(`Mapping widget: ${widget.name}, Component: ${widget.component}, Resolved Type: ${this.widgetComponentMap[widget.component]}`);
           let inputs = {};
           if (widget.component === 'NewDataTableWidget') {
             inputs = { config: widget.config };
@@ -141,6 +142,7 @@ export class DashboardViewerComponent implements OnInit {
             sizeX: widget.cols,
             sizeY: widget.rows,
             header: widget.name,
+            componentName: widget.component, // Add componentName
             componentType: this.widgetComponentMap[widget.component], // Attach the component Type
             componentInputs: inputs // Pass inputs
           };
@@ -149,6 +151,7 @@ export class DashboardViewerComponent implements OnInit {
     } else {
       // No data to fetch, directly map panels
       this.panels = dashboard.widgets.map(widget => {
+        console.log(`Mapping widget: ${widget.name}, Component: ${widget.component}, Resolved Type: ${this.widgetComponentMap[widget.component]}`);
         let inputs = {};
         if (widget.component === 'NewDataTableWidget') {
           inputs = { config: widget.config };
@@ -163,6 +166,7 @@ export class DashboardViewerComponent implements OnInit {
           sizeX: widget.cols,
           sizeY: widget.rows,
           header: widget.name,
+          componentName: widget.component, // Add componentName
           componentType: this.widgetComponentMap[widget.component], // Attach the component Type
           componentInputs: inputs // Pass inputs
         };

src/app/DPU/services/widget-data.service.ts

@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
+import { environment } from '../../../environments/environment'; // Import environment
 
 @Injectable({
   providedIn: 'root'
@@ -19,9 +20,20 @@ export class WidgetDataService {
    */
   fetchDataForWidget(config: any): Observable<any[]> {
     if (config && config.source && config.source.url) {
-      return this.http.get<any[]>(config.source.url).pipe(
+      let urlToFetch = config.source.url;
+
+      // Check if it's a local asset path
+      if (urlToFetch.startsWith('assets/')) {
+        // Use the URL as is, HttpClient will fetch from the app's assets folder
+        // No need to prepend environment.url
+      } else {
+        // Assume it's an API endpoint, prepend environment.url
+        urlToFetch = environment.url + urlToFetch;
+      }
+
+      return this.http.get<any[]>(urlToFetch).pipe(
         catchError(error => {
-          console.error(`Failed to fetch widget data from ${config.source.url}`, error);
+          console.error(`Failed to fetch widget data from ${urlToFetch}`, error);
           return of([]); // Return an empty array on error
         })
       );

src/app/DPU/widgets/dynamic-widgets/data-table-widget.component.html

 
 <div class="bg-white p-4 rounded-lg shadow-md h-full flex flex-col">
   <h3 class="text-lg font-semibold text-gray-600 mb-4">{{ title }}</h3>
-  <div class="flex-grow">
-    <ejs-grid [dataSource]="data" 
-              [allowPaging]="true" 
-              [pageSettings]="pageSettings" 
-              [allowSorting]="true" 
-              [allowFiltering]="true" 
-              [allowGrouping]="true"
-              height="100%">
-      <e-columns>
-        <e-column *ngFor="let col of columns" 
-                  [field]="col.field" 
-                  [headerText]="col.headerText" 
-                  [width]="col.width">
-        </e-column>
-      </e-columns>
-    </ejs-grid>
+  <div class="flex-grow p-4 border border-dashed border-gray-300 flex items-center justify-center">
+    <p class="text-gray-500 text-center">Data Table Widget Placeholder</p>
+    <p class="text-gray-500 text-center">Title: {{ title }}</p>
+    <p class="text-gray-500 text-center">Data Length: {{ data.length }}</p>
   </div>
 </div>

src/app/DPU/widgets/dynamic-widgets/data-table-widget.component.ts

@@ -23,10 +23,12 @@ export class DataTableWidgetComponent implements OnInit, OnChanges {
   constructor() { }
 
   ngOnInit(): void {
+    console.log('DataTableWidgetComponent: ngOnInit - config', this.config);
     this.updateWidgetFromConfig();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
+    console.log('DataTableWidgetComponent: ngOnChanges - changes', changes);
     // If the config object changes, re-render the widget
     if (changes['config']) {
       this.updateWidgetFromConfig();
@@ -34,9 +36,11 @@ export class DataTableWidgetComponent implements OnInit, OnChanges {
   }
 
   private updateWidgetFromConfig(): void {
+    console.log('DataTableWidgetComponent: updateWidgetFromConfig - config', this.config);
     if (this.config) {
       this.title = this.config.title || 'Data Table';
       this.data = this.config.data || [];
+      console.log('DataTableWidgetComponent: updateWidgetFromConfig - data', this.data);
       // If columns are defined in config, use them. Otherwise, generate from data.
       if (this.config.columns && this.config.columns.length > 0) {
         this.columns = this.config.columns;
@@ -48,6 +52,7 @@ export class DataTableWidgetComponent implements OnInit, OnChanges {
           width: 150
         }));
       }
+      console.log('DataTableWidgetComponent: updateWidgetFromConfig - columns', this.columns);
     }
   }
 

src/app/shared/services/http-request.interceptor.ts

@@ -23,7 +23,7 @@ export class HttpRequestInterceptor {
     }
 
     // จัดการ full URL
-    const fullUrl = req.url.startsWith('http')
+    const fullUrl = req.url.startsWith('http') || req.url.startsWith('assets/data')
       ? req.url
       : `${environment.baseUrl.replace(/\/$/, '')}/${req.url.replace(/^\//, '')}`;