risadmin_prod/authsec_angularClarity_modern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

property

Browse Source
This commit is contained in:
Gaurav Kumar
2025-11-04 11:55:49 +05:30
parent 5f0594c93c
commit 68b793ea60
6 changed files with 360 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.html
View File

@@ -71,14 +71,17 @@
<clr-dg-cell>{{chartType.createdAt | date:'short'}}</clr-dg-cell>
<clr-dg-cell>{{chartType.updatedAt | date:'short'}}</clr-dg-cell>
<clr-dg-cell>
<button class="btn btn-sm btn-icon" (click)="selectChartTypeForEdit(chartType)" title="Edit">
<cds-icon shape="pencil"></cds-icon>
<button class="btn btn-sm btn-icon" (click)="selectChartTypeForEdit(chartType)" title="Edit" [disabled]="chartTypeLoadingState === ClrLoadingState.LOADING">
<clr-spinner *ngIf="chartTypeLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
<cds-icon *ngIf="chartTypeLoadingState !== ClrLoadingState.LOADING" shape="pencil"></cds-icon>
</button>
<button class="btn btn-sm btn-icon" (click)="deleteChartType(chartType.id)" title="Delete">
<cds-icon shape="trash"></cds-icon>
<button class="btn btn-sm btn-icon" (click)="deleteChartType(chartType.id)" title="Delete" [disabled]="chartTypeLoadingState === ClrLoadingState.LOADING">
<clr-spinner *ngIf="chartTypeLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
<cds-icon *ngIf="chartTypeLoadingState !== ClrLoadingState.LOADING" shape="trash"></cds-icon>
</button>
<button class="btn btn-sm btn-icon" (click)="onChartTypeSelect(chartType)" title="View Details">
<cds-icon shape="eye"></cds-icon>
<button class="btn btn-sm btn-icon" (click)="onChartTypeSelect(chartType)" title="View Details" [disabled]="chartTypeLoadingState === ClrLoadingState.LOADING">
<clr-spinner *ngIf="chartTypeLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
<cds-icon *ngIf="chartTypeLoadingState !== ClrLoadingState.LOADING" shape="eye"></cds-icon>
</button>
</clr-dg-cell>
</clr-dg-row>
@@ -130,33 +133,33 @@
<clr-dg-column>Component Name</clr-dg-column>
<clr-dg-column>Component Type</clr-dg-column>
<clr-dg-column>Display Label</clr-dg-column>
<clr-dg-column>Placeholder</clr-dg-column>
<clr-dg-column>Required</clr-dg-column>
<clr-dg-column>Sort Order</clr-dg-column>
<clr-dg-column>Created At</clr-dg-column>
<clr-dg-column>Updated At</clr-dg-column>
<clr-dg-column>Actions</clr-dg-column>
<clr-dg-row *clrDgItems="let uiComponent of uiComponents" [clrDgItem]="uiComponent">
<clr-dg-cell>{{uiComponent.componentName}}</clr-dg-cell>
<clr-dg-cell>{{uiComponent.componentType}}</clr-dg-cell>
<clr-dg-cell>{{uiComponent.displayLabel}}</clr-dg-cell>
<clr-dg-cell>{{uiComponent.placeholder}}</clr-dg-cell>
<clr-dg-cell>
<span class="label" [class.label-success]="uiComponent.isRequired" [class.label-danger]="!uiComponent.isRequired">
{{uiComponent.isRequired ? 'Yes' : 'No'}}
</span>
</clr-dg-cell>
<clr-dg-cell>{{uiComponent.sortOrder}}</clr-dg-cell>
<clr-dg-cell>{{uiComponent.createdAt | date:'short'}}</clr-dg-cell>
<clr-dg-cell>{{uiComponent.updatedAt | date:'short'}}</clr-dg-cell>
<clr-dg-cell>
<button class="btn btn-sm btn-icon" (click)="selectUiComponentForEdit(uiComponent)" title="Edit">
<cds-icon shape="pencil"></cds-icon>
</button>
<button class="btn btn-sm btn-icon" (click)="deleteUiComponent(uiComponent.id)" title="Delete">
<cds-icon shape="trash"></cds-icon>
</button>
<clr-dg-cell class="action-cell">
<div class="action-buttons">
<button class="btn btn-sm btn-icon" (click)="selectUiComponentForEdit(uiComponent)" title="Edit" [disabled]="uiComponentLoadingState === ClrLoadingState.LOADING">
<clr-spinner *ngIf="uiComponentLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
<cds-icon *ngIf="uiComponentLoadingState !== ClrLoadingState.LOADING" shape="pencil" aria-label="Edit"></cds-icon>
</button>
<button class="btn btn-sm btn-icon" (click)="deleteUiComponent(uiComponent.id)" title="Delete" [disabled]="uiComponentLoadingState === ClrLoadingState.LOADING">
<clr-spinner *ngIf="uiComponentLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
<cds-icon *ngIf="uiComponentLoadingState !== ClrLoadingState.LOADING" shape="trash" aria-label="Delete"></cds-icon>
</button>
<button class="btn btn-sm btn-icon" (click)="onUiComponentSelect(uiComponent)" title="View Properties" [disabled]="uiComponentLoadingState === ClrLoadingState.LOADING">
<clr-spinner *ngIf="uiComponentLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
<cds-icon *ngIf="uiComponentLoadingState !== ClrLoadingState.LOADING" shape="eye" aria-label="View Properties"></cds-icon>
</button>
</div>
</clr-dg-cell>
</clr-dg-row>
@@ -218,11 +221,13 @@
<clr-dg-cell>{{property.createdAt | date:'short'}}</clr-dg-cell>
<clr-dg-cell>{{property.updatedAt | date:'short'}}</clr-dg-cell>
<clr-dg-cell>
<button class="btn btn-sm btn-icon" (click)="selectComponentPropertyForEdit(property)" title="Edit">
<cds-icon shape="pencil"></cds-icon>
<button class="btn btn-sm btn-icon" (click)="selectComponentPropertyForEdit(property)" title="Edit" [disabled]="componentPropertyLoadingState === ClrLoadingState.LOADING">
<clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
<cds-icon *ngIf="componentPropertyLoadingState !== ClrLoadingState.LOADING" shape="pencil"></cds-icon>
</button>
<button class="btn btn-sm btn-icon" (click)="deleteComponentProperty(property.id)" title="Delete">
<cds-icon shape="trash"></cds-icon>
<button class="btn btn-sm btn-icon" (click)="deleteComponentProperty(property.id)" title="Delete" [disabled]="componentPropertyLoadingState === ClrLoadingState.LOADING">
<clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
<cds-icon *ngIf="componentPropertyLoadingState !== ClrLoadingState.LOADING" shape="trash"></cds-icon>
</button>
</clr-dg-cell>
</clr-dg-row>
@@ -287,11 +292,13 @@
<clr-dg-cell>{{template.createdAt | date:'short'}}</clr-dg-cell>
<clr-dg-cell>{{template.updatedAt | date:'short'}}</clr-dg-cell>
<clr-dg-cell>
<button class="btn btn-sm btn-icon" (click)="selectChartTemplateForEdit(template)" title="Edit">
<cds-icon shape="pencil"></cds-icon>
<button class="btn btn-sm btn-icon" (click)="selectChartTemplateForEdit(template)" title="Edit" [disabled]="chartTemplateLoadingState === ClrLoadingState.LOADING">
<clr-spinner *ngIf="chartTemplateLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
<cds-icon *ngIf="chartTemplateLoadingState !== ClrLoadingState.LOADING" shape="pencil"></cds-icon>
</button>
<button class="btn btn-sm btn-icon" (click)="deleteChartTemplate(template.id)" title="Delete">
<cds-icon shape="trash"></cds-icon>
<button class="btn btn-sm btn-icon" (click)="deleteChartTemplate(template.id)" title="Delete" [disabled]="chartTemplateLoadingState === ClrLoadingState.LOADING">
<clr-spinner *ngIf="chartTemplateLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
<cds-icon *ngIf="chartTemplateLoadingState !== ClrLoadingState.LOADING" shape="trash"></cds-icon>
</button>
</clr-dg-cell>
</clr-dg-row>

