Skip to content

P
portal-apps-manage
Commit 7ba8fc42 by Ooh-Ao
Options

ss

parent 67977999
Showing with 52 additions and 121 deletions
src/app/portal-manage/dashboard-management/dashboard-viewer/dashboard-viewer.component.html
<div class="min-h-screen dashboard-background">
<!-- Enhanced Dashboard Header -->
<div class="dashboard-header-container">
<div class="header-content">
<div class="header-flex">
<div class="header-left">
<!-- Dashboard Title with Icon -->
<div class="header-title-section">
<!-- <div class="title-icon">
<i class="bi bi-grid-3x3-gap"></i>
</div> -->
<div class="title-content">
<h1>{{dashboardData?.thName}}</h1>
<!-- <p>Create and manage your dashboards</p> -->
</div>
</div>
</div>
</div>
</div>
<!-- Enhanced Dashboard Content Area -->
<div class="dashboard-content-area">
<!-- Dashboard Content -->
<div class="dashboard-content-card">
<div *ngIf="!panels || panels.length === 0" class="empty-state">
<div class="empty-state-icon">
<i class="bi bi-grid-3x3-gap"></i>
</div>
<h3 class="empty-state-title">Empty Dashboard</h3>
<p class="empty-state-description">
To get started, select a dashboard from the dropdown above or create
a new one. Then, click on a widget from the sidebar on the left to
add it to this canvas.
</p>
</div>
<!-- Error Message -->
<div *ngIf="errorMessage" class="error-message">
<div class="error-message-content">
<i class="bi bi-exclamation-triangle-fill error-icon"></i>
<span class="error-text">Error:</span>
<span class="error-description">{{ errorMessage }}</span>
</div>
</div>
<!-- Dashboard Layout -->
<div *ngIf="panels.length > 0" class="dashboard-layout-container">
<ejs-dashboardlayout
id="dashboard_default"
[columns]="columns"
[cellSpacing]="cellSpacing"
[panels]="panels"
#editLayout
[allowResizing]="false"
[allowDragging]="false"
class="dashboard-layout"
>
<e-panels>
<e-panel
*ngFor="let panel of panels"
[id]="panel.id + '-' + panel.row + '-' + panel.col"
[sizeX]="panel.sizeX"
[sizeY]="panel.sizeY"
[row]="panel.row"
[col]="panel.col"
[zIndex]="999"
>
<ng-template #header>
</ng-template>
<ng-template #content>
<ng-container
[ngComponentOutlet]="panel.componentType"
[ngComponentOutletInputs]="panel.componentInputs"
></ng-container>
</ng-template>
</e-panel>
</e-panels>
</ejs-dashboardlayout>
</div>
</div>
</div>
<!-- Dashboard Viewer Container - Clean Layout -->
<div *ngIf="dashboardData" class="viewer-container-clean">
<!-- Dashboard Content Only -->
<div class="viewer-content-clean">
<ejs-dashboardlayout
id="dashboard_default"
#editLayout
[cellSpacing]="cellSpacing"
[panels]="panels"
[columns]="columns"
[allowResizing]="false"
[allowDragging]="false"
[allowFloating]="false"
[showGridLines]="false"
class="dashboard-layout"
>
<e-panels>
<e-panel
*ngFor="let panel of panels"
[zIndex]="999"
[row]="panel.row"
[col]="panel.col"
[sizeX]="panel.sizeX"
[sizeY]="panel.sizeY"
[id]="panel.id + '-' + panel.row + '-' + panel.col"
class="widget-panel-clean"
>
<ng-template #header>
<!-- No header -->
</ng-template>
<ng-template #content>
<div class="widget-content-clean">
<ng-container
[ngComponentOutlet]="panel.componentType"
[ngComponentOutletInputs]="panel.componentInputs"
></ng-container>
</div>
</ng-template>
</e-panel>
</e-panels>
</ejs-dashboardlayout>
</div>
</div>
src/app/portal-manage/dashboard-management/widget-config/widget-config.component.ts
import { Component, Inject, OnInit, OnDestroy, AfterViewInit, ViewChild, ViewContainerRef, ComponentRef } from '@angular/core';
import { Component, Inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { MatDialogModule } from '@angular/material/dialog';
......@@ -10,7 +10,6 @@ import { MatIconModule } from '@angular/material/icon';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { FormsModule } from '@angular/forms';
import { WidgetConfigGeneratorService } from '../services/widget-config-generator.service';
import { WidgetConfigRegistryService } from './services/widget-config-registry.service';
import { WidgetModel } from '../models/widgets.model';
export interface WidgetConfigDialogData {
......@@ -36,20 +35,16 @@ export interface WidgetConfigDialogData {
templateUrl: './widget-config.component.html',
styleUrls: ['./widget-config.component.scss']
})
export class WidgetConfigComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('configContainer', { read: ViewContainerRef }) configContainer!: ViewContainerRef;
export class WidgetConfigComponent implements OnInit {
currentConfig: any;
availableColumns: string[];
widgetType: string;
comboChartTypes: string[] = ['Line', 'Column', 'Area', 'Spline'];
private configComponentRef: ComponentRef<any> | null = null;
constructor(
public dialogRef: MatDialogRef<WidgetConfigComponent>,
@Inject(MAT_DIALOG_DATA) public data: WidgetConfigDialogData,
private widgetConfigGenerator: WidgetConfigGeneratorService,
public widgetConfigRegistry: WidgetConfigRegistryService
private widgetConfigGenerator: WidgetConfigGeneratorService
) { }
ngOnInit(): void {
......@@ -72,13 +67,6 @@ export class WidgetConfigComponent implements OnInit, AfterViewInit, OnDestroy {
}
}
// Use fallback config if no config is available
if (!this.currentConfig || Object.keys(this.currentConfig).length === 0) {
this.currentConfig = this.widgetConfigRegistry.getFallbackConfig(this.widgetType);
}
// Load dynamic config component will be called in ngAfterViewInit
const gridLikeWidgets = ['SyncfusionDatagridWidgetComponent', 'NewDataTableWidget', 'MatrixWidgetComponent'];
if (gridLikeWidgets.includes(this.widgetType) && !this.currentConfig.columns) {
this.currentConfig.columns = [];
......@@ -285,45 +273,12 @@ export class WidgetConfigComponent implements OnInit, AfterViewInit, OnDestroy {
addPivotFilter() { this.currentConfig.filters.push({ name: '' }); }
removePivotFilter(index: number) { this.currentConfig.filters.splice(index, 1); }
ngAfterViewInit(): void {
// Load dynamic config component after view is initialized
this.loadConfigComponent();
}
private loadConfigComponent(): void {
const configComponentType = this.widgetConfigRegistry.getConfigComponent(this.widgetType);
if (configComponentType) {
// Load the specific config component
this.configComponentRef = this.configContainer.createComponent(configComponentType);
this.configComponentRef.instance.currentConfig = this.currentConfig;
this.configComponentRef.instance.availableColumns = this.availableColumns;
// Subscribe to config changes
if (this.configComponentRef.instance.configChange) {
this.configComponentRef.instance.configChange.subscribe((config: any) => {
this.currentConfig = config;
});
}
}
// If no specific config component is found, the template will show the fallback config
}
onSave(): void {
// Get the latest config from the dynamic component if it exists
if (this.configComponentRef && this.configComponentRef.instance.currentConfig) {
this.currentConfig = this.configComponentRef.instance.currentConfig;
}
this.dialogRef.close(this.currentConfig);
}
onCancel(): void {
this.dialogRef.close();
}
ngOnDestroy(): void {
if (this.configComponentRef) {
this.configComponentRef.destroy();
}
}
}
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