chart
This commit is contained in:
Gaurav Kumar
@@ -24,6 +24,7 @@ export class AllnewdashComponent implements OnInit {
|
||||
projectname;
|
||||
projectId;
|
||||
error;
|
||||
chartConfigManagerOpen = false;
|
||||
constructor(
|
||||
private router : Router,
|
||||
private route: ActivatedRoute,private dashboardService : DashboardService,
|
||||
|
||||
@@ -0,0 +1,630 @@
|
||||
<div class="chart-config-manager">
|
||||
<h2>Chart Configuration Manager</h2>
|
||||
|
||||
<!-- Chart Types Section -->
|
||||
<clr-tabs>
|
||||
<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">
|
||||
Add Chart Type
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Add Chart Type Form -->
|
||||
<div class="card-block" *ngIf="showAddChartTypeForm">
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="newChartType.name" name="chartTypeName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Display Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="newChartType.displayName" name="chartTypeDisplayName" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>Description</label>
|
||||
<textarea clrTextarea [(ngModel)]="newChartType.description" name="chartTypeDescription"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Active</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="newChartType.isActive" name="chartTypeIsActive" />
|
||||
<label>Active</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="createChartType()" [disabled]="!newChartType.name">Save</button>
|
||||
<button class="btn" (click)="showAddChartTypeForm = false">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Chart Types Table -->
|
||||
<div class="card-block">
|
||||
<clr-datagrid>
|
||||
<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>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>
|
||||
<button class="btn btn-sm btn-icon" (click)="selectChartTypeForEdit(chartType)">
|
||||
<cds-icon shape="pencil"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteChartType(chartType.id)">
|
||||
<cds-icon shape="trash"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="onChartTypeSelect(chartType)">
|
||||
<cds-icon shape="eye"></cds-icon>
|
||||
</button>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{chartTypes.length}} chart types
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<!-- Edit Chart Type Form -->
|
||||
<div class="card-block" *ngIf="selectedChartType">
|
||||
<h4>Edit Chart Type</h4>
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedChartType.name" name="editChartTypeName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Display Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedChartType.displayName" name="editChartTypeDisplayName" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>Description</label>
|
||||
<textarea clrTextarea [(ngModel)]="selectedChartType.description" name="editChartTypeDescription"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Active</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="selectedChartType.isActive" name="editChartTypeIsActive" />
|
||||
<label>Active</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="updateChartType()" [disabled]="!selectedChartType.name">Update</button>
|
||||
<button class="btn" (click)="selectedChartType = null">Cancel</button>
|
||||
</div>
|
||||
</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">
|
||||
Add UI Component
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Add UI Component Form -->
|
||||
<div class="card-block" *ngIf="showAddUiComponentForm">
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Component Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="newUiComponent.componentName" name="componentName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Component Type</label>
|
||||
<input clrInput type="text" [(ngModel)]="newUiComponent.componentType" name="componentType" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Display Label</label>
|
||||
<input clrInput type="text" [(ngModel)]="newUiComponent.displayLabel" name="displayLabel" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Placeholder</label>
|
||||
<input clrInput type="text" [(ngModel)]="newUiComponent.placeholder" name="placeholder" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Sort Order</label>
|
||||
<input clrInput type="number" [(ngModel)]="newUiComponent.sortOrder" name="sortOrder" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Required</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="newUiComponent.isRequired" name="isRequired" />
|
||||
<label>Required</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="createUiComponent()" [disabled]="!newUiComponent.componentName">Save</button>
|
||||
<button class="btn" (click)="showAddUiComponentForm = false">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- UI Components Table -->
|
||||
<div class="card-block">
|
||||
<clr-datagrid>
|
||||
<clr-dg-column>Component Name</clr-dg-column>
|
||||
<clr-dg-column>Component Type</clr-dg-column>
|
||||
<clr-dg-column>Display Label</clr-dg-column>
|
||||
<clr-dg-column>Placeholder</clr-dg-column>
|
||||
<clr-dg-column>Required</clr-dg-column>
|
||||
<clr-dg-column>Sort Order</clr-dg-column>
|
||||
<clr-dg-column>Actions</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let uiComponent of uiComponents" [clrDgItem]="uiComponent">
|
||||
<clr-dg-cell>{{uiComponent.componentName}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{uiComponent.componentType}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{uiComponent.displayLabel}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{uiComponent.placeholder}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<span class="label" [class.label-success]="uiComponent.isRequired" [class.label-danger]="!uiComponent.isRequired">
|
||||
{{uiComponent.isRequired ? 'Yes' : 'No'}}
|
||||
</span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>{{uiComponent.sortOrder}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<button class="btn btn-sm btn-icon" (click)="selectUiComponentForEdit(uiComponent)">
|
||||
<cds-icon shape="pencil"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteUiComponent(uiComponent.id)">
|
||||
<cds-icon shape="trash"></cds-icon>
|
||||
</button>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{uiComponents.length}} UI components
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<!-- Edit UI Component Form -->
|
||||
<div class="card-block" *ngIf="selectedUiComponent">
|
||||
<h4>Edit UI Component</h4>
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Component Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedUiComponent.componentName" name="editComponentName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Component Type</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedUiComponent.componentType" name="editComponentType" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Display Label</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedUiComponent.displayLabel" name="editDisplayLabel" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Placeholder</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedUiComponent.placeholder" name="editPlaceholder" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Sort Order</label>
|
||||
<input clrInput type="number" [(ngModel)]="selectedUiComponent.sortOrder" name="editSortOrder" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Required</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="selectedUiComponent.isRequired" name="editIsRequired" />
|
||||
<label>Required</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="updateUiComponent()" [disabled]="!selectedUiComponent.componentName">Update</button>
|
||||
<button class="btn" (click)="selectedUiComponent = null">Cancel</button>
|
||||
</div>
|
||||
</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">
|
||||
Add Property
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Add Component Property Form -->
|
||||
<div class="card-block" *ngIf="showAddComponentPropertyForm">
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Property Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="newComponentProperty.propertyName" name="propertyName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Property Value</label>
|
||||
<input clrInput type="text" [(ngModel)]="newComponentProperty.propertyValue" name="propertyValue" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Property Type</label>
|
||||
<input clrInput type="text" [(ngModel)]="newComponentProperty.propertyType" name="propertyType" />
|
||||
</clr-input-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="createComponentProperty()" [disabled]="!newComponentProperty.propertyName">Save</button>
|
||||
<button class="btn" (click)="showAddComponentPropertyForm = false">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Component Properties Table -->
|
||||
<div class="card-block">
|
||||
<clr-datagrid>
|
||||
<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>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>
|
||||
<button class="btn btn-sm btn-icon" (click)="selectComponentPropertyForEdit(property)">
|
||||
<cds-icon shape="pencil"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteComponentProperty(property.id)">
|
||||
<cds-icon shape="trash"></cds-icon>
|
||||
</button>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{componentProperties.length}} properties
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<!-- Edit Component Property Form -->
|
||||
<div class="card-block" *ngIf="selectedComponentProperty">
|
||||
<h4>Edit Component Property</h4>
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Property Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyName" name="editPropertyName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Property Value</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyValue" name="editPropertyValue" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Property Type</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyType" name="editPropertyType" />
|
||||
</clr-input-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="updateComponentProperty()" [disabled]="!selectedComponentProperty.propertyName">Update</button>
|
||||
<button class="btn" (click)="selectedComponentProperty = null">Cancel</button>
|
||||
</div>
|
||||
</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">
|
||||
Add Template
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Add Chart Template Form -->
|
||||
<div class="card-block" *ngIf="showAddChartTemplateForm">
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Template Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="newChartTemplate.templateName" name="templateName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>HTML Template</label>
|
||||
<textarea clrTextarea [(ngModel)]="newChartTemplate.templateHtml" name="templateHtml" rows="5"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>CSS Template</label>
|
||||
<textarea clrTextarea [(ngModel)]="newChartTemplate.templateCss" name="templateCss" rows="5"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Default</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="newChartTemplate.isDefault" name="isDefault" />
|
||||
<label>Default Template</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="createChartTemplate()" [disabled]="!newChartTemplate.templateName">Save</button>
|
||||
<button class="btn" (click)="showAddChartTemplateForm = false">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Chart Templates Table -->
|
||||
<div class="card-block">
|
||||
<clr-datagrid>
|
||||
<clr-dg-column>Template Name</clr-dg-column>
|
||||
<clr-dg-column>Is Default</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>
|
||||
<button class="btn btn-sm btn-icon" (click)="selectChartTemplateForEdit(template)">
|
||||
<cds-icon shape="pencil"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteChartTemplate(template.id)">
|
||||
<cds-icon shape="trash"></cds-icon>
|
||||
</button>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{chartTemplates.length}} templates
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<!-- Edit Chart Template Form -->
|
||||
<div class="card-block" *ngIf="selectedChartTemplate">
|
||||
<h4>Edit Chart Template</h4>
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Template Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedChartTemplate.templateName" name="editTemplateName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>HTML Template</label>
|
||||
<textarea clrTextarea [(ngModel)]="selectedChartTemplate.templateHtml" name="editTemplateHtml" rows="5"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>CSS Template</label>
|
||||
<textarea clrTextarea [(ngModel)]="selectedChartTemplate.templateCss" name="editTemplateCss" rows="5"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Default</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="selectedChartTemplate.isDefault" name="editIsDefault" />
|
||||
<label>Default Template</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="updateChartTemplate()" [disabled]="!selectedChartTemplate.templateName">Update</button>
|
||||
<button class="btn" (click)="selectedChartTemplate = null">Cancel</button>
|
||||
</div>
|
||||
</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">
|
||||
Add Field
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Add Dynamic Field Form -->
|
||||
<div class="card-block" *ngIf="showAddDynamicFieldForm">
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Field Name</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">Save</button>
|
||||
<button class="btn" (click)="showAddDynamicFieldForm = false">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Dynamic Fields Table -->
|
||||
<div class="card-block">
|
||||
<clr-datagrid>
|
||||
<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>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>
|
||||
<button class="btn btn-sm btn-icon" (click)="selectDynamicFieldForEdit(field)">
|
||||
<cds-icon shape="pencil"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteDynamicField(field.id)">
|
||||
<cds-icon shape="trash"></cds-icon>
|
||||
</button>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{dynamicFields.length}} fields
|
||||
</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</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">Update</button>
|
||||
<button class="btn" (click)="selectedDynamicField = null">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</clr-tab-content>
|
||||
</clr-tab>
|
||||
</clr-tabs>
|
||||
</div>
|
||||
@@ -0,0 +1,60 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,658 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { environment } from 'src/environments/environment';
|
||||
import { ClrLoadingState } from '@clr/angular';
|
||||
|
||||
interface ChartType {
|
||||
id: number;
|
||||
name: string;
|
||||
displayName: string;
|
||||
description: string;
|
||||
isActive: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface UiComponent {
|
||||
id: number;
|
||||
chartType: ChartType;
|
||||
componentName: string;
|
||||
componentType: string;
|
||||
displayLabel: string;
|
||||
placeholder: string;
|
||||
isRequired: boolean;
|
||||
sortOrder: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface ComponentProperty {
|
||||
id: number;
|
||||
component: UiComponent;
|
||||
propertyName: string;
|
||||
propertyValue: string;
|
||||
propertyType: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface ChartTemplate {
|
||||
id: number;
|
||||
chartType: ChartType;
|
||||
templateName: string;
|
||||
templateHtml: string;
|
||||
templateCss: string;
|
||||
isDefault: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
// Error handling
|
||||
errorMessage: string | null = null;
|
||||
successMessage: string | null = null;
|
||||
|
||||
// API base URL
|
||||
private apiUrl = environment.apiUrl || 'http://localhost:8080/api';
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
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.http.get<ChartType[]>(`${this.apiUrl}/chart-types`).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.http.post<ChartType>(`${this.apiUrl}/chart-types`, 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.http.put<ChartType>(`${this.apiUrl}/chart-types/${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?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.chartTypeLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.delete(`${this.apiUrl}/chart-types/${id}`).subscribe({
|
||||
next: () => {
|
||||
this.chartTypes = this.chartTypes.filter(ct => ct.id !== id);
|
||||
// Also 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 {
|
||||
this.uiComponentLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.get<UiComponent[]>(`${this.apiUrl}/ui-components/chart-type/${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;
|
||||
const uiComponentData = {
|
||||
...this.newUiComponent,
|
||||
chartType: { id: this.selectedChartType.id }
|
||||
};
|
||||
|
||||
this.http.post<UiComponent>(`${this.apiUrl}/ui-components`, 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.http.put<UiComponent>(`${this.apiUrl}/ui-components/${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.http.delete(`${this.apiUrl}/ui-components/${id}`).subscribe({
|
||||
next: () => {
|
||||
this.uiComponents = this.uiComponents.filter(uc => uc.id !== id);
|
||||
if (this.selectedUiComponent && this.selectedUiComponent.id === id) {
|
||||
this.selectedUiComponent = null;
|
||||
}
|
||||
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 {
|
||||
this.componentPropertyLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.get<ComponentProperty[]>(`${this.apiUrl}/component-properties/component/${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;
|
||||
const componentPropertyData = {
|
||||
...this.newComponentProperty,
|
||||
component: { id: this.selectedUiComponent.id }
|
||||
};
|
||||
|
||||
this.http.post<ComponentProperty>(`${this.apiUrl}/component-properties`, 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.http.put<ComponentProperty>(`${this.apiUrl}/component-properties/${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.http.delete(`${this.apiUrl}/component-properties/${id}`).subscribe({
|
||||
next: () => {
|
||||
this.componentProperties = this.componentProperties.filter(cp => cp.id !== id);
|
||||
if (this.selectedComponentProperty && this.selectedComponentProperty.id === id) {
|
||||
this.selectedComponentProperty = null;
|
||||
}
|
||||
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 {
|
||||
this.chartTemplateLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.get<ChartTemplate[]>(`${this.apiUrl}/chart-templates/chart-type/${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;
|
||||
const chartTemplateData = {
|
||||
...this.newChartTemplate,
|
||||
chartType: { id: this.selectedChartType.id }
|
||||
};
|
||||
|
||||
this.http.post<ChartTemplate>(`${this.apiUrl}/chart-templates`, 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.http.put<ChartTemplate>(`${this.apiUrl}/chart-templates/${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.http.delete(`${this.apiUrl}/chart-templates/${id}`).subscribe({
|
||||
next: () => {
|
||||
this.chartTemplates = this.chartTemplates.filter(ct => ct.id !== id);
|
||||
if (this.selectedChartTemplate && this.selectedChartTemplate.id === id) {
|
||||
this.selectedChartTemplate = null;
|
||||
}
|
||||
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 {
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.get<DynamicField[]>(`${this.apiUrl}/dynamic-fields/chart-type/${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;
|
||||
const dynamicFieldData = {
|
||||
...this.newDynamicField,
|
||||
chartType: { id: this.selectedChartType.id }
|
||||
};
|
||||
|
||||
this.http.post<DynamicField>(`${this.apiUrl}/dynamic-fields`, 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.http.put<DynamicField>(`${this.apiUrl}/dynamic-fields/${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.http.delete(`${this.apiUrl}/dynamic-fields/${id}`).subscribe({
|
||||
next: () => {
|
||||
this.dynamicFields = this.dynamicFields.filter(df => df.id !== id);
|
||||
if (this.selectedDynamicField && this.selectedDynamicField.id === id) {
|
||||
this.selectedDynamicField = null;
|
||||
}
|
||||
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,157 @@
|
||||
<div class="chart-type-manager">
|
||||
<h2>Chart Type Management</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>
|
||||
|
||||
<!-- Add Chart Type Form -->
|
||||
<div class="card" *ngIf="showAddChartTypeForm">
|
||||
<div class="card-header">
|
||||
<h3>Add New Chart Type</h3>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Name <span class="required">*</span></label>
|
||||
<input clrInput type="text" [(ngModel)]="newChartType.name" name="chartTypeName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Display Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="newChartType.displayName" name="chartTypeDisplayName" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>Description</label>
|
||||
<textarea clrTextarea [(ngModel)]="newChartType.description" name="chartTypeDescription" rows="3"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Active</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="newChartType.isActive" name="chartTypeIsActive" />
|
||||
<label>Active</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="createChartType()" [disabled]="!newChartType.name || chartTypeLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="chartTypeLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
Save
|
||||
</button>
|
||||
<button class="btn" (click)="showAddChartTypeForm = false">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chart Types Grid -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col">
|
||||
<h3>Chart Types</h3>
|
||||
</div>
|
||||
<div class="clr-col" style="text-align: right;">
|
||||
<button class="btn btn-primary" (click)="showAddChartTypeForm = true">
|
||||
<cds-icon shape="plus"></cds-icon> Add Chart Type
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{chartTypes.length}} chart type(s)
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Chart Type Form -->
|
||||
<div class="card" *ngIf="selectedChartType">
|
||||
<div class="card-header">
|
||||
<h3>Edit Chart Type</h3>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Name <span class="required">*</span></label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedChartType.name" name="editChartTypeName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Display Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedChartType.displayName" name="editChartTypeDisplayName" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>Description</label>
|
||||
<textarea clrTextarea [(ngModel)]="selectedChartType.description" name="editChartTypeDescription" rows="3"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Active</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="selectedChartType.isActive" name="editChartTypeIsActive" />
|
||||
<label>Active</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="updateChartType()" [disabled]="!selectedChartType.name || chartTypeLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="chartTypeLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
Update
|
||||
</button>
|
||||
<button class="btn" (click)="selectedChartType = null">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,60 @@
|
||||
.chart-type-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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { environment } from 'src/environments/environment';
|
||||
import { ClrLoadingState } from '@clr/angular';
|
||||
|
||||
interface ChartType {
|
||||
id: number;
|
||||
name: string;
|
||||
displayName: string;
|
||||
description: string;
|
||||
isActive: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-chart-type-manager',
|
||||
templateUrl: './chart-type-manager.component.html',
|
||||
styleUrls: ['./chart-type-manager.component.scss']
|
||||
})
|
||||
export class ChartTypeManagerComponent implements OnInit {
|
||||
chartTypes: ChartType[] = [];
|
||||
selectedChartType: ChartType | null = null;
|
||||
newChartType: Partial<ChartType> = {};
|
||||
showAddChartTypeForm = false;
|
||||
chartTypeLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||
|
||||
// Error handling
|
||||
errorMessage: string | null = null;
|
||||
successMessage: string | null = null;
|
||||
|
||||
// API base URL
|
||||
private apiUrl = environment.apiUrl || 'http://localhost:8080/api';
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
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.http.get<ChartType[]>(`${this.apiUrl}/chart-types`).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.http.post<ChartType>(`${this.apiUrl}/chart-types`, 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.http.put<ChartType>(`${this.apiUrl}/chart-types/${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?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.chartTypeLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.delete(`${this.apiUrl}/chart-types/${id}`).subscribe({
|
||||
next: () => {
|
||||
this.chartTypes = this.chartTypes.filter(ct => ct.id !== id);
|
||||
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 };
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-chart-type-page',
|
||||
template: `
|
||||
<div class="chart-type-page">
|
||||
<app-chart-type-manager></app-chart-type-manager>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.chart-type-page {
|
||||
padding: 20px;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class ChartTypePageComponent { }
|
||||
@@ -732,6 +732,7 @@
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
|
||||
<!-- Common Filter Modal -->
|
||||
<clr-modal [(clrModalOpen)]="commonFilterModalOpen" [clrModalStaticBackdrop]="true" clrModalSize="lg">
|
||||
<h3 class="modal-title">Configure Common Filter</h3>
|
||||
@@ -816,3 +817,4 @@
|
||||
<button type="button" class="btn btn-primary" (click)="saveCommonFilter()">Save</button>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
|
||||
@@ -96,12 +96,12 @@ export class EditnewdashComponent implements OnInit {
|
||||
identifier: 'scatter_chart'
|
||||
},
|
||||
{
|
||||
name: 'Dynamic Chart',
|
||||
identifier: 'dynamic_chart'
|
||||
name: 'Dynamic Chart',
|
||||
identifier: 'dynamic_chart'
|
||||
},
|
||||
{
|
||||
name: 'Financial Chart',
|
||||
identifier: 'financial_chart'
|
||||
name: 'Financial Chart',
|
||||
identifier: 'financial_chart'
|
||||
},
|
||||
{
|
||||
name: 'To Do',
|
||||
@@ -331,6 +331,7 @@ export class EditnewdashComponent implements OnInit {
|
||||
this.toggle = !this.toggle;
|
||||
}
|
||||
|
||||
|
||||
onDrag(event, identifier) {
|
||||
console.log("on drag", identifier);
|
||||
console.log("on drag ", event);
|
||||
@@ -456,7 +457,7 @@ export class EditnewdashComponent implements OnInit {
|
||||
}
|
||||
// Also handle the case where the chart already has the correct name
|
||||
else if (dashboard.chartType && chartNameMap.hasOwnProperty(dashboard.chartType) &&
|
||||
dashboard.name === chartNameMap[dashboard.chartType]) {
|
||||
dashboard.name === chartNameMap[dashboard.chartType]) {
|
||||
// The name is already correct, no need to change it
|
||||
dashboard.component = "Unified Chart";
|
||||
}
|
||||
@@ -894,7 +895,7 @@ export class EditnewdashComponent implements OnInit {
|
||||
|
||||
// Check if we have either datastore or table to fetch columns
|
||||
if ((item.datastore !== undefined && item.datastore !== '' && item.datastore !== null) ||
|
||||
(item.table !== undefined && item.table !== '' && item.table !== null)) {
|
||||
(item.table !== undefined && item.table !== '' && item.table !== null)) {
|
||||
const datastore = item.datastore;
|
||||
const table = item.table;
|
||||
|
||||
@@ -1009,8 +1010,8 @@ export class EditnewdashComponent implements OnInit {
|
||||
|
||||
// Handle both array and string yAxis values
|
||||
if (this.selectedyAxis !== undefined && this.selectedyAxis !== null &&
|
||||
((Array.isArray(this.selectedyAxis) && this.selectedyAxis.length > 0) ||
|
||||
(typeof this.selectedyAxis === 'string' && this.selectedyAxis !== ''))) {
|
||||
((Array.isArray(this.selectedyAxis) && this.selectedyAxis.length > 0) ||
|
||||
(typeof this.selectedyAxis === 'string' && this.selectedyAxis !== ''))) {
|
||||
console.log("get y-axis", this.selectedyAxis);
|
||||
this.entryForm.patchValue({ yAxis: this.selectedyAxis });
|
||||
}
|
||||
@@ -1292,8 +1293,8 @@ export class EditnewdashComponent implements OnInit {
|
||||
// Update the form with selected Y-axis values
|
||||
// Handle both array and string yAxis values
|
||||
if (this.selectedyAxis !== undefined && this.selectedyAxis !== null &&
|
||||
((Array.isArray(this.selectedyAxis) && this.selectedyAxis.length > 0) ||
|
||||
(typeof this.selectedyAxis === 'string' && this.selectedyAxis !== ''))) {
|
||||
((Array.isArray(this.selectedyAxis) && this.selectedyAxis.length > 0) ||
|
||||
(typeof this.selectedyAxis === 'string' && this.selectedyAxis !== ''))) {
|
||||
console.log("get y-axis", this.selectedyAxis);
|
||||
this.entryForm.patchValue({ yAxis: this.selectedyAxis });
|
||||
}
|
||||
@@ -1995,7 +1996,7 @@ export class EditnewdashComponent implements OnInit {
|
||||
(values: string[]) => {
|
||||
// Update filter options string for dropdown/multiselect
|
||||
if (this.gadgetsEditdata['filterType'] === 'dropdown' ||
|
||||
this.gadgetsEditdata['filterType'] === 'multiselect') {
|
||||
this.gadgetsEditdata['filterType'] === 'multiselect') {
|
||||
this.filterOptionsString = values.join(', ');
|
||||
// Also update the gadgetsEditdata filterOptions array
|
||||
this.gadgetsEditdata['filterOptions'] = values;
|
||||
@@ -2013,7 +2014,7 @@ export class EditnewdashComponent implements OnInit {
|
||||
this.gadgetsEditdata['filterKey'] = key;
|
||||
// Load available values when filter key changes
|
||||
if (key && (this.gadgetsEditdata['filterType'] === 'dropdown' ||
|
||||
this.gadgetsEditdata['filterType'] === 'multiselect')) {
|
||||
this.gadgetsEditdata['filterType'] === 'multiselect')) {
|
||||
this.loadAvailableValues(key);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,14 +14,12 @@
|
||||
</div>
|
||||
|
||||
<!-- Filter toggle icon -->
|
||||
<div class="filter-toggle-icon" *ngIf="baseFilters && baseFilters.length > 0"
|
||||
(click)="toggleFilters()"
|
||||
style="cursor: pointer; text-align: right; padding: 5px;">
|
||||
<div class="filter-toggle-icon" *ngIf="hasFilters()" (click)="toggleFilters()">
|
||||
<clr-icon shape="filter" size="24"
|
||||
[style.color]="showFilters ? '#007cba' : '#666'"
|
||||
title="Toggle Filters">
|
||||
</clr-icon>
|
||||
<span style="margin-left: 5px; font-size: 12px; color: #666;">
|
||||
<span>
|
||||
{{ showFilters ? 'Hide Filters' : 'Show Filters' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -88,6 +88,20 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
|
||||
})
|
||||
);
|
||||
|
||||
// Log initial input values for debugging
|
||||
console.log('UnifiedChartComponent ngOnInit - initial input values:', {
|
||||
chartType: this.chartType,
|
||||
xAxis: this.xAxis,
|
||||
yAxis: this.yAxis,
|
||||
table: this.table,
|
||||
baseFilters: this.baseFilters,
|
||||
drilldownFilters: this.drilldownFilters,
|
||||
drilldownLayers: this.drilldownLayers
|
||||
});
|
||||
|
||||
// Check if filters are available
|
||||
console.log('Has filters in ngOnInit:', this.hasFilters());
|
||||
|
||||
// Initialize filter values if they haven't been initialized yet
|
||||
if (!this.filtersInitialized) {
|
||||
this.initializeFilterValues();
|
||||
@@ -1688,6 +1702,8 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
|
||||
return 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Clear all filters
|
||||
clearAllFilters(): void {
|
||||
// Clear base filters
|
||||
|
||||
Reference in New Issue
Block a user