33
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.scss
View File

@@ -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;
}

25
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.ts
View File

@@ -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 = {};

137
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.html
View File

@@ -104,29 +104,33 @@
<clr-dg-column>Component Name</clr-dg-column>
<clr-dg-column>Component Type</clr-dg-column>
<clr-dg-column>Display Label</clr-dg-column>
<clr-dg-column>Placeholder</clr-dg-column>
<clr-dg-column>Required</clr-dg-column>
<clr-dg-column>Sort Order</clr-dg-column>
<clr-dg-column>Actions</clr-dg-column>
<clr-dg-row *clrDgItems="let uiComponent of uiComponents" [clrDgItem]="uiComponent">
<clr-dg-cell>{{uiComponent.componentName}}</clr-dg-cell>
<clr-dg-cell>{{uiComponent.componentType}}</clr-dg-cell>
<clr-dg-cell>{{uiComponent.displayLabel}}</clr-dg-cell>
<clr-dg-cell>{{uiComponent.placeholder}}</clr-dg-cell>
<clr-dg-cell>
<span class="label" [class.label-success]="uiComponent.isRequired" [class.label-danger]="!uiComponent.isRequired">
{{uiComponent.isRequired ? 'Yes' : 'No'}}
</span>
</clr-dg-cell>
<clr-dg-cell>{{uiComponent.sortOrder}}</clr-dg-cell>
<clr-dg-cell>
<button class="btn btn-sm btn-icon" (click)="selectUiComponentForEdit(uiComponent)" title="Edit">
<cds-icon shape="pencil"></cds-icon>
</button>
<button class="btn btn-sm btn-icon" (click)="deleteUiComponent(uiComponent.id)" title="Delete">
<cds-icon shape="trash"></cds-icon>
</button>
<clr-dg-cell class="action-cell">
<div class="action-buttons">
<button class="btn btn-sm btn-icon" (click)="selectUiComponentForEdit(uiComponent)" title="Edit" [disabled]="loadingState === ClrLoadingState.LOADING">
<clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
<cds-icon *ngIf="loadingState !== ClrLoadingState.LOADING" shape="pencil" aria-label="Edit"></cds-icon>
</button>
<button class="btn btn-sm btn-icon" (click)="deleteUiComponent(uiComponent.id)" title="Delete" [disabled]="loadingState === ClrLoadingState.LOADING">
<clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
<cds-icon *ngIf="loadingState !== ClrLoadingState.LOADING" shape="trash" aria-label="Delete"></cds-icon>
</button>
<button class="btn btn-sm btn-icon btn-primary" (click)="onViewComponentProperties(uiComponent)" title="View Properties" [disabled]="loadingState === ClrLoadingState.LOADING">
<clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
<cds-icon *ngIf="loadingState !== ClrLoadingState.LOADING" shape="eye" aria-label="View Properties"></cds-icon>
</button>
</div>
</clr-dg-cell>
</clr-dg-row>
@@ -138,7 +142,7 @@
</div>
<!-- Edit UI Component Form -->
<div class="card" *ngIf="selectedUiComponent">
<div class="card" *ngIf="selectedUiComponent && !showAddComponentPropertyForm && !selectedComponentProperty">
<div class="card-header">
<h3>Edit UI Component</h3>
</div>
@@ -188,6 +192,113 @@
</div>
</div>
<!-- Component Properties Section -->
<div class="card" *ngIf="selectedUiComponent">
<div class="card-header">
<div class="clr-row">
<div class="clr-col">
<h3>Properties for {{selectedUiComponent?.componentName}}</h3>
</div>
<div class="clr-col" style="text-align: right;">
<button class="btn btn-primary" (click)="showAddComponentPropertyForm = true">
<cds-icon shape="plus"></cds-icon> Add Property
</button>
</div>
</div>
</div>
<!-- Add Component Property Form -->
<div class="card-block" *ngIf="showAddComponentPropertyForm">
<form clrForm (ngSubmit)="createComponentProperty()" #addComponentPropertyForm="ngForm">
<clr-input-container>
<label>Property Name <span class="required">*</span></label>
<input clrInput type="text" [(ngModel)]="newComponentProperty.propertyName" name="propertyName" required />
</clr-input-container>
<clr-input-container>
<label>Property Value</label>
<input clrInput type="text" [(ngModel)]="newComponentProperty.propertyValue" name="propertyValue" />
</clr-input-container>
<clr-input-container>
<label>Property Type</label>
<input clrInput type="text" [(ngModel)]="newComponentProperty.propertyType" name="propertyType" />
</clr-input-container>
<div class="form-actions">
<button class="btn btn-primary" type="submit" [disabled]="!newComponentProperty.propertyName || componentPropertyLoadingState === ClrLoadingState.LOADING">
<clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
Create Property
</button>
<button class="btn" type="button" (click)="showAddComponentPropertyForm = false">Cancel</button>
</div>
</form>
</div>
<!-- Component Properties Table -->
<div class="card-block">
<clr-datagrid [clrDgLoading]="componentPropertyLoadingState === ClrLoadingState.LOADING">
<clr-dg-column>Property Name</clr-dg-column>
<clr-dg-column>Property Value</clr-dg-column>
<clr-dg-column>Property Type</clr-dg-column>
<clr-dg-column>Created At</clr-dg-column>
<clr-dg-column>Updated At</clr-dg-column>
<clr-dg-column>Actions</clr-dg-column>
<clr-dg-row *clrDgItems="let property of componentProperties" [clrDgItem]="property">
<clr-dg-cell>{{property.propertyName}}</clr-dg-cell>
<clr-dg-cell>{{property.propertyValue}}</clr-dg-cell>
<clr-dg-cell>{{property.propertyType}}</clr-dg-cell>
<clr-dg-cell>{{property.createdAt | date:'short'}}</clr-dg-cell>
<clr-dg-cell>{{property.updatedAt | date:'short'}}</clr-dg-cell>
<clr-dg-cell>
<button class="btn btn-sm btn-icon" (click)="selectComponentPropertyForEdit(property)" title="Edit" [disabled]="componentPropertyLoadingState === ClrLoadingState.LOADING">
<clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
<cds-icon *ngIf="componentPropertyLoadingState !== ClrLoadingState.LOADING" shape="pencil"></cds-icon>
</button>
<button class="btn btn-sm btn-icon" (click)="deleteComponentProperty(property.id)" title="Delete" [disabled]="componentPropertyLoadingState === ClrLoadingState.LOADING">
<clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
<cds-icon *ngIf="componentPropertyLoadingState !== ClrLoadingState.LOADING" shape="trash"></cds-icon>
</button>
</clr-dg-cell>
</clr-dg-row>
<clr-dg-footer>
{{componentProperties.length}} propertie(s)
</clr-dg-footer>
</clr-datagrid>
</div>
<!-- Edit Component Property Form -->
<div class="card-block" *ngIf="selectedComponentProperty">
<h4>Edit Component Property</h4>
<form clrForm (ngSubmit)="updateComponentProperty()" #editComponentPropertyForm="ngForm">
<clr-input-container>
<label>Property Name <span class="required">*</span></label>
<input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyName" name="editPropertyName" required />
</clr-input-container>
<clr-input-container>
<label>Property Value</label>
<input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyValue" name="editPropertyValue" />
</clr-input-container>
<clr-input-container>
<label>Property Type</label>
<input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyType" name="editPropertyType" />
</clr-input-container>
<div class="form-actions">
<button class="btn btn-primary" type="submit" [disabled]="!selectedComponentProperty.propertyName || componentPropertyLoadingState === ClrLoadingState.LOADING">
<clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
Update Property
</button>
<button class="btn" type="button" (click)="selectedComponentProperty = null">Cancel</button>
</div>
</form>
</div>
</div>
<div class="info-section">
<h4>About UI Components</h4>
<p>UI components define the configuration form elements for a chart type. Each component represents:</p>
@@ -196,6 +307,6 @@
<li>Metadata like label, placeholder, and validation rules</li>
<li>An order in which they appear in the configuration form</li>
</ul>
<p>After creating UI components, you can define their properties in the component properties section.</p>
<p>After creating UI components, you can define their properties using the "View Properties" button.</p>
</div>
</div>

28
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.scss
View File

@@ -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;

126
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.ts
View File

@@ -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<ComponentProperty> = {};
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]);