Skip to content

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

datagrid

parent 05002a9d
Showing with 659 additions and 195 deletions
src/app/portal-manage/dashboard-management/widget-config/services/widget-config-registry.service.ts
......@@ -175,13 +175,13 @@ export class WidgetConfigRegistryService {
// ========================================
this.registerWidgetWithMetadata('SyncfusionDatagridWidgetComponent', SyncfusionDatagridConfigComponent, {
name: 'SyncfusionDatagridWidgetComponent',
displayName: 'Data Grid Widget',
description: 'Advanced data grid with sorting, filtering, paging, and export capabilities',
displayName: 'Advanced Data Grid',
description: 'Comprehensive data grid with advanced features including sorting, filtering, paging, grouping, editing, export capabilities, and real-time data management',
category: WidgetCategory.DATA_GRID,
icon: 'grid',
version: '1.0.0',
version: '2.0.0',
author: 'Portal Team',
tags: ['datagrid', 'table', 'data', 'syncfusion', 'advanced'],
tags: ['datagrid', 'table', 'data', 'syncfusion', 'advanced', 'enterprise', 'grid', 'spreadsheet'],
isDeprecated: false,
minWidth: 400,
minHeight: 300,
......@@ -189,11 +189,12 @@ export class WidgetConfigRegistryService {
maxHeight: 800,
defaultWidth: 600,
defaultHeight: 400,
supportedDataSources: [DataSourceType.STATIC, DataSourceType.API, DataSourceType.DATASET, DataSourceType.ODATA, DataSourceType.WEBAPI],
supportedDataSources: [DataSourceType.STATIC, DataSourceType.API, DataSourceType.DATASET, DataSourceType.ODATA, DataSourceType.WEBAPI, DataSourceType.WEBSOCKET],
features: [
WidgetFeature.EXPORT, WidgetFeature.FILTER, WidgetFeature.SORT, WidgetFeature.PAGINATION,
WidgetFeature.SEARCH, WidgetFeature.GROUPING, WidgetFeature.EDITING, WidgetFeature.SELECTION,
WidgetFeature.REFRESH, WidgetFeature.CUSTOMIZATION, WidgetFeature.RESPONSIVE, WidgetFeature.PRINT
WidgetFeature.REFRESH, WidgetFeature.CUSTOMIZATION, WidgetFeature.RESPONSIVE, WidgetFeature.PRINT,
WidgetFeature.ANIMATION, WidgetFeature.TOOLTIP, WidgetFeature.ZOOM
],
complexity: 'advanced'
});
......@@ -1004,8 +1005,14 @@ export class WidgetConfigRegistryService {
allowMultiSelection: false,
allowEditing: false,
allowAdding: false,
allowPageSize: true,
allowPageNavigation: true,
allowMultiSorting: false,
allowAdvancedFiltering: false,
allowSearching: false,
pageSize: 10,
pageSizes: [5, 10, 20, 50, 100],
showPageInfo: true,
// UI Settings
showToolbar: true,
......@@ -1015,6 +1022,16 @@ export class WidgetConfigRegistryService {
alternateRowColor: '#F9FAFB',
rowHeight: 40,
headerRowHeight: 40,
headerTextColor: '#374151',
// Filter Settings
showFilterBar: false,
filterType: 'menu',
filterBarHeight: 40,
// Aggregate Settings
showAggregate: false,
aggregateColumns: [],
// Export Settings
enableExport: true,
......@@ -1023,17 +1040,16 @@ export class WidgetConfigRegistryService {
includeHeaders: true,
includeFilters: false,
// Search Settings
enableSearch: false,
searchSettings: {
fields: [],
operator: 'contains',
key: '',
ignoreCase: true
},
// Selection & Editing
selectionMode: 'none',
editMode: 'none',
// Virtualization
// Data Management
dataSourceType: 'local',
enableVirtualization: false,
enableInfiniteScroll: false,
enableLazyLoad: false,
cacheDuration: 300,
// Style Settings
backgroundType: 'solid',
......@@ -1041,7 +1057,6 @@ export class WidgetConfigRegistryService {
borderColor: '#E5E7EB',
textColor: '#374151',
headerBackgroundColor: '#F9FAFB',
headerTextColor: '#374151',
borderRadius: 8,
borderWidth: 1,
fontSize: 14,
......@@ -1064,11 +1079,8 @@ export class WidgetConfigRegistryService {
dataValidation: 'basic',
showDataCount: true,
showLastUpdated: true,
enableFilter: false,
filterField: '',
filterOperator: 'contains',
filterValue: '',
filterLabel: 'Filter',
dataTransform: '',
errorMessage: 'Failed to load data',
// Security Settings
requireAuth: false,
......
src/app/portal-manage/dashboard-management/widgets/configs/syncfusion-datagrid-config/syncfusion-datagrid-config.component.ts
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { Component, Input, Output, EventEmitter, OnInit, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
......@@ -31,7 +31,10 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
<!-- Basic Configuration Tab -->
<mat-tab label="Basic">
<div class="config-section">
<h3 class="section-title text-blue-600">Basic Configuration</h3>
<h3 class="section-title text-blue-600">
<i class="bi bi-gear-fill mr-2"></i>
Basic Configuration
</h3>
<mat-form-field appearance="fill" class="w-full">
<mat-label>Title</mat-label>
......@@ -73,14 +76,17 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
<!-- Size Configuration -->
<div class="config-section">
<h3 class="section-title text-blue-600">Size Configuration</h3>
<h3 class="section-title text-blue-600">
<i class="bi bi-arrows-fullscreen mr-2"></i>
Size Configuration
</h3>
<!-- Size Presets -->
<div class="size-presets">
<h4 class="text-sm font-medium text-gray-700 mb-3">Quick Presets</h4>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<div
*ngFor="let option of sizeOptions"
*ngFor="let option of sizeOptions; trackBy: trackBySizeOption"
class="size-preset-card"
[class.selected]="currentConfig.sizeOption === option.id"
(click)="setSizeOption(option.id)">
......@@ -253,7 +259,10 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
<!-- Columns Tab -->
<mat-tab label="Columns">
<div class="config-section">
<h3 class="section-title text-green-600">Column Configuration</h3>
<h3 class="section-title text-green-600">
<i class="bi bi-columns-gap mr-2"></i>
Column Configuration
</h3>
<div class="flex items-center justify-between mb-4">
<h4>Available Columns</h4>
......@@ -263,7 +272,7 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
</button>
</div>
<div *ngFor="let column of currentConfig.columns; let i = index" class="column-config-item p-4 mb-4">
<div *ngFor="let column of currentConfig.columns; let i = index; trackBy: trackByColumnIndex" class="column-config-item p-4 mb-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<mat-form-field appearance="fill">
<mat-label>Field Name</mat-label>
......@@ -329,7 +338,10 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
<!-- Rows Tab -->
<mat-tab label="Rows">
<div class="config-section">
<h3 class="section-title text-purple-600">Row Configuration</h3>
<h3 class="section-title text-purple-600">
<i class="bi bi-list-ul mr-2"></i>
Row Configuration
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<mat-form-field appearance="fill">
......@@ -373,7 +385,10 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
<!-- Style Tab -->
<mat-tab label="Style">
<div class="config-section">
<h3 class="section-title text-orange-600">Style Configuration</h3>
<h3 class="section-title text-orange-600">
<i class="bi bi-palette-fill mr-2"></i>
Style Configuration
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<mat-form-field appearance="fill">
......@@ -427,7 +442,10 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
<!-- Filter Tab -->
<mat-tab label="Filter">
<div class="config-section">
<h3 class="section-title text-teal-600">Filter Configuration</h3>
<h3 class="section-title text-teal-600">
<i class="bi bi-funnel-fill mr-2"></i>
Filter Configuration
</h3>
<div class="flex items-center space-x-4 mb-4">
<mat-checkbox [(ngModel)]="currentConfig.allowFiltering" name="allowFiltering">
......@@ -461,7 +479,10 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
<!-- Aggregate Tab -->
<mat-tab label="Aggregate">
<div class="config-section">
<h3 class="section-title text-red-600">Aggregate Configuration</h3>
<h3 class="section-title text-red-600">
<i class="bi bi-calculator mr-2"></i>
Aggregate Configuration
</h3>
<div class="flex items-center mb-4">
<mat-checkbox [(ngModel)]="currentConfig.showAggregate" name="showAggregate">
......@@ -527,7 +548,10 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
<!-- Export Tab -->
<mat-tab label="Export">
<div class="config-section">
<h3 class="section-title text-indigo-600">Export Configuration</h3>
<h3 class="section-title text-indigo-600">
<i class="bi bi-download mr-2"></i>
Export Configuration
</h3>
<div class="flex items-center mb-4">
<mat-checkbox [(ngModel)]="currentConfig.enableExport" name="enableExport">
......@@ -568,7 +592,10 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
<!-- Features Tab -->
<mat-tab label="Features">
<div class="config-section">
<h3 class="section-title text-cyan-600">Grid Features</h3>
<h3 class="section-title text-cyan-600">
<i class="bi bi-grid-3x3-gap-fill mr-2"></i>
Grid Features
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="feature-group">
......@@ -672,7 +699,10 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
<!-- Data Management Tab -->
<mat-tab label="Data">
<div class="config-section">
<h3 class="section-title text-emerald-600">Data Management</h3>
<h3 class="section-title text-emerald-600">
<i class="bi bi-database-fill mr-2"></i>
Data Management
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<mat-form-field appearance="fill">
......@@ -739,7 +769,10 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
<!-- Security Tab -->
<mat-tab label="Security">
<div class="config-section">
<h3 class="section-title text-gray-600">Security Configuration</h3>
<h3 class="section-title text-gray-600">
<i class="bi bi-shield-lock-fill mr-2"></i>
Security Configuration
</h3>
<div class="flex items-center mb-4">
<mat-checkbox [(ngModel)]="currentConfig.requireAuth" name="requireAuth">
......@@ -811,14 +844,69 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
.section-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 20px;
padding-bottom: 8px;
border-bottom: 2px solid #e2e8f0;
font-weight: 700;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 3px solid currentColor;
display: flex;
align-items: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
i {
font-size: 1.125rem;
opacity: 0.8;
}
}
.config-tabs {
margin-top: 0;
::ng-deep .mat-tab-group {
.mat-tab-header {
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
border-radius: 12px 12px 0 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.mat-tab-label {
font-weight: 600;
color: #64748b;
transition: all 0.3s ease;
&:hover {
color: #3b82f6;
background: rgba(59, 130, 246, 0.1);
}
&.mat-tab-label-active {
color: #3b82f6;
background: rgba(59, 130, 246, 0.1);
}
}
.mat-ink-bar {
background: linear-gradient(90deg, #3b82f6, #1d4ed8);
height: 3px;
border-radius: 2px;
}
}
}
.config-section {
padding: 24px;
background: linear-gradient(135deg, #ffffff, #f8fafc);
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
margin-bottom: 16px;
border: 1px solid rgba(226, 232, 240, 0.5);
}
.feature-group {
background: rgba(255, 255, 255, 0.8);
padding: 16px;
border-radius: 8px;
border: 1px solid rgba(226, 232, 240, 0.5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.config-tabs .mat-tab-body-content {
......@@ -991,11 +1079,30 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
.text-emerald-600 { color: #059669; }
`]
})
export class SyncfusionDatagridConfigComponent extends BaseConfigComponent implements OnInit {
export class SyncfusionDatagridConfigComponent extends BaseConfigComponent implements OnInit, AfterViewInit {
constructor(override cdr: ChangeDetectorRef) {
super(cdr);
}
override ngOnInit() {
// Initialize basic config first
this.initializeDefaultConfig();
}
override ngAfterViewInit() {
// Initialize other configs after view is ready
this.initializeColumns();
this.initializeColorDefaults();
this.cdr.detectChanges();
}
// TrackBy functions to prevent unnecessary re-renders
trackByColumnIndex(index: number, item: any): number {
return index;
}
trackBySizeOption(index: number, item: any): string {
return item.id;
}
override initializeDefaultConfig() {
......
src/app/portal-manage/dashboard-management/widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component.html
......@@ -21,19 +21,30 @@
<div class="header-content">
<div class="header-left">
<h4 class="widget-title">{{ title }}</h4>
<div *ngIf="showDataCount" class="data-count">
<i class="bi bi-list-ul"></i>
<span>{{ dataCount }} รายการ</span>
</div>
</div>
<div class="header-actions">
<div *ngIf="enableExport" class="export-button" (click)="exportData($event)">
<div *ngIf="enableExport" class="action-button export-button" (click)="exportData($event)" title="ส่งออกข้อมูล">
<i class="bi bi-download"></i>
</div>
<div *ngIf="enableRefresh && dataSource !== 'static'" class="refresh-button" (click)="refreshData($event)">
<i class="bi bi-arrow-clockwise"></i>
<div *ngIf="enableRefresh && dataSource !== 'static'" class="action-button refresh-button" (click)="refreshData($event)" title="รีเฟรชข้อมูล">
<i class="bi bi-arrow-clockwise" [class.rotating]="isLoading"></i>
</div>
<div *ngIf="showFilterBar" class="action-button filter-button" title="กรองข้อมูล">
<i class="bi bi-funnel"></i>
</div>
</div>
</div>
<div *ngIf="dataSource !== 'static'" class="data-source-info">
<i class="bi bi-info-circle"></i>
<span>{{ getDataSourceInfo() }}</span>
<span *ngIf="showLastUpdated" class="last-updated">
<i class="bi bi-clock"></i>
อัปเดตล่าสุด: {{ lastUpdated | date:'dd/MM/yyyy HH:mm' }}
</span>
</div>
</div>
......@@ -47,94 +58,156 @@
<div *ngIf="hasRequiredRole()" class="widget-body">
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
<div *ngIf="isLoading" class="loading-state">
<div class="loading-spinner">
<div class="spinner"></div>
</div>
<p class="loading-text">กำลังโหลดข้อมูล...</p>
</div>
<!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<i class="bi bi-exclamation-circle-fill text-4xl"></i>
<p class="mt-2 font-semibold">{{ errorMessage }}</p>
<div *ngIf="hasError" class="error-state">
<div class="error-icon">
<i class="bi bi-exclamation-circle-fill"></i>
</div>
<h3 class="error-title">เกิดข้อผิดพลาด</h3>
<p class="error-message">{{ errorMessage }}</p>
<button class="retry-button" (click)="refreshData($event)">
<i class="bi bi-arrow-clockwise"></i>
ลองใหม่
</button>
</div>
<!-- Empty State -->
<div *ngIf="!isLoading && !hasError && dataCount === 0" class="empty-state">
<div class="empty-icon">
<i class="bi bi-table"></i>
</div>
<h3 class="empty-title">ไม่มีข้อมูล</h3>
<p class="empty-message">ไม่พบข้อมูลที่จะแสดงในตาราง</p>
</div>
<!-- Grid -->
<ejs-grid #grid *ngIf="!isLoading && !hasError"
[dataSource]="gridData"
[allowPaging]="enablePaging"
[pageSettings]="pageSettings"
[allowSorting]="enableSorting"
[allowFiltering]="enableFiltering"
[allowGrouping]="enableGrouping"
[toolbar]="showToolbar ? toolbar : []"
(toolbarClick)="toolbarClick($event)"
[allowExcelExport]="enableExport"
[allowPdfExport]="enableExport"
[searchSettings]="enableSearch ? searchSettings : null"
[groupSettings]="groupSettings"
[filterSettings]="filterSettings"
[editSettings]="enableEditing ? editSettings : { allowEditing: false }"
[selectionSettings]="enableRowSelection ? selectionOptions : { type: 'None' }"
[loadingIndicator]="loadingIndicator"
[query]="query"
[showColumnMenu]="showColumnMenu"
[allowReordering]="allowReordering"
[allowMultiSorting]="allowMultiSorting"
[columnMenuItems]="columnMenuItems"
(columnMenuClick)="onColumnMenuClick($event)"
(actionComplete)="actionComplete($event)"
(dataBound)="onDataBound($event)"
[height]="'100%'"
[allowResizing]="enableColumnResizing">
<e-columns>
<e-column *ngFor="let col of columns" [field]="col.field" [headerText]="col.headerText" [width]="col.width"
[format]="col.format" [textAlign]="col.textAlign" [isPrimaryKey]="col.isPrimaryKey" [editType]="col.editType"
[validationRules]="col.validationRules" [allowEditing]="col.allowEditing" [allowSorting]="col.allowSorting"
[allowFiltering]="col.allowFiltering" [visible]="col.visible" [type]="col.type">
<ng-template #headerTemplate let-data>
<span class="font-size-12px font-weight-700">{{ col.headerText }}</span>
</ng-template>
</e-column>
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesSum" [field]="col.field" [type]="'Sum'" [footerTemplate]="'Sum: ${Sum}'"
[groupFooterTemplate]="'Sum: ${Sum}'" [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesCount" [field]="col.field" [type]="'Count'"
[footerTemplate]="'Count: ${Count}'" [groupFooterTemplate]="'Count: ${Count}'"
[groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesAvg" [field]="col.field" [type]="'Average'"
[footerTemplate]="'Average: ${Average}'" [groupFooterTemplate]="'Average: ${Average}'"
[groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesMin" [field]="col.field" [type]="'Min'" [footerTemplate]="'Min: ${Min}'"
[groupFooterTemplate]="'Min: ${Min}'" [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesMax" [field]="col.field" [type]="'Max'" [footerTemplate]="'Max: ${Max}'"
[groupFooterTemplate]="'Max: ${Max}'" [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
<div *ngIf="!isLoading && !hasError && dataCount > 0" class="grid-container">
<ejs-grid #grid
[dataSource]="gridData"
[allowPaging]="allowPaging"
[pageSettings]="pageSettings"
[allowSorting]="allowSorting"
[allowFiltering]="allowAdvancedFiltering"
[allowGrouping]="allowGrouping"
[toolbar]="showToolbar ? toolbar : []"
(toolbarClick)="toolbarClick($event)"
[allowExcelExport]="enableExport"
[allowPdfExport]="enableExport"
[searchSettings]="allowSearching ? searchSettings : null"
[groupSettings]="groupSettings"
[filterSettings]="filterSettings"
[editSettings]="allowEditing ? editSettings : { allowEditing: false }"
[selectionSettings]="allowSelection ? selectionOptions : { type: 'None' }"
[loadingIndicator]="loadingIndicator"
[query]="query"
[showColumnMenu]="showColumnMenu"
[allowReordering]="allowReordering"
[allowMultiSorting]="allowMultiSorting"
[columnMenuItems]="columnMenuItems"
(columnMenuClick)="onColumnMenuClick($event)"
(actionComplete)="actionComplete($event)"
(dataBound)="onDataBound($event)"
[height]="'100%'"
[allowResizing]="allowResizing"
[rowHeight]="rowHeight">
<e-columns>
<e-column *ngFor="let col of columns"
[field]="col.field"
[headerText]="col.headerText"
[width]="col.width"
[format]="col.format"
[textAlign]="col.textAlign"
[isPrimaryKey]="col.isPrimaryKey"
[editType]="col.editType"
[validationRules]="col.validationRules"
[allowEditing]="col.allowEditing"
[allowSorting]="col.allowSorting"
[allowFiltering]="col.allowFiltering"
[visible]="col.visible"
[type]="col.type">
<ng-template #headerTemplate let-data>
<div class="header-cell">
<span class="header-text">{{ col.headerText }}</span>
<div *ngIf="col.sortable" class="sort-indicator">
<i class="bi bi-arrow-up-down"></i>
</div>
</div>
</ng-template>
</e-column>
</e-columns>
<e-aggregates *ngIf="showAggregate">
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesSum"
[field]="col.field"
[type]="'Sum'"
[footerTemplate]="'รวม: ${Sum}'"
[groupFooterTemplate]="'รวม: ${Sum}'"
[groupCaptionTemplate]="col.groupCaptionTemplate"
[format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesCount"
[field]="col.field"
[type]="'Count'"
[footerTemplate]="'จำนวน: ${Count}'"
[groupFooterTemplate]="'จำนวน: ${Count}'"
[groupCaptionTemplate]="col.groupCaptionTemplate"
[format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesAvg"
[field]="col.field"
[type]="'Average'"
[footerTemplate]="'เฉลี่ย: ${Average}'"
[groupFooterTemplate]="'เฉลี่ย: ${Average}'"
[groupCaptionTemplate]="col.groupCaptionTemplate"
[format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesMin"
[field]="col.field"
[type]="'Min'"
[footerTemplate]="'ต่ำสุด: ${Min}'"
[groupFooterTemplate]="'ต่ำสุด: ${Min}'"
[groupCaptionTemplate]="col.groupCaptionTemplate"
[format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesMax"
[field]="col.field"
[type]="'Max'"
[footerTemplate]="'สูงสุด: ${Max}'"
[groupFooterTemplate]="'สูงสุด: ${Max}'"
[groupCaptionTemplate]="col.groupCaptionTemplate"
[format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
</div>
</div>
</div>
src/app/portal-manage/dashboard-management/widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component.scss
......@@ -9,9 +9,10 @@
// Widget Header
.widget-header {
flex-shrink: 0;
padding: 12px 16px;
padding: 16px 20px;
border-bottom: 1px solid rgba(229, 231, 235, 0.5);
position: relative;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(249, 250, 251, 0.9));
.header-content {
display: flex;
......@@ -21,13 +22,30 @@
.header-left {
display: flex;
align-items: center;
gap: 8px;
gap: 12px;
.widget-title {
font-size: 16px;
font-weight: 600;
font-size: 18px;
font-weight: 700;
margin: 0;
color: inherit;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.data-count {
display: flex;
align-items: center;
gap: 6px;
background: rgba(59, 130, 246, 0.1);
padding: 4px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
color: #3B82F6;
i {
font-size: 10px;
}
}
}
......@@ -35,33 +53,40 @@
display: flex;
gap: 8px;
.export-button,
.refresh-button {
width: 32px;
height: 32px;
border-radius: 6px;
.action-button {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
background: rgba(255, 255, 255, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: rgba(255, 255, 255, 0.8);
color: inherit;
opacity: 0.7;
border: 1px solid rgba(229, 231, 235, 0.5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
&:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.3);
color: #3B82F6;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
&:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
i {
font-size: 14px;
}
&.rotating i {
animation: spin 1s linear infinite;
}
}
}
}
......@@ -69,21 +94,35 @@
.data-source-info {
position: absolute;
top: 100%;
left: 16px;
right: 16px;
background: rgba(59, 130, 246, 0.1);
left: 20px;
right: 20px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.1));
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 4px;
padding: 4px 8px;
font-size: 11px;
border-radius: 8px;
padding: 8px 12px;
font-size: 12px;
color: #3B82F6;
display: flex;
align-items: center;
gap: 4px;
margin-top: 4px;
justify-content: space-between;
margin-top: 8px;
backdrop-filter: blur(10px);
i {
font-size: 10px;
font-size: 12px;
margin-right: 6px;
}
.last-updated {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
opacity: 0.8;
i {
font-size: 10px;
}
}
}
}
......@@ -122,6 +161,147 @@
overflow: hidden;
}
// Loading State
.loading-state {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
background: linear-gradient(135deg, rgba(249, 250, 251, 0.8), rgba(243, 244, 246, 0.8));
.loading-spinner {
margin-bottom: 16px;
.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(59, 130, 246, 0.1);
border-top: 4px solid #3B82F6;
border-radius: 50%;
animation: spin 1s linear infinite;
}
}
.loading-text {
font-size: 14px;
color: #6B7280;
font-weight: 500;
margin: 0;
}
}
// Error State
.error-state {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
background: linear-gradient(135deg, rgba(254, 242, 242, 0.8), rgba(252, 231, 243, 0.8));
.error-icon {
margin-bottom: 16px;
i {
font-size: 48px;
color: #EF4444;
}
}
.error-title {
font-size: 18px;
font-weight: 600;
color: #DC2626;
margin: 0 0 8px 0;
}
.error-message {
font-size: 14px;
color: #6B7280;
text-align: center;
margin: 0 0 20px 0;
max-width: 300px;
}
.retry-button {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: #EF4444;
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background: #DC2626;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
&:active {
transform: translateY(0);
}
i {
font-size: 12px;
}
}
}
// Empty State
.empty-state {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
background: linear-gradient(135deg, rgba(249, 250, 251, 0.8), rgba(243, 244, 246, 0.8));
.empty-icon {
margin-bottom: 16px;
i {
font-size: 48px;
color: #9CA3AF;
}
}
.empty-title {
font-size: 18px;
font-weight: 600;
color: #374151;
margin: 0 0 8px 0;
}
.empty-message {
font-size: 14px;
color: #6B7280;
text-align: center;
margin: 0;
max-width: 300px;
}
}
// Grid Container
.grid-container {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
// Interaction States
&.hover-enabled:hover {
transform: translateY(-2px);
......@@ -189,6 +369,11 @@
}
// Animation Keyframes
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes fadeIn {
from {
opacity: 0;
......@@ -238,6 +423,15 @@
}
}
@keyframes shimmer {
0% {
background-position: -200px 0;
}
100% {
background-position: calc(200px + 100%) 0;
}
}
// Aspect Ratio Constraints
&.aspect-ratio-16-9 {
aspect-ratio: 16/9;
......@@ -312,38 +506,50 @@
}
.e-pager {
background-color: rgba(249, 250, 251, 0.8);
background: linear-gradient(135deg, rgba(249, 250, 251, 0.9), rgba(243, 244, 246, 0.9));
border-top: 1px solid rgba(229, 231, 235, 0.5);
padding: 8px 16px;
padding: 12px 20px;
backdrop-filter: blur(10px);
.e-pagercontainer {
.e-pagercontrol {
color: inherit;
font-size: 12px;
color: #6B7280;
font-size: 13px;
font-weight: 500;
}
}
}
.e-toolbar {
background-color: rgba(249, 250, 251, 0.8);
background: linear-gradient(135deg, rgba(249, 250, 251, 0.9), rgba(243, 244, 246, 0.9));
border-bottom: 1px solid rgba(229, 231, 235, 0.5);
padding: 8px 16px;
padding: 12px 20px;
backdrop-filter: blur(10px);
.e-toolbaritems {
.e-toolbaritem {
.e-btn {
background-color: transparent;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(229, 231, 235, 0.5);
color: inherit;
font-size: 12px;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.2s ease;
color: #6B7280;
font-size: 13px;
font-weight: 500;
padding: 8px 16px;
border-radius: 6px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
&:hover {
background-color: rgba(59, 130, 246, 0.1);
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.3);
color: #3B82F6;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
&:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
}
}
......
src/app/portal-manage/dashboard-management/widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component.ts
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, ResizeService } from '@syncfusion/ej2-angular-grids';
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, ResizeService, FreezeService, VirtualScrollService, InfiniteScrollService, LazyLoadGroupService, RowDDService, ContextMenuService } from '@syncfusion/ej2-angular-grids';
import { MenuEventArgs } from '@syncfusion/ej2-navigations';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { DataManager, Query } from '@syncfusion/ej2-data';
......@@ -53,7 +53,28 @@ L10n.load({
selector: 'app-syncfusion-datagrid-widget',
standalone: true,
imports: [CommonModule, GridModule],
providers: [PageService, SortService, FilterService, GroupService, ToolbarService, ExcelExportService, PdfExportService, AggregateService, ColumnMenuService, DetailRowService, ReorderService, EditService, SearchService, ResizeService],
providers: [
PageService,
SortService,
FilterService,
GroupService,
ToolbarService,
ExcelExportService,
PdfExportService,
AggregateService,
ColumnMenuService,
DetailRowService,
ReorderService,
EditService,
SearchService,
ResizeService,
FreezeService,
VirtualScrollService,
InfiniteScrollService,
LazyLoadGroupService,
RowDDService,
ContextMenuService
],
templateUrl: './syncfusion-datagrid-widget.component.html',
styleUrls: ['./syncfusion-datagrid-widget.component.scss']
})
......@@ -209,7 +230,7 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
public selectedRowColor: string = '#DBEAFE';
public hoverRowColor: string = '#F3F4F6';
// New configuration properties from SyncfusionDatagridConfigComponent
// Enhanced configuration properties from SyncfusionDatagridConfigComponent
public allowPaging: boolean = true;
public allowPageSize: boolean = true;
public showPageInfo: boolean = true;
......@@ -243,6 +264,14 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
public includeHeaders: boolean = true;
public includeFilters: boolean = false;
// Enhanced UI properties
public dataCount: number = 0;
public lastUpdated: Date = new Date();
public override originalData: any[] = [];
// Enhanced styling properties
public shadow: string = 'medium';
// Size options for configuration
public sizeOptions = [
{ id: 'small', label: 'Small', description: '400x300px' },
......@@ -445,7 +474,7 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
this.selectedRowColor = this.configObj.selectedRowColor || '#DBEAFE';
this.hoverRowColor = this.configObj.hoverRowColor || '#F3F4F6';
// New configuration properties
// Enhanced configuration properties
this.allowPaging = this.configObj.allowPaging !== undefined ? this.configObj.allowPaging : true;
this.allowPageSize = this.configObj.allowPageSize !== undefined ? this.configObj.allowPageSize : true;
this.showPageInfo = this.configObj.showPageInfo !== undefined ? this.configObj.showPageInfo : true;
......@@ -481,6 +510,15 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
this.exportFilename = this.configObj.exportFilename || 'data-export';
this.includeHeaders = this.configObj.includeHeaders !== undefined ? this.configObj.includeHeaders : true;
this.includeFilters = this.configObj.includeFilters !== undefined ? this.configObj.includeFilters : false;
// Enhanced UI properties
this.dataCount = this.configObj.dataCount || 0;
this.lastUpdated = this.configObj.lastUpdated ? new Date(this.configObj.lastUpdated) : new Date();
// Enhanced styling properties
this.shadow = this.configObj.shadow || 'medium';
// Security configuration
this.requireAuth = this.configObj.requireAuth !== undefined ? this.configObj.requireAuth : false;
this.allowedRoles = this.configObj.allowedRoles || '';
this.permissionLevel = this.configObj.permissionLevel || 'read';
......@@ -522,6 +560,11 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
}
onDataUpdate(data: any[]): void {
// Store original data
this.originalData = data || [];
this.dataCount = this.originalData.length;
this.lastUpdated = new Date();
// Transform data if transform function is provided
let transformedData = this.transformData(data);
......@@ -543,17 +586,30 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
this.columns = Object.keys(transformedData[0]).map(key => ({
field: key,
headerText: this.formatHeader(key),
width: 150
width: 150,
textAlign: 'left',
format: 'none',
visible: true,
sortable: this.allowSorting,
filterable: this.allowAdvancedFiltering
}));
}
// Update loading and error states
this.isLoading = false;
this.hasError = false;
}
onDataBound(args: any): void {
// Apply perspective after data is loaded and rendered, but only once.
if (this.perspective && !this.isPerspectiveApplied && this.grid) {
setTimeout(() => {
this.setWidgetState(this.perspective as string);
}, 50); // Small delay to ensure rendering is complete
try {
setTimeout(() => {
this.setWidgetState(this.perspective as string);
}, 50); // Small delay to ensure rendering is complete
} catch (error) {
console.warn('Error applying perspective to grid:', error);
}
}
}
......@@ -673,25 +729,31 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
toolbarClick(args: ClickEventArgs): void {
if (!this.grid || !args?.item?.id) return;
const fileName = `${this.title}.xlsx`;
if (args.item.id.includes('_excelexport')) {
let exportProperties: ExcelExportProperties = {
columns: this.columns.map(col => ({
field: col.field,
headerText: col.headerText
})) as Column[]
};
this.grid.excelExport(exportProperties);
} else if (args.item.id.includes('_pdfexport')) {
this.grid.pdfExport({ fileName: `${this.title}.pdf` });
} else if (args.item.id.includes('_csvexport')) {
let exportColumns = this.columns.map(col => ({
field: col.field!,
headerText: col.headerText!
}));
this.grid.csvExport({ columns: exportColumns as Column[] });
} else if (args.item.id.includes('_print')) {
this.grid.print();
try {
const fileName = `${this.title}.xlsx`;
if (args.item.id.includes('_excelexport')) {
let exportProperties: ExcelExportProperties = {
columns: this.columns.map(col => ({
field: col.field,
headerText: col.headerText
})) as Column[]
};
this.grid.excelExport(exportProperties);
} else if (args.item.id.includes('_pdfexport')) {
this.grid.pdfExport({ fileName: `${this.title}.pdf` });
} else if (args.item.id.includes('_csvexport')) {
let exportColumns = this.columns.map(col => ({
field: col.field!,
headerText: col.headerText!
}));
this.grid.csvExport({ columns: exportColumns as Column[] });
} else if (args.item.id.includes('_print')) {
this.grid.print();
}
} catch (error) {
console.error('Error in toolbar click:', error);
this.hasError = true;
this.errorMessage = 'Export failed. Please try again.';
}
}
......@@ -704,11 +766,12 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
onColumnMenuClick(args: MenuEventArgs): void {
if (!args.item?.id || !this.grid) { return; }
if (args.item.id.startsWith('aggregate_')) {
const colField = (args as any)?.column?.field;
if (!colField) { return; }
try {
if (args.item.id.startsWith('aggregate_')) {
const colField = (args as any)?.column?.field;
if (!colField) { return; }
const selectedAgg = args.item.id.split('_')[1];
const selectedAgg = args.item.id.split('_')[1];
if (selectedAgg === 'sum') {
if (this.aggregatesSum.find(a => a.field === colField)) {
......@@ -761,8 +824,11 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
});
}
}
this.grid?.refreshColumns(); // Refresh columns to show/hide aggregates
this.grid?.refresh(); // Refresh grid to recalculate aggregates
this.grid?.refreshColumns(); // Refresh columns to show/hide aggregates
this.grid?.refresh(); // Refresh grid to recalculate aggregates
}
} catch (error) {
console.error('Error in column menu click:', error);
}
}
......
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