Skip to content

P
portal-apps-manage
Commit 0824e147 by Ooh-Ao
Options

css

parent 573ac80d
Showing with 74 additions and 45 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>
<!-- Error Message --> </div>
<div *ngIf="errorMessage" class="error-message"> </div>
<div class="error-message-content"> </div>
<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 Viewer Container - Clean Layout --> <!-- Enhanced Dashboard Content Area -->
<div *ngIf="dashboardData" class="viewer-container-clean"> <div class="dashboard-content-area">
<!-- Dashboard Content Only -->
<div class="viewer-content-clean"> <!-- Dashboard Content -->
<ejs-dashboardlayout <div class="dashboard-content-card">
id='dashboard_viewer' <div *ngIf="!panels || panels.length === 0" class="empty-state">
#viewerLayout <div class="empty-state-icon">
[cellSpacing]="cellSpacing" <i class="bi bi-grid-3x3-gap"></i>
[columns]="columns" </div>
[allowResizing]="false" <h3 class="empty-state-title">Empty Dashboard</h3>
[allowDragging]="false" <p class="empty-state-description">
[allowFloating]="false" To get started, select a dashboard from the dropdown above or create
[showGridLines]="false" a new one. Then, click on a widget from the sidebar on the left to
class="dashboard-viewer-layout-clean" add it to this canvas.
> </p>
<e-panels> </div>
<e-panel
*ngFor="let panel of panels" <!-- Dashboard Layout -->
[row]="panel.row" <div *ngIf="panels.length > 0" class="dashboard-layout-container">
[col]="panel.col" <ejs-dashboardlayout
[sizeX]="panel.sizeX" id="dashboard_default"
[sizeY]="panel.sizeY" [columns]="columns"
[id]="panel.id" [cellSpacing]="cellSpacing"
class="widget-panel-clean" [panels]="panels"
> #editLayout
<ng-template #header> [allowResizing]="true"
<!-- No header --> [allowDragging]="true"
</ng-template> class="dashboard-layout"
<ng-template #content> >
<div class="widget-content-clean"> <e-panels>
<ng-container [ngComponentOutlet]="panel.componentType" [ngComponentOutletInputs]="panel.componentInputs"></ng-container> <e-panel
</div> *ngFor="let panel of panels"
</ng-template> [id]="panel.id + '-' + panel.row + '-' + panel.col"
</e-panel> [sizeX]="panel.sizeX"
</e-panels> [sizeY]="panel.sizeY"
</ejs-dashboardlayout> [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>
</div> </div>
</div> </div>
src/app/portal-manage/dashboard-management/dashboard-viewer/dashboard-viewer.component.ts
import { Component, OnInit, Type, ChangeDetectorRef } from '@angular/core'; import { Component, OnInit, Type, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { ActivatedRoute, RouterModule } from '@angular/router'; import { ActivatedRoute, RouterModule } from '@angular/router';
import { DashboardLayoutModule, PanelModel } from '@syncfusion/ej2-angular-layouts'; import { DashboardLayoutModule, PanelModel } from '@syncfusion/ej2-angular-layouts';
...@@ -60,6 +60,7 @@ export interface DashboardPanel extends PanelModel { ...@@ -60,6 +60,7 @@ export interface DashboardPanel extends PanelModel {
], ],
templateUrl: './dashboard-viewer.component.html', templateUrl: './dashboard-viewer.component.html',
styleUrls: ['./dashboard-viewer.component.scss'], styleUrls: ['./dashboard-viewer.component.scss'],
encapsulation: ViewEncapsulation.None
}) })
export class DashboardViewerComponent implements OnInit { export class DashboardViewerComponent implements OnInit {
......
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