chart config
This commit is contained in:
Gaurav Kumar
@@ -0,0 +1,481 @@
|
|||||||
|
<div class="chart-config-manager">
|
||||||
|
<h2>Chart Configuration Manager</h2>
|
||||||
|
|
||||||
|
<!-- Error and Success Messages -->
|
||||||
|
<div class="alert alert-danger" *ngIf="errorMessage">
|
||||||
|
<button type="button" class="close" aria-label="Close" (click)="errorMessage = null">
|
||||||
|
<cds-icon shape="close"></cds-icon>
|
||||||
|
</button>
|
||||||
|
<div class="alert-item">
|
||||||
|
<span class="alert-text">{{ errorMessage }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert alert-success" *ngIf="successMessage">
|
||||||
|
<button type="button" class="close" aria-label="Close" (click)="successMessage = null">
|
||||||
|
<cds-icon shape="close"></cds-icon>
|
||||||
|
</button>
|
||||||
|
<div class="alert-item">
|
||||||
|
<span class="alert-text">{{ successMessage }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Chart Types Section -->
|
||||||
|
<clr-tab>
|
||||||
|
<button clrTabLink>Chart Types</button>
|
||||||
|
<clr-tab-content>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3>Chart Types</h3>
|
||||||
|
<button class="btn btn-sm btn-primary" (click)="showAddChartTypeForm = true">
|
||||||
|
<cds-icon shape="plus"></cds-icon> Add Chart Type
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add Chart Type Form -->
|
||||||
|
<div class="card-block" *ngIf="showAddChartTypeForm">
|
||||||
|
<app-chart-type-form
|
||||||
|
[chartType]="newChartType"
|
||||||
|
(save)="createChartType()"
|
||||||
|
(cancel)="showAddChartTypeForm = false">
|
||||||
|
</app-chart-type-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Chart Types Table -->
|
||||||
|
<div class="card-block">
|
||||||
|
<clr-datagrid [clrDgLoading]="chartTypeLoadingState === ClrLoadingState.LOADING">
|
||||||
|
<clr-dg-column>Name</clr-dg-column>
|
||||||
|
<clr-dg-column>Display Name</clr-dg-column>
|
||||||
|
<clr-dg-column>Description</clr-dg-column>
|
||||||
|
<clr-dg-column>Status</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 chartType of chartTypes" [clrDgItem]="chartType">
|
||||||
|
<clr-dg-cell>{{chartType.name}}</clr-dg-cell>
|
||||||
|
<clr-dg-cell>{{chartType.displayName}}</clr-dg-cell>
|
||||||
|
<clr-dg-cell>{{chartType.description}}</clr-dg-cell>
|
||||||
|
<clr-dg-cell>
|
||||||
|
<span class="label" [class.label-success]="chartType.isActive" [class.label-danger]="!chartType.isActive">
|
||||||
|
{{chartType.isActive ? 'Active' : 'Inactive'}}
|
||||||
|
</span>
|
||||||
|
</clr-dg-cell>
|
||||||
|
<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>
|
||||||
|
<button class="btn btn-sm btn-icon" (click)="deleteChartType(chartType.id)" title="Delete">
|
||||||
|
<cds-icon 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>
|
||||||
|
</clr-dg-cell>
|
||||||
|
</clr-dg-row>
|
||||||
|
|
||||||
|
<clr-dg-footer>
|
||||||
|
{{chartTypes.length}} chart type(s)
|
||||||
|
</clr-dg-footer>
|
||||||
|
</clr-datagrid>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edit Chart Type Form -->
|
||||||
|
<div class="card-block" *ngIf="selectedChartType">
|
||||||
|
<h4>Edit Chart Type</h4>
|
||||||
|
<app-chart-type-form
|
||||||
|
[chartType]="selectedChartType"
|
||||||
|
[isEdit]="true"
|
||||||
|
(save)="updateChartType()"
|
||||||
|
(cancel)="selectedChartType = null">
|
||||||
|
</app-chart-type-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</clr-tab-content>
|
||||||
|
</clr-tab>
|
||||||
|
|
||||||
|
<!-- UI Components Section -->
|
||||||
|
<clr-tab *ngIf="selectedChartType">
|
||||||
|
<button clrTabLink>UI Components</button>
|
||||||
|
<clr-tab-content>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3>UI Components for {{selectedChartType?.name}}</h3>
|
||||||
|
<button class="btn btn-sm btn-primary" (click)="showAddUiComponentForm = true">
|
||||||
|
<cds-icon shape="plus"></cds-icon> Add UI Component
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add UI Component Form -->
|
||||||
|
<div class="card-block" *ngIf="showAddUiComponentForm">
|
||||||
|
<app-ui-component-form
|
||||||
|
[uiComponent]="newUiComponent"
|
||||||
|
(save)="createUiComponent()"
|
||||||
|
(cancel)="showAddUiComponentForm = false">
|
||||||
|
</app-ui-component-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- UI Components Table -->
|
||||||
|
<div class="card-block">
|
||||||
|
<clr-datagrid [clrDgLoading]="uiComponentLoadingState === ClrLoadingState.LOADING">
|
||||||
|
<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>
|
||||||
|
</clr-dg-row>
|
||||||
|
|
||||||
|
<clr-dg-footer>
|
||||||
|
{{uiComponents.length}} UI component(s)
|
||||||
|
</clr-dg-footer>
|
||||||
|
</clr-datagrid>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edit UI Component Form -->
|
||||||
|
<div class="card-block" *ngIf="selectedUiComponent">
|
||||||
|
<h4>Edit UI Component</h4>
|
||||||
|
<app-ui-component-form
|
||||||
|
[uiComponent]="selectedUiComponent"
|
||||||
|
[isEdit]="true"
|
||||||
|
(save)="updateUiComponent()"
|
||||||
|
(cancel)="selectedUiComponent = null">
|
||||||
|
</app-ui-component-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</clr-tab-content>
|
||||||
|
</clr-tab>
|
||||||
|
|
||||||
|
<!-- Component Properties Section -->
|
||||||
|
<clr-tab *ngIf="selectedUiComponent">
|
||||||
|
<button clrTabLink>Component Properties</button>
|
||||||
|
<clr-tab-content>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3>Properties for {{selectedUiComponent?.componentName}}</h3>
|
||||||
|
<button class="btn btn-sm btn-primary" (click)="showAddComponentPropertyForm = true">
|
||||||
|
<cds-icon shape="plus"></cds-icon> Add Property
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add Component Property Form -->
|
||||||
|
<div class="card-block" *ngIf="showAddComponentPropertyForm">
|
||||||
|
<app-component-property-form
|
||||||
|
[componentProperty]="newComponentProperty"
|
||||||
|
(save)="createComponentProperty()"
|
||||||
|
(cancel)="showAddComponentPropertyForm = false">
|
||||||
|
</app-component-property-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">
|
||||||
|
<cds-icon 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>
|
||||||
|
</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>
|
||||||
|
<app-component-property-form
|
||||||
|
[componentProperty]="selectedComponentProperty"
|
||||||
|
[isEdit]="true"
|
||||||
|
(save)="updateComponentProperty()"
|
||||||
|
(cancel)="selectedComponentProperty = null">
|
||||||
|
</app-component-property-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</clr-tab-content>
|
||||||
|
</clr-tab>
|
||||||
|
|
||||||
|
<!-- Chart Templates Section -->
|
||||||
|
<clr-tab *ngIf="selectedChartType">
|
||||||
|
<button clrTabLink>Chart Templates</button>
|
||||||
|
<clr-tab-content>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3>Templates for {{selectedChartType?.name}}</h3>
|
||||||
|
<button class="btn btn-sm btn-primary" (click)="showAddChartTemplateForm = true">
|
||||||
|
<cds-icon shape="plus"></cds-icon> Add Template
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add Chart Template Form -->
|
||||||
|
<div class="card-block" *ngIf="showAddChartTemplateForm">
|
||||||
|
<app-chart-template-form
|
||||||
|
[chartTemplate]="newChartTemplate"
|
||||||
|
(save)="createChartTemplate()"
|
||||||
|
(cancel)="showAddChartTemplateForm = false">
|
||||||
|
</app-chart-template-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Chart Templates Table -->
|
||||||
|
<div class="card-block">
|
||||||
|
<clr-datagrid [clrDgLoading]="chartTemplateLoadingState === ClrLoadingState.LOADING">
|
||||||
|
<clr-dg-column>Template Name</clr-dg-column>
|
||||||
|
<clr-dg-column>Is Default</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 template of chartTemplates" [clrDgItem]="template">
|
||||||
|
<clr-dg-cell>{{template.templateName}}</clr-dg-cell>
|
||||||
|
<clr-dg-cell>
|
||||||
|
<span class="label" [class.label-success]="template.isDefault" [class.label-danger]="!template.isDefault">
|
||||||
|
{{template.isDefault ? 'Yes' : 'No'}}
|
||||||
|
</span>
|
||||||
|
</clr-dg-cell>
|
||||||
|
<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>
|
||||||
|
<button class="btn btn-sm btn-icon" (click)="deleteChartTemplate(template.id)" title="Delete">
|
||||||
|
<cds-icon shape="trash"></cds-icon>
|
||||||
|
</button>
|
||||||
|
</clr-dg-cell>
|
||||||
|
</clr-dg-row>
|
||||||
|
|
||||||
|
<clr-dg-footer>
|
||||||
|
{{chartTemplates.length}} template(s)
|
||||||
|
</clr-dg-footer>
|
||||||
|
</clr-datagrid>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edit Chart Template Form -->
|
||||||
|
<div class="card-block" *ngIf="selectedChartTemplate">
|
||||||
|
<h4>Edit Chart Template</h4>
|
||||||
|
<app-chart-template-form
|
||||||
|
[chartTemplate]="selectedChartTemplate"
|
||||||
|
[isEdit]="true"
|
||||||
|
(save)="updateChartTemplate()"
|
||||||
|
(cancel)="selectedChartTemplate = null">
|
||||||
|
</app-chart-template-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</clr-tab-content>
|
||||||
|
</clr-tab>
|
||||||
|
|
||||||
|
<!-- Dynamic Fields Section -->
|
||||||
|
<clr-tab *ngIf="selectedChartType">
|
||||||
|
<button clrTabLink>Dynamic Fields</button>
|
||||||
|
<clr-tab-content>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3>Dynamic Fields for {{selectedChartType?.name}}</h3>
|
||||||
|
<button class="btn btn-sm btn-primary" (click)="showAddDynamicFieldForm = true">
|
||||||
|
<cds-icon shape="plus"></cds-icon> Add Field
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add Dynamic Field Form -->
|
||||||
|
<div class="card-block" *ngIf="showAddDynamicFieldForm">
|
||||||
|
<form clrForm>
|
||||||
|
<clr-input-container>
|
||||||
|
<label>Field Name <span class="required">*</span></label>
|
||||||
|
<input clrInput type="text" [(ngModel)]="newDynamicField.fieldName" name="fieldName" required />
|
||||||
|
</clr-input-container>
|
||||||
|
|
||||||
|
<clr-input-container>
|
||||||
|
<label>Field Label</label>
|
||||||
|
<input clrInput type="text" [(ngModel)]="newDynamicField.fieldLabel" name="fieldLabel" />
|
||||||
|
</clr-input-container>
|
||||||
|
|
||||||
|
<clr-input-container>
|
||||||
|
<label>Field Type</label>
|
||||||
|
<input clrInput type="text" [(ngModel)]="newDynamicField.fieldType" name="fieldType" />
|
||||||
|
</clr-input-container>
|
||||||
|
|
||||||
|
<clr-textarea-container>
|
||||||
|
<label>Field Options</label>
|
||||||
|
<textarea clrTextarea [(ngModel)]="newDynamicField.fieldOptions" name="fieldOptions"></textarea>
|
||||||
|
</clr-textarea-container>
|
||||||
|
|
||||||
|
<clr-input-container>
|
||||||
|
<label>Sort Order</label>
|
||||||
|
<input clrInput type="number" [(ngModel)]="newDynamicField.sortOrder" name="fieldSortOrder" />
|
||||||
|
</clr-input-container>
|
||||||
|
|
||||||
|
<clr-checkbox-container>
|
||||||
|
<label>Is Required</label>
|
||||||
|
<clr-checkbox-wrapper>
|
||||||
|
<input type="checkbox" clrCheckbox [(ngModel)]="newDynamicField.isRequired" name="fieldIsRequired" />
|
||||||
|
<label>Required</label>
|
||||||
|
</clr-checkbox-wrapper>
|
||||||
|
</clr-checkbox-container>
|
||||||
|
|
||||||
|
<clr-checkbox-container>
|
||||||
|
<label>Show in UI</label>
|
||||||
|
<clr-checkbox-wrapper>
|
||||||
|
<input type="checkbox" clrCheckbox [(ngModel)]="newDynamicField.showInUi" name="fieldShowInUi" />
|
||||||
|
<label>Show in UI</label>
|
||||||
|
</clr-checkbox-wrapper>
|
||||||
|
</clr-checkbox-container>
|
||||||
|
|
||||||
|
<div class="form-actions">
|
||||||
|
<button class="btn btn-primary" (click)="createDynamicField()" [disabled]="!newDynamicField.fieldName || dynamicFieldLoadingState === ClrLoadingState.LOADING">
|
||||||
|
<clr-spinner *ngIf="dynamicFieldLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
<button class="btn" (click)="showAddDynamicFieldForm = false">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Dynamic Fields Table -->
|
||||||
|
<div class="card-block">
|
||||||
|
<clr-datagrid [clrDgLoading]="dynamicFieldLoadingState === ClrLoadingState.LOADING">
|
||||||
|
<clr-dg-column>Field Name</clr-dg-column>
|
||||||
|
<clr-dg-column>Field Label</clr-dg-column>
|
||||||
|
<clr-dg-column>Field Type</clr-dg-column>
|
||||||
|
<clr-dg-column>Required</clr-dg-column>
|
||||||
|
<clr-dg-column>Show in UI</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 field of dynamicFields" [clrDgItem]="field">
|
||||||
|
<clr-dg-cell>{{field.fieldName}}</clr-dg-cell>
|
||||||
|
<clr-dg-cell>{{field.fieldLabel}}</clr-dg-cell>
|
||||||
|
<clr-dg-cell>{{field.fieldType}}</clr-dg-cell>
|
||||||
|
<clr-dg-cell>
|
||||||
|
<span class="label" [class.label-success]="field.isRequired" [class.label-danger]="!field.isRequired">
|
||||||
|
{{field.isRequired ? 'Yes' : 'No'}}
|
||||||
|
</span>
|
||||||
|
</clr-dg-cell>
|
||||||
|
<clr-dg-cell>
|
||||||
|
<span class="label" [class.label-success]="field.showInUi" [class.label-danger]="!field.showInUi">
|
||||||
|
{{field.showInUi ? 'Yes' : 'No'}}
|
||||||
|
</span>
|
||||||
|
</clr-dg-cell>
|
||||||
|
<clr-dg-cell>{{field.sortOrder}}</clr-dg-cell>
|
||||||
|
<clr-dg-cell>{{field.createdAt | date:'short'}}</clr-dg-cell>
|
||||||
|
<clr-dg-cell>{{field.updatedAt | date:'short'}}</clr-dg-cell>
|
||||||
|
<clr-dg-cell>
|
||||||
|
<button class="btn btn-sm btn-icon" (click)="selectDynamicFieldForEdit(field)" title="Edit">
|
||||||
|
<cds-icon shape="pencil"></cds-icon>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-sm btn-icon" (click)="deleteDynamicField(field.id)" title="Delete">
|
||||||
|
<cds-icon shape="trash"></cds-icon>
|
||||||
|
</button>
|
||||||
|
</clr-dg-cell>
|
||||||
|
</clr-dg-row>
|
||||||
|
|
||||||
|
<clr-dg-footer>
|
||||||
|
{{dynamicFields.length}} field(s)
|
||||||
|
</clr-dg-footer>
|
||||||
|
</clr-datagrid>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edit Dynamic Field Form -->
|
||||||
|
<div class="card-block" *ngIf="selectedDynamicField">
|
||||||
|
<h4>Edit Dynamic Field</h4>
|
||||||
|
<form clrForm>
|
||||||
|
<clr-input-container>
|
||||||
|
<label>Field Name <span class="required">*</span></label>
|
||||||
|
<input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldName" name="editFieldName" required />
|
||||||
|
</clr-input-container>
|
||||||
|
|
||||||
|
<clr-input-container>
|
||||||
|
<label>Field Label</label>
|
||||||
|
<input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldLabel" name="editFieldLabel" />
|
||||||
|
</clr-input-container>
|
||||||
|
|
||||||
|
<clr-input-container>
|
||||||
|
<label>Field Type</label>
|
||||||
|
<input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldType" name="editFieldType" />
|
||||||
|
</clr-input-container>
|
||||||
|
|
||||||
|
<clr-textarea-container>
|
||||||
|
<label>Field Options</label>
|
||||||
|
<textarea clrTextarea [(ngModel)]="selectedDynamicField.fieldOptions" name="editFieldOptions"></textarea>
|
||||||
|
</clr-textarea-container>
|
||||||
|
|
||||||
|
<clr-input-container>
|
||||||
|
<label>Sort Order</label>
|
||||||
|
<input clrInput type="number" [(ngModel)]="selectedDynamicField.sortOrder" name="editFieldSortOrder" />
|
||||||
|
</clr-input-container>
|
||||||
|
|
||||||
|
<clr-checkbox-container>
|
||||||
|
<label>Is Required</label>
|
||||||
|
<clr-checkbox-wrapper>
|
||||||
|
<input type="checkbox" clrCheckbox [(ngModel)]="selectedDynamicField.isRequired" name="editFieldIsRequired" />
|
||||||
|
<label>Required</label>
|
||||||
|
</clr-checkbox-wrapper>
|
||||||
|
</clr-checkbox-container>
|
||||||
|
|
||||||
|
<clr-checkbox-container>
|
||||||
|
<label>Show in UI</label>
|
||||||
|
<clr-checkbox-wrapper>
|
||||||
|
<input type="checkbox" clrCheckbox [(ngModel)]="selectedDynamicField.showInUi" name="editFieldShowInUi" />
|
||||||
|
<label>Show in UI</label>
|
||||||
|
</clr-checkbox-wrapper>
|
||||||
|
</clr-checkbox-container>
|
||||||
|
|
||||||
|
<div class="form-actions">
|
||||||
|
<button class="btn btn-primary" (click)="updateDynamicField()" [disabled]="!selectedDynamicField.fieldName || dynamicFieldLoadingState === ClrLoadingState.LOADING">
|
||||||
|
<clr-spinner *ngIf="dynamicFieldLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||||
|
Update
|
||||||
|
</button>
|
||||||
|
<button class="btn" (click)="selectedDynamicField = null">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</clr-tab-content>
|
||||||
|
</clr-tab>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
.chart-config-manager {
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-block {
|
||||||
|
padding: 15px;
|
||||||
|
|
||||||
|
form {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
clr-datagrid {
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-success {
|
||||||
|
background-color: #318700;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-danger {
|
||||||
|
background-color: #e62200;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.required {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
clr-tab-content {
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,726 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { ClrLoadingState } from '@clr/angular';
|
||||||
|
import { ChartTypeService } from '../chart-type-manager/chart-type.service';
|
||||||
|
import { UiComponentService } from './ui-component.service';
|
||||||
|
import { ComponentPropertyService } from './component-property.service';
|
||||||
|
import { ChartTemplateService } from './chart-template.service';
|
||||||
|
import { DynamicFieldService } from './dynamic-field.service';
|
||||||
|
|
||||||
|
export interface ChartType {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
displayName: string;
|
||||||
|
description: string;
|
||||||
|
isActive: boolean;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UiComponent {
|
||||||
|
id: number;
|
||||||
|
chartType: ChartType;
|
||||||
|
componentName: string;
|
||||||
|
componentType: string;
|
||||||
|
displayLabel: string;
|
||||||
|
placeholder: string;
|
||||||
|
isRequired: boolean;
|
||||||
|
sortOrder: number;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ComponentProperty {
|
||||||
|
id: number;
|
||||||
|
component: UiComponent;
|
||||||
|
propertyName: string;
|
||||||
|
propertyValue: string;
|
||||||
|
propertyType: string;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ChartTemplate {
|
||||||
|
id: number;
|
||||||
|
chartType: ChartType;
|
||||||
|
templateName: string;
|
||||||
|
templateHtml: string;
|
||||||
|
templateCss: string;
|
||||||
|
isDefault: boolean;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DynamicField {
|
||||||
|
id: number;
|
||||||
|
chartType: ChartType;
|
||||||
|
fieldName: string;
|
||||||
|
fieldLabel: string;
|
||||||
|
fieldType: string;
|
||||||
|
fieldOptions: string;
|
||||||
|
isRequired: boolean;
|
||||||
|
showInUi: boolean;
|
||||||
|
sortOrder: number;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-chart-config-manager',
|
||||||
|
templateUrl: './chart-config-manager.component.html',
|
||||||
|
styleUrls: ['./chart-config-manager.component.scss']
|
||||||
|
})
|
||||||
|
export class ChartConfigManagerComponent implements OnInit {
|
||||||
|
// Chart Types
|
||||||
|
chartTypes: ChartType[] = [];
|
||||||
|
selectedChartType: ChartType | null = null;
|
||||||
|
newChartType: Partial<ChartType> = {};
|
||||||
|
showAddChartTypeForm = false;
|
||||||
|
chartTypeLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||||
|
|
||||||
|
// UI Components
|
||||||
|
uiComponents: UiComponent[] = [];
|
||||||
|
selectedUiComponent: UiComponent | null = null;
|
||||||
|
newUiComponent: Partial<UiComponent> = {};
|
||||||
|
showAddUiComponentForm = false;
|
||||||
|
uiComponentLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||||
|
|
||||||
|
// Component Properties
|
||||||
|
componentProperties: ComponentProperty[] = [];
|
||||||
|
selectedComponentProperty: ComponentProperty | null = null;
|
||||||
|
newComponentProperty: Partial<ComponentProperty> = {};
|
||||||
|
showAddComponentPropertyForm = false;
|
||||||
|
componentPropertyLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||||
|
|
||||||
|
// Chart Templates
|
||||||
|
chartTemplates: ChartTemplate[] = [];
|
||||||
|
selectedChartTemplate: ChartTemplate | null = null;
|
||||||
|
newChartTemplate: Partial<ChartTemplate> = {};
|
||||||
|
showAddChartTemplateForm = false;
|
||||||
|
chartTemplateLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||||
|
|
||||||
|
// Dynamic Fields
|
||||||
|
dynamicFields: DynamicField[] = [];
|
||||||
|
selectedDynamicField: DynamicField | null = null;
|
||||||
|
newDynamicField: Partial<DynamicField> = {};
|
||||||
|
showAddDynamicFieldForm = false;
|
||||||
|
dynamicFieldLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||||
|
|
||||||
|
// Make ClrLoadingState available to template
|
||||||
|
readonly ClrLoadingState = ClrLoadingState;
|
||||||
|
|
||||||
|
// Error handling
|
||||||
|
errorMessage: string | null = null;
|
||||||
|
successMessage: string | null = null;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private chartTypeService: ChartTypeService,
|
||||||
|
private uiComponentService: UiComponentService,
|
||||||
|
private componentPropertyService: ComponentPropertyService,
|
||||||
|
private chartTemplateService: ChartTemplateService,
|
||||||
|
private dynamicFieldService: DynamicFieldService
|
||||||
|
) { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.loadChartTypes();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show error message
|
||||||
|
private showError(message: string): void {
|
||||||
|
this.errorMessage = message;
|
||||||
|
setTimeout(() => {
|
||||||
|
this.errorMessage = null;
|
||||||
|
}, 5000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show success message
|
||||||
|
private showSuccess(message: string): void {
|
||||||
|
this.successMessage = message;
|
||||||
|
setTimeout(() => {
|
||||||
|
this.successMessage = null;
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Chart Type Methods
|
||||||
|
loadChartTypes(): void {
|
||||||
|
this.chartTypeLoadingState = ClrLoadingState.LOADING;
|
||||||
|
this.chartTypeService.getAllChartTypes().subscribe({
|
||||||
|
next: (data) => {
|
||||||
|
this.chartTypes = data;
|
||||||
|
this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error loading chart types:', error);
|
||||||
|
this.showError('Error loading chart types: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||||
|
this.chartTypeLoadingState = ClrLoadingState.ERROR;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
createChartType(): void {
|
||||||
|
if (!this.newChartType.name) {
|
||||||
|
this.showError('Chart type name is required');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chartTypeLoadingState = ClrLoadingState.LOADING;
|
||||||
|
this.chartTypeService.createChartType(this.newChartType).subscribe({
|
||||||
|
next: (data) => {
|
||||||
|
this.chartTypes.push(data);
|
||||||
|
this.newChartType = {};
|
||||||
|
this.showAddChartTypeForm = false;
|
||||||
|
this.showSuccess('Chart type created successfully');
|
||||||
|
this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error creating chart type:', error);
|
||||||
|
this.showError('Error creating chart type: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||||
|
this.chartTypeLoadingState = ClrLoadingState.ERROR;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
updateChartType(): void {
|
||||||
|
if (!this.selectedChartType || !this.selectedChartType.name) {
|
||||||
|
this.showError('Chart type name is required');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chartTypeLoadingState = ClrLoadingState.LOADING;
|
||||||
|
this.chartTypeService.updateChartType(this.selectedChartType.id, this.selectedChartType).subscribe({
|
||||||
|
next: (data) => {
|
||||||
|
const index = this.chartTypes.findIndex(ct => ct.id === data.id);
|
||||||
|
if (index !== -1) {
|
||||||
|
this.chartTypes[index] = data;
|
||||||
|
}
|
||||||
|
this.selectedChartType = null;
|
||||||
|
this.showSuccess('Chart type updated successfully');
|
||||||
|
this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error updating chart type:', error);
|
||||||
|
this.showError('Error updating chart type: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||||
|
this.chartTypeLoadingState = ClrLoadingState.ERROR;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteChartType(id: number): void {
|
||||||
|
if (!confirm('Are you sure you want to delete this chart type? This will also delete all related UI components, templates, and fields.')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chartTypeLoadingState = ClrLoadingState.LOADING;
|
||||||
|
this.chartTypeService.deleteChartType(id).subscribe({
|
||||||
|
next: () => {
|
||||||
|
this.chartTypes = this.chartTypes.filter(ct => ct.id !== id);
|
||||||
|
// Clear related data if the deleted chart type was selected
|
||||||
|
if (this.selectedChartType && this.selectedChartType.id === id) {
|
||||||
|
this.selectedChartType = null;
|
||||||
|
this.uiComponents = [];
|
||||||
|
this.chartTemplates = [];
|
||||||
|
this.dynamicFields = [];
|
||||||
|
}
|
||||||
|
this.showSuccess('Chart type deleted successfully');
|
||||||
|
this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error deleting chart type:', error);
|
||||||
|
this.showError('Error deleting chart type: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||||
|
this.chartTypeLoadingState = ClrLoadingState.ERROR;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
selectChartTypeForEdit(chartType: ChartType): void {
|
||||||
|
this.selectedChartType = { ...chartType };
|
||||||
|
}
|
||||||
|
|
||||||
|
// UI Component Methods
|
||||||
|
loadUiComponents(chartTypeId: number): void {
|
||||||
|
if (!chartTypeId) {
|
||||||
|
this.uiComponents = [];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.uiComponentLoadingState = ClrLoadingState.LOADING;
|
||||||
|
this.uiComponentService.getUiComponentsByChartType(chartTypeId).subscribe({
|
||||||
|
next: (data) => {
|
||||||
|
this.uiComponents = data;
|
||||||
|
this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error loading UI components:', error);
|
||||||
|
this.showError('Error loading UI components: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||||
|
this.uiComponentLoadingState = ClrLoadingState.ERROR;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
createUiComponent(): void {
|
||||||
|
if (!this.selectedChartType) {
|
||||||
|
this.showError('Please select a chart type first');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.newUiComponent.componentName) {
|
||||||
|
this.showError('Component name is required');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.uiComponentLoadingState = ClrLoadingState.LOADING;
|
||||||
|
|
||||||
|
// Create a complete chartType object with only the ID
|
||||||
|
const chartTypeWithId = {
|
||||||
|
id: this.selectedChartType.id,
|
||||||
|
name: '',
|
||||||
|
displayName: '',
|
||||||
|
description: '',
|
||||||
|
isActive: true,
|
||||||
|
createdAt: '',
|
||||||
|
updatedAt: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
const uiComponentData = {
|
||||||
|
...this.newUiComponent,
|
||||||
|
chartType: chartTypeWithId
|
||||||
|
};
|
||||||
|
|
||||||
|
this.uiComponentService.createUiComponent(uiComponentData).subscribe({
|
||||||
|
next: (data) => {
|
||||||
|
this.uiComponents.push(data);
|
||||||
|
this.newUiComponent = {};
|
||||||
|
this.showAddUiComponentForm = false;
|
||||||
|
this.showSuccess('UI component created successfully');
|
||||||
|
this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error creating UI component:', error);
|
||||||
|
this.showError('Error creating UI component: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||||
|
this.uiComponentLoadingState = ClrLoadingState.ERROR;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUiComponent(): void {
|
||||||
|
if (!this.selectedUiComponent || !this.selectedUiComponent.componentName) {
|
||||||
|
this.showError('Component name is required');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.uiComponentLoadingState = ClrLoadingState.LOADING;
|
||||||
|
this.uiComponentService.updateUiComponent(this.selectedUiComponent.id, this.selectedUiComponent).subscribe({
|
||||||
|
next: (data) => {
|
||||||
|
const index = this.uiComponents.findIndex(uc => uc.id === data.id);
|
||||||
|
if (index !== -1) {
|
||||||
|
this.uiComponents[index] = data;
|
||||||
|
}
|
||||||
|
this.selectedUiComponent = null;
|
||||||
|
this.showSuccess('UI component updated successfully');
|
||||||
|
this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error updating UI component:', error);
|
||||||
|
this.showError('Error updating UI component: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||||
|
this.uiComponentLoadingState = ClrLoadingState.ERROR;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteUiComponent(id: number): void {
|
||||||
|
if (!confirm('Are you sure you want to delete this UI component?')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.uiComponentLoadingState = ClrLoadingState.LOADING;
|
||||||
|
this.uiComponentService.deleteUiComponent(id).subscribe({
|
||||||
|
next: () => {
|
||||||
|
this.uiComponents = this.uiComponents.filter(uc => uc.id !== id);
|
||||||
|
this.showSuccess('UI component deleted successfully');
|
||||||
|
this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error deleting UI component:', error);
|
||||||
|
this.showError('Error deleting UI component: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||||
|
this.uiComponentLoadingState = ClrLoadingState.ERROR;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
selectUiComponentForEdit(uiComponent: UiComponent): void {
|
||||||
|
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,
|
||||||
|
chartType: { id: 0, name: '', displayName: '', description: '', isActive: true, createdAt: '', updatedAt: '' },
|
||||||
|
componentName: '',
|
||||||
|
componentType: '',
|
||||||
|
displayLabel: '',
|
||||||
|
placeholder: '',
|
||||||
|
isRequired: false,
|
||||||
|
sortOrder: 0,
|
||||||
|
createdAt: '',
|
||||||
|
updatedAt: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
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 };
|
||||||
|
}
|
||||||
|
|
||||||
|
// Chart Template Methods
|
||||||
|
loadChartTemplates(chartTypeId: number): void {
|
||||||
|
if (!chartTypeId) {
|
||||||
|
this.chartTemplates = [];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chartTemplateLoadingState = ClrLoadingState.LOADING;
|
||||||
|
this.chartTemplateService.getChartTemplatesByChartType(chartTypeId).subscribe({
|
||||||
|
next: (data) => {
|
||||||
|
this.chartTemplates = data;
|
||||||
|
this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error loading chart templates:', error);
|
||||||
|
this.showError('Error loading chart templates: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||||
|
this.chartTemplateLoadingState = ClrLoadingState.ERROR;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
createChartTemplate(): void {
|
||||||
|
if (!this.selectedChartType) {
|
||||||
|
this.showError('Please select a chart type first');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.newChartTemplate.templateName) {
|
||||||
|
this.showError('Template name is required');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chartTemplateLoadingState = ClrLoadingState.LOADING;
|
||||||
|
|
||||||
|
// Create a complete chartType object with only the ID
|
||||||
|
const chartTypeWithId = {
|
||||||
|
id: this.selectedChartType.id,
|
||||||
|
name: '',
|
||||||
|
displayName: '',
|
||||||
|
description: '',
|
||||||
|
isActive: true,
|
||||||
|
createdAt: '',
|
||||||
|
updatedAt: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
const chartTemplateData = {
|
||||||
|
...this.newChartTemplate,
|
||||||
|
chartType: chartTypeWithId
|
||||||
|
};
|
||||||
|
|
||||||
|
this.chartTemplateService.createChartTemplate(chartTemplateData).subscribe({
|
||||||
|
next: (data) => {
|
||||||
|
this.chartTemplates.push(data);
|
||||||
|
this.newChartTemplate = {};
|
||||||
|
this.showAddChartTemplateForm = false;
|
||||||
|
this.showSuccess('Chart template created successfully');
|
||||||
|
this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error creating chart template:', error);
|
||||||
|
this.showError('Error creating chart template: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||||
|
this.chartTemplateLoadingState = ClrLoadingState.ERROR;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
updateChartTemplate(): void {
|
||||||
|
if (!this.selectedChartTemplate || !this.selectedChartTemplate.templateName) {
|
||||||
|
this.showError('Template name is required');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chartTemplateLoadingState = ClrLoadingState.LOADING;
|
||||||
|
this.chartTemplateService.updateChartTemplate(this.selectedChartTemplate.id, this.selectedChartTemplate).subscribe({
|
||||||
|
next: (data) => {
|
||||||
|
const index = this.chartTemplates.findIndex(ct => ct.id === data.id);
|
||||||
|
if (index !== -1) {
|
||||||
|
this.chartTemplates[index] = data;
|
||||||
|
}
|
||||||
|
this.selectedChartTemplate = null;
|
||||||
|
this.showSuccess('Chart template updated successfully');
|
||||||
|
this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error updating chart template:', error);
|
||||||
|
this.showError('Error updating chart template: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||||
|
this.chartTemplateLoadingState = ClrLoadingState.ERROR;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteChartTemplate(id: number): void {
|
||||||
|
if (!confirm('Are you sure you want to delete this chart template?')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chartTemplateLoadingState = ClrLoadingState.LOADING;
|
||||||
|
this.chartTemplateService.deleteChartTemplate(id).subscribe({
|
||||||
|
next: () => {
|
||||||
|
this.chartTemplates = this.chartTemplates.filter(ct => ct.id !== id);
|
||||||
|
this.showSuccess('Chart template deleted successfully');
|
||||||
|
this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error deleting chart template:', error);
|
||||||
|
this.showError('Error deleting chart template: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||||
|
this.chartTemplateLoadingState = ClrLoadingState.ERROR;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
selectChartTemplateForEdit(chartTemplate: ChartTemplate): void {
|
||||||
|
this.selectedChartTemplate = { ...chartTemplate };
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dynamic Field Methods
|
||||||
|
loadDynamicFields(chartTypeId: number): void {
|
||||||
|
if (!chartTypeId) {
|
||||||
|
this.dynamicFields = [];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
|
||||||
|
this.dynamicFieldService.getDynamicFieldsByChartType(chartTypeId).subscribe({
|
||||||
|
next: (data) => {
|
||||||
|
this.dynamicFields = data;
|
||||||
|
this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error loading dynamic fields:', error);
|
||||||
|
this.showError('Error loading dynamic fields: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||||
|
this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
createDynamicField(): void {
|
||||||
|
if (!this.selectedChartType) {
|
||||||
|
this.showError('Please select a chart type first');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.newDynamicField.fieldName) {
|
||||||
|
this.showError('Field name is required');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
|
||||||
|
|
||||||
|
// Create a complete chartType object with only the ID
|
||||||
|
const chartTypeWithId = {
|
||||||
|
id: this.selectedChartType.id,
|
||||||
|
name: '',
|
||||||
|
displayName: '',
|
||||||
|
description: '',
|
||||||
|
isActive: true,
|
||||||
|
createdAt: '',
|
||||||
|
updatedAt: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
const dynamicFieldData = {
|
||||||
|
...this.newDynamicField,
|
||||||
|
chartType: chartTypeWithId
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dynamicFieldService.createDynamicField(dynamicFieldData).subscribe({
|
||||||
|
next: (data) => {
|
||||||
|
this.dynamicFields.push(data);
|
||||||
|
this.newDynamicField = {};
|
||||||
|
this.showAddDynamicFieldForm = false;
|
||||||
|
this.showSuccess('Dynamic field created successfully');
|
||||||
|
this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error creating dynamic field:', error);
|
||||||
|
this.showError('Error creating dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||||
|
this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
updateDynamicField(): void {
|
||||||
|
if (!this.selectedDynamicField || !this.selectedDynamicField.fieldName) {
|
||||||
|
this.showError('Field name is required');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
|
||||||
|
this.dynamicFieldService.updateDynamicField(this.selectedDynamicField.id, this.selectedDynamicField).subscribe({
|
||||||
|
next: (data) => {
|
||||||
|
const index = this.dynamicFields.findIndex(df => df.id === data.id);
|
||||||
|
if (index !== -1) {
|
||||||
|
this.dynamicFields[index] = data;
|
||||||
|
}
|
||||||
|
this.selectedDynamicField = null;
|
||||||
|
this.showSuccess('Dynamic field updated successfully');
|
||||||
|
this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error updating dynamic field:', error);
|
||||||
|
this.showError('Error updating dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||||
|
this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteDynamicField(id: number): void {
|
||||||
|
if (!confirm('Are you sure you want to delete this dynamic field?')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
|
||||||
|
this.dynamicFieldService.deleteDynamicField(id).subscribe({
|
||||||
|
next: () => {
|
||||||
|
this.dynamicFields = this.dynamicFields.filter(df => df.id !== id);
|
||||||
|
this.showSuccess('Dynamic field deleted successfully');
|
||||||
|
this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error deleting dynamic field:', error);
|
||||||
|
this.showError('Error deleting dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||||
|
this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
selectDynamicFieldForEdit(dynamicField: DynamicField): void {
|
||||||
|
this.selectedDynamicField = { ...dynamicField };
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper methods
|
||||||
|
onChartTypeSelect(chartType: ChartType): void {
|
||||||
|
this.selectedChartType = chartType;
|
||||||
|
this.loadUiComponents(chartType.id);
|
||||||
|
this.loadChartTemplates(chartType.id);
|
||||||
|
this.loadDynamicFields(chartType.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
resetForms(): void {
|
||||||
|
this.newChartType = {};
|
||||||
|
this.newUiComponent = {};
|
||||||
|
this.newComponentProperty = {};
|
||||||
|
this.newChartTemplate = {};
|
||||||
|
this.newDynamicField = {};
|
||||||
|
this.showAddChartTypeForm = false;
|
||||||
|
this.showAddUiComponentForm = false;
|
||||||
|
this.showAddComponentPropertyForm = false;
|
||||||
|
this.showAddChartTemplateForm = false;
|
||||||
|
this.showAddDynamicFieldForm = false;
|
||||||
|
this.selectedChartType = null;
|
||||||
|
this.selectedUiComponent = null;
|
||||||
|
this.selectedComponentProperty = null;
|
||||||
|
this.selectedChartTemplate = null;
|
||||||
|
this.selectedDynamicField = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
import { ApiRequestService } from 'src/app/services/api/api-request.service';
|
||||||
|
import { ChartTemplate } from './chart-config-manager.component';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
}
|
||||||
|
)
|
||||||
|
export class ChartTemplateService {
|
||||||
|
private chartTemplatesUrl = 'chart-templates';
|
||||||
|
|
||||||
|
constructor(private apiRequest: ApiRequestService) { }
|
||||||
|
|
||||||
|
// Get all chart templates for a chart type
|
||||||
|
getChartTemplatesByChartType(chartTypeId: number): Observable<ChartTemplate[]> {
|
||||||
|
const url = `${this.chartTemplatesUrl}/chart-type/${chartTypeId}`;
|
||||||
|
return this.apiRequest.get(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get chart template by ID
|
||||||
|
getChartTemplateById(id: number): Observable<ChartTemplate> {
|
||||||
|
const url = `${this.chartTemplatesUrl}/${id}`;
|
||||||
|
return this.apiRequest.get(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create new chart template
|
||||||
|
createChartTemplate(chartTemplate: Partial<ChartTemplate>): Observable<ChartTemplate> {
|
||||||
|
return this.apiRequest.post(this.chartTemplatesUrl, chartTemplate);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update chart template
|
||||||
|
updateChartTemplate(id: number, chartTemplate: ChartTemplate): Observable<ChartTemplate> {
|
||||||
|
const url = `${this.chartTemplatesUrl}/${id}`;
|
||||||
|
return this.apiRequest.put(url, chartTemplate);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delete chart template
|
||||||
|
deleteChartTemplate(id: number): Observable<void> {
|
||||||
|
const url = `${this.chartTemplatesUrl}/${id}`;
|
||||||
|
return this.apiRequest.delete(url);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
import { ApiRequestService } from 'src/app/services/api/api-request.service';
|
||||||
|
import { ComponentProperty } from './chart-config-manager.component';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class ComponentPropertyService {
|
||||||
|
private componentPropertiesUrl = 'component-properties';
|
||||||
|
|
||||||
|
constructor(private apiRequest: ApiRequestService) { }
|
||||||
|
|
||||||
|
// Get all component properties for a component
|
||||||
|
getComponentPropertiesByComponent(componentId: number): Observable<ComponentProperty[]> {
|
||||||
|
const url = `${this.componentPropertiesUrl}/component/${componentId}`;
|
||||||
|
return this.apiRequest.get(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get component property by ID
|
||||||
|
getComponentPropertyById(id: number): Observable<ComponentProperty> {
|
||||||
|
const url = `${this.componentPropertiesUrl}/${id}`;
|
||||||
|
return this.apiRequest.get(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create new component property
|
||||||
|
createComponentProperty(componentProperty: Partial<ComponentProperty>): Observable<ComponentProperty> {
|
||||||
|
return this.apiRequest.post(this.componentPropertiesUrl, componentProperty);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update component property
|
||||||
|
updateComponentProperty(id: number, componentProperty: ComponentProperty): Observable<ComponentProperty> {
|
||||||
|
const url = `${this.componentPropertiesUrl}/${id}`;
|
||||||
|
return this.apiRequest.put(url, componentProperty);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delete component property
|
||||||
|
deleteComponentProperty(id: number): Observable<void> {
|
||||||
|
const url = `${this.componentPropertiesUrl}/${id}`;
|
||||||
|
return this.apiRequest.delete(url);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
import { ApiRequestService } from 'src/app/services/api/api-request.service';
|
||||||
|
import { DynamicField } from './chart-config-manager.component';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class DynamicFieldService {
|
||||||
|
private dynamicFieldsUrl = 'dynamic-fields';
|
||||||
|
|
||||||
|
constructor(private apiRequest: ApiRequestService) { }
|
||||||
|
|
||||||
|
// Get all dynamic fields for a chart type
|
||||||
|
getDynamicFieldsByChartType(chartTypeId: number): Observable<DynamicField[]> {
|
||||||
|
const url = `${this.dynamicFieldsUrl}/chart-type/${chartTypeId}`;
|
||||||
|
return this.apiRequest.get(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get dynamic field by ID
|
||||||
|
getDynamicFieldById(id: number): Observable<DynamicField> {
|
||||||
|
const url = `${this.dynamicFieldsUrl}/${id}`;
|
||||||
|
return this.apiRequest.get(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create new dynamic field
|
||||||
|
createDynamicField(dynamicField: Partial<DynamicField>): Observable<DynamicField> {
|
||||||
|
return this.apiRequest.post(this.dynamicFieldsUrl, dynamicField);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update dynamic field
|
||||||
|
updateDynamicField(id: number, dynamicField: DynamicField): Observable<DynamicField> {
|
||||||
|
const url = `${this.dynamicFieldsUrl}/${id}`;
|
||||||
|
return this.apiRequest.put(url, dynamicField);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delete dynamic field
|
||||||
|
deleteDynamicField(id: number): Observable<void> {
|
||||||
|
const url = `${this.dynamicFieldsUrl}/${id}`;
|
||||||
|
return this.apiRequest.delete(url);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
import { ApiRequestService } from 'src/app/services/api/api-request.service';
|
||||||
|
import { UiComponent } from './chart-config-manager.component';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class UiComponentService {
|
||||||
|
private uiComponentsUrl = 'ui-components';
|
||||||
|
|
||||||
|
constructor(private apiRequest: ApiRequestService) { }
|
||||||
|
|
||||||
|
// Get all UI components for a chart type
|
||||||
|
getUiComponentsByChartType(chartTypeId: number): Observable<UiComponent[]> {
|
||||||
|
const url = `${this.uiComponentsUrl}/chart-type/${chartTypeId}`;
|
||||||
|
return this.apiRequest.get(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get UI component by ID
|
||||||
|
getUiComponentById(id: number): Observable<UiComponent> {
|
||||||
|
const url = `${this.uiComponentsUrl}/${id}`;
|
||||||
|
return this.apiRequest.get(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create new UI component
|
||||||
|
createUiComponent(uiComponent: Partial<UiComponent>): Observable<UiComponent> {
|
||||||
|
return this.apiRequest.post(this.uiComponentsUrl, uiComponent);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update UI component
|
||||||
|
updateUiComponent(id: number, uiComponent: UiComponent): Observable<UiComponent> {
|
||||||
|
const url = `${this.uiComponentsUrl}/${id}`;
|
||||||
|
return this.apiRequest.put(url, uiComponent);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delete UI component
|
||||||
|
deleteUiComponent(id: number): Observable<void> {
|
||||||
|
const url = `${this.uiComponentsUrl}/${id}`;
|
||||||
|
return this.apiRequest.delete(url);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -30,6 +30,8 @@ import { CompactFilterComponent } from '../common-filter';
|
|||||||
import { FilterService } from '../common-filter/filter.service';
|
import { FilterService } from '../common-filter/filter.service';
|
||||||
// Add the UnifiedChartComponent import
|
// Add the UnifiedChartComponent import
|
||||||
import { UnifiedChartComponent } from '../gadgets/unified-chart';
|
import { UnifiedChartComponent } from '../gadgets/unified-chart';
|
||||||
|
// Add the ChartConfigModalComponent import
|
||||||
|
import { ChartConfigModalComponent } from './chart-config-modal.component';
|
||||||
|
|
||||||
function isNullArray(arr) {
|
function isNullArray(arr) {
|
||||||
return !Array.isArray(arr) || arr.length === 0;
|
return !Array.isArray(arr) || arr.length === 0;
|
||||||
|
|||||||
Reference in New Issue
Block a user