Skip to content

P
portal-apps-manage
Commit 198135ee by Ooh-Ao
Options

config

parent cf761296
Showing with 575 additions and 37 deletions
src/app/portal-manage/dashboard-management/widgets/configs/syncfusion-datagrid-config/syncfusion-datagrid-config.component.ts
...@@ -74,28 +74,177 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con ...@@ -74,28 +74,177 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
<!-- Size Configuration --> <!-- Size Configuration -->
<div class="config-section"> <div class="config-section">
<h3 class="section-title text-blue-600">Size Configuration</h3> <h3 class="section-title text-blue-600">Size Configuration</h3>
<div class="size-config">
<div <!-- Size Presets -->
*ngFor="let option of sizeOptions" <div class="size-presets">
class="size-option" <h4 class="text-sm font-medium text-gray-700 mb-3">Quick Presets</h4>
[class.selected]="currentConfig.sizeOption === option.id" <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
(click)="setSizeOption(option.id)"> <div
<h4>{{ option.label }}</h4> *ngFor="let option of sizeOptions"
<p>{{ option.description }}</p> class="size-preset-card"
[class.selected]="currentConfig.sizeOption === option.id"
(click)="setSizeOption(option.id)">
<div class="preset-icon">
<i [class]="getSizeIcon(option.id)"></i>
</div>
<div class="preset-info">
<h5>{{ option.label }}</h5>
<p>{{ option.description }}</p>
</div>
</div>
</div> </div>
</div> </div>
<div *ngIf="currentConfig.sizeOption === 'custom'" class="grid grid-cols-2 gap-4 mt-4"> <!-- Custom Size Configuration -->
<mat-form-field appearance="fill"> <div *ngIf="currentConfig.sizeOption === 'custom'" class="custom-size-config mt-6">
<mat-label>Width</mat-label> <h4 class="text-sm font-medium text-gray-700 mb-4">Custom Dimensions</h4>
<input matInput [(ngModel)]="currentConfig.width" name="width" placeholder="e.g., 100%, 800px">
<mat-hint>Grid width</mat-hint> <!-- Width Configuration -->
</mat-form-field> <div class="dimension-group">
<mat-form-field appearance="fill"> <label class="dimension-label">Width</label>
<mat-label>Height</mat-label> <div class="dimension-controls">
<input matInput [(ngModel)]="currentConfig.height" name="height" placeholder="e.g., 100%, 400px"> <mat-form-field appearance="outline" class="flex-1">
<mat-hint>Grid height</mat-hint> <mat-label>Width Value</mat-label>
</mat-form-field> <input matInput [(ngModel)]="currentConfig.width" name="width"
placeholder="e.g., 300px, 50%, 100%, auto">
<mat-hint>Width value with unit</mat-hint>
</mat-form-field>
<mat-form-field appearance="outline" class="w-32">
<mat-label>Unit</mat-label>
<mat-select [(ngModel)]="currentConfig.widthUnit" name="widthUnit">
<mat-option value="px">px</mat-option>
<mat-option value="%">%</mat-option>
<mat-option value="rem">rem</mat-option>
<mat-option value="em">em</mat-option>
<mat-option value="vh">vh</mat-option>
<mat-option value="vw">vw</mat-option>
<mat-option value="auto">auto</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<!-- Height Configuration -->
<div class="dimension-group">
<label class="dimension-label">Height</label>
<div class="dimension-controls">
<mat-form-field appearance="outline" class="flex-1">
<mat-label>Height Value</mat-label>
<input matInput [(ngModel)]="currentConfig.height" name="height"
placeholder="e.g., 200px, 50%, 100%, auto">
<mat-hint>Height value with unit</mat-hint>
</mat-form-field>
<mat-form-field appearance="outline" class="w-32">
<mat-label>Unit</mat-label>
<mat-select [(ngModel)]="currentConfig.heightUnit" name="heightUnit">
<mat-option value="px">px</mat-option>
<mat-option value="%">%</mat-option>
<mat-option value="rem">rem</mat-option>
<mat-option value="em">em</mat-option>
<mat-option value="vh">vh</mat-option>
<mat-option value="vw">vw</mat-option>
<mat-option value="auto">auto</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<!-- Full Panel Options -->
<div class="full-panel-options">
<h5 class="text-sm font-medium text-gray-600 mb-3">Full Panel Options</h5>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="full-panel-card" (click)="setFullPanel('width')"
[class.selected]="currentConfig.fullWidth">
<div class="card-icon">
<i class="fas fa-arrows-alt-h"></i>
</div>
<div class="card-content">
<h6>Full Width</h6>
<p>100% width of container</p>
</div>
<mat-checkbox [(ngModel)]="currentConfig.fullWidth"
(change)="onFullWidthChange($event)"></mat-checkbox>
</div>
<div class="full-panel-card" (click)="setFullPanel('height')"
[class.selected]="currentConfig.fullHeight">
<div class="card-icon">
<i class="fas fa-arrows-alt-v"></i>
</div>
<div class="card-content">
<h6>Full Height</h6>
<p>100% height of container</p>
</div>
<mat-checkbox [(ngModel)]="currentConfig.fullHeight"
(change)="onFullHeightChange($event)"></mat-checkbox>
</div>
</div>
</div>
<!-- Responsive Settings -->
<div class="responsive-settings mt-6">
<h5 class="text-sm font-medium text-gray-600 mb-3">Responsive Settings</h5>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<mat-form-field appearance="outline">
<mat-label>Min Width</mat-label>
<input matInput type="number" [(ngModel)]="currentConfig.minWidth"
name="minWidth" min="0" placeholder="400">
<mat-hint>Minimum width in pixels</mat-hint>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Min Height</mat-label>
<input matInput type="number" [(ngModel)]="currentConfig.minHeight"
name="minHeight" min="0" placeholder="300">
<mat-hint>Minimum height in pixels</mat-hint>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Max Width</mat-label>
<input matInput type="number" [(ngModel)]="currentConfig.maxWidth"
name="maxWidth" min="0" placeholder="1200">
<mat-hint>Maximum width in pixels</mat-hint>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Max Height</mat-label>
<input matInput type="number" [(ngModel)]="currentConfig.maxHeight"
name="maxHeight" min="0" placeholder="800">
<mat-hint>Maximum height in pixels</mat-hint>
</mat-form-field>
</div>
</div>
<!-- Aspect Ratio -->
<div class="aspect-ratio-settings mt-6">
<h5 class="text-sm font-medium text-gray-600 mb-3">Aspect Ratio</h5>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<div class="aspect-ratio-option"
[class.selected]="currentConfig.aspectRatio === 'auto'"
(click)="setAspectRatio('auto')">
<div class="ratio-icon">📐</div>
<span>Auto</span>
</div>
<div class="aspect-ratio-option"
[class.selected]="currentConfig.aspectRatio === '16:9'"
(click)="setAspectRatio('16:9')">
<div class="ratio-icon">📺</div>
<span>16:9</span>
</div>
<div class="aspect-ratio-option"
[class.selected]="currentConfig.aspectRatio === '4:3'"
(click)="setAspectRatio('4:3')">
<div class="ratio-icon">📱</div>
<span>4:3</span>
</div>
<div class="aspect-ratio-option"
[class.selected]="currentConfig.aspectRatio === '1:1'"
(click)="setAspectRatio('1:1')">
<div class="ratio-icon">⬜</div>
<span>1:1</span>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -963,4 +1112,98 @@ export class SyncfusionDatagridConfigComponent extends BaseConfigComponent imple ...@@ -963,4 +1112,98 @@ export class SyncfusionDatagridConfigComponent extends BaseConfigComponent imple
removeAggregateColumn(index: number) { removeAggregateColumn(index: number) {
this.removeArrayItem('aggregateColumns', index); this.removeArrayItem('aggregateColumns', index);
} }
// Size configuration methods
override sizeOptions = [
{ id: 'small', label: 'Small', description: '400x300px' },
{ id: 'medium', label: 'Medium', description: '600x400px' },
{ id: 'large', label: 'Large', description: '800x600px' },
{ id: 'full-width', label: 'Full Width', description: '100% width' },
{ id: 'full-height', label: 'Full Height', description: '100% height' },
{ id: 'full-panel', label: 'Full Panel', description: '100% width & height' },
{ id: 'custom', label: 'Custom', description: 'Custom size' }
];
override setSizeOption(optionId: string): void {
this.currentConfig.sizeOption = optionId;
if (optionId === 'small') {
this.currentConfig.width = 400;
this.currentConfig.height = 300;
this.currentConfig.fullWidth = false;
this.currentConfig.fullHeight = false;
} else if (optionId === 'medium') {
this.currentConfig.width = 600;
this.currentConfig.height = 400;
this.currentConfig.fullWidth = false;
this.currentConfig.fullHeight = false;
} else if (optionId === 'large') {
this.currentConfig.width = 800;
this.currentConfig.height = 600;
this.currentConfig.fullWidth = false;
this.currentConfig.fullHeight = false;
} else if (optionId === 'full-width') {
this.currentConfig.width = 100;
this.currentConfig.height = 400;
this.currentConfig.widthUnit = '%';
this.currentConfig.fullWidth = true;
this.currentConfig.fullHeight = false;
} else if (optionId === 'full-height') {
this.currentConfig.width = 600;
this.currentConfig.height = 100;
this.currentConfig.heightUnit = '%';
this.currentConfig.fullWidth = false;
this.currentConfig.fullHeight = true;
} else if (optionId === 'full-panel') {
this.currentConfig.width = 100;
this.currentConfig.height = 100;
this.currentConfig.widthUnit = '%';
this.currentConfig.heightUnit = '%';
this.currentConfig.fullWidth = true;
this.currentConfig.fullHeight = true;
}
this.configChange.emit(this.currentConfig);
}
getSizeIcon(optionId: string): string {
const iconMap: { [key: string]: string } = {
'small': 'fas fa-expand-arrows-alt',
'medium': 'fas fa-th-large',
'large': 'fas fa-expand',
'full-width': 'fas fa-arrows-alt-h',
'full-height': 'fas fa-arrows-alt-v',
'full-panel': 'fas fa-expand-arrows-alt',
'custom': 'fas fa-cog'
};
return iconMap[optionId] || 'fas fa-th';
}
setFullPanel(type: 'width' | 'height'): void {
if (type === 'width') {
this.currentConfig.fullWidth = !this.currentConfig.fullWidth;
if (this.currentConfig.fullWidth) {
this.currentConfig.width = 100;
this.currentConfig.widthUnit = '%';
}
} else {
this.currentConfig.fullHeight = !this.currentConfig.fullHeight;
if (this.currentConfig.fullHeight) {
this.currentConfig.height = 100;
this.currentConfig.heightUnit = '%';
}
}
this.configChange.emit(this.currentConfig);
}
onFullWidthChange(event: any): void {
this.setFullPanel('width');
}
onFullHeightChange(event: any): void {
this.setFullPanel('height');
}
setAspectRatio(ratio: string): void {
this.currentConfig.aspectRatio = ratio;
this.configChange.emit(this.currentConfig);
}
} }
src/app/portal-manage/dashboard-management/widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component.ts
...@@ -100,6 +100,19 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -100,6 +100,19 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
public fontFamily: string = 'system-ui, -apple-system, sans-serif'; public fontFamily: string = 'system-ui, -apple-system, sans-serif';
public customCSS: string = ''; public customCSS: string = '';
// New style properties
public backgroundType: string = 'solid';
public gradientStartColor: string = '#3B82F6';
public gradientEndColor: string = '#1E40AF';
public gradientDirection: string = '135deg';
public gradientType: string = 'linear';
public backgroundImage: string = '';
public backgroundSize: string = 'cover';
public textShadow: string = 'none';
public boxShadow: string = 'medium';
public hoverEffect: string = 'scale';
public transitionDuration: number = 300;
// Animation properties // Animation properties
public enableAnimations: boolean = true; public enableAnimations: boolean = true;
public animationType: string = 'fade'; public animationType: string = 'fade';
...@@ -116,6 +129,21 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -116,6 +129,21 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
public enableRefresh: boolean = true; public enableRefresh: boolean = true;
public clickAction: string = 'none'; public clickAction: string = 'none';
public customClickHandler: string = ''; public customClickHandler: string = '';
public tooltipContent: string = '';
public enableKeyboard: boolean = true;
public enableFocus: boolean = true;
// Conditional formatting properties
public enableConditionalFormatting: boolean = false;
public conditionField: string = '';
public conditionOperator: string = 'greater_than';
public conditionValue: string = '';
public trueColor: string = '#10B981';
public falseColor: string = '#EF4444';
public trueIcon: string = 'check-circle';
public falseIcon: string = 'x-circle';
public showConditionalIcon: boolean = false;
public animateConditionalChange: boolean = true;
// Layout properties // Layout properties
public width: number = 600; public width: number = 600;
...@@ -126,6 +154,11 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -126,6 +154,11 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
public maxHeight: number = 800; public maxHeight: number = 800;
public aspectRatio: string = 'auto'; public aspectRatio: string = 'auto';
public responsive: boolean = true; public responsive: boolean = true;
public widthUnit: string = 'px';
public heightUnit: string = 'px';
public fullWidth: boolean = false;
public fullHeight: boolean = false;
public sizeOption: string = 'medium';
// Data properties // Data properties
public dataSource: string = 'static'; public dataSource: string = 'static';
...@@ -134,8 +167,25 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -134,8 +167,25 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
public cacheEnabled: boolean = false; public cacheEnabled: boolean = false;
public cacheDuration: number = 300; public cacheDuration: number = 300;
public dataTransform: string = ''; public dataTransform: string = '';
public dataValidation: string = 'none';
// Security properties (moved to new configuration section) public showDataCount: boolean = false;
public showLastUpdated: boolean = false;
public enableFilter: boolean = false;
public filterField: string = '';
public filterOperator: string = 'equals';
public filterValue: string = '';
public filterLabel: string = '';
// Security properties
public requireAuth: boolean = false;
public allowedRoles: string = '';
public permissionLevel: string = 'read';
public dataEncryption: boolean = false;
public auditLog: boolean = false;
public rateLimit: number = 0;
public sessionTimeout: number = 30;
public requireHttps: boolean = false;
public enableCors: boolean = true;
// Grid-specific properties // Grid-specific properties
public enablePaging: boolean = true; public enablePaging: boolean = true;
...@@ -192,13 +242,17 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -192,13 +242,17 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
public exportFilename: string = 'data-export'; public exportFilename: string = 'data-export';
public includeHeaders: boolean = true; public includeHeaders: boolean = true;
public includeFilters: boolean = false; public includeFilters: boolean = false;
public requireAuth: boolean = false;
public allowedRoles: string = ''; // Size options for configuration
public permissionLevel: string = 'read'; public sizeOptions = [
public dataEncryption: boolean = false; { id: 'small', label: 'Small', description: '400x300px' },
public auditLog: boolean = false; { id: 'medium', label: 'Medium', description: '600x400px' },
public rateLimit: number = 0; { id: 'large', label: 'Large', description: '800x600px' },
public sessionTimeout: number = 30; { id: 'full-width', label: 'Full Width', description: '100% width' },
{ id: 'full-height', label: 'Full Height', description: '100% height' },
{ id: 'full-panel', label: 'Full Panel', description: '100% width & height' },
{ id: 'custom', label: 'Custom', description: 'Custom size' }
];
constructor( constructor(
protected override dashboardStateService: DashboardStateService, protected override dashboardStateService: DashboardStateService,
...@@ -278,6 +332,19 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -278,6 +332,19 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
this.fontFamily = this.configObj.fontFamily || 'system-ui, -apple-system, sans-serif'; this.fontFamily = this.configObj.fontFamily || 'system-ui, -apple-system, sans-serif';
this.customCSS = this.configObj.customCSS || ''; this.customCSS = this.configObj.customCSS || '';
// New style configuration
this.backgroundType = this.configObj.backgroundType || 'solid';
this.gradientStartColor = this.configObj.gradientStartColor || '#3B82F6';
this.gradientEndColor = this.configObj.gradientEndColor || '#1E40AF';
this.gradientDirection = this.configObj.gradientDirection || '135deg';
this.gradientType = this.configObj.gradientType || 'linear';
this.backgroundImage = this.configObj.backgroundImage || '';
this.backgroundSize = this.configObj.backgroundSize || 'cover';
this.textShadow = this.configObj.textShadow || 'none';
this.boxShadow = this.configObj.boxShadow || 'medium';
this.hoverEffect = this.configObj.hoverEffect || 'scale';
this.transitionDuration = this.configObj.transitionDuration || 300;
// Animation configuration // Animation configuration
this.enableAnimations = this.configObj.enableAnimations !== undefined ? this.configObj.enableAnimations : true; this.enableAnimations = this.configObj.enableAnimations !== undefined ? this.configObj.enableAnimations : true;
this.animationType = this.configObj.animationType || 'fade'; this.animationType = this.configObj.animationType || 'fade';
...@@ -304,6 +371,11 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -304,6 +371,11 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
this.maxHeight = this.configObj.maxHeight || 800; this.maxHeight = this.configObj.maxHeight || 800;
this.aspectRatio = this.configObj.aspectRatio || 'auto'; this.aspectRatio = this.configObj.aspectRatio || 'auto';
this.responsive = this.configObj.responsive !== undefined ? this.configObj.responsive : true; this.responsive = this.configObj.responsive !== undefined ? this.configObj.responsive : true;
this.widthUnit = this.configObj.widthUnit || 'px';
this.heightUnit = this.configObj.heightUnit || 'px';
this.fullWidth = this.configObj.fullWidth !== undefined ? this.configObj.fullWidth : false;
this.fullHeight = this.configObj.fullHeight !== undefined ? this.configObj.fullHeight : false;
this.sizeOption = this.configObj.sizeOption || 'medium';
// Data configuration // Data configuration
this.dataSource = this.configObj.dataSource || 'static'; this.dataSource = this.configObj.dataSource || 'static';
...@@ -312,6 +384,37 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -312,6 +384,37 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
this.cacheEnabled = this.configObj.cacheEnabled !== undefined ? this.configObj.cacheEnabled : false; this.cacheEnabled = this.configObj.cacheEnabled !== undefined ? this.configObj.cacheEnabled : false;
this.cacheDuration = this.configObj.cacheDuration || 300; this.cacheDuration = this.configObj.cacheDuration || 300;
this.dataTransform = this.configObj.dataTransform || ''; this.dataTransform = this.configObj.dataTransform || '';
this.dataValidation = this.configObj.dataValidation || 'none';
this.showDataCount = this.configObj.showDataCount !== undefined ? this.configObj.showDataCount : false;
this.showLastUpdated = this.configObj.showLastUpdated !== undefined ? this.configObj.showLastUpdated : false;
this.enableFilter = this.configObj.enableFilter !== undefined ? this.configObj.enableFilter : false;
this.filterField = this.configObj.filterField || '';
this.filterOperator = this.configObj.filterOperator || 'equals';
this.filterValue = this.configObj.filterValue || '';
this.filterLabel = this.configObj.filterLabel || '';
// Security configuration
this.requireAuth = this.configObj.requireAuth !== undefined ? this.configObj.requireAuth : false;
this.allowedRoles = this.configObj.allowedRoles || '';
this.permissionLevel = this.configObj.permissionLevel || 'read';
this.dataEncryption = this.configObj.dataEncryption !== undefined ? this.configObj.dataEncryption : false;
this.auditLog = this.configObj.auditLog !== undefined ? this.configObj.auditLog : false;
this.rateLimit = this.configObj.rateLimit || 0;
this.sessionTimeout = this.configObj.sessionTimeout || 30;
this.requireHttps = this.configObj.requireHttps !== undefined ? this.configObj.requireHttps : false;
this.enableCors = this.configObj.enableCors !== undefined ? this.configObj.enableCors : true;
// Conditional formatting configuration
this.enableConditionalFormatting = this.configObj.enableConditionalFormatting !== undefined ? this.configObj.enableConditionalFormatting : false;
this.conditionField = this.configObj.conditionField || '';
this.conditionOperator = this.configObj.conditionOperator || 'greater_than';
this.conditionValue = this.configObj.conditionValue || '';
this.trueColor = this.configObj.trueColor || '#10B981';
this.falseColor = this.configObj.falseColor || '#EF4444';
this.trueIcon = this.configObj.trueIcon || 'check-circle';
this.falseIcon = this.configObj.falseIcon || 'x-circle';
this.showConditionalIcon = this.configObj.showConditionalIcon !== undefined ? this.configObj.showConditionalIcon : false;
this.animateConditionalChange = this.configObj.animateConditionalChange !== undefined ? this.configObj.animateConditionalChange : true;
// Security configuration // Security configuration
this.requireAuth = this.configObj.requireAuth !== undefined ? this.configObj.requireAuth : false; this.requireAuth = this.configObj.requireAuth !== undefined ? this.configObj.requireAuth : false;
...@@ -419,7 +522,19 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -419,7 +522,19 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
} }
onDataUpdate(data: any[]): void { onDataUpdate(data: any[]): void {
const transformedData = this.transformData(data); // Transform data if transform function is provided
let transformedData = this.transformData(data);
// Apply filtering if enabled
if (this.enableFilter && this.filterField && this.filterValue) {
transformedData = this.applyDataFilter(transformedData);
}
// Apply conditional formatting if enabled
if (this.enableConditionalFormatting) {
transformedData = this.applyConditionalFormatting(transformedData);
}
this.gridData = new DataManager(transformedData); this.gridData = new DataManager(transformedData);
if (this.configObj.columns && this.configObj.columns.length > 0) { if (this.configObj.columns && this.configObj.columns.length > 0) {
...@@ -673,23 +788,130 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -673,23 +788,130 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
// Helper method to get layout styles // Helper method to get layout styles
getLayoutStyles(): { [key: string]: string } { getLayoutStyles(): { [key: string]: string } {
const styles: { [key: string]: string } = { const styles: { [key: string]: string } = {};
'width': `${this.width}px`,
'height': `${this.height}px`, // Handle width
'min-width': `${this.minWidth}px`, if (this.fullWidth) {
'min-height': `${this.minHeight}px`, styles['width'] = '100%';
'max-width': `${this.maxWidth}px`, } else {
'max-height': `${this.maxHeight}px` styles['width'] = `${this.width}${this.widthUnit}`;
}; }
// Handle height
if (this.fullHeight) {
styles['height'] = '100%';
} else {
styles['height'] = `${this.height}${this.heightUnit}`;
}
// Handle min/max dimensions
if (this.minWidth > 0) {
styles['min-width'] = `${this.minWidth}px`;
}
if (this.minHeight > 0) {
styles['min-height'] = `${this.minHeight}px`;
}
if (this.maxWidth > 0) {
styles['max-width'] = `${this.maxWidth}px`;
}
if (this.maxHeight > 0) {
styles['max-height'] = `${this.maxHeight}px`;
}
// Handle aspect ratio // Handle aspect ratio
if (this.aspectRatio !== 'auto') { if (this.aspectRatio !== 'auto') {
styles['aspect-ratio'] = this.aspectRatio; styles['aspect-ratio'] = this.aspectRatio;
} }
// Handle responsive
if (this.responsive) {
styles['box-sizing'] = 'border-box';
}
return styles; return styles;
} }
// Size configuration methods
setSizeOption(optionId: string): void {
this.sizeOption = optionId;
if (optionId === 'small') {
this.width = 400;
this.height = 300;
this.fullWidth = false;
this.fullHeight = false;
} else if (optionId === 'medium') {
this.width = 600;
this.height = 400;
this.fullWidth = false;
this.fullHeight = false;
} else if (optionId === 'large') {
this.width = 800;
this.height = 600;
this.fullWidth = false;
this.fullHeight = false;
} else if (optionId === 'full-width') {
this.width = 100;
this.height = 400;
this.widthUnit = '%';
this.fullWidth = true;
this.fullHeight = false;
} else if (optionId === 'full-height') {
this.width = 600;
this.height = 100;
this.heightUnit = '%';
this.fullWidth = false;
this.fullHeight = true;
} else if (optionId === 'full-panel') {
this.width = 100;
this.height = 100;
this.widthUnit = '%';
this.heightUnit = '%';
this.fullWidth = true;
this.fullHeight = true;
}
}
getSizeIcon(optionId: string): string {
const iconMap: { [key: string]: string } = {
'small': 'fas fa-expand-arrows-alt',
'medium': 'fas fa-th-large',
'large': 'fas fa-expand',
'full-width': 'fas fa-arrows-alt-h',
'full-height': 'fas fa-arrows-alt-v',
'full-panel': 'fas fa-expand-arrows-alt',
'custom': 'fas fa-cog'
};
return iconMap[optionId] || 'fas fa-th';
}
setFullPanel(type: 'width' | 'height'): void {
if (type === 'width') {
this.fullWidth = !this.fullWidth;
if (this.fullWidth) {
this.width = 100;
this.widthUnit = '%';
}
} else {
this.fullHeight = !this.fullHeight;
if (this.fullHeight) {
this.height = 100;
this.heightUnit = '%';
}
}
}
onFullWidthChange(event: any): void {
this.setFullPanel('width');
}
onFullHeightChange(event: any): void {
this.setFullPanel('height');
}
setAspectRatio(ratio: string): void {
this.aspectRatio = ratio;
}
// Helper method to get animation styles // Helper method to get animation styles
getAnimationStyles(): { [key: string]: string } { getAnimationStyles(): { [key: string]: string } {
if (!this.enableAnimations) { if (!this.enableAnimations) {
...@@ -869,6 +1091,79 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple ...@@ -869,6 +1091,79 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
} }
} }
// Conditional formatting methods
applyConditionalFormatting(data: any[]): any[] {
if (!this.enableConditionalFormatting || !this.conditionField || !this.conditionValue) {
return data;
}
return data.map(item => {
const fieldValue = item[this.conditionField];
const conditionValue = Number(this.conditionValue);
let conditionMet = false;
switch (this.conditionOperator) {
case 'greater_than':
conditionMet = fieldValue > conditionValue;
break;
case 'less_than':
conditionMet = fieldValue < conditionValue;
break;
case 'equals':
conditionMet = fieldValue == conditionValue;
break;
case 'not_equals':
conditionMet = fieldValue != conditionValue;
break;
case 'greater_equal':
conditionMet = fieldValue >= conditionValue;
break;
case 'less_equal':
conditionMet = fieldValue <= conditionValue;
break;
}
return {
...item,
_conditionalColor: conditionMet ? this.trueColor : this.falseColor,
_conditionalIcon: this.showConditionalIcon ? (conditionMet ? this.trueIcon : this.falseIcon) : null
};
});
}
// Data filtering methods
applyDataFilter(data: any[]): any[] {
if (!this.enableFilter || !this.filterField || !this.filterValue) {
return data;
}
return data.filter(item => {
const fieldValue = item[this.filterField];
const filterValue = this.filterValue;
switch (this.filterOperator) {
case 'equals':
return fieldValue == filterValue;
case 'not_equals':
return fieldValue != filterValue;
case 'greater_than':
return Number(fieldValue) > Number(filterValue);
case 'less_than':
return Number(fieldValue) < Number(filterValue);
case 'contains':
return String(fieldValue).toLowerCase().includes(String(filterValue).toLowerCase());
case 'starts_with':
return String(fieldValue).toLowerCase().startsWith(String(filterValue).toLowerCase());
case 'ends_with':
return String(fieldValue).toLowerCase().endsWith(String(filterValue).toLowerCase());
default:
return true;
}
});
}
// Export data functionality // Export data functionality
exportData(event: Event): void { exportData(event: Event): void {
if (event) { if (event) {
......
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