config

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

@@ -19,6 +19,7 @@ import { WidgetConfigComponent } from './widget-config/widget-config.component';
 
 // Import all the widget components
 import { CompanyInfoWidgetComponent } from '../widgets/company-info-widget.component';
+import { CompanyInfoSubfolderWidgetComponent } from '../widgets/company-info-widget/company-info-widget.component'; // New import
 import { HeadcountWidgetComponent } from '../widgets/headcount-widget.component';
 import { AttendanceOverviewWidgetComponent } from '../widgets/attendance-overview-widget.component';
 import { PayrollSummaryWidgetComponent } from '../widgets/payroll-summary-widget.component';
@@ -489,6 +490,20 @@ export class DashboardManagementComponent implements OnInit {
         netPayField: 'netPay',
       }
     }),
+    new WidgetModel({
+      id: 'local-company-info-subfolder',
+      name: 'Company Info (Subfolder Local)',
+      component: 'CompanyInfoSubfolderWidgetComponent', // Use the new component name
+      cols: 2,
+      rows: 1,
+      config: {
+        title: 'Our Company Details (Subfolder)',
+        source: { type: 'url', url: 'assets/data/sample1.json' }, // Assuming sample1.json has company info
+        companyNameField: 'companyName',
+        addressField: 'address',
+        contactField: 'contact',
+      }
+    }),
   ];
 
   private widgetComponentMap: { [key: string]: Type<any> } = {
@@ -520,7 +535,8 @@ export class DashboardManagementComponent implements OnInit {
     'SimpleTableWidgetComponent': SimpleTableWidgetComponent,
     'WaterfallChartWidgetComponent': WaterfallChartWidgetComponent,
     'TreemapWidgetComponent': TreemapWidgetComponent,
-    'NewDataTableWidget': DataTableWidgetComponent // Add new widget to map
+    'NewDataTableWidget': DataTableWidgetComponent, // Add new widget to map
+    'CompanyInfoSubfolderWidgetComponent': CompanyInfoSubfolderWidgetComponent // Add new widget to map
   };
 
   constructor(

src/app/DPU/dashboard-management/widget-config/widget-config.component.ts

@@ -43,9 +43,137 @@ export class WidgetConfigComponent implements OnInit {
     this.currentConfig = { ...this.data.config }; // Create a copy to avoid direct mutation
     this.availableColumns = this.data.availableColumns;
     this.widgetType = this.data.widgetType;
+
+    // Special handling for ChartWidgetComponent's yFields
+    if (this.widgetType === 'ChartWidgetComponent' && this.currentConfig.yFields) {
+      this.currentConfig.yFieldsJson = JSON.stringify(this.currentConfig.yFields, null, 2);
+    }
+    // Special handling for SyncfusionDatagridWidgetComponent's columns
+    if (this.widgetType === 'SyncfusionDatagridWidgetComponent' && this.currentConfig.columns) {
+      this.currentConfig.columnsJson = JSON.stringify(this.currentConfig.columns, null, 2);
+    }
+    // Special handling for SyncfusionPivotWidgetComponent's properties
+    if (this.widgetType === 'SyncfusionPivotWidgetComponent') {
+      if (this.currentConfig.rows) {
+        this.currentConfig.rowsJson = JSON.stringify(this.currentConfig.rows, null, 2);
+      }
+      if (this.currentConfig.columns) {
+        this.currentConfig.columnsJson = JSON.stringify(this.currentConfig.columns, null, 2);
+      }
+      if (this.currentConfig.values) {
+        this.currentConfig.valuesJson = JSON.stringify(this.currentConfig.values, null, 2);
+      }
+      if (this.currentConfig.filters) {
+        this.currentConfig.filtersJson = JSON.stringify(this.currentConfig.filters, null, 2);
+      }
+    }
+    // Special handling for NewDataTableWidget's columns
+    if (this.widgetType === 'NewDataTableWidget' && this.currentConfig.columns) {
+      this.currentConfig.columnsJson = JSON.stringify(this.currentConfig.columns, null, 2);
+    }
   }
 
   onSave(): void {
+    // Special handling for ChartWidgetComponent's yFields
+    if (this.widgetType === 'ChartWidgetComponent' && this.currentConfig.yFieldsJson) {
+      try {
+        this.currentConfig.yFields = JSON.parse(this.currentConfig.yFieldsJson);
+      } catch (e) {
+        console.error('Invalid JSON for yFields:', e);
+        alert('Invalid JSON format for Y-Axis Fields. Please correct it.');
+        return; // Prevent closing dialog with invalid data
+      }
+    }
+    // Special handling for SyncfusionDatagridWidgetComponent's columns
+    if (this.widgetType === 'SyncfusionDatagridWidgetComponent' && this.currentConfig.columnsJson) {
+      try {
+        this.currentConfig.columns = JSON.parse(this.currentConfig.columnsJson);
+      } catch (e) {
+        console.error('Invalid JSON for columns:', e);
+        alert('Invalid JSON format for Columns. Please correct it.');
+        return; // Prevent closing dialog with invalid data
+      }
+    }
+    // Special handling for SyncfusionPivotWidgetComponent's properties
+    if (this.widgetType === 'SyncfusionPivotWidgetComponent') {
+      if (this.currentConfig.rowsJson) {
+        try {
+          this.currentConfig.rows = JSON.parse(this.currentConfig.rowsJson);
+        } catch (e) {
+          console.error('Invalid JSON for rows:', e);
+          alert('Invalid JSON format for Rows. Please correct it.');
+          return;
+        }
+      }
+      if (this.currentConfig.columnsJson) {
+        try {
+          this.currentConfig.columns = JSON.parse(this.currentConfig.columnsJson);
+        } catch (e) {
+          console.error('Invalid JSON for columns:', e);
+          alert('Invalid JSON format for Columns. Please correct it.');
+          return;
+        }
+      }
+      if (this.currentConfig.valuesJson) {
+        try {
+          this.currentConfig.values = JSON.parse(this.currentConfig.valuesJson);
+        } catch (e) {
+          console.error('Invalid JSON for values:', e);
+          alert('Invalid JSON format for Values. Please correct it.');
+          return;
+        }
+      }
+      if (this.currentConfig.filtersJson) {
+        try {
+          this.currentConfig.filters = JSON.parse(this.currentConfig.filtersJson);
+        } catch (e) {
+          console.error('Invalid JSON for filters:', e);
+          alert('Invalid JSON format for Filters. Please correct it.');
+          return;
+        }
+      }
+    }
+    // Special handling for NewDataTableWidget's columns
+    if (this.widgetType === 'NewDataTableWidget' && this.currentConfig.columnsJson) {
+      try {
+        this.currentConfig.columns = JSON.parse(this.currentConfig.columnsJson);
+      } catch (e) {
+        console.error('Invalid JSON for columns:', e);
+        alert('Invalid JSON format for Columns. Please correct it.');
+        return; // Prevent closing dialog with invalid data
+      }
+    }
+    // Special handling for ComboChartWidgetComponent's yFields and series
+    if (this.widgetType === 'ComboChartWidgetComponent') {
+      if (this.currentConfig.yFieldsJson) {
+        try {
+          this.currentConfig.yFields = JSON.parse(this.currentConfig.yFieldsJson);
+        } catch (e) {
+          console.error('Invalid JSON for yFields:', e);
+          alert('Invalid JSON format for Y-Axis Fields. Please correct it.');
+          return;
+        }
+      }
+      if (this.currentConfig.seriesJson) {
+        try {
+          this.currentConfig.series = JSON.parse(this.currentConfig.seriesJson);
+        } catch (e) {
+          console.error('Invalid JSON for series:', e);
+          alert('Invalid JSON format for Series. Please correct it.');
+          return;
+        }
+      }
+    }
+    // Special handling for MatrixWidgetComponent's columns
+    if (this.widgetType === 'MatrixWidgetComponent' && this.currentConfig.columnsJson) {
+      try {
+        this.currentConfig.columns = JSON.parse(this.currentConfig.columnsJson);
+      } catch (e) {
+        console.error('Invalid JSON for columns:', e);
+        alert('Invalid JSON format for Columns. Please correct it.');
+        return; // Prevent closing dialog with invalid data
+      }
+    }
     this.dialogRef.close(this.currentConfig);
   }
 

src/app/DPU/widgets/company-info-widget/company-info-widget.component.html

 
 <div class="card h-100">
   <div class="card-header">
-    <h5 class="card-title">Company Information</h5>
+    <h5 class="card-title">{{ title }}</h5>
   </div>
   <div class="card-body">
-    <p>This is a placeholder for company information.</p>
-    <p *ngIf="data">Data received: {{ data | json }}</p>
+    <p>Company Name: {{ companyName }}</p>
+    <p>Address: {{ address }}</p>
+    <p>Contact: {{ contact }}</p>
   </div>
 </div>

src/app/DPU/widgets/company-info-widget/company-info-widget.component.ts

 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { DatasetService } from '../../services/dataset.service';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { DatasetModel } from '../../models/widgets.model';
 
 @Component({
-  selector: 'app-company-info-widget',
+  selector: 'app-company-info-subfolder-widget',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, HttpClientModule],
+  providers: [DatasetService, HttpClient],
   templateUrl: './company-info-widget.component.html',
   styleUrls: ['./company-info-widget.component.scss']
 })
-export class CompanyInfoWidgetComponent implements OnInit {
-  @Input() data: any;
+export class CompanyInfoSubfolderWidgetComponent implements OnInit, OnChanges {
+  @Input() config: any;
+  title: string = 'Company Information';
+  companyName: string = '';
+  address: string = '';
+  contact: string = '';
 
-  constructor() { }
+  constructor(private datasetService: DatasetService, private http: HttpClient) { }
 
   ngOnInit(): void {
+    if (this.config && this.config.datasetId) {
+      this.loadData();
+    } else {
+      this.resetData();
+    }
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['config'] && this.config && this.config.datasetId) {
+      this.loadData();
+    } else if (changes['config'] && (!this.config || !this.config.datasetId)) {
+      this.resetData();
+    }
+  }
+
+  loadData(): void {
+    if (this.config.datasetId) {
+      this.datasetService.getDatasetById(this.config.datasetId).subscribe((dataset: DatasetModel | undefined) => {
+        if (dataset && dataset.url) {
+          this.http.get<any[]>(dataset.url).subscribe(data => {
+            if (data.length > 0) {
+              const firstItem = data[0];
+              this.companyName = firstItem[this.config.companyNameField] || '';
+              this.address = firstItem[this.config.addressField] || '';
+              this.contact = firstItem[this.config.contactField] || '';
+            }
+            if (this.config.title) {
+              this.title = this.config.title;
+            }
+          });
+        }
+      });
+    }
+  }
+
+  resetData(): void {
+    this.companyName = 'My Company Inc. (Subfolder)';
+    this.address = '456 Subfolder Ave, Anytown USA';
+    this.contact = 'info@subfolder.com';
+  }
 }