Skip to content

P
portal-apps-manage
Commit a25087d6 by Ooh-Ao
Options

config

parent 3bf1295b
Showing with 623 additions and 10 deletions
src/app/DPU/dashboard-management/dashboard-management.component.ts
...@@ -19,6 +19,7 @@ import { WidgetConfigComponent } from './widget-config/widget-config.component'; ...@@ -19,6 +19,7 @@ import { WidgetConfigComponent } from './widget-config/widget-config.component';
// Import all the widget components // Import all the widget components
import { CompanyInfoWidgetComponent } from '../widgets/company-info-widget.component'; 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 { HeadcountWidgetComponent } from '../widgets/headcount-widget.component';
import { AttendanceOverviewWidgetComponent } from '../widgets/attendance-overview-widget.component'; import { AttendanceOverviewWidgetComponent } from '../widgets/attendance-overview-widget.component';
import { PayrollSummaryWidgetComponent } from '../widgets/payroll-summary-widget.component'; import { PayrollSummaryWidgetComponent } from '../widgets/payroll-summary-widget.component';
...@@ -489,6 +490,20 @@ export class DashboardManagementComponent implements OnInit { ...@@ -489,6 +490,20 @@ export class DashboardManagementComponent implements OnInit {
netPayField: 'netPay', 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> } = { private widgetComponentMap: { [key: string]: Type<any> } = {
...@@ -520,7 +535,8 @@ export class DashboardManagementComponent implements OnInit { ...@@ -520,7 +535,8 @@ export class DashboardManagementComponent implements OnInit {
'SimpleTableWidgetComponent': SimpleTableWidgetComponent, 'SimpleTableWidgetComponent': SimpleTableWidgetComponent,
'WaterfallChartWidgetComponent': WaterfallChartWidgetComponent, 'WaterfallChartWidgetComponent': WaterfallChartWidgetComponent,
'TreemapWidgetComponent': TreemapWidgetComponent, 'TreemapWidgetComponent': TreemapWidgetComponent,
'NewDataTableWidget': DataTableWidgetComponent // Add new widget to map 'NewDataTableWidget': DataTableWidgetComponent, // Add new widget to map
'CompanyInfoSubfolderWidgetComponent': CompanyInfoSubfolderWidgetComponent // Add new widget to map
}; };
constructor( constructor(
......
src/app/DPU/dashboard-management/widget-config/widget-config.component.html
...@@ -2,6 +2,428 @@ ...@@ -2,6 +2,428 @@
<mat-dialog-content> <mat-dialog-content>
<form> <form>
<div *ngIf="widgetType === 'CompanyInfoWidgetComponent' || widgetType === 'CompanyInfoSubfolderWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Company Name Field</mat-label>
<mat-select [(ngModel)]="currentConfig.companyNameField" name="companyNameField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Address Field</mat-label>
<mat-select [(ngModel)]="currentConfig.addressField" name="addressField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Contact Field</mat-label>
<mat-select [(ngModel)]="currentConfig.contactField" name="contactField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="widgetType === 'AttendanceOverviewWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Present Field</mat-label>
<mat-select [(ngModel)]="currentConfig.presentField" name="presentField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>On Leave Field</mat-label>
<mat-select [(ngModel)]="currentConfig.onLeaveField" name="onLeaveField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Absent Field</mat-label>
<mat-select [(ngModel)]="currentConfig.absentField" name="absentField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="widgetType === 'EmployeeDirectoryWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Name Field</mat-label>
<mat-select [(ngModel)]="currentConfig.nameField" name="nameField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Position Field</mat-label>
<mat-select [(ngModel)]="currentConfig.positionField" name="positionField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Department Field</mat-label>
<mat-select [(ngModel)]="currentConfig.departmentField" name="departmentField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="widgetType === 'HeadcountWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Category Field</mat-label>
<mat-select [(ngModel)]="currentConfig.categoryField" name="categoryField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="widgetType === 'PayrollSummaryWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Total Payroll Field</mat-label>
<mat-select [(ngModel)]="currentConfig.totalPayrollField" name="totalPayrollField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Employees Paid Field</mat-label>
<mat-select [(ngModel)]="currentConfig.employeesPaidField" name="employeesPaidField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="widgetType === 'PayrollWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Employee Name Field</mat-label>
<mat-select [(ngModel)]="currentConfig.employeeNameField" name="employeeNameField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Pay Period Field</mat-label>
<mat-select [(ngModel)]="currentConfig.payPeriodField" name="payPeriodField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Net Pay Field</mat-label>
<mat-select [(ngModel)]="currentConfig.netPayField" name="netPayField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="widgetType === 'WelcomeWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Message Field</mat-label>
<mat-select [(ngModel)]="currentConfig.messageField" name="messageField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="widgetType === 'ChartWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>X-Axis Field</mat-label>
<mat-select [(ngModel)]="currentConfig.xField" name="xField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Y-Axis Title</mat-label>
<input matInput [(ngModel)]="currentConfig.yAxisTitle" name="yAxisTitle">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Y-Axis Fields (JSON Array)</mat-label>
<textarea matInput [(ngModel)]="currentConfig.yFieldsJson" name="yFieldsJson" rows="5"></textarea>
</mat-form-field>
</div>
<div *ngIf="widgetType === 'QuickLinksWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Name Field</mat-label>
<mat-select [(ngModel)]="currentConfig.nameField" name="nameField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>URL Field</mat-label>
<mat-select [(ngModel)]="currentConfig.urlField" name="urlField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="widgetType === 'SyncfusionDatagridWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Columns (JSON Array)</mat-label>
<textarea matInput [(ngModel)]="currentConfig.columnsJson" name="columnsJson" rows="5"></textarea>
</mat-form-field>
</div>
<div *ngIf="widgetType === 'SyncfusionPivotWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Rows (JSON Array)</mat-label>
<textarea matInput [(ngModel)]="currentConfig.rowsJson" name="rowsJson" rows="5"></textarea>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Columns (JSON Array)</mat-label>
<textarea matInput [(ngModel)]="currentConfig.columnsJson" name="columnsJson" rows="5"></textarea>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Values (JSON Array)</mat-label>
<textarea matInput [(ngModel)]="currentConfig.valuesJson" name="valuesJson" rows="5"></textarea>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Filters (JSON Array)</mat-label>
<textarea matInput [(ngModel)]="currentConfig.filtersJson" name="filtersJson" rows="5"></textarea>
</mat-form-field>
<mat-checkbox [(ngModel)]="currentConfig.expandAll" name="expandAll">Expand All</mat-checkbox>
</div>
<div *ngIf="widgetType === 'SyncfusionChartWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>X-Axis Field</mat-label>
<mat-select [(ngModel)]="currentConfig.xField" name="xField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Y-Axis Field</mat-label>
<mat-select [(ngModel)]="currentConfig.yField" name="yField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>X-Axis Title</mat-label>
<input matInput [(ngModel)]="currentConfig.xAxisTitle" name="xAxisTitle">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Y-Axis Title</mat-label>
<input matInput [(ngModel)]="currentConfig.yAxisTitle" name="yAxisTitle">
</mat-form-field>
</div>
<div *ngIf="widgetType === 'TimeTrackingWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Status Field</mat-label>
<mat-select [(ngModel)]="currentConfig.statusField" name="statusField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Hours Field</mat-label>
<mat-select [(ngModel)]="currentConfig.hoursField" name="hoursField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="widgetType === 'NewDataTableWidget'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Columns (JSON Array)</mat-label>
<textarea matInput [(ngModel)]="currentConfig.columnsJson" name="columnsJson" rows="5"></textarea>
</mat-form-field>
</div>
<div *ngIf="widgetType === 'ScatterBubbleChartWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>X-Axis Field</mat-label>
<mat-select [(ngModel)]="currentConfig.xField" name="xField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Y-Axis Field</mat-label>
<mat-select [(ngModel)]="currentConfig.yField" name="yField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>X-Axis Title</mat-label>
<input matInput [(ngModel)]="currentConfig.xAxisTitle" name="xAxisTitle">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Y-Axis Title</mat-label>
<input matInput [(ngModel)]="currentConfig.yAxisTitle" name="yAxisTitle">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Chart Type</mat-label>
<mat-select [(ngModel)]="currentConfig.type" name="type">
<mat-option value="Scatter">Scatter</mat-option>
<mat-option value="Bubble">Bubble</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" *ngIf="currentConfig.type === 'Bubble'">
<mat-label>Size Field (for Bubble)</mat-label>
<mat-select [(ngModel)]="currentConfig.sizeField" name="sizeField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="widgetType === 'MultiRowCardWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Label Field</mat-label>
<mat-select [(ngModel)]="currentConfig.labelField" name="labelField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Value Field</mat-label>
<mat-select [(ngModel)]="currentConfig.valueField" name="valueField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Unit Field</mat-label>
<mat-select [(ngModel)]="currentConfig.unitField" name="unitField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="widgetType === 'ComboChartWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>X-Axis Field</mat-label>
<mat-select [(ngModel)]="currentConfig.xField" name="xField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Y-Axis Fields (JSON Array of Strings)</mat-label>
<textarea matInput [(ngModel)]="currentConfig.yFieldsJson" name="yFieldsJson" rows="5"></textarea>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>X-Axis Title</mat-label>
<input matInput [(ngModel)]="currentConfig.xAxisTitle" name="xAxisTitle">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Y-Axis Title</mat-label>
<input matInput [(ngModel)]="currentConfig.yAxisTitle" name="yAxisTitle">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Series (JSON Array of Objects)</mat-label>
<textarea matInput [(ngModel)]="currentConfig.seriesJson" name="seriesJson" rows="10"></textarea>
</mat-form-field>
</div>
<div *ngIf="widgetType === 'MatrixWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Columns (JSON Array)</mat-label>
<textarea matInput [(ngModel)]="currentConfig.columnsJson" name="columnsJson" rows="5"></textarea>
</mat-form-field>
</div>
<div *ngIf="widgetType === 'SlicerWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Options Field</mat-label>
<mat-select [(ngModel)]="currentConfig.optionsField" name="optionsField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="widgetType === 'WaterfallChartWidgetComponent'">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="currentConfig.title" name="title">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>X-Axis Field</mat-label>
<mat-select [(ngModel)]="currentConfig.xField" name="xField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Y-Axis Field</mat-label>
<mat-select [(ngModel)]="currentConfig.yField" name="yField">
<mat-option *ngFor="let col of availableColumns" [value]="col">{{ col }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>X-Axis Title</mat-label>
<input matInput [(ngModel)]="currentConfig.xAxisTitle" name="xAxisTitle">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Y-Axis Title</mat-label>
<input matInput [(ngModel)]="currentConfig.yAxisTitle" name="yAxisTitle">
</mat-form-field>
</div>
<div *ngIf="widgetType === 'SimpleKpiWidgetComponent'"> <div *ngIf="widgetType === 'SimpleKpiWidgetComponent'">
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Value Field</mat-label> <mat-label>Value Field</mat-label>
......
src/app/DPU/dashboard-management/widget-config/widget-config.component.ts
...@@ -43,9 +43,137 @@ export class WidgetConfigComponent implements OnInit { ...@@ -43,9 +43,137 @@ export class WidgetConfigComponent implements OnInit {
this.currentConfig = { ...this.data.config }; // Create a copy to avoid direct mutation this.currentConfig = { ...this.data.config }; // Create a copy to avoid direct mutation
this.availableColumns = this.data.availableColumns; this.availableColumns = this.data.availableColumns;
this.widgetType = this.data.widgetType; 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 { 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); 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 h-100">
<div class="card-header"> <div class="card-header">
<h5 class="card-title">Company Information</h5> <h5 class="card-title">{{ title }}</h5>
</div> </div>
<div class="card-body"> <div class="card-body">
<p>This is a placeholder for company information.</p> <p>Company Name: {{ companyName }}</p>
<p *ngIf="data">Data received: {{ data | json }}</p> <p>Address: {{ address }}</p>
<p>Contact: {{ contact }}</p>
</div> </div>
</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 { CommonModule } from '@angular/common';
import { DatasetService } from '../../services/dataset.service';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { DatasetModel } from '../../models/widgets.model';
@Component({ @Component({
selector: 'app-company-info-widget', selector: 'app-company-info-subfolder-widget',
standalone: true, standalone: true,
imports: [CommonModule], imports: [CommonModule, HttpClientModule],
providers: [DatasetService, HttpClient],
templateUrl: './company-info-widget.component.html', templateUrl: './company-info-widget.component.html',
styleUrls: ['./company-info-widget.component.scss'] styleUrls: ['./company-info-widget.component.scss']
}) })
export class CompanyInfoWidgetComponent implements OnInit { export class CompanyInfoSubfolderWidgetComponent implements OnInit, OnChanges {
@Input() data: any; @Input() config: any;
title: string = 'Company Information';
companyName: string = '';
address: string = '';
contact: string = '';
constructor() { } constructor(private datasetService: DatasetService, private http: HttpClient) { }
ngOnInit(): void { 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';
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment