Skip to content

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

config

parent 162ff658
Showing with 1361 additions and 330 deletions
package-lock.json
......@@ -36,7 +36,7 @@
"@syncfusion/ej2-angular-base": "^31.1.17",
"@syncfusion/ej2-angular-buttons": "^31.1.17",
"@syncfusion/ej2-angular-calendars": "^31.1.19",
"@syncfusion/ej2-angular-charts": "^31.1.17",
"@syncfusion/ej2-angular-charts": "^31.1.19",
"@syncfusion/ej2-angular-circulargauge": "^31.1.17",
"@syncfusion/ej2-angular-dropdowns": "^31.1.17",
"@syncfusion/ej2-angular-grids": "^31.1.17",
......
src/app/portal-manage/dashboard-management/dashboard-management.component.ts
......@@ -138,12 +138,16 @@ export class DashboardManagementComponent implements OnInit {
if (dashboard) {
this.dashboardData = dashboard;
// Ensure all widgets have a unique instanceId for this session
// Ensure all widgets have a unique instanceId for this session and parse JSON strings
if (dashboard.widgets) {
dashboard.widgets.forEach((widget: any) => {
if (!widget.instanceId) {
widget.instanceId = `inst_${Date.now()}_${Math.random()}`;
}
// Parse JSON strings to objects
widget.config = this.parseJsonString(widget.config);
widget.perspective = this.parseJsonString(widget.perspective);
widget.data = this.parseJsonString(widget.data);
});
}
......@@ -198,7 +202,9 @@ export class DashboardManagementComponent implements OnInit {
saveDashboardName(): void {
if (this.dashboardData) {
this.dashboardDataService.saveDashboard(this.dashboardData).pipe(
const dashboardToSave = this.convertWidgetsToStrings(this.dashboardData);
this.dashboardDataService.saveDashboard(dashboardToSave).pipe(
catchError(error => {
this.notificationService.error('Error', 'Failed to save dashboard name.');
return throwError(() => error);
......@@ -252,27 +258,18 @@ export class DashboardManagementComponent implements OnInit {
});
console.log('Current panels from layout:', currentPanels);
console.log('Updated widget positions:', this.dashboardData.widgets);
const dashboardToSave = JSON.parse(JSON.stringify(this.dashboardData));
if (dashboardToSave.widgets) {
const allWidgetStates = this.widgetStateService.getAllWidgetStates(); // Get all current widget states
dashboardToSave.widgets.forEach((widget: any) => {
// Remove the internal-only instanceId before saving
delete widget.instanceId;
// Convert objects back to strings for saving
const dashboardToSave = this.convertWidgetsToStrings(this.dashboardData);
if (widget.config && typeof widget.config === 'object') {
widget.config = JSON.stringify(widget.config);
}
// Update perspective from WidgetStateService if available
// Update perspectives from WidgetStateService
if (dashboardToSave.widgets) {
const allWidgetStates = this.widgetStateService.getAllWidgetStates();
dashboardToSave.widgets.forEach((widget: any) => {
const currentPerspective = allWidgetStates.get(widget.widgetId);
if (currentPerspective !== undefined) { // Check for undefined to allow nulls
if (currentPerspective !== undefined) {
widget.perspective = currentPerspective;
}
// Ensure perspective is stringified if it's an object (though it should be string from getWidgetState)
if (widget.perspective && typeof widget.perspective === 'object') {
widget.perspective = JSON.stringify(widget.perspective);
}
});
}
......@@ -363,38 +360,43 @@ export class DashboardManagementComponent implements OnInit {
});
}
mapWidgetsToPanels(widgets: WidgetModel[]): DashboardPanel[] {
return widgets.map(widget => {
// Ensure config is an object before passing to component
let configObject: any = {}; // Use any to easily add properties
if (typeof widget.config === 'string') {
try {
configObject = JSON.parse(widget.config);
} catch (e) {
console.error('Error parsing widget config string:', widget.config, e);
}
} else if (typeof widget.config === 'object' && widget.config !== null) {
configObject = { ...widget.config }; // Create a shallow copy
mapWidgetsToPanels(widgets: any[]): DashboardPanel[] {
return widgets
.map(widget => {
// Use parsed config object (already parsed in loadDashboard)
const configObject = {
...(typeof widget.config === 'object' ? widget.config : {}),
widgetId: widget.widgetId
};
const perspectiveObject = typeof widget.perspective === 'object' ? widget.perspective : {};
const dataObject = typeof widget.data === 'object' ? widget.data : {};
const componentType = this.widgetComponentRegistryService.getComponent(widget.component);
if (!componentType) {
console.warn(`Component not found for widget: ${widget.component}`);
return null;
}
// Inject widgetId into the config for the component
configObject.widgetId = widget.widgetId;
console.log(`Mapping widget ${widget.widgetId} to panel with config:`, configObject);
return {
const panel = {
id: `${(widget as any).instanceId}-${widget.y}-${widget.x}`,
header: widget.thName,
sizeX: widget.cols,
sizeY: widget.rows,
row: widget.y,
col: widget.x,
componentType: this.widgetComponentRegistryService.getComponent(widget.component),
componentType: componentType,
componentInputs: {
config: configObject,
perspective: widget.perspective
config: JSON.stringify(configObject),
perspective: JSON.stringify(perspectiveObject),
data: JSON.stringify(dataObject)
},
originalWidget: widget
};
});
return panel;
})
.filter(panel => panel !== null) as DashboardPanel[];
}
openWidgetDialog(): void {
......@@ -404,5 +406,42 @@ export class DashboardManagementComponent implements OnInit {
closeWidgetDialog(): void {
this.isWidgetDialogVisible = false;
}
/**
* Parse JSON string to object with error handling
*/
private parseJsonString(jsonString: any): any {
if (typeof jsonString === 'string') {
try {
return JSON.parse(jsonString);
} catch (error) {
console.warn('Failed to parse JSON string:', jsonString, error);
return {};
}
}
return jsonString || {};
}
/**
* Convert widget objects back to strings for saving
*/
private convertWidgetsToStrings(dashboard: any): any {
const dashboardToSave = JSON.parse(JSON.stringify(dashboard));
if (dashboardToSave.widgets) {
dashboardToSave.widgets.forEach((widget: any) => {
delete widget.instanceId;
if (widget.config && typeof widget.config === 'object') {
widget.config = JSON.stringify(widget.config);
}
if (widget.data && typeof widget.data === 'object') {
widget.data = JSON.stringify(widget.data);
}
if (widget.perspective && typeof widget.perspective === 'object') {
widget.perspective = JSON.stringify(widget.perspective);
}
});
}
return dashboardToSave;
}
}
src/app/portal-manage/dashboard-management/dashboard-viewer/dashboard-viewer.component.html
......@@ -4,7 +4,7 @@
<div *ngIf="dashboardData" class="dashboard-viewer-container p-4">
<h1 class="text-2xl font-bold mb-4 text-gray-800">{{ dashboardData.thName }}</h1>
<div class="control-section">
<ejs-dashboardlayout id='dashboard_viewer' #viewerLayout [cellSpacing]="cellSpacing" [columns]="6" [allowResizing]="false" [allowDragging]="false">
<ejs-dashboardlayout id='dashboard_viewer' #viewerLayout [cellSpacing]="cellSpacing" [columns]="columns" [allowResizing]="false" [allowDragging]="false">
<e-panels>
<e-panel *ngFor="let panel of panels" [row]="panel.row" [col]="panel.col" [sizeX]="panel.sizeX" [sizeY]="panel.sizeY" [id]="panel.id">
<ng-template #header>
......
src/app/portal-manage/dashboard-management/dashboard-viewer/dashboard-viewer.component.ts
......@@ -40,6 +40,10 @@ import { SlicerWidgetComponent } from '../widgets/slicer-widget/slicer-widget.co
import { SimpleTableWidgetComponent } from '../widgets/simple-table-widget/simple-table-widget.component';
import { WaterfallChartWidgetComponent } from '../widgets/waterfall-chart-widget/waterfall-chart-widget.component';
import { TreemapWidgetComponent } from '../widgets/treemap-widget/treemap-widget.component';
import { CalendarWidgetComponent } from '../widgets/calendar-widget/calendar-widget.component';
import { NotificationWidgetComponent } from '../widgets/notification-widget/notification-widget.component';
import { WeatherWidgetComponent } from '../widgets/weather-widget/weather-widget.component';
import { ClockWidgetComponent } from '../widgets/clock-widget/clock-widget.component';
export interface DashboardPanel extends PanelModel {
componentType: Type<any>;
......@@ -52,7 +56,7 @@ export interface DashboardPanel extends PanelModel {
imports: [
CommonModule, RouterModule, DashboardLayoutModule, NgComponentOutlet,
// Add all widget components here to make them available for NgComponentOutlet
CompanyInfoWidgetComponent, HeadcountWidgetComponent, AttendanceOverviewWidgetComponent, PayrollSummaryWidgetComponent, EmployeeDirectoryWidgetComponent, KpiWidgetComponent, WelcomeWidgetComponent, ChartWidgetComponent, QuickLinksWidgetComponent, SyncfusionDatagridWidgetComponent, SyncfusionPivotWidgetComponent, SyncfusionChartWidgetComponent, DataTableWidgetComponent, AreaChartWidgetComponent, BarChartWidgetComponent, PieChartWidgetComponent, ScatterBubbleChartWidgetComponent, MultiRowCardWidgetComponent, ComboChartWidgetComponent, DoughnutChartWidgetComponent, FunnelChartWidgetComponent, GaugeChartWidgetComponent, SimpleKpiWidgetComponent, FilledMapWidgetComponent, MatrixWidgetComponent, SlicerWidgetComponent, SimpleTableWidgetComponent, WaterfallChartWidgetComponent, TreemapWidgetComponent
CompanyInfoWidgetComponent, HeadcountWidgetComponent, AttendanceOverviewWidgetComponent, PayrollSummaryWidgetComponent, EmployeeDirectoryWidgetComponent, KpiWidgetComponent, WelcomeWidgetComponent, ChartWidgetComponent, QuickLinksWidgetComponent, SyncfusionDatagridWidgetComponent, SyncfusionPivotWidgetComponent, SyncfusionChartWidgetComponent, DataTableWidgetComponent, AreaChartWidgetComponent, BarChartWidgetComponent, PieChartWidgetComponent, ScatterBubbleChartWidgetComponent, MultiRowCardWidgetComponent, ComboChartWidgetComponent, DoughnutChartWidgetComponent, FunnelChartWidgetComponent, GaugeChartWidgetComponent, SimpleKpiWidgetComponent, FilledMapWidgetComponent, MatrixWidgetComponent, SlicerWidgetComponent, SimpleTableWidgetComponent, WaterfallChartWidgetComponent, TreemapWidgetComponent, CalendarWidgetComponent, NotificationWidgetComponent, WeatherWidgetComponent, ClockWidgetComponent
],
templateUrl: './dashboard-viewer.component.html',
styleUrls: ['./dashboard-viewer.component.scss'],
......@@ -61,6 +65,7 @@ export class DashboardViewerComponent implements OnInit {
public panels: DashboardPanel[] = [];
public cellSpacing: number[] = [10, 10];
public columns: number = 6;
public dashboardData: DashboardModel | null = null;
public errorMessage: string | null = null;
......@@ -91,7 +96,7 @@ export class DashboardViewerComponent implements OnInit {
widget.instanceId = `inst_${Date.now()}_${Math.random()}`;
}
const keysToProcess: Array<keyof WidgetModel> = ['config', 'data'];
const keysToProcess: Array<keyof WidgetModel> = ['config', 'data', 'perspective'];
keysToProcess.forEach(key => {
if ((widget as any)[key] && typeof (widget as any)[key] === 'string') {
try {
......@@ -118,8 +123,23 @@ export class DashboardViewerComponent implements OnInit {
});
}
mapWidgetsToPanels(widgets: WidgetModel[]): DashboardPanel[] {
return widgets.map(widget => {
mapWidgetsToPanels(widgets: any[]): DashboardPanel[] {
return widgets
.map(widget => {
// Use parsed config object (already parsed in ngOnInit)
const configObject = {
...(typeof widget.config === 'object' ? widget.config : {}),
widgetId: widget.widgetId
};
const perspectiveObject = typeof widget.perspective === 'object' ? widget.perspective : {};
const dataObject = typeof widget.data === 'object' ? widget.data : {};
const componentType = this.widgetComponentRegistryService.getComponent(widget.component);
if (!componentType) {
console.warn(`Component not found for widget: ${widget.component}`);
return null;
}
return {
id: `${(widget as any).instanceId}-${widget.y}-${widget.x}`,
header: widget.thName,
......@@ -127,9 +147,29 @@ export class DashboardViewerComponent implements OnInit {
sizeY: widget.rows,
row: widget.y,
col: widget.x,
componentType: this.widgetComponentRegistryService.getComponent(widget.component),
componentInputs: { config: widget.config || {}, perspective: widget.perspective },
componentType: componentType,
componentInputs: {
config: JSON.stringify(configObject),
perspective: JSON.stringify(perspectiveObject),
data: JSON.stringify(dataObject)
},
};
});
})
.filter(panel => panel !== null) as DashboardPanel[];
}
/**
* Parse JSON string to object with error handling
*/
private parseJsonString(jsonString: any): any {
if (typeof jsonString === 'string') {
try {
return JSON.parse(jsonString);
} catch (error) {
console.warn('Failed to parse JSON string:', jsonString, error);
return {};
}
}
return jsonString || {};
}
}
src/app/portal-manage/dashboard-management/models/widget-config.model.ts 0 → 100644
export interface WidgetConfigField {
key: string;
label: string;
type: 'text' | 'number' | 'boolean' | 'select' | 'multiselect' | 'color' | 'range' | 'json';
required?: boolean;
defaultValue?: any;
options?: Array<{ value: any; label: string }>;
min?: number;
max?: number;
step?: number;
placeholder?: string;
description?: string;
group?: string;
order?: number;
}
export interface WidgetConfigGroup {
name: string;
label: string;
description?: string;
order: number;
fields: WidgetConfigField[];
}
export interface WidgetConfigSchema {
widgetType: string;
groups: WidgetConfigGroup[];
filters?: WidgetFilterConfig[];
dataMapping?: DataMappingConfig[];
}
export interface WidgetFilterConfig {
key: string;
label: string;
type: 'date' | 'number' | 'select' | 'multiselect' | 'text' | 'boolean';
field: string;
operator: 'eq' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte' | 'contains' | 'in' | 'between';
defaultValue?: any;
options?: Array<{ value: any; label: string }>;
required?: boolean;
}
export interface DataMappingConfig {
key: string;
label: string;
type: 'field' | 'calculated' | 'constant';
required?: boolean;
defaultValue?: any;
calculation?: string;
validation?: {
min?: number;
max?: number;
pattern?: string;
message?: string;
};
}
export interface WidgetConfigInstance {
widgetId: string;
config: { [key: string]: any };
filters: { [key: string]: any };
dataMapping: { [key: string]: any };
lastModified: Date;
version: number;
}
src/app/portal-manage/dashboard-management/models/widgets.model.ts
......@@ -35,9 +35,9 @@ export interface IWidget {
rows: number;
x: number;
y: number;
data: any;
config: any;
perspective: any;
data: string;
config: string;
perspective: string;
}
export class WidgetModel implements IWidget {
......@@ -49,9 +49,9 @@ export class WidgetModel implements IWidget {
rows: number;
x: number;
y: number;
data: any;
config: any;
perspective: any;
data: string;
config: string;
perspective: string;
constructor(data: Partial<IWidget>) {
this.widgetId = data.widgetId ?? '';
......@@ -62,10 +62,61 @@ export class WidgetModel implements IWidget {
this.rows = data.rows ?? 1;
this.x = data.x ?? 0;
this.y = data.y ?? 0;
this.data = data.data ?? {};
this.config = data.config ?? {};
this.perspective = data.perspective ?? {};
this.data = this.convertToString(data.data);
this.config = this.convertToString(data.config);
this.perspective = this.convertToString(data.perspective);
}
// Helper method to convert object to string or keep string as is
private convertToString(value: any): string {
if (typeof value === 'string') {
return value;
}
if (value === null || value === undefined) {
return '{}';
}
return JSON.stringify(value);
}
// Helper methods to get parsed JSON objects
getDataObject(): any {
try {
return JSON.parse(this.data);
} catch (error) {
console.warn('Failed to parse data JSON:', error);
return {};
}
}
getConfigObject(): any {
try {
return JSON.parse(this.config);
} catch (error) {
console.warn('Failed to parse config JSON:', error);
return {};
}
}
getPerspectiveObject(): any {
try {
return JSON.parse(this.perspective);
} catch (error) {
console.warn('Failed to parse perspective JSON:', error);
return {};
}
}
// Helper methods to set objects as JSON strings
setDataObject(dataObj: any): void {
this.data = JSON.stringify(dataObj);
}
setConfigObject(configObj: any): void {
this.config = JSON.stringify(configObj);
}
setPerspectiveObject(perspectiveObj: any): void {
this.perspective = JSON.stringify(perspectiveObj);
}
}
......
src/app/portal-manage/dashboard-management/services/widget-component-registry.service.ts
......@@ -30,6 +30,11 @@ import { SlicerWidgetComponent } from '../widgets/slicer-widget/slicer-widget.co
import { SimpleTableWidgetComponent } from '../widgets/simple-table-widget/simple-table-widget.component';
import { WaterfallChartWidgetComponent } from '../widgets/waterfall-chart-widget/waterfall-chart-widget.component';
import { TreemapWidgetComponent } from '../widgets/treemap-widget/treemap-widget.component';
// New Syncfusion-based widgets
import { CalendarWidgetComponent } from '../widgets/calendar-widget/calendar-widget.component';
import { NotificationWidgetComponent } from '../widgets/notification-widget/notification-widget.component';
import { WeatherWidgetComponent } from '../widgets/weather-widget/weather-widget.component';
import { ClockWidgetComponent } from '../widgets/clock-widget/clock-widget.component';
@Injectable({
providedIn: 'root',
......@@ -65,15 +70,21 @@ export class WidgetComponentRegistryService {
SimpleTableWidgetComponent: SimpleTableWidgetComponent,
WaterfallChartWidgetComponent: WaterfallChartWidgetComponent,
TreemapWidgetComponent: TreemapWidgetComponent,
// New Syncfusion-based widgets
CalendarWidgetComponent: CalendarWidgetComponent,
NotificationWidgetComponent: NotificationWidgetComponent,
WeatherWidgetComponent: WeatherWidgetComponent,
ClockWidgetComponent: ClockWidgetComponent,
};
getComponent(componentName: string): Type<any> {
getComponent(componentName: string): Type<any> | null {
const component = this.widgetComponentMap[componentName];
if (!component) {
console.warn(
`Warning: Widget component "${componentName}" not found in registry.`
);
// Consider returning a default/error component here
console.log('Available components:', Object.keys(this.widgetComponentMap));
return null;
}
return component;
}
......
src/app/portal-manage/dashboard-management/widget-config/dynamic-widget-config.component.scss 0 → 100644
.dynamic-widget-config-dialog {
max-width: 800px;
width: 100%;
.config-content {
max-height: 70vh;
overflow-y: auto;
padding: 16px 0;
.no-schema-warning {
display: flex;
align-items: center;
gap: 8px;
padding: 16px;
background-color: #fff3cd;
border: 1px solid #ffeaa7;
border-radius: 4px;
margin-bottom: 16px;
color: #856404;
mat-icon {
color: #f39c12;
}
}
.tab-content {
padding: 16px 0;
.group-fields {
display: grid;
gap: 16px;
padding: 16px 0;
.field-container {
&.required {
mat-form-field::before {
content: '*';
color: #f44336;
margin-right: 4px;
}
}
.boolean-field {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
border: 1px solid #e0e0e0;
border-radius: 4px;
background-color: #fafafa;
mat-slide-toggle {
margin: 0;
}
}
.range-field {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
border: 1px solid #e0e0e0;
border-radius: 4px;
background-color: #fafafa;
label {
font-weight: 500;
color: rgba(0, 0, 0, 0.87);
}
.range-value {
text-align: center;
font-weight: 500;
color: #2196f3;
}
}
.color-field {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
border: 1px solid #e0e0e0;
border-radius: 4px;
background-color: #fafafa;
label {
font-weight: 500;
color: rgba(0, 0, 0, 0.87);
min-width: 120px;
}
.color-input {
width: 50px;
height: 40px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.color-value {
font-family: monospace;
background-color: #f5f5f5;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
}
}
.field-description {
margin-top: 4px;
color: rgba(0, 0, 0, 0.6);
font-style: italic;
}
}
}
.filters-section {
.filter-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
margin-top: 16px;
.filter-card {
mat-card-header {
padding-bottom: 8px;
}
mat-card-content {
padding-top: 0;
}
}
}
}
.mapping-section {
.mapping-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
margin-top: 16px;
.mapping-card {
mat-card-header {
padding-bottom: 8px;
}
mat-card-content {
padding-top: 0;
.calculation-info {
margin-top: 8px;
padding: 8px;
background-color: #e3f2fd;
border-radius: 4px;
border-left: 4px solid #2196f3;
small {
color: #1976d2;
font-family: monospace;
}
}
}
}
}
}
}
}
mat-dialog-actions {
padding: 16px 24px;
border-top: 1px solid #e0e0e0;
background-color: #fafafa;
button {
margin-left: 8px;
mat-icon {
margin-right: 4px;
}
}
}
}
// Responsive design
@media (max-width: 768px) {
.dynamic-widget-config-dialog {
max-width: 95vw;
.config-content {
.tab-content {
.filters-section .filter-grid,
.mapping-section .mapping-grid {
grid-template-columns: 1fr;
}
}
}
}
}
// Dark theme support
@media (prefers-color-scheme: dark) {
.dynamic-widget-config-dialog {
.config-content {
.no-schema-warning {
background-color: #3e2723;
border-color: #5d4037;
color: #ffcc02;
}
.tab-content {
.group-fields .field-container {
.boolean-field,
.range-field,
.color-field {
background-color: #424242;
border-color: #616161;
}
}
.mapping-section .mapping-grid .mapping-card mat-card-content .calculation-info {
background-color: #1a237e;
border-left-color: #3f51b5;
}
}
}
mat-dialog-actions {
background-color: #424242;
border-top-color: #616161;
}
}
}
src/app/portal-manage/dashboard-management/widget-config/dynamic-widget-config.component.ts 0 → 100644
import { Component, OnInit, Inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatTabsModule } from '@angular/material/tabs';
import { MatCardModule } from '@angular/material/card';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSliderModule } from '@angular/material/slider';
import { ColorPickerModule } from 'ngx-color-picker';
import { WidgetConfigSchemaService } from '../services/widget-config-schema.service';
import {
WidgetConfigSchema,
WidgetConfigGroup,
WidgetConfigField,
WidgetFilterConfig,
DataMappingConfig
} from '../models/widget-config.model';
import { WidgetModel } from '../models/widgets.model';
export interface DynamicWidgetConfigDialogData {
widget: WidgetModel;
availableColumns: string[];
currentConfig?: any;
currentFilters?: any;
currentDataMapping?: any;
}
@Component({
selector: 'app-dynamic-widget-config',
standalone: true,
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
MatDialogModule,
MatFormFieldModule,
MatSelectModule,
MatInputModule,
MatButtonModule,
MatIconModule,
MatCheckboxModule,
MatExpansionModule,
MatTabsModule,
MatCardModule,
MatSlideToggleModule,
MatSliderModule,
ColorPickerModule
],
templateUrl: './dynamic-widget-config.component.html',
styleUrls: ['./dynamic-widget-config.component.scss']
})
export class DynamicWidgetConfigComponent implements OnInit {
configForm!: FormGroup;
schema: WidgetConfigSchema | null = null;
availableColumns: string[] = [];
widgetType: string = '';
constructor(
private fb: FormBuilder,
public dialogRef: MatDialogRef<DynamicWidgetConfigComponent>,
@Inject(MAT_DIALOG_DATA) public data: DynamicWidgetConfigDialogData,
private widgetConfigSchemaService: WidgetConfigSchemaService
) {}
ngOnInit(): void {
this.availableColumns = this.data.availableColumns;
this.widgetType = this.data.widget.component;
this.schema = this.widgetConfigSchemaService.getConfigSchema(this.widgetType);
if (this.schema) {
this.initializeForm();
this.populateForm();
} else {
console.warn(`No schema found for widget type: ${this.widgetType}`);
this.initializeBasicForm();
}
}
private initializeForm(): void {
const formControls: { [key: string]: any } = {};
// Initialize config fields
this.schema!.groups.forEach(group => {
group.fields.forEach(field => {
const validators = [];
if (field.required) {
validators.push(Validators.required);
}
if (field.type === 'number' && field.min !== undefined) {
validators.push(Validators.min(field.min));
}
if (field.type === 'number' && field.max !== undefined) {
validators.push(Validators.max(field.max));
}
formControls[field.key] = [field.defaultValue || '', validators];
});
});
// Initialize filters
if (this.schema!.filters) {
this.schema!.filters.forEach(filter => {
formControls[`filter_${filter.key}`] = [filter.defaultValue || ''];
});
}
// Initialize data mapping
if (this.schema!.dataMapping) {
this.schema!.dataMapping.forEach(mapping => {
formControls[`mapping_${mapping.key}`] = [mapping.defaultValue || ''];
});
}
this.configForm = this.fb.group(formControls);
}
private initializeBasicForm(): void {
// Fallback form for widgets without schema
this.configForm = this.fb.group({
title: ['', Validators.required],
description: ['']
});
}
private populateForm(): void {
// Populate config values
if (this.data.currentConfig) {
Object.keys(this.data.currentConfig).forEach(key => {
if (this.configForm.get(key)) {
this.configForm.get(key)?.setValue(this.data.currentConfig[key]);
}
});
}
// Populate filter values
if (this.data.currentFilters) {
Object.keys(this.data.currentFilters).forEach(key => {
const filterControl = this.configForm.get(`filter_${key}`);
if (filterControl) {
filterControl.setValue(this.data.currentFilters[key]);
}
});
}
// Populate data mapping values
if (this.data.currentDataMapping) {
Object.keys(this.data.currentDataMapping).forEach(key => {
const mappingControl = this.configForm.get(`mapping_${key}`);
if (mappingControl) {
mappingControl.setValue(this.data.currentDataMapping[key]);
}
});
}
}
getFieldValue(field: WidgetConfigField): any {
return this.configForm.get(field.key)?.value;
}
getFilterValue(filter: WidgetFilterConfig): any {
return this.configForm.get(`filter_${filter.key}`)?.value;
}
getMappingValue(mapping: DataMappingConfig): any {
return this.configForm.get(`mapping_${mapping.key}`)?.value;
}
getFieldOptions(field: WidgetConfigField): Array<{ value: any; label: string }> {
if (field.type === 'select' || field.type === 'multiselect') {
if (field.options) {
return field.options;
}
}
return [];
}
getFilterOptions(filter: WidgetFilterConfig): Array<{ value: any; label: string }> {
if (filter.options) {
return filter.options;
}
return [];
}
isFieldRequired(field: WidgetConfigField): boolean {
return field.required || false;
}
getFieldErrorMessage(field: WidgetConfigField): string {
const control = this.configForm.get(field.key);
if (control?.errors) {
if (control.errors['required']) {
return `${field.label} is required`;
}
if (control.errors['min']) {
return `${field.label} must be at least ${field.min}`;
}
if (control.errors['max']) {
return `${field.label} must be at most ${field.max}`;
}
}
return '';
}
onSave(): void {
if (this.configForm.valid) {
const formValue = this.configForm.value;
// Separate config, filters, and data mapping
const config: { [key: string]: any } = {};
const filters: { [key: string]: any } = {};
const dataMapping: { [key: string]: any } = {};
// Extract config values
this.schema?.groups.forEach(group => {
group.fields.forEach(field => {
if (formValue[field.key] !== undefined) {
config[field.key] = formValue[field.key];
}
});
});
// Extract filter values
this.schema?.filters?.forEach(filter => {
const value = formValue[`filter_${filter.key}`];
if (value !== undefined && value !== null && value !== '') {
filters[filter.key] = value;
}
});
// Extract data mapping values
this.schema?.dataMapping?.forEach(mapping => {
const value = formValue[`mapping_${mapping.key}`];
if (value !== undefined && value !== null && value !== '') {
dataMapping[mapping.key] = value;
}
});
this.dialogRef.close({
config,
filters,
dataMapping
});
}
}
onCancel(): void {
this.dialogRef.close();
}
onReset(): void {
if (this.schema) {
// Reset to default values
this.schema.groups.forEach(group => {
group.fields.forEach(field => {
if (field.defaultValue !== undefined) {
this.configForm.get(field.key)?.setValue(field.defaultValue);
}
});
});
// Reset filters
this.schema.filters?.forEach(filter => {
if (filter.defaultValue !== undefined) {
this.configForm.get(`filter_${filter.key}`)?.setValue(filter.defaultValue);
} else {
this.configForm.get(`filter_${filter.key}`)?.setValue('');
}
});
}
}
getGroups(): WidgetConfigGroup[] {
return this.schema?.groups || [];
}
getFilters(): WidgetFilterConfig[] {
return this.schema?.filters || [];
}
getDataMappings(): DataMappingConfig[] {
return this.schema?.dataMapping || [];
}
hasFilters(): boolean {
return this.getFilters().length > 0;
}
hasDataMappings(): boolean {
return this.getDataMappings().length > 0;
}
}
src/app/portal-manage/dashboard-management/widget-management/widget-form.component.ts
......@@ -30,6 +30,11 @@ import { QuickLinksWidgetComponent } from '../widgets/quick-links-widget/quick-l
import { SyncfusionDatagridWidgetComponent } from '../widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component';
import { SyncfusionPivotWidgetComponent } from '../widgets/syncfusion-pivot-widget/syncfusion-pivot-widget.component';
import { SyncfusionChartWidgetComponent } from '../widgets/syncfusion-chart-widget/syncfusion-chart-widget.component';
// New Syncfusion-based widgets
import { CalendarWidgetComponent } from '../widgets/calendar-widget/calendar-widget.component';
import { NotificationWidgetComponent } from '../widgets/notification-widget/notification-widget.component';
import { WeatherWidgetComponent } from '../widgets/weather-widget/weather-widget.component';
import { ClockWidgetComponent } from '../widgets/clock-widget/clock-widget.component';
@Component({
selector: 'app-widget-form',
......@@ -53,6 +58,11 @@ import { SyncfusionChartWidgetComponent } from '../widgets/syncfusion-chart-widg
SyncfusionDatagridWidgetComponent,
SyncfusionPivotWidgetComponent,
SyncfusionChartWidgetComponent,
// New Syncfusion-based widgets
CalendarWidgetComponent,
NotificationWidgetComponent,
WeatherWidgetComponent,
ClockWidgetComponent,
],
templateUrl: './widget-form.component.html',
})
......@@ -106,15 +116,40 @@ export class WidgetFormComponent implements OnInit {
}
updatePreview(componentName: string): void {
this.previewComponentType =
this.widgetComponentRegistryService.getComponent(componentName);
if (!componentName) {
this.previewComponentType = null;
return;
}
const component = this.widgetComponentRegistryService.getComponent(componentName);
if (component) {
this.previewComponentType = component;
} else {
console.error(`Preview not available for widget type: ${componentName}`);
this.previewComponentType = null;
}
}
onSubmit(): void {
if (this.widgetForm.invalid) {
return;
}
this.dialogRef.close(this.widgetForm.value);
const formValue = this.widgetForm.value;
// ถ้าเป็น widget ใหม่ ให้สร้าง widgetId
if (this.isNew) {
formValue.widgetId = this.generateWidgetId();
}
this.dialogRef.close(formValue);
}
private generateWidgetId(): string {
// สร้าง widgetId โดยใช้ timestamp และ random number
const timestamp = Date.now();
const random = Math.random().toString(36).substr(2, 9);
return `widget_${timestamp}_${random}`;
}
cancel(): void {
......
src/app/portal-manage/dashboard-management/widget-management/widget-list.component.ts
......@@ -33,6 +33,11 @@ import { NotificationService } from '../../../shared/services/notification.servi
import { WidgetModel } from '../models/widgets.model';
import { WidgetService } from '../services/widgets.service';
import { SimpleKpiWidgetComponent } from '../widgets/simple-kpi-widget/simple-kpi-widget.component';
// New Syncfusion-based widgets
import { CalendarWidgetComponent } from '../widgets/calendar-widget/calendar-widget.component';
import { NotificationWidgetComponent } from '../widgets/notification-widget/notification-widget.component';
import { WeatherWidgetComponent } from '../widgets/weather-widget/weather-widget.component';
import { ClockWidgetComponent } from '../widgets/clock-widget/clock-widget.component';
import { WidgetFormComponent } from './widget-form.component';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
import { RouterModule } from '@angular/router';
......@@ -59,6 +64,11 @@ import { RouterModule } from '@angular/router';
SyncfusionPivotWidgetComponent,
SyncfusionChartWidgetComponent,
SimpleKpiWidgetComponent,
// New Syncfusion-based widgets
CalendarWidgetComponent,
NotificationWidgetComponent,
WeatherWidgetComponent,
ClockWidgetComponent,
],
providers: [
ToolbarService,
......
src/app/portal-manage/dashboard-management/widgets/area-chart-widget/area-chart-widget.component.ts
......@@ -21,14 +21,14 @@ export class AreaChartWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Area Chart';
this.primaryXAxis = { valueType: 'Category', title: this.config.xAxisTitle || '' };
this.primaryYAxis = { title: this.config.yAxisTitle || '' };
this.title = this.configObj.title || 'Area Chart';
this.primaryXAxis = { valueType: 'Category', title: this.configObj.xAxisTitle || '' };
this.primaryYAxis = { title: this.configObj.yAxisTitle || '' };
this.chartData = []; // Start with no data
}
onDataUpdate(data: any[]): void {
this.chartData = data.map(item => ({ x: item[this.config.xField], y: item[this.config.yField] }));
this.chartData = data.map(item => ({ x: item[this.configObj.xField], y: item[this.configObj.yField] }));
}
onReset(): void {
......
src/app/portal-manage/dashboard-management/widgets/attendance-overview-widget.component.ts
......@@ -20,7 +20,7 @@ export class AttendanceOverviewWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Attendance';
this.title = this.configObj.title || 'Attendance';
this.present = 0;
this.onLeave = 0;
this.absent = 0;
......@@ -29,9 +29,9 @@ export class AttendanceOverviewWidgetComponent extends BaseWidgetComponent {
onDataUpdate(data: any[]): void {
if (data.length > 0) {
const firstItem = data[0];
this.present = firstItem[this.config.presentField] || 0;
this.onLeave = firstItem[this.config.onLeaveField] || 0;
this.absent = firstItem[this.config.absentField] || 0;
this.present = firstItem[this.configObj.presentField] || 0;
this.onLeave = firstItem[this.configObj.onLeaveField] || 0;
this.absent = firstItem[this.configObj.absentField] || 0;
}
}
......
src/app/portal-manage/dashboard-management/widgets/bar-chart-widget/bar-chart-widget.component.ts
......@@ -23,15 +23,15 @@ export class BarChartWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Bar Chart';
this.primaryXAxis = { valueType: 'Category', title: this.config.xAxisTitle || '' };
this.primaryYAxis = { title: this.config.yAxisTitle || '' };
this.type = this.config.type || 'Column';
this.title = this.configObj.title || 'Bar Chart';
this.primaryXAxis = { valueType: 'Category', title: this.configObj.xAxisTitle || '' };
this.primaryYAxis = { title: this.configObj.yAxisTitle || '' };
this.type = this.configObj.type || 'Column';
this.chartData = [];
}
onDataUpdate(data: any[]): void {
this.chartData = data.map(item => ({ x: item[this.config.xField], y: item[this.config.yField] }));
this.chartData = data.map(item => ({ x: item[this.configObj.xField], y: item[this.configObj.yField] }));
}
onReset(): void {
......
src/app/portal-manage/dashboard-management/widgets/base-widget.component.ts
import { Input, OnInit, OnDestroy, Directive } from '@angular/core';
import { Subscription } from 'rxjs';
import { DashboardStateService, SelectedDataset } from '../services/dashboard-state.service';
import { WidgetConfigInstance, WidgetFilterConfig } from '../models/widget-config.model';
@Directive() // Use @Directive() for base classes without their own template
export abstract class BaseWidgetComponent implements OnInit, OnDestroy {
@Input() config: any;
@Input() config: string = '{}';
@Input() data: string = '[]';
@Input() filters: { [key: string]: any } = {};
@Input() dataMapping: { [key: string]: any } = {};
@Input() perspective: string | null = null;
public title: string;
public isLoading = true;
public hasError = false;
public errorMessage: string | null = null;
public filteredData: any[] = [];
public appliedFilters: { [key: string]: any } = {};
// Parsed config object for easier access
protected configObj: any = {};
protected subscription: Subscription = new Subscription();
protected originalData: any[] = [];
constructor(protected dashboardStateService: DashboardStateService) {}
ngOnInit(): void {
this.applyInitialConfig(); // Apply config first
// Initialize config first - ensure config is not undefined
this.initializeConfig();
this.initializeFilters(); // Initialize filters
const datasetSub = this.dashboardStateService.selectedDataset$.subscribe({
next: (selectedDataset: SelectedDataset | null) => {
......@@ -25,7 +37,9 @@ export abstract class BaseWidgetComponent implements OnInit, OnDestroy {
this.hasError = false;
if (selectedDataset && selectedDataset.data) {
try {
this.onDataUpdate(selectedDataset.data);
this.originalData = selectedDataset.data;
this.applyFilters();
this.onDataUpdate(this.filteredData);
this.isLoading = false;
} catch (error) {
this.handleError(error);
......@@ -71,4 +85,212 @@ export abstract class BaseWidgetComponent implements OnInit, OnDestroy {
* Abstract method for child components to fall back to a default state on error.
*/
abstract onReset(): void;
/**
* Initialize config with default values if undefined
*/
protected initializeConfig(): void {
// Ensure config string is not empty
if (!this.config) {
this.config = '{}';
}
// Parse config string to object
try {
this.configObj = JSON.parse(this.config);
} catch (error) {
console.warn('Failed to parse config JSON:', error);
this.configObj = {};
}
// Parse data string to array
try {
this.originalData = JSON.parse(this.data);
} catch (error) {
console.warn('Failed to parse data JSON:', error);
this.originalData = [];
}
// Ensure filters is not undefined
if (!this.filters) {
this.filters = {};
}
// Ensure dataMapping is not undefined
if (!this.dataMapping) {
this.dataMapping = {};
}
// Now call the child component's applyInitialConfig
this.applyInitialConfig();
}
/**
* Initialize filters with default values
*/
protected initializeFilters(): void {
this.appliedFilters = { ...this.filters };
}
/**
* Apply filters to the original data
*/
protected applyFilters(): void {
if (!this.originalData || this.originalData.length === 0) {
this.filteredData = [];
return;
}
this.filteredData = this.originalData.filter(item => {
return this.evaluateFilters(item);
});
}
/**
* Evaluate if an item passes all active filters
*/
private evaluateFilters(item: any): boolean {
for (const [filterKey, filterValue] of Object.entries(this.appliedFilters)) {
if (filterValue === null || filterValue === undefined || filterValue === '') {
continue; // Skip empty filters
}
const fieldValue = this.getFieldValue(item, filterKey);
if (!this.evaluateFilterCondition(fieldValue, filterValue, filterKey)) {
return false;
}
}
return true;
}
/**
* Get field value from item using data mapping
*/
private getFieldValue(item: any, filterKey: string): any {
// First check if there's a specific mapping for this filter
if (this.dataMapping[filterKey]) {
return this.getMappedValue(item, this.dataMapping[filterKey]);
}
// Fallback to direct field access
return item[filterKey];
}
/**
* Get mapped value using data mapping configuration
*/
private getMappedValue(item: any, mapping: any): any {
if (mapping.type === 'field') {
return item[mapping.field];
} else if (mapping.type === 'calculated') {
return this.calculateValue(item, mapping.calculation);
} else if (mapping.type === 'constant') {
return mapping.value;
}
return item[mapping.field || mapping];
}
/**
* Calculate value using a calculation expression
*/
private calculateValue(item: any, calculation: string): any {
try {
// Replace field names with actual values
let expression = calculation;
const fieldMatches = calculation.match(/\{(\w+)\}/g);
if (fieldMatches) {
fieldMatches.forEach(match => {
const fieldName = match.replace(/[{}]/g, '');
const value = item[fieldName] || 0;
expression = expression.replace(match, value.toString());
});
}
// Safe calculation using Function constructor instead of eval
// This is safer than eval as it doesn't have access to local scope
const safeCalculation = new Function('return ' + expression);
return safeCalculation();
} catch (error) {
console.warn('Calculation error:', error);
return 0;
}
}
/**
* Evaluate filter condition based on operator
*/
private evaluateFilterCondition(fieldValue: any, filterValue: any, filterKey: string): boolean {
// For now, implement basic string/number comparisons
// Can be extended to support more complex operators
if (Array.isArray(filterValue)) {
// Multi-select filter
return filterValue.includes(fieldValue);
}
if (typeof filterValue === 'string' && typeof fieldValue === 'string') {
return fieldValue.toLowerCase().includes(filterValue.toLowerCase());
}
return fieldValue === filterValue;
}
/**
* Update filters and reapply
*/
public updateFilters(newFilters: { [key: string]: any }): void {
this.appliedFilters = { ...newFilters };
this.applyFilters();
this.onDataUpdate(this.filteredData);
}
/**
* Update a specific filter
*/
public updateFilter(filterKey: string, value: any): void {
this.appliedFilters[filterKey] = value;
this.applyFilters();
this.onDataUpdate(this.filteredData);
}
/**
* Clear all filters
*/
public clearFilters(): void {
this.appliedFilters = {};
this.applyFilters();
this.onDataUpdate(this.filteredData);
}
/**
* Get current filter values
*/
public getCurrentFilters(): { [key: string]: any } {
return { ...this.appliedFilters };
}
/**
* Check if filters are active
*/
public hasActiveFilters(): boolean {
return Object.values(this.appliedFilters).some(value =>
value !== null && value !== undefined && value !== ''
);
}
/**
* Get filtered data count
*/
public getFilteredDataCount(): number {
return this.filteredData.length;
}
/**
* Get original data count
*/
public getOriginalDataCount(): number {
return this.originalData.length;
}
}
src/app/portal-manage/dashboard-management/widgets/calendar-widget/calendar-widget.component.html
......@@ -20,7 +20,6 @@
[enableRtl]="calendarSettings.enableRtl"
[start]="calendarSettings.start"
[depth]="calendarSettings.depth"
[cssClass]="calendarSettings.cssClass"
(change)="onDateChange($event)">
</ejs-calendar>
......
src/app/portal-manage/dashboard-management/widgets/calendar-widget/calendar-widget.component.ts
......@@ -21,12 +21,12 @@ export class CalendarWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Calendar';
this.title = this.configObj?.title || 'Calendar';
this.calendarSettings = {
enableRtl: this.config.enableRtl || false,
start: this.config.start || 'Year',
depth: this.config.depth || 'Year',
cssClass: this.config.cssClass || ''
enableRtl: this.configObj?.enableRtl || false,
start: this.configObj?.start || 'Year',
depth: this.configObj?.depth || 'Year',
cssClass: this.configObj?.cssClass || undefined
};
this.events = [];
}
......@@ -35,10 +35,10 @@ export class CalendarWidgetComponent extends BaseWidgetComponent {
if (data && data.length > 0) {
// Map data to events format
this.events = data.map(item => ({
date: new Date(item[this.config.dateField || 'date']),
title: item[this.config.titleField || 'title'],
description: item[this.config.descriptionField || 'description'],
type: item[this.config.typeField || 'type'] || 'default'
date: new Date(item[this.configObj?.dateField || 'date']),
title: item[this.configObj?.titleField || 'title'],
description: item[this.configObj?.descriptionField || 'description'],
type: item[this.configObj?.typeField || 'type'] || 'default'
}));
}
}
......
src/app/portal-manage/dashboard-management/widgets/chart-widget/chart-widget.component.ts
......@@ -30,15 +30,15 @@ export class ChartWidgetComponent extends BaseWidgetComponent implements AfterVi
}
applyInitialConfig(): void {
this.title = this.config?.title || 'Chart';
this.title = this.configObj?.title || 'Chart';
if (this.chartInstance) {
this.chartInstance.updateOptions(this.getChartOptions([], []));
}
}
onDataUpdate(data: any[]): void {
const categories = data.map(item => item[this.config.xField]);
const series = this.config.yFields.map((yField: any) => ({
const categories = data.map(item => item[this.configObj.xField]);
const series = this.configObj.yFields.map((yField: any) => ({
name: yField.name || yField.field,
data: data.map(item => item[yField.field])
}));
......@@ -65,7 +65,7 @@ export class ChartWidgetComponent extends BaseWidgetComponent implements AfterVi
return {
series: series,
chart: {
type: this.config?.type || 'bar',
type: this.configObj?.type || 'bar',
height: 250,
toolbar: {
show: false
......@@ -91,7 +91,7 @@ export class ChartWidgetComponent extends BaseWidgetComponent implements AfterVi
},
yaxis: {
title: {
text: this.config?.yAxisTitle || 'Number'
text: this.configObj?.yAxisTitle || 'Number'
}
},
fill: {
......
src/app/portal-manage/dashboard-management/widgets/clock-widget/clock-widget.component.ts
......@@ -53,14 +53,14 @@ export class ClockWidgetComponent extends BaseWidgetComponent implements OnInit,
}
applyInitialConfig(): void {
this.title = this.config.title || 'Clock';
this.timezone = this.config.timezone || 'Asia/Bangkok';
this.clockType = this.config.clockType || 'analog';
this.showSeconds = this.config.showSeconds !== false;
this.showDate = this.config.showDate !== false;
this.showTimezone = this.config.showTimezone !== false;
this.format24Hour = this.config.format24Hour !== false;
this.updateInterval = this.config.updateInterval || 1000;
this.title = this.configObj?.title || 'Clock';
this.timezone = this.configObj?.timezone || 'Asia/Bangkok';
this.clockType = this.configObj?.clockType || 'analog';
this.showSeconds = this.configObj?.showSeconds !== false;
this.showDate = this.configObj?.showDate !== false;
this.showTimezone = this.configObj?.showTimezone !== false;
this.format24Hour = this.configObj?.format24Hour !== false;
this.updateInterval = this.configObj?.updateInterval || 1000;
this.updateClock();
}
......@@ -68,9 +68,9 @@ export class ClockWidgetComponent extends BaseWidgetComponent implements OnInit,
onDataUpdate(data: any[]): void {
if (data && data.length > 0) {
const timeData = data[0];
this.timezone = timeData[this.config.timezoneField || 'timezone'] || this.timezone;
this.clockType = timeData[this.config.clockTypeField || 'clockType'] || this.clockType;
this.format24Hour = timeData[this.config.format24HourField || 'format24Hour'] !== false;
this.timezone = timeData[this.configObj.timezoneField || 'timezone'] || this.timezone;
this.clockType = timeData[this.configObj.clockTypeField || 'clockType'] || this.clockType;
this.format24Hour = timeData[this.configObj.format24HourField || 'format24Hour'] !== false;
this.updateClock();
}
}
......
src/app/portal-manage/dashboard-management/widgets/combo-chart-widget/combo-chart-widget.component.html
......@@ -10,9 +10,9 @@
</div>
<!-- Chart -->
<ejs-chart *ngIf="!isLoading && !hasError && config?.series" [title]="title" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis">
<ejs-chart *ngIf="!isLoading && !hasError && configObj?.series" [title]="title" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis">
<e-series-collection>
<e-series *ngFor="let series of config.series"
<e-series *ngFor="let series of configObj.series"
[dataSource]="chartData"
[type]="series.type || 'Column'"
[xName]="series.xName"
......
src/app/portal-manage/dashboard-management/widgets/combo-chart-widget/combo-chart-widget.component.ts
......@@ -21,9 +21,9 @@ export class ComboChartWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Combo Chart';
this.primaryXAxis = { valueType: 'Category', title: this.config.xAxisTitle || '' };
this.primaryYAxis = { title: this.config.yAxisTitle || '' };
this.title = this.configObj.title || 'Combo Chart';
this.primaryXAxis = { valueType: 'Category', title: this.configObj.xAxisTitle || '' };
this.primaryYAxis = { title: this.configObj.yAxisTitle || '' };
this.chartData = [];
}
......@@ -41,9 +41,9 @@ export class ComboChartWidgetComponent extends BaseWidgetComponent {
this.primaryXAxis = { valueType: 'Category', title: 'Month' };
this.primaryYAxis = { title: 'Value' };
if (!this.config) {
this.config = {};
this.config = '{}';
}
this.config.series = [
this.configObj.series = [
{ type: 'Column', xName: 'x', yName: 'y1', name: 'Sales' },
{ type: 'Line', xName: 'x', yName: 'y2', name: 'Profit' }
];
......
src/app/portal-manage/dashboard-management/widgets/company-info-widget.component.ts
......@@ -41,7 +41,7 @@ export class CompanyInfoWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Company Info';
this.title = this.configObj.title || 'Company Info';
this.companyName = '...';
this.address = '...';
this.contact = '...';
......@@ -50,9 +50,9 @@ export class CompanyInfoWidgetComponent extends BaseWidgetComponent {
onDataUpdate(data: any[]): void {
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] || '';
this.companyName = firstItem[this.configObj.companyNameField] || '';
this.address = firstItem[this.configObj.addressField] || '';
this.contact = firstItem[this.configObj.contactField] || '';
}
}
......
src/app/portal-manage/dashboard-management/widgets/company-info-widget/company-info-widget.component.ts
......@@ -21,7 +21,7 @@ export class CompanyInfoSubfolderWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Company Info';
this.title = this.configObj.title || 'Company Info';
this.companyName = '...';
this.address = '...';
this.contact = '...';
......@@ -30,9 +30,9 @@ export class CompanyInfoSubfolderWidgetComponent extends BaseWidgetComponent {
onDataUpdate(data: any[]): void {
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] || '';
this.companyName = firstItem[this.configObj.companyNameField] || '';
this.address = firstItem[this.configObj.addressField] || '';
this.contact = firstItem[this.configObj.contactField] || '';
}
}
......
src/app/portal-manage/dashboard-management/widgets/doughnut-chart-widget/doughnut-chart-widget.component.ts
......@@ -20,7 +20,7 @@ export class DoughnutChartWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Doughnut Chart';
this.title = this.configObj.title || 'Doughnut Chart';
this.legendSettings = { visible: true };
this.chartData = [];
}
......@@ -28,15 +28,15 @@ export class DoughnutChartWidgetComponent extends BaseWidgetComponent {
onDataUpdate(data: any[]): void {
let transformedData = data;
if (this.config.aggregation === 'count') {
if (this.configObj.aggregation === 'count') {
const counts = transformedData.reduce((acc, item) => {
const key = item[this.config.xField];
const key = item[this.configObj.xField];
acc[key] = (acc[key] || 0) + 1;
return acc;
}, {});
transformedData = Object.keys(counts).map(key => ({ x: key, y: counts[key] }));
} else {
transformedData = transformedData.map(item => ({ x: item[this.config.xField], y: item[this.config.yField] }));
transformedData = transformedData.map(item => ({ x: item[this.configObj.xField], y: item[this.configObj.yField] }));
}
this.chartData = transformedData;
}
......
src/app/portal-manage/dashboard-management/widgets/dynamic-widgets/data-table-widget.component.ts
......@@ -13,7 +13,10 @@ import { GridModule, PageService, SortService, FilterService, GroupService } fro
})
export class DataTableWidgetComponent implements OnInit, OnChanges {
// This component is "Dumb". It receives all its configuration and data via this input.
@Input() config: any;
@Input() config: string = '{}';
// Parsed config object for easier access
protected configObj: any = {};
public data: object[] = [];
public columns: any[] = [];
......@@ -24,13 +27,28 @@ export class DataTableWidgetComponent implements OnInit, OnChanges {
ngOnInit(): void {
console.log('DataTableWidgetComponent: ngOnInit - config', this.config);
this.parseConfig();
this.updateWidgetFromConfig();
}
private parseConfig(): void {
if (!this.config) {
this.config = '{}';
}
try {
this.configObj = JSON.parse(this.config);
} catch (error) {
console.warn('Failed to parse config JSON:', error);
this.configObj = {};
}
}
ngOnChanges(changes: SimpleChanges): void {
console.log('DataTableWidgetComponent: ngOnChanges - changes', changes);
// If the config object changes, re-render the widget
if (changes['config']) {
this.parseConfig();
this.updateWidgetFromConfig();
}
}
......@@ -38,12 +56,12 @@ 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 || [];
this.title = this.configObj.title || 'Data Table';
this.data = this.configObj.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;
if (this.configObj.columns && this.configObj.columns.length > 0) {
this.columns = this.configObj.columns;
} else if (this.data.length > 0) {
// Auto-generate columns from the first data item's keys
this.columns = Object.keys(this.data[0]).map(key => ({
......
src/app/portal-manage/dashboard-management/widgets/employee-directory-widget.component.ts
......@@ -25,16 +25,16 @@ export class EmployeeDirectoryWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Employee Directory';
this.title = this.configObj.title || 'Employee Directory';
this.employees = [];
}
onDataUpdate(data: any[]): void {
this.employees = data.map(item => ({
name: item[this.config.nameField] || '',
position: item[this.config.positionField] || '',
department: item[this.config.departmentField] || '',
photoUrl: this.config.photoField ? item[this.config.photoField] : undefined
name: item[this.configObj.nameField] || '',
position: item[this.configObj.positionField] || '',
department: item[this.configObj.departmentField] || '',
photoUrl: this.configObj.photoField ? item[this.configObj.photoField] : undefined
}));
}
......
src/app/portal-manage/dashboard-management/widgets/filled-map-widget/filled-map-widget.component.ts
......@@ -20,15 +20,15 @@ export class FilledMapWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Map';
this.title = this.configObj.title || 'Map';
this.zoomSettings = { enable: true };
this.updateLayers([]);
}
onDataUpdate(data: any[]): void {
const mapData = data.map(item => ({
country: item[this.config.countryField],
value: item[this.config.valueField]
country: item[this.configObj.countryField],
value: item[this.configObj.valueField]
}));
this.updateLayers(mapData);
}
......@@ -55,7 +55,7 @@ export class FilledMapWidgetComponent extends BaseWidgetComponent {
shapeSettings: {
fill: '#E5EEF6',
colorValuePath: 'value',
colorMapping: this.config?.colorMapping || [
colorMapping: this.configObj?.colorMapping || [
{ value: 0, color: '#C3E6CB' },
{ value: 50, color: '#FFECB5' },
{ value: 100, color: '#F5C6CB' }
......
src/app/portal-manage/dashboard-management/widgets/funnel-chart-widget/funnel-chart-widget.component.ts
......@@ -20,13 +20,13 @@ export class FunnelChartWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Funnel Chart';
this.title = this.configObj.title || 'Funnel Chart';
this.legendSettings = { visible: true };
this.chartData = [];
}
onDataUpdate(data: any[]): void {
this.chartData = data.map(item => ({ x: item[this.config.xField], y: item[this.config.yField] }));
this.chartData = data.map(item => ({ x: item[this.configObj.xField], y: item[this.configObj.yField] }));
}
onReset(): void {
......
src/app/portal-manage/dashboard-management/widgets/gauge-chart-widget/gauge-chart-widget.component.ts
......@@ -19,20 +19,20 @@ export class GaugeChartWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Gauge';
this.title = this.configObj.title || 'Gauge';
this.setAxes(0);
}
onDataUpdate(data: any[]): void {
let value = 0;
if (data.length > 0) {
if (this.config.aggregation === 'sum') {
value = data.reduce((sum, item) => sum + (item[this.config.valueField] || 0), 0);
} else if (this.config.aggregation === 'avg') {
const sum = data.reduce((sum, item) => sum + (item[this.config.valueField] || 0), 0);
if (this.configObj.aggregation === 'sum') {
value = data.reduce((sum, item) => sum + (item[this.configObj.valueField] || 0), 0);
} else if (this.configObj.aggregation === 'avg') {
const sum = data.reduce((sum, item) => sum + (item[this.configObj.valueField] || 0), 0);
value = sum / data.length;
} else {
value = data[0][this.config.valueField];
value = data[0][this.configObj.valueField];
}
}
this.setAxes(value);
......@@ -56,7 +56,7 @@ export class GaugeChartWidgetComponent extends BaseWidgetComponent {
cap: { radius: 7 },
needleTail: { length: '18%' }
}],
ranges: this.config?.ranges || [
ranges: this.configObj?.ranges || [
{ start: 0, end: 50, color: '#E0B9B9' },
{ start: 50, end: 75, color: '#B9D7EA' },
{ start: 75, end: 100, color: '#B9EAB9' }
......
src/app/portal-manage/dashboard-management/widgets/headcount-widget.component.html
......@@ -23,14 +23,14 @@
<!-- Content -->
<div *ngIf="!isLoading && !hasError" class="h-full">
<!-- Bar Chart -->
<ejs-chart *ngIf="config.chartType === 'bar'" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis" [tooltip]="tooltip" height="100%">
<ejs-chart *ngIf="configObj.chartType === 'bar'" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis" [tooltip]="tooltip" height="100%">
<e-series-collection>
<e-series [dataSource]="breakdown" type="Bar" xName="category" yName="count" name="Headcount"></e-series>
</e-series-collection>
</ejs-chart>
<!-- Doughnut Chart -->
<ejs-accumulationchart *ngIf="config.chartType === 'doughnut'" [legendSettings]="legendSettings" [tooltip]="tooltip" height="100%">
<ejs-accumulationchart *ngIf="configObj.chartType === 'doughnut'" [legendSettings]="legendSettings" [tooltip]="tooltip" height="100%">
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]="breakdown" xName="category" yName="count" innerRadius="40%" [dataLabel]="dataLabel"></e-accumulation-series>
</e-accumulation-series-collection>
......
src/app/portal-manage/dashboard-management/widgets/headcount-widget.component.ts
......@@ -27,7 +27,7 @@ export class HeadcountWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Headcount';
this.title = this.configObj.title || 'Headcount';
this.totalHeadcount = 0;
this.breakdown = [];
......@@ -51,9 +51,9 @@ export class HeadcountWidgetComponent extends BaseWidgetComponent {
onDataUpdate(data: any[]): void {
this.totalHeadcount = data.length;
if (this.config.categoryField) {
if (this.configObj.categoryField) {
const counts = data.reduce((acc, item) => {
const category = item[this.config.categoryField];
const category = item[this.configObj.categoryField];
acc[category] = (acc[category] || 0) + 1;
return acc;
}, {});
......
src/app/portal-manage/dashboard-management/widgets/kpi-widget/kpi-widget.component.ts
......@@ -17,24 +17,24 @@ export class KpiWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'KPI';
this.title = this.configObj.title || 'KPI';
this.kpiData = {
value: '...',
unit: this.config.unit || '',
trend: this.config.trend || 'neutral',
trendValue: this.config.trendValue || ''
unit: this.configObj.unit || '',
trend: this.configObj.trend || 'neutral',
trendValue: this.configObj.trendValue || ''
};
}
onDataUpdate(data: any[]): void {
if (data.length > 0) {
let kpiValue = 0;
if (this.config.aggregation === 'count') {
if (this.configObj.aggregation === 'count') {
kpiValue = data.length;
} else if (this.config.aggregation === 'sum') {
kpiValue = data.reduce((sum, item) => sum + (item[this.config.valueField] || 0), 0);
} else if (this.configObj.aggregation === 'sum') {
kpiValue = data.reduce((sum, item) => sum + (item[this.configObj.valueField] || 0), 0);
} else {
kpiValue = data[0][this.config.valueField];
kpiValue = data[0][this.configObj.valueField];
}
this.kpiData.value = kpiValue.toLocaleString();
}
......
src/app/portal-manage/dashboard-management/widgets/matrix-widget/matrix-widget.component.html
......@@ -30,12 +30,12 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let row of data" class="bg-white border-b hover:bg-gray-50">
<tr *ngFor="let row of matrixData" class="bg-white border-b hover:bg-gray-50">
<td *ngFor="let cell of row" class="px-6 py-4">
{{ cell }}
</td>
</tr>
<tr *ngIf="data.length === 0">
<tr *ngIf="matrixData.length === 0">
<td [attr.colspan]="headers.length" class="px-6 py-4 text-center text-gray-400">
No data available.
</td>
......
src/app/portal-manage/dashboard-management/widgets/matrix-widget/matrix-widget.component.ts
......@@ -12,28 +12,28 @@ import { BaseWidgetComponent } from '../base-widget.component';
})
export class MatrixWidgetComponent extends BaseWidgetComponent {
public headers: string[] = [];
public data: any[][] = [];
public matrixData: any[][] = [];
constructor(protected override dashboardStateService: DashboardStateService) {
super(dashboardStateService);
}
applyInitialConfig(): void {
this.title = this.config.title || 'Matrix';
this.headers = this.config.columns ? this.config.columns.map((col: any) => col.headerText) : [];
this.data = [];
this.title = this.configObj.title || 'Matrix';
this.headers = this.configObj.columns ? this.configObj.columns.map((col: any) => col.headerText) : [];
this.matrixData = [];
}
onDataUpdate(data: any[]): void {
if (this.config?.columns && data?.length > 0) {
this.data = data.map(row => this.config.columns.map((col: any) => row[col.field]));
if (this.configObj?.columns && data?.length > 0) {
this.matrixData = data.map(row => this.configObj.columns.map((col: any) => row[col.field]));
}
}
onReset(): void {
this.title = 'Matrix (Default)';
this.headers = ['Category', 'Q1', 'Q2', 'Q3', 'Q4'];
this.data = [
this.matrixData = [
['Product A', 100, 120, 150, 130],
['Product B', 80, 90, 110, 100],
['Product C', 150, 130, 160, 140],
......
src/app/portal-manage/dashboard-management/widgets/multi-row-card-widget/multi-row-card-widget.component.ts
......@@ -18,15 +18,15 @@ export class MultiRowCardWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Multi-Row Card';
this.title = this.configObj.title || 'Multi-Row Card';
this.cardData = [];
}
onDataUpdate(data: any[]): void {
this.cardData = data.map(item => ({
label: item[this.config.labelField],
value: item[this.config.valueField],
unit: item[this.config.unitField] || ''
label: item[this.configObj.labelField],
value: item[this.configObj.valueField],
unit: item[this.configObj.unitField] || ''
}));
}
......
src/app/portal-manage/dashboard-management/widgets/notification-widget/notification-widget.component.html
......@@ -38,7 +38,7 @@
<div class="notification-header">
<h4 class="notification-title">{{ notification.title }}</h4>
<div class="notification-time">
{{ notification.timestamp | date:'short' }}
{{ isValidDate(notification.timestamp) ? (notification.timestamp | date:'short') : 'Invalid Date' }}
</div>
</div>
<p class="notification-message">{{ notification.message }}</p>
......
src/app/portal-manage/dashboard-management/widgets/notification-widget/notification-widget.component.ts
......@@ -26,20 +26,20 @@ export class NotificationWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Notifications';
this.title = this.configObj?.title || 'Notifications';
this.toastSettings = {
position: this.config.toastPosition || { X: 'Right', Y: 'Top' },
showCloseButton: this.config.showCloseButton !== false,
showProgressBar: this.config.showProgressBar !== false,
timeOut: this.config.timeOut || 4000,
newestOnTop: this.config.newestOnTop !== false,
cssClass: this.config.cssClass || ''
position: this.configObj?.toastPosition || { X: 'Right', Y: 'Top' },
showCloseButton: this.configObj?.showCloseButton !== false,
showProgressBar: this.configObj?.showProgressBar !== false,
timeOut: this.configObj?.timeOut || 4000,
newestOnTop: this.configObj?.newestOnTop !== false,
cssClass: this.configObj?.cssClass || undefined
};
this.messageSettings = {
severity: this.config.severity || 'Normal',
variant: this.config.variant || 'Filled',
showIcon: this.config.showIcon !== false,
showCloseIcon: this.config.showCloseIcon !== false
severity: this.configObj?.severity || 'Normal',
variant: this.configObj?.variant || 'Filled',
showIcon: this.configObj?.showIcon !== false,
showCloseIcon: this.configObj?.showCloseIcon !== false
};
this.notifications = [];
this.unreadCount = 0;
......@@ -47,15 +47,28 @@ export class NotificationWidgetComponent extends BaseWidgetComponent {
onDataUpdate(data: any[]): void {
if (data && data.length > 0) {
this.notifications = data.map(item => ({
id: item[this.config.idField || 'id'],
title: item[this.config.titleField || 'title'],
message: item[this.config.messageField || 'message'],
type: item[this.config.typeField || 'type'] || 'info',
timestamp: new Date(item[this.config.timestampField || 'timestamp']),
isRead: item[this.config.isReadField || 'isRead'] || false,
priority: item[this.config.priorityField || 'priority'] || 'normal'
})).sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime());
this.notifications = data.map(item => {
const timestampValue = item[this.configObj.timestampField || 'timestamp'];
let timestamp: Date;
if (timestampValue instanceof Date) {
timestamp = timestampValue;
} else if (timestampValue && !isNaN(new Date(timestampValue).getTime())) {
timestamp = new Date(timestampValue);
} else {
timestamp = new Date(); // fallback to current date
}
return {
id: item[this.configObj.idField || 'id'],
title: item[this.configObj.titleField || 'title'],
message: item[this.configObj.messageField || 'message'],
type: item[this.configObj.typeField || 'type'] || 'info',
timestamp: timestamp,
isRead: item[this.configObj.isReadField || 'isRead'] || false,
priority: item[this.configObj.priorityField || 'priority'] || 'normal'
};
}).sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime());
this.updateUnreadCount();
}
......@@ -145,4 +158,8 @@ export class NotificationWidgetComponent extends BaseWidgetComponent {
getTypeClass(type: string): string {
return `notification-${type}`;
}
isValidDate(date: any): boolean {
return date && date.getTime && !isNaN(date.getTime());
}
}
src/app/portal-manage/dashboard-management/widgets/payroll-summary-widget.component.ts
......@@ -20,7 +20,7 @@ export class PayrollSummaryWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Payroll Summary';
this.title = this.configObj.title || 'Payroll Summary';
this.totalPayroll = 0;
this.employeesPaid = 0;
}
......@@ -28,8 +28,8 @@ export class PayrollSummaryWidgetComponent extends BaseWidgetComponent {
onDataUpdate(data: any[]): void {
if (data.length > 0) {
const firstItem = data[0];
this.totalPayroll = firstItem[this.config.totalPayrollField] || 0;
this.employeesPaid = firstItem[this.config.employeesPaidField] || 0;
this.totalPayroll = firstItem[this.configObj.totalPayrollField] || 0;
this.employeesPaid = firstItem[this.configObj.employeesPaidField] || 0;
}
}
......
src/app/portal-manage/dashboard-management/widgets/pie-chart-widget/pie-chart-widget.component.ts
......@@ -20,7 +20,7 @@ export class PieChartWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Pie Chart';
this.title = this.configObj.title || 'Pie Chart';
this.legendSettings = { visible: true };
this.chartData = [];
}
......@@ -28,15 +28,15 @@ export class PieChartWidgetComponent extends BaseWidgetComponent {
onDataUpdate(data: any[]): void {
let transformedData = data;
if (this.config.aggregation === 'count') {
if (this.configObj.aggregation === 'count') {
const counts = transformedData.reduce((acc, item) => {
const key = item[this.config.xField];
const key = item[this.configObj.xField];
acc[key] = (acc[key] || 0) + 1;
return acc;
}, {});
transformedData = Object.keys(counts).map(key => ({ x: key, y: counts[key] }));
} else {
transformedData = transformedData.map(item => ({ x: item[this.config.xField], y: item[this.config.yField] }));
transformedData = transformedData.map(item => ({ x: item[this.configObj.xField], y: item[this.configObj.yField] }));
}
this.chartData = transformedData;
}
......
src/app/portal-manage/dashboard-management/widgets/quick-links-widget/quick-links-widget.component.ts
......@@ -17,16 +17,16 @@ export class QuickLinksWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Quick Links';
this.quickLinks = this.config.links || []; // Use links from config if available
this.title = this.configObj.title || 'Quick Links';
this.quickLinks = this.configObj.links || []; // Use links from config if available
}
onDataUpdate(data: any[]): void {
if (this.config.nameField && this.config.urlField) {
if (this.configObj.nameField && this.configObj.urlField) {
this.quickLinks = data.map(item => ({
name: item[this.config.nameField],
url: item[this.config.urlField],
icon: this.config.iconField ? item[this.config.iconField] : 'link-45deg'
name: item[this.configObj.nameField],
url: item[this.configObj.urlField],
icon: this.configObj.iconField ? item[this.configObj.iconField] : 'link-45deg'
}));
}
}
......
src/app/portal-manage/dashboard-management/widgets/scatter-bubble-chart-widget/scatter-bubble-chart-widget.component.html
......@@ -12,6 +12,6 @@
<!-- Chart -->
<ejs-chart *ngIf="!isLoading && !hasError" [title]="title" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis">
<e-series-collection>
<e-series [dataSource]="chartData" [type]="type" xName="x" yName="y" [size]="config?.sizeField" name="Data"></e-series>
<e-series [dataSource]="chartData" [type]="type" xName="x" yName="y" [size]="configObj?.sizeField" name="Data"></e-series>
</e-series-collection>
</ejs-chart>
src/app/portal-manage/dashboard-management/widgets/scatter-bubble-chart-widget/scatter-bubble-chart-widget.component.ts
......@@ -23,24 +23,24 @@ export class ScatterBubbleChartWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Scatter Chart';
this.type = this.config.type || 'Scatter';
this.primaryXAxis = { title: this.config.xAxisTitle || '' };
this.primaryYAxis = { title: this.config.yAxisTitle || '' };
this.title = this.configObj.title || 'Scatter Chart';
this.type = this.configObj.type || 'Scatter';
this.primaryXAxis = { title: this.configObj.xAxisTitle || '' };
this.primaryYAxis = { title: this.configObj.yAxisTitle || '' };
this.chartData = [];
}
onDataUpdate(data: any[]): void {
if (this.type === 'Bubble') {
this.chartData = data.map(item => ({ x: item[this.config.xField], y: item[this.config.yField], size: item[this.config.sizeField] }));
this.chartData = data.map(item => ({ x: item[this.configObj.xField], y: item[this.configObj.yField], size: item[this.configObj.sizeField] }));
} else {
this.chartData = data.map(item => ({ x: item[this.config.xField], y: item[this.config.yField] }));
this.chartData = data.map(item => ({ x: item[this.configObj.xField], y: item[this.configObj.yField] }));
}
}
onReset(): void {
this.title = 'Scatter Chart (Default)';
this.type = this.config?.type || 'Scatter';
this.type = this.configObj?.type || 'Scatter';
if (this.type === 'Bubble') {
this.chartData = [
{ x: 10, y: 35, size: 5 }, { x: 15, y: 28, size: 8 },
......
src/app/portal-manage/dashboard-management/widgets/simple-kpi-widget/simple-kpi-widget.component.html
......@@ -8,7 +8,9 @@
<i *ngIf="icon" [style.color]="iconColor" [class]="'bi ' + icon + ' text-3xl'"></i>
<h4 class="text-lg font-semibold truncate">{{ title }}</h4>
</div>
<!-- Removed trendValue display -->
<div *ngIf="configObj?.trendValue" class="text-sm font-medium">
{{ configObj.trendValue }}
</div>
</div>
</div>
......
src/app/portal-manage/dashboard-management/widgets/simple-kpi-widget/simple-kpi-widget.component.ts
......@@ -24,27 +24,30 @@ export class SimpleKpiWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'KPI';
this.unit = this.config.unit || '';
this.icon = this.config.icon || 'info';
this.backgroundColor = this.config.backgroundColor || 'linear-gradient(to top right, #3366FF, #00CCFF)';
this.iconColor = this.config.iconColor || '#FFFFFF';
this.borderColor = this.config.borderColor || '#FFFFFF';
this.title = this.configObj.title || 'KPI';
this.unit = this.configObj.unit || '';
this.icon = this.configObj.icon || 'info';
// Handle color property (fallback to backgroundColor)
const bgColor = this.configObj.backgroundColor || this.configObj.color || 'linear-gradient(to top right, #3366FF, #00CCFF)';
this.backgroundColor = bgColor.startsWith('#') ? `linear-gradient(to top right, ${bgColor}, ${bgColor}dd)` : bgColor;
this.iconColor = this.configObj.iconColor || '#FFFFFF';
this.borderColor = this.configObj.borderColor || '#FFFFFF';
this.value = '-'; // Initial state before data loads
}
onDataUpdate(data: any[]): void {
console.log('SimpleKpiWidget onDataUpdate config:', this.config);
// Handle count aggregation separately as it doesn't need a valueField
if (this.config.aggregation === 'count') {
if (this.configObj.aggregation === 'count') {
this.value = (data?.length || 0).toLocaleString();
return;
}
// For other aggregations, valueField is required
if (!this.config.valueField) {
if (!this.configObj.valueField) {
this.value = 'N/A'; // Indicate a configuration error
console.error('SimpleKpiWidget Error: valueField is not configured for this widget.', this.config);
console.error('SimpleKpiWidget Error: valueField is not configured for this widget.', this.configObj);
return;
}
......@@ -55,11 +58,11 @@ export class SimpleKpiWidgetComponent extends BaseWidgetComponent {
}
let kpiValue = 0;
if (this.config.aggregation === 'sum') {
kpiValue = data.reduce((sum, item) => sum + (item[this.config.valueField] || 0), 0);
if (this.configObj.aggregation === 'sum') {
kpiValue = data.reduce((sum, item) => sum + (item[this.configObj.valueField] || 0), 0);
} else {
// Default to first value if no aggregation is specified
kpiValue = data[0][this.config.valueField] || 0;
kpiValue = data[0][this.configObj.valueField] || 0;
}
this.value = kpiValue.toLocaleString();
}
......
src/app/portal-manage/dashboard-management/widgets/simple-table-widget/simple-table-widget.component.html
......@@ -30,12 +30,12 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let row of data" class="bg-white border-b hover:bg-gray-50">
<tr *ngFor="let row of tableData" class="bg-white border-b hover:bg-gray-50">
<td *ngFor="let cell of row" class="px-6 py-4">
{{ cell }}
</td>
</tr>
<tr *ngIf="data.length === 0">
<tr *ngIf="tableData.length === 0">
<td [attr.colspan]="headers.length" class="px-6 py-4 text-center text-gray-400">
No data available.
</td>
......
src/app/portal-manage/dashboard-management/widgets/simple-table-widget/simple-table-widget.component.ts
......@@ -13,28 +13,28 @@ import { BaseWidgetComponent } from '../base-widget.component';
})
export class SimpleTableWidgetComponent extends BaseWidgetComponent {
public headers: string[] = [];
public data: any[][] = [];
public tableData: any[][] = [];
constructor(protected override dashboardStateService: DashboardStateService) {
super(dashboardStateService);
}
applyInitialConfig(): void {
this.title = this.config.title || 'Table';
this.headers = this.config.columns ? this.config.columns.map((col: any) => col.headerText) : [];
this.data = [];
this.title = this.configObj.title || 'Table';
this.headers = this.configObj.columns ? this.configObj.columns.map((col: any) => col.headerText) : [];
this.tableData = [];
}
onDataUpdate(data: any[]): void {
if (data && data.length > 0 && this.config?.columns) {
this.data = data.map(row => this.config.columns.map((col: any) => row[col.field]));
if (data && data.length > 0 && this.configObj?.columns) {
this.tableData = data.map(row => this.configObj.columns.map((col: any) => row[col.field]));
}
}
onReset(): void {
this.title = 'Table (Default)';
this.headers = ['ID', 'Name', 'Status'];
this.data = [
this.tableData = [
[1, 'Item A', 'Active'],
[2, 'Item B', 'Inactive'],
[3, 'Item C', 'Active'],
......
src/app/portal-manage/dashboard-management/widgets/slicer-widget/slicer-widget.component.ts
......@@ -21,14 +21,14 @@ export class SlicerWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Slicer';
this.title = this.configObj.title || 'Slicer';
this.options = ['All'];
this.selectedValue = 'All';
}
onDataUpdate(data: any[]): void {
if (this.config.optionsField) {
const uniqueOptions = [...new Set(data.map((item: any) => item[this.config.optionsField]))];
if (this.configObj.optionsField) {
const uniqueOptions = [...new Set(data.map((item: any) => item[this.configObj.optionsField]))];
this.options = ['All', ...uniqueOptions.map(String)];
this.selectedValue = this.options[0];
}
......
src/app/portal-manage/dashboard-management/widgets/syncfusion-chart-widget/syncfusion-chart-widget.component.ts
......@@ -23,15 +23,15 @@ export class SyncfusionChartWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Syncfusion Chart';
this.primaryXAxis = { valueType: 'Category', title: this.config.xAxisTitle || '' };
this.primaryYAxis = { title: this.config.yAxisTitle || '' };
this.title = this.configObj.title || 'Syncfusion Chart';
this.primaryXAxis = { valueType: 'Category', title: this.configObj.xAxisTitle || '' };
this.primaryYAxis = { title: this.configObj.yAxisTitle || '' };
this.chartData = new DataManager([]);
}
onDataUpdate(data: any[]): void {
const dm = new DataManager(data);
this.chartData = new DataManager(dm.executeLocal(new Query()).map((item: any) => ({ x: item[this.config.xField], y: item[this.config.yField] })));
this.chartData = new DataManager(dm.executeLocal(new Query()).map((item: any) => ({ x: item[this.configObj.xField], y: item[this.configObj.yField] })));
}
onReset(): void {
......
src/app/portal-manage/dashboard-management/widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component.html
......@@ -21,7 +21,7 @@
<!-- Grid -->
<ejs-grid #grid *ngIf="!isLoading && !hasError"
[dataSource]="data"
[dataSource]="gridData"
[allowPaging]="true"
[pageSettings]="pageSettings"
[allowSorting]="true"
......
src/app/portal-manage/dashboard-management/widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component.ts
import { Component, ViewChild, OnInit, OnDestroy, AfterViewInit } from '@angular/core';
import { Component, ViewChild, OnInit, OnDestroy, AfterViewInit, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GridModule, PageService, SortService, FilterService, GroupService, ToolbarService, ExcelExportService, PdfExportService, GridComponent, ToolbarItems, SearchSettingsModel, GroupSettingsModel, FilterSettingsModel, SelectionSettingsModel, AggregateService, ColumnMenuService, DetailRowService, ReorderService, EditService, PdfExportProperties, ExcelExportProperties, LoadingIndicatorModel, Column,SearchService } from '@syncfusion/ej2-angular-grids';
import { MenuEventArgs } from '@syncfusion/ej2-navigations';
......@@ -62,7 +62,7 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
public widgetId: string; // Added widgetId property
private isPerspectiveApplied = false;
public data: DataManager = new DataManager([]);
@Input() public gridData: DataManager = new DataManager([]);
public columns: any[] = [];
public pageSettings: Object = { pageSize: 10 };
public toolbar: ToolbarItems[]; // Make it configurable
......@@ -92,16 +92,16 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
override ngOnInit(): void { // Added override
super.ngOnInit(); // Call parent's ngOnInit
if (this.config && this.config.widgetId) {
this.widgetId = this.config.widgetId; // Initialize widgetId
if (this.config && this.configObj.widgetId) {
this.widgetId = this.configObj.widgetId; // Initialize widgetId
this.widgetStateService.registerWidget(this.widgetId, this);
}
}
override ngOnDestroy(): void { // Added override
super.ngOnDestroy(); // Call parent's ngOnDestroy
if (this.config && this.config.widgetId) {
this.widgetStateService.unregisterWidget(this.config.widgetId);
if (this.config && this.configObj.widgetId) {
this.widgetStateService.unregisterWidget(this.configObj.widgetId);
}
}
......@@ -110,19 +110,19 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
}
applyInitialConfig(): void {
this.title = this.config.title || 'Data Grid';
this.columns = this.config.columns || [];
this.data = new DataManager([]);
this.pageSettings = this.config.pageSettings || { pageSize: 10 };
this.toolbar = this.config.toolbar || ['Search', 'ExcelExport', 'PdfExport', 'CsvExport'];
this.searchSettings = this.config.searchSettings || { fields: [], operator: 'contains', ignoreCase: true };
this.groupSettings = this.config.groupSettings || { allowReordering: true, showGroupedColumn: true, showDropArea: false };
this.filterSettings = this.config.filterSettings || { type: 'Excel' };
this.editSettings = this.config.editSettings || { allowEditing: true, mode: 'Batch' };
this.selectionOptions = this.config.selectionOptions || { checkboxOnly: true };
this.loadingIndicator = this.config.loadingIndicator || { indicatorType: 'Shimmer' };
this.query = this.config.query || new Query().addParams('dataCount', '1000');
this.columnMenuItems = this.config.columnMenuItems || [
this.title = this.configObj.title || 'Data Grid';
this.columns = this.configObj.columns || [];
this.gridData = new DataManager([]);
this.pageSettings = this.configObj.pageSettings || { pageSize: 10 };
this.toolbar = this.configObj.toolbar || ['Search', 'ExcelExport', 'PdfExport', 'CsvExport'];
this.searchSettings = this.configObj.searchSettings || { fields: [], operator: 'contains', ignoreCase: true };
this.groupSettings = this.configObj.groupSettings || { allowReordering: true, showGroupedColumn: true, showDropArea: false };
this.filterSettings = this.configObj.filterSettings || { type: 'Excel' };
this.editSettings = this.configObj.editSettings || { allowEditing: true, mode: 'Batch' };
this.selectionOptions = this.configObj.selectionOptions || { checkboxOnly: true };
this.loadingIndicator = this.configObj.loadingIndicator || { indicatorType: 'Shimmer' };
this.query = this.configObj.query || new Query().addParams('dataCount', '1000');
this.columnMenuItems = this.configObj.columnMenuItems || [
'AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending',
'Group', 'Ungroup', 'ColumnChooser', 'Filter',
{ text: 'Sum', id: 'aggregate_sum' },
......@@ -131,14 +131,14 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
{ text: 'Min', id: 'aggregate_min' },
{ text: 'Max', id: 'aggregate_max' }
];
this.aggregatesSum = this.config.aggregatesSum || [];
this.aggregatesCount = this.config.aggregatesCount || [];
this.aggregatesAvg = this.config.aggregatesAvg || [];
this.aggregatesMin = this.config.aggregatesMin || [];
this.aggregatesMax = this.config.aggregatesMax || [];
this.allowReordering = this.config.allowReordering !== undefined ? this.config.allowReordering : true;
this.showColumnMenu = this.config.showColumnMenu !== undefined ? this.config.showColumnMenu : true;
this.allowMultiSorting = this.config.allowMultiSorting !== undefined ? this.config.allowMultiSorting : true;
this.aggregatesSum = this.configObj.aggregatesSum || [];
this.aggregatesCount = this.configObj.aggregatesCount || [];
this.aggregatesAvg = this.configObj.aggregatesAvg || [];
this.aggregatesMin = this.configObj.aggregatesMin || [];
this.aggregatesMax = this.configObj.aggregatesMax || [];
this.allowReordering = this.configObj.allowReordering !== undefined ? this.configObj.allowReordering : true;
this.showColumnMenu = this.configObj.showColumnMenu !== undefined ? this.configObj.showColumnMenu : true;
this.allowMultiSorting = this.configObj.allowMultiSorting !== undefined ? this.configObj.allowMultiSorting : true;
}
/**
......@@ -170,9 +170,9 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
}
onDataUpdate(data: any[]): void {
this.data = new DataManager(data);
if (this.config.columns && this.config.columns.length > 0) {
this.columns = this.config.columns;
this.gridData = new DataManager(data);
if (this.configObj.columns && this.configObj.columns.length > 0) {
this.columns = this.configObj.columns;
} else if (data.length > 0) {
this.columns = Object.keys(data[0]).map(key => ({
field: key,
......@@ -193,7 +193,7 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
onReset(): void {
this.title = 'Data Grid (Default)';
this.data = new DataManager([]);
this.gridData = new DataManager([]);
this.columns = [{ field: 'Message', headerText: 'Please select a dataset' }];
this.pageSettings = { pageSize: 10 };
this.toolbar = ['Search', 'ExcelExport', 'PdfExport', 'CsvExport'];
......
src/app/portal-manage/dashboard-management/widgets/syncfusion-pivot-widget/syncfusion-pivot-widget.component.ts
......@@ -50,12 +50,12 @@ export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent implemen
override ngOnInit(): void {
super.ngOnInit();
if (this.config && this.config.widgetId) {
this.widgetId = this.config.widgetId;
if (this.config && this.configObj.widgetId) {
this.widgetId = this.configObj.widgetId;
this.widgetStateService.registerWidget(this.widgetId, this);
}
this.toolbar = this.config.showToolbar !== false ? ['Grid', 'Chart', 'Export', 'SubTotal', 'GrandTotal', 'ConditionalFormatting', 'NumberFormatting', 'FieldList'] : [];
this.displayOption = { view: this.config.displayOptionView || 'Both' } as DisplayOption;
this.toolbar = this.configObj.showToolbar !== false ? ['Grid', 'Chart', 'Export', 'SubTotal', 'GrandTotal', 'ConditionalFormatting', 'NumberFormatting', 'FieldList'] : [];
this.displayOption = { view: this.configObj.displayOptionView || 'Both' } as DisplayOption;
}
override ngOnDestroy(): void {
......@@ -70,17 +70,17 @@ export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent implemen
}
applyInitialConfig(): void {
this.title = this.config.title || 'Pivot Table';
this.chartSettings = this.config.chartSettings || {
this.title = this.configObj.title || 'Pivot Table';
this.chartSettings = this.configObj.chartSettings || {
chartSeries: { type: 'Column' }
};
this.dataSourceSettings = {
dataSource: new DataManager([]),
expandAll: this.config.expandAll || false,
rows: this.config.rows || [],
columns: this.config.columns || [],
values: this.config.values || [],
filters: this.config.filters || [],
expandAll: this.configObj.expandAll || false,
rows: this.configObj.rows || [],
columns: this.configObj.columns || [],
values: this.configObj.values || [],
filters: this.configObj.filters || [],
chartSettings: this.chartSettings,
};
}
......
src/app/portal-manage/dashboard-management/widgets/treemap-widget/treemap-widget.component.ts
......@@ -21,10 +21,10 @@ export class TreemapWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Treemap';
this.weightValuePath = this.config.valueField;
this.title = this.configObj.title || 'Treemap';
this.weightValuePath = this.configObj.valueField;
this.leafItemSettings = {
labelPath: this.config.groupField,
labelPath: this.configObj.groupField,
showLabels: true
};
this.dataSource = [];
......
src/app/portal-manage/dashboard-management/widgets/waterfall-chart-widget/waterfall-chart-widget.component.ts
......@@ -21,14 +21,14 @@ export class WaterfallChartWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Waterfall Chart';
this.primaryXAxis = { valueType: 'Category', title: this.config.xAxisTitle || '' };
this.primaryYAxis = { title: this.config.yAxisTitle || '' };
this.title = this.configObj.title || 'Waterfall Chart';
this.primaryXAxis = { valueType: 'Category', title: this.configObj.xAxisTitle || '' };
this.primaryYAxis = { title: this.configObj.yAxisTitle || '' };
this.chartData = [];
}
onDataUpdate(data: any[]): void {
this.chartData = data.map(item => ({ x: item[this.config.xField], y: item[this.config.yField] }));
this.chartData = data.map(item => ({ x: item[this.configObj.xField], y: item[this.configObj.yField] }));
}
onReset(): void {
......
src/app/portal-manage/dashboard-management/widgets/weather-widget/weather-widget.component.ts
......@@ -23,9 +23,9 @@ export class WeatherWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Weather';
this.location = this.config.location || 'Bangkok, Thailand';
this.refreshInterval = this.config.refreshInterval || 300000;
this.title = this.configObj?.title || 'Weather';
this.location = this.configObj?.location || 'Bangkok, Thailand';
this.refreshInterval = this.configObj?.refreshInterval || 300000;
this.weatherData = {};
this.currentWeather = {};
this.forecast = [];
......@@ -37,23 +37,23 @@ export class WeatherWidgetComponent extends BaseWidgetComponent {
const weatherItem = data[0];
this.currentWeather = {
temperature: weatherItem[this.config.temperatureField || 'temperature'],
humidity: weatherItem[this.config.humidityField || 'humidity'],
windSpeed: weatherItem[this.config.windSpeedField || 'windSpeed'],
pressure: weatherItem[this.config.pressureField || 'pressure'],
description: weatherItem[this.config.descriptionField || 'description'],
icon: weatherItem[this.config.iconField || 'icon'],
feelsLike: weatherItem[this.config.feelsLikeField || 'feelsLike']
temperature: weatherItem[this.configObj.temperatureField || 'temperature'],
humidity: weatherItem[this.configObj.humidityField || 'humidity'],
windSpeed: weatherItem[this.configObj.windSpeedField || 'windSpeed'],
pressure: weatherItem[this.configObj.pressureField || 'pressure'],
description: weatherItem[this.configObj.descriptionField || 'description'],
icon: weatherItem[this.configObj.iconField || 'icon'],
feelsLike: weatherItem[this.configObj.feelsLikeField || 'feelsLike']
};
// Process forecast data if available
if (data.length > 1) {
this.forecast = data.slice(1).map(item => ({
day: item[this.config.dayField || 'day'],
high: item[this.config.highField || 'high'],
low: item[this.config.lowField || 'low'],
description: item[this.config.forecastDescriptionField || 'description'],
icon: item[this.config.forecastIconField || 'icon']
day: item[this.configObj.dayField || 'day'],
high: item[this.configObj.highField || 'high'],
low: item[this.configObj.lowField || 'low'],
description: item[this.configObj.forecastDescriptionField || 'description'],
icon: item[this.configObj.forecastIconField || 'icon']
}));
}
......
src/app/portal-manage/dashboard-management/widgets/welcome-widget/welcome-widget.component.ts
......@@ -17,24 +17,24 @@ export class WelcomeWidgetComponent extends BaseWidgetComponent {
}
applyInitialConfig(): void {
this.title = this.config.title || 'Welcome';
if (this.config.messageType === 'static') {
this.welcomeMessage = this.config.staticMessage || 'Welcome!';
this.title = this.configObj.title || 'Welcome';
if (this.configObj.messageType === 'static') {
this.welcomeMessage = this.configObj.staticMessage || 'Welcome!';
} else {
this.welcomeMessage = '...'; // Placeholder while waiting for data
}
}
onDataUpdate(data: any[]): void {
if (this.config.messageType === 'dynamic') {
if (data.length > 0 && this.config.messageField) {
this.welcomeMessage = data[0][this.config.messageField];
if (this.configObj.messageType === 'dynamic') {
if (data.length > 0 && this.configObj.messageField) {
this.welcomeMessage = data[0][this.configObj.messageField];
} else {
this.welcomeMessage = 'No message data';
}
} else {
// For static messages, the message is already set in applyInitialConfig
this.welcomeMessage = this.config.staticMessage || 'Welcome!';
this.welcomeMessage = this.configObj.staticMessage || 'Welcome!';
}
}
......
src/app/portal-manage/dashboard-viewer/dashboard-viewer.component.ts deleted 100644 → 0
import { Component } from '@angular/core';
@Component({
selector: 'app-dashboard-viewer',
template: '<p>dashboard-viewer works!</p>',
standalone: true
})
export class DashboardViewerComponent {
}
src/app/portal-manage/portal-manage.routes.ts
......@@ -109,11 +109,6 @@ export const portalManageRoutes: Routes = [
component: HomeComponent, // Assuming HomeComponent is a generic dashboard or a placeholder
canActivate: [moduleAccessGuard]
},
{
path: 'dashboard-viewer',
loadComponent: () => import('./dashboard-viewer/dashboard-viewer.component').then(m => m.DashboardViewerComponent),
canActivate: [moduleAccessGuard]
},
// === Generic App Routes ===
// These routes are for simple apps that don't need special module-level services.
......
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