diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.html index b2b3579..f27393a 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.html @@ -71,14 +71,17 @@ {{chartType.createdAt | date:'short'}} {{chartType.updatedAt | date:'short'}} - - - @@ -130,33 +133,33 @@ Component Name Component Type Display Label - Placeholder Required - Sort Order - Created At - Updated At Actions {{uiComponent.componentName}} {{uiComponent.componentType}} {{uiComponent.displayLabel}} - {{uiComponent.placeholder}} {{uiComponent.isRequired ? 'Yes' : 'No'}} - {{uiComponent.sortOrder}} - {{uiComponent.createdAt | date:'short'}} - {{uiComponent.updatedAt | date:'short'}} - - - + +
+ + + +
@@ -218,11 +221,13 @@ {{property.createdAt | date:'short'}} {{property.updatedAt | date:'short'}} - - @@ -287,11 +292,13 @@ {{template.createdAt | date:'short'}} {{template.updatedAt | date:'short'}} - - diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.scss index 29f401d..9a9198b 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.scss +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.scss @@ -61,4 +61,37 @@ clr-tab-content { padding: 15px 0; } +} + +.action-cell { + min-width: 120px; +} + +.action-buttons { + display: flex; + gap: 5px; + flex-wrap: nowrap; + align-items: center; +} + +.action-buttons .btn-icon { + min-width: 36px; + display: flex; + align-items: center; + justify-content: center; +} + +// Ensure icons are visible +cds-icon { + display: inline-block !important; +} + +clr-spinner { + margin: 0; +}cds-icon { + display: inline-block !important; +} + +clr-spinner { + margin: 0; } \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.ts index 1b7a85a..df35f13 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.ts @@ -389,17 +389,8 @@ export class ChartConfigManagerComponent implements OnInit { // Create a complete component object with only the ID const componentWithId = { - id: this.selectedUiComponent.id, - chartType: { id: 0, name: '', displayName: '', description: '', isActive: true, createdAt: '', updatedAt: '' }, - componentName: '', - componentType: '', - displayLabel: '', - placeholder: '', - isRequired: false, - sortOrder: 0, - createdAt: '', - updatedAt: '' - }; + id: this.selectedUiComponent.id + } as UiComponent; const componentPropertyData = { ...this.newComponentProperty, @@ -687,6 +678,18 @@ export class ChartConfigManagerComponent implements OnInit { this.loadDynamicFields(chartType.id); } + onUiComponentSelect(uiComponent: UiComponent): void { + this.selectedUiComponent = uiComponent; + this.loadComponentProperties(uiComponent.id); + // Scroll to the Component Properties tab + setTimeout(() => { + const element = document.querySelector('clr-tab[ng-reflect-ng-if="true"] button[clr-tab-link]:nth-child(3)'); + if (element) { + element.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); + } + }, 100); + } + resetForms(): void { this.newChartType = {}; this.newUiComponent = {}; diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.html index cf53d0c..15cee37 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.html @@ -104,29 +104,33 @@ Component Name Component Type Display Label - Placeholder Required - Sort Order Actions {{uiComponent.componentName}} {{uiComponent.componentType}} {{uiComponent.displayLabel}} - {{uiComponent.placeholder}} {{uiComponent.isRequired ? 'Yes' : 'No'}} - {{uiComponent.sortOrder}} - - - + +
+ + + +
@@ -138,7 +142,7 @@ -
+

Edit UI Component

@@ -188,6 +192,113 @@
+ +
+
+
+
+

Properties for {{selectedUiComponent?.componentName}}

+
+
+ +
+
+
+ + +
+
+ + + + + + + + + + + + + + + +
+ + +
+
+
+ + +
+ + Property Name + Property Value + Property Type + Created At + Updated At + Actions + + + {{property.propertyName}} + {{property.propertyValue}} + {{property.propertyType}} + {{property.createdAt | date:'short'}} + {{property.updatedAt | date:'short'}} + + + + + + + + {{componentProperties.length}} propertie(s) + + +
+ + +
+

Edit Component Property

+
+ + + + + + + + + + + + + + + +
+ + +
+
+
+
+

About UI Components

UI components define the configuration form elements for a chart type. Each component represents:

