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';
|
||||
// Add the UnifiedChartComponent import
|
||||
import { UnifiedChartComponent } from '../gadgets/unified-chart';
|
||||
// Add the ChartConfigModalComponent import
|
||||
import { ChartConfigModalComponent } from './chart-config-modal.component';
|
||||
|
||||
function isNullArray(arr) {
|
||||
return !Array.isArray(arr) || arr.length === 0;
|
||||
|
||||
Reference in New Issue
Block a user