templaelist

src/app/app.config.ts

@@ -20,7 +20,6 @@ import { HttpRequestInterceptor } from './shared/services/http-request.intercept
 import { AuthService } from './shared/services/auth.service';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import { MockDataInterceptor } from './shared/interceptors/mock-data.interceptor';
 import { DashboardDataService } from './shared/services/dashboard-data.service';
 import { provideStore, provideState } from '@ngrx/store';
 import { provideEffects } from '@ngrx/effects';
@@ -45,11 +44,6 @@ export const httpInterceptorProviders = [
     useClass: HttpRequestInterceptor,
     multi: true,
   },
-  {
-    provide: HTTP_INTERCEPTORS,
-    useClass: MockDataInterceptor,
-    multi: true,
-  }
 ];
 
 export const appConfig: ApplicationConfig = {

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

@@ -15,6 +15,8 @@ import { DashboardDataService } from '../services/dashboard-data.service';
 import { WidgetDataService } from '../services/widget-data.service'; // Import new service
 import { WidgetService } from '../services/widgets.service'; // Import WidgetService
 import { DashboardStateService, SelectedDataset } from '../services/dashboard-state.service'; // Import SelectedDataset
+import { DatasetService } from '../services/dataset.service';
+
 import { WidgetConfigComponent } from './widget-config/widget-config.component'; // Import WidgetConfigComponent
 
 // Import all the widget components
@@ -545,6 +547,7 @@ export class DashboardManagementComponent implements OnInit {
     private widgetDataService: WidgetDataService, // Inject new service
     private widgetService: WidgetService, // Inject WidgetService
     private dashboardStateService: DashboardStateService,
+    private datasetService: DatasetService, // Inject DatasetService
     private dialog: MatDialog
   ) { }
 
@@ -741,9 +744,25 @@ export class DashboardManagementComponent implements OnInit {
     if (this.dashboardData) {
       this.dashboardData.datasetId = datasetId;
       this.dashboardStateService.selectDataset(datasetId);
+      this.getDatasetByTemplate(datasetId);
     }
   }
 
+  getDatasetByTemplate(datasetId: string): void {
+    this.datasetService.getDatasetByTemplate(datasetId).subscribe(dataset => {
+      if (dataset && this.dashboardData) {
+        // Update the config of each widget with the new data
+        this.dashboardData.widgets.forEach(widget => {
+          if (widget.config) {
+            widget.config.source.data = dataset; // Assuming the dataset is the data source
+          }
+        });
+        // Remap panels to reflect the changes
+        this.panels = this.mapWidgetsToPanels(this.dashboardData.widgets);
+      }
+    });
+  }
+
   openWidgetConfigDialog(panel: PanelModel & { componentType: Type<any>, componentInputs?: { [key: string]: any }, originalWidget: WidgetModel }): void {
     const widget = panel.originalWidget;
     this.dashboardStateService.selectedDataset$.subscribe((selectedDataset: SelectedDataset | null) => {

src/app/portal-manage/dashboard-management/dataset-picker.component.html

@@ -2,8 +2,8 @@
   <label for="dataset-select">Select Dataset:</label>
   <select id="dataset-select" [ngModel]="selectedDatasetId" (change)="onDatasetChange($event)">
     <option value="">-- Please choose a dataset --</option>
-    <option *ngFor="let dataset of datasets$ | async" [value]="dataset.id">
-      {{ dataset.name }}
+    <option *ngFor="let dataset of datasets$" [value]="dataset.itemId">
+      {{ dataset.tdesc }}
     </option>
   </select>
 </div>

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

@@ -16,14 +16,17 @@ import { DatasetService } from '../services/dataset.service';
 
 export class DatasetPickerComponent implements OnInit {
 
-  datasets$: Observable<DatasetModel[]>;
+  datasets$: DatasetModel[] = [];
   @Input() selectedDatasetId: string | null | undefined;
   @Output() datasetSelected = new EventEmitter<string>();
 
   constructor(private datasetService: DatasetService) { }
 
   ngOnInit(): void {
-    this.datasets$ = this.datasetService.getDatasets();
+    // this.datasets$ = this.datasetService.getDatasets();
+    this.datasetService.getDatasets().subscribe(data => {
+      this.datasets$ = data
+    });
   }
 
   onDatasetChange(event: any): void {

src/app/portal-manage/models/widgets.model.ts

@@ -3,20 +3,29 @@ import { TagModel } from "./tag.mmodel"
 import { GroupModel } from "./group.mmodel"
 
 export interface IDataset {
-  id: string;
-  name: string;
-  url: string;
+  itemId: string;
+  templateId: string;
+  fileName: string;
+  tdesc: string;
+  edesc: string;
+  module: string;
 }
 
 export class DatasetModel implements IDataset {
-  id: string;
-  name: string;
-  url: string;
+  itemId: string;
+  templateId: string;
+  fileName: string;
+  tdesc: string;
+  edesc: string;
+  module: string;
 
   constructor(data: Partial<DatasetModel>) {
-    this.id = data.id ?? '';
-    this.name = data.name ?? '';
-    this.url = data.url ?? '';
+    this.itemId = data.itemId ?? '';
+    this.templateId = data.templateId ?? '';
+    this.fileName = data.fileName ?? '';
+    this.tdesc = data.tdesc ?? '';
+    this.edesc = data.edesc ?? '';
+    this.module = data.module ?? '';
   }
 }
 

src/app/portal-manage/services/dashboard-state.service.ts

@@ -18,33 +18,20 @@ export class DashboardStateService {
   public selectedDataset$: Observable<SelectedDataset | null>;
 
   constructor(private datasetService: DatasetService, private http: HttpClient) {
-    this.selectedDataset$ = this.selectedDatasetId.pipe(
-      switchMap(id => {
-        if (id) {
-          return this.datasetService.getDatasetById(id).pipe(
-            switchMap((dataset: DatasetModel | undefined) => {
-              if (dataset && dataset.url) {
-                return this.http.get<any[]>(dataset.url).pipe(
-                  map(data => {
-                    console.log('Fetched data for dataset:', data); // Log fetched data
-                    if (data && data.length > 0) {
-                      const columns = Object.keys(data[0]);
-                      console.log('Derived columns:', columns); // Log derived columns
-                      return { data, columns };
-                    } else {
-                      console.log('Fetched data is empty or invalid.'); // Log empty data
-                      return { data: [], columns: [] };
-                    }
-                  })
-                );
-              }
-              return of(null);
-            })
-          );
-        }
-        return of(null);
-      })
-    );
+    // this.selectedDataset$ = this.selectedDatasetId.pipe(
+    //   switchMap(id => {
+    //     if (id) {
+    //       console.log('Selected dataset ID:', id); // Log selected dataset ID
+    //       return this.datasetService.getDatasetByTemplate(id).pipe(
+    //         switchMap((dataset: DatasetModel | undefined) => {
+
+    //           return of(null);
+    //         })
+    //       );
+    //     }
+    //     return of(null);
+    //   })
+    // );
   }
 
   selectDataset(datasetId: string): void {

src/app/portal-manage/services/dataset.service.ts

@@ -2,32 +2,34 @@
 import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { DatasetModel } from '../models/widgets.model';
+import { HttpClient } from '@angular/common/http';
 
 @Injectable({
   providedIn: 'root'
 })
 export class DatasetService {
 
-  private datasets: DatasetModel[] = [
-    new DatasetModel({ id: '1', name: 'Sample Dataset 1', url: 'assets/data/sample1.json' }),
-    new DatasetModel({ id: '2', name: 'Sample Dataset 2', url: 'assets/data/sample2.json' }),
-    new DatasetModel({ id: '3', name: 'area-chart-data', url: 'assets/data/area-chart-data.json' }),
-    new DatasetModel({ id: '4', name: 'bar-chart-data', url: 'assets/data/bar-chart-data.json' }),
-    new DatasetModel({ id: '5', name: 'employee-data', url: 'assets/data/employee-data.json' }),
-    new DatasetModel({ id: '6', name: 'kpi-data', url: 'assets/data/kpi-data.json' }),
-    new DatasetModel({ id: '7', name: 'map-data', url: 'assets/data/map-data.json' }),
-    new DatasetModel({ id: '8', name: 'pie-chart-data', url: 'assets/data/pie-chart-data.json' }),
-    new DatasetModel({ id: '9', name: 'table-data', url: 'assets/data/table-data.json' }),
+  // private datasets: DatasetModel[] = [
+  //   new DatasetModel({ id: '1', name: 'Sample Dataset 1', url: 'assets/data/sample1.json' }),
+  //   new DatasetModel({ id: '2', name: 'Sample Dataset 2', url: 'assets/data/sample2.json' }),
+  //   new DatasetModel({ id: '3', name: 'area-chart-data', url: 'assets/data/area-chart-data.json' }),
+  //   new DatasetModel({ id: '4', name: 'bar-chart-data', url: 'assets/data/bar-chart-data.json' }),
+  //   new DatasetModel({ id: '5', name: 'employee-data', url: 'assets/data/employee-data.json' }),
+  //   new DatasetModel({ id: '6', name: 'kpi-data', url: 'assets/data/kpi-data.json' }),
+  //   new DatasetModel({ id: '7', name: 'map-data', url: 'assets/data/map-data.json' }),
+  //   new DatasetModel({ id: '8', name: 'pie-chart-data', url: 'assets/data/pie-chart-data.json' }),
+  //   new DatasetModel({ id: '9', name: 'table-data', url: 'assets/data/table-data.json' }),
 
-  ];
+  // ];
 
-  constructor() { }
+  constructor(private http: HttpClient) { }
 
   getDatasets(): Observable<DatasetModel[]> {
-    return of(this.datasets);
+    return this.http.get<DatasetModel[]>('https://portal.myhr.co.th/api/template-file/menuitem/mini/lists?companyid=DEMO');
   }
 
-  getDatasetById(id: string): Observable<DatasetModel | undefined> {
-    return of(this.datasets.find(d => d.id === id));
+  getDatasetByTemplate(id: string): Observable<DatasetModel | undefined> {
+    // return this.http.get<DatasetModel>(`https://portal.myhr.co.th/api/template-file/dataset/${id}`);
+    return this.http.get<DatasetModel>('https://portal.myhr.co.th/api/template-file/dataset/3/5D5TITDVNH.xlsm?companyid=DEMO')
   }
 }

src/app/shared/interceptors/mock-data.interceptor.ts

-import { Injectable } from '@angular/core';
-import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse } from '@angular/common/http';
-import { Observable, of, switchMap } from 'rxjs';
-import { DatasetService } from '../../portal-manage/services/dataset.service';
-
-@Injectable()
-export class MockDataInterceptor implements HttpInterceptor {
-
-  constructor(private datasetService: DatasetService) {}
-
-  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    if (request.url.startsWith('/api/data/')) {
-      const datasetId = request.url.split('/').pop();
-      if (!datasetId) {
-        return of(new HttpResponse({ status: 404, body: [] }));
-      }
-      return this.datasetService.getDatasetById(datasetId).pipe(
-        switchMap((dataset: any) => {
-          if (dataset && dataset.url) {
-            // In a real app, you would fetch the data from the URL.
-            // For this mock, we'll just return an empty array.
-            return of(new HttpResponse({ status: 200, body: [] }));
-          }
-          return of(new HttpResponse({ status: 404, body: [] }));
-        })
-      );
-    }
-    return next.handle(request);
-  }
-}