@@ -196,6 +307,6 @@
  • Metadata like label, placeholder, and validation rules
  • An order in which they appear in the configuration form
    • -

    After creating UI components, you can define their properties in the component properties section.

    +

    After creating UI components, you can define their properties using the "View Properties" button.

    \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.scss index 75317d7..da40f68 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.scss +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.scss @@ -102,6 +102,34 @@ } } + // Component Properties Section Styles + .action-cell { + min-width: 120px; + } + + .action-buttons { + display: flex; + gap: 5px; + flex-wrap: nowrap; + align-items: center; + } + + .action-buttons .btn-icon { + min-width: 36px; + display: flex; + align-items: center; + justify-content: center; + } + + // Ensure icons are visible + cds-icon { + display: inline-block !important; + } + + clr-spinner { + margin: 0; + } + @media (max-width: 768px) { padding: 10px; diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.ts index f15f885..a2ca262 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.ts @@ -3,7 +3,8 @@ import { ActivatedRoute, Router } from '@angular/router'; import { ClrLoadingState } from '@clr/angular'; import { ChartType, ChartTypeService } from './chart-type.service'; import { UiComponentService } from '../chart-config/ui-component.service'; -import { UiComponent } from '../chart-config/chart-config-manager.component'; +import { ComponentPropertyService } from '../chart-config/component-property.service'; +import { UiComponent, ComponentProperty } from '../chart-config/chart-config-manager.component'; @Component({ selector: 'app-chart-type-ui-components', @@ -19,6 +20,13 @@ export class ChartTypeUiComponentsComponent implements OnInit { selectedUiComponent: UiComponent | null = null; showAddForm = false; + // Component Properties + componentProperties: ComponentProperty[] = []; + selectedComponentProperty: ComponentProperty | null = null; + newComponentProperty: Partial = {}; + showAddComponentPropertyForm = false; + componentPropertyLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT; + loadingState: ClrLoadingState = ClrLoadingState.DEFAULT; errorMessage: string | null = null; successMessage: string | null = null; @@ -29,6 +37,7 @@ export class ChartTypeUiComponentsComponent implements OnInit { constructor( private chartTypeService: ChartTypeService, private uiComponentService: UiComponentService, + private componentPropertyService: ComponentPropertyService, private route: ActivatedRoute, private router: Router ) { } @@ -175,6 +184,121 @@ export class ChartTypeUiComponentsComponent implements OnInit { this.selectedUiComponent = { ...uiComponent }; } + // Component Property Methods + loadComponentProperties(componentId: number): void { + if (!componentId) { + this.componentProperties = []; + return; + } + + this.componentPropertyLoadingState = ClrLoadingState.LOADING; + this.componentPropertyService.getComponentPropertiesByComponent(componentId).subscribe({ + next: (data) => { + this.componentProperties = data; + this.componentPropertyLoadingState = ClrLoadingState.SUCCESS; + }, + error: (error) => { + console.error('Error loading component properties:', error); + this.showError('Error loading component properties: ' + (error.error?.message || error.message || 'Unknown error')); + this.componentPropertyLoadingState = ClrLoadingState.ERROR; + } + }); + } + + createComponentProperty(): void { + if (!this.selectedUiComponent) { + this.showError('Please select a UI component first'); + return; + } + + if (!this.newComponentProperty.propertyName) { + this.showError('Property name is required'); + return; + } + + this.componentPropertyLoadingState = ClrLoadingState.LOADING; + + // Create a complete component object with only the ID + const componentWithId = { + id: this.selectedUiComponent.id + } as UiComponent; + + const componentPropertyData = { + ...this.newComponentProperty, + component: componentWithId + }; + + this.componentPropertyService.createComponentProperty(componentPropertyData).subscribe({ + next: (data) => { + this.componentProperties.push(data); + this.newComponentProperty = {}; + this.showAddComponentPropertyForm = false; + this.showSuccess('Component property created successfully'); + this.componentPropertyLoadingState = ClrLoadingState.SUCCESS; + }, + error: (error) => { + console.error('Error creating component property:', error); + this.showError('Error creating component property: ' + (error.error?.message || error.message || 'Unknown error')); + this.componentPropertyLoadingState = ClrLoadingState.ERROR; + } + }); + } + + updateComponentProperty(): void { + if (!this.selectedComponentProperty || !this.selectedComponentProperty.propertyName) { + this.showError('Property name is required'); + return; + } + + this.componentPropertyLoadingState = ClrLoadingState.LOADING; + this.componentPropertyService.updateComponentProperty(this.selectedComponentProperty.id, this.selectedComponentProperty).subscribe({ + next: (data) => { + const index = this.componentProperties.findIndex(cp => cp.id === data.id); + if (index !== -1) { + this.componentProperties[index] = data; + } + this.selectedComponentProperty = null; + this.showSuccess('Component property updated successfully'); + this.componentPropertyLoadingState = ClrLoadingState.SUCCESS; + }, + error: (error) => { + console.error('Error updating component property:', error); + this.showError('Error updating component property: ' + (error.error?.message || error.message || 'Unknown error')); + this.componentPropertyLoadingState = ClrLoadingState.ERROR; + } + }); + } + + deleteComponentProperty(id: number): void { + if (!confirm('Are you sure you want to delete this component property?')) { + return; + } + + this.componentPropertyLoadingState = ClrLoadingState.LOADING; + this.componentPropertyService.deleteComponentProperty(id).subscribe({ + next: () => { + this.componentProperties = this.componentProperties.filter(cp => cp.id !== id); + this.showSuccess('Component property deleted successfully'); + this.componentPropertyLoadingState = ClrLoadingState.SUCCESS; + }, + error: (error) => { + console.error('Error deleting component property:', error); + this.showError('Error deleting component property: ' + (error.error?.message || error.message || 'Unknown error')); + this.componentPropertyLoadingState = ClrLoadingState.ERROR; + } + }); + } + + selectComponentPropertyForEdit(componentProperty: ComponentProperty): void { + this.selectedComponentProperty = { ...componentProperty }; + } + + // Helper method to view properties for a UI component + onViewComponentProperties(uiComponent: UiComponent): void { + this.selectedUiComponent = uiComponent; + this.loadComponentProperties(uiComponent.id); + } + goBack(): void { if (this.chartType) { this.router.navigate(['/cns-portal/dashboardbuilder/chart-types/edit', this.chartType.id]);