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

new

Browse Source
This commit is contained in:
Gaurav Kumar
2025-11-03 15:01:46 +05:30
parent 57acdb0300
commit c4dfb0283c
20 changed files with 450 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.html
View File

@@ -0,0 +1,33 @@
<div class="chart-template-form">
<form clrForm (ngSubmit)="onSubmit()" #chartTemplateForm="ngForm">
<clr-input-container>
<label>Template Name <span class="required">*</span></label>
<input clrInput type="text" [(ngModel)]="chartTemplate.templateName" name="templateName" required />
</clr-input-container>
<clr-textarea-container>
<label>HTML Template</label>
<textarea clrTextarea [(ngModel)]="chartTemplate.templateHtml" name="templateHtml" rows="5" placeholder="<div class='chart-container'>...</div>"></textarea>
</clr-textarea-container>
<clr-textarea-container>
<label>CSS Template</label>
<textarea clrTextarea [(ngModel)]="chartTemplate.templateCss" name="templateCss" rows="5" placeholder=".chart-container { ... }"></textarea>
</clr-textarea-container>
<clr-checkbox-container>
<label>Is Default</label>
<clr-checkbox-wrapper>
<input type="checkbox" clrCheckbox [(ngModel)]="chartTemplate.isDefault" name="isDefault" />
<label>Default Template</label>
</clr-checkbox-wrapper>
</clr-checkbox-container>
<div class="form-actions">
<button class="btn btn-primary" type="submit" [disabled]="!chartTemplate.templateName">
{{ isEdit ? 'Update' : 'Save' }}
</button>
<button class="btn" type="button" (click)="onCancel()">Cancel</button>
</div>
</form>
</div>

17
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.scss
View File

@@ -0,0 +1,17 @@
.chart-template-form {
padding: 20px;
background-color: #f9f9f9;
border-radius: 4px;
margin-bottom: 20px;
}
.form-actions {
margin-top: 20px;
display: flex;
gap: 10px;
}
textarea {
font-family: 'Courier New', monospace;
font-size: 12px;
}

22
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.ts
View File

@@ -0,0 +1,22 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { ChartTemplate } from '../chart-config-manager.component';
@Component({
selector: 'app-chart-template-form',
templateUrl: './chart-template-form.component.html',
styleUrls: ['./chart-template-form.component.scss']
})
export class ChartTemplateFormComponent {
@Input() chartTemplate: Partial<ChartTemplate> = {};
@Input() isEdit = false;
@Output() save = new EventEmitter<Partial<ChartTemplate>>();
@Output() cancel = new EventEmitter<void>();
onSubmit(): void {
this.save.emit(this.chartTemplate);
}
onCancel(): void {
this.cancel.emit();
}
}

33
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.html
View File

@@ -0,0 +1,33 @@
<div class="chart-type-form">
<form clrForm (ngSubmit)="onSubmit()" #chartTypeForm="ngForm">
<clr-input-container>
<label>Name <span class="required">*</span></label>
<input clrInput type="text" [(ngModel)]="chartType.name" name="chartTypeName" required />
</clr-input-container>
<clr-input-container>
<label>Display Name</label>
<input clrInput type="text" [(ngModel)]="chartType.displayName" name="chartTypeDisplayName" />
</clr-input-container>
<clr-textarea-container>
<label>Description</label>
<textarea clrTextarea [(ngModel)]="chartType.description" name="chartTypeDescription" rows="3"></textarea>
</clr-textarea-container>
<clr-checkbox-container>
<label>Is Active</label>
<clr-checkbox-wrapper>
<input type="checkbox" clrCheckbox [(ngModel)]="chartType.isActive" name="chartTypeIsActive" />
<label>Active</label>
</clr-checkbox-wrapper>
</clr-checkbox-container>
<div class="form-actions">
<button class="btn btn-primary" type="submit" [disabled]="!chartType.name">
{{ isEdit ? 'Update' : 'Save' }}
</button>
<button class="btn" type="button" (click)="onCancel()">Cancel</button>
</div>
</form>
</div>

12
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.scss
View File

@@ -0,0 +1,12 @@
.chart-type-form {
padding: 20px;
background-color: #f9f9f9;
border-radius: 4px;
margin-bottom: 20px;
}
.form-actions {
margin-top: 20px;
display: flex;
gap: 10px;
}

22
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.ts
View File

@@ -0,0 +1,22 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { ChartType } from '../chart-config-manager.component';
@Component({
selector: 'app-chart-type-form',
templateUrl: './chart-type-form.component.html',
styleUrls: ['./chart-type-form.component.scss']
})
export class ChartTypeFormComponent {
@Input() chartType: Partial<ChartType> = {};
@Input() isEdit = false;
@Output() save = new EventEmitter<Partial<ChartType>>();
@Output() cancel = new EventEmitter<void>();
onSubmit(): void {
this.save.emit(this.chartType);
}
onCancel(): void {
this.cancel.emit();
}
}

28
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.html
View File

@@ -0,0 +1,28 @@
<div class="component-property-form">
<form clrForm (ngSubmit)="onSubmit()" #componentPropertyForm="ngForm">
<clr-input-container>
<label>Property Name <span class="required">*</span></label>
<input clrInput type="text" [(ngModel)]="componentProperty.propertyName" name="propertyName" required />
</clr-input-container>
<clr-input-container>
<label>Property Value</label>
<input clrInput type="text" [(ngModel)]="componentProperty.propertyValue" name="propertyValue" />
</clr-input-container>
<clr-select-container>
<label>Property Type</label>
<select clrSelect [(ngModel)]="componentProperty.propertyType" name="propertyType">
<option value="">Select a type</option>
<option *ngFor="let type of propertyTypes" [value]="type">{{ type | titlecase }}</option>
</select>
</clr-select-container>
<div class="form-actions">
<button class="btn btn-primary" type="submit" [disabled]="!componentProperty.propertyName">
{{ isEdit ? 'Update' : 'Save' }}
</button>
<button class="btn" type="button" (click)="onCancel()">Cancel</button>
</div>
</form>
</div>

12
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.scss
View File

@@ -0,0 +1,12 @@
.component-property-form {
padding: 20px;
background-color: #f9f9f9;
border-radius: 4px;
margin-bottom: 20px;
}
.form-actions {
margin-top: 20px;
display: flex;
gap: 10px;
}

31
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.ts
View File

@@ -0,0 +1,31 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { ComponentProperty } from '../chart-config-manager.component';
@Component({
selector: 'app-component-property-form',
templateUrl: './component-property-form.component.html',
styleUrls: ['./component-property-form.component.scss']
})
export class ComponentPropertyFormComponent {
@Input() componentProperty: Partial<ComponentProperty> = {};
@Input() isEdit = false;
@Output() save = new EventEmitter<Partial<ComponentProperty>>();
@Output() cancel = new EventEmitter<void>();
propertyTypes = [
'string',
'number',
'boolean',
'array',
'object',
'function'
];
onSubmit(): void {
this.save.emit(this.componentProperty);
}
onCancel(): void {
this.cancel.emit();
}
}

54
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.html
View File

@@ -0,0 +1,54 @@
<div class="dynamic-field-form">
<form clrForm (ngSubmit)="onSubmit()" #dynamicFieldForm="ngForm">
<clr-input-container>
<label>Field Name <span class="required">*</span></label>
<input clrInput type="text" [(ngModel)]="dynamicField.fieldName" name="fieldName" required />
</clr-input-container>
<clr-input-container>
<label>Field Label</label>
<input clrInput type="text" [(ngModel)]="dynamicField.fieldLabel" name="fieldLabel" />
</clr-input-container>
<clr-select-container>
<label>Field Type</label>
<select clrSelect [(ngModel)]="dynamicField.fieldType" name="fieldType">
<option value="">Select a type</option>
<option *ngFor="let type of fieldTypes" [value]="type">{{ type | titlecase }}</option>
</select>
</clr-select-container>
<clr-textarea-container>
<label>Field Options (JSON format)</label>
<textarea clrTextarea [(ngModel)]="dynamicField.fieldOptions" name="fieldOptions" rows="3" placeholder='{"option1": "Option 1", "option2": "Option 2"}'></textarea>
</clr-textarea-container>
<clr-input-container>
<label>Sort Order</label>
<input clrInput type="number" [(ngModel)]="dynamicField.sortOrder" name="fieldSortOrder" />
</clr-input-container>
<clr-checkbox-container>
<label>Is Required</label>
<clr-checkbox-wrapper>
<input type="checkbox" clrCheckbox [(ngModel)]="dynamicField.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)]="dynamicField.showInUi" name="fieldShowInUi" />
<label>Show in UI</label>
</clr-checkbox-wrapper>
</clr-checkbox-container>
<div class="form-actions">
<button class="btn btn-primary" type="submit" [disabled]="!dynamicField.fieldName">
{{ isEdit ? 'Update' : 'Save' }}
</button>
<button class="btn" type="button" (click)="onCancel()">Cancel</button>
</div>
</form>
</div>

17
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.scss
View File

@@ -0,0 +1,17 @@
.dynamic-field-form {
padding: 20px;
background-color: #f9f9f9;
border-radius: 4px;
margin-bottom: 20px;
}
.form-actions {
margin-top: 20px;
display: flex;
gap: 10px;
}
textarea {
font-family: 'Courier New', monospace;
font-size: 12px;
}

34
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.ts
View File

@@ -0,0 +1,34 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { DynamicField } from '../chart-config-manager.component';
@Component({
selector: 'app-dynamic-field-form',
templateUrl: './dynamic-field-form.component.html',
styleUrls: ['./dynamic-field-form.component.scss']
})
export class DynamicFieldFormComponent {
@Input() dynamicField: Partial<DynamicField> = {};
@Input() isEdit = false;
@Output() save = new EventEmitter<Partial<DynamicField>>();
@Output() cancel = new EventEmitter<void>();
fieldTypes = [
'text',
'number',
'email',
'password',
'date',
'select',
'checkbox',
'radio',
'textarea'
];
onSubmit(): void {
this.save.emit(this.dynamicField);
}
onCancel(): void {
this.cancel.emit();
}
}

46
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.html
View File

@@ -0,0 +1,46 @@
<div class="ui-component-form">
<form clrForm (ngSubmit)="onSubmit()" #uiComponentForm="ngForm">
<clr-input-container>
<label>Component Name <span class="required">*</span></label>
<input clrInput type="text" [(ngModel)]="uiComponent.componentName" name="componentName" required />
</clr-input-container>
<clr-select-container>
<label>Component Type</label>
<select clrSelect [(ngModel)]="uiComponent.componentType" name="componentType">
<option value="">Select a type</option>
<option *ngFor="let type of componentTypes" [value]="type">{{ type | titlecase }}</option>
</select>
</clr-select-container>
<clr-input-container>
<label>Display Label</label>
<input clrInput type="text" [(ngModel)]="uiComponent.displayLabel" name="displayLabel" />
</clr-input-container>
<clr-input-container>
<label>Placeholder</label>
<input clrInput type="text" [(ngModel)]="uiComponent.placeholder" name="placeholder" />
</clr-input-container>
<clr-input-container>
<label>Sort Order</label>
<input clrInput type="number" [(ngModel)]="uiComponent.sortOrder" name="sortOrder" />
</clr-input-container>
<clr-checkbox-container>
<label>Is Required</label>
<clr-checkbox-wrapper>
<input type="checkbox" clrCheckbox [(ngModel)]="uiComponent.isRequired" name="isRequired" />
<label>Required</label>
</clr-checkbox-wrapper>
</clr-checkbox-container>
<div class="form-actions">
<button class="btn btn-primary" type="submit" [disabled]="!uiComponent.componentName">
{{ isEdit ? 'Update' : 'Save' }}
</button>
<button class="btn" type="button" (click)="onCancel()">Cancel</button>
</div>
</form>
</div>

12
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.scss
View File

@@ -0,0 +1,12 @@
.ui-component-form {
padding: 20px;
background-color: #f9f9f9;
border-radius: 4px;
margin-bottom: 20px;
}
.form-actions {
margin-top: 20px;
display: flex;
gap: 10px;
}

33
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.ts
View File

@@ -0,0 +1,33 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { UiComponent } from '../chart-config-manager.component';
@Component({
selector: 'app-ui-component-form',
templateUrl: './ui-component-form.component.html',
styleUrls: ['./ui-component-form.component.scss']
})
export class UiComponentFormComponent {
@Input() uiComponent: Partial<UiComponent> = {};
@Input() isEdit = false;
@Output() save = new EventEmitter<Partial<UiComponent>>();
@Output() cancel = new EventEmitter<void>();
componentTypes = [
'input',
'select',
'checkbox',
'radio',
'textarea',
'datepicker',
'slider',
'toggle'
];
onSubmit(): void {
this.save.emit(this.uiComponent);
}
onCancel(): void {
this.cancel.emit();
}
}

4
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.html
View File

@@ -0,0 +1,4 @@
<div class="chart-config-modal">
<h3>Chart Configuration Manager</h3>
<app-chart-config-manager></app-chart-config-manager>
</div>

5
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.scss
View File

@@ -0,0 +1,5 @@
.chart-config-modal {
padding: 20px;
max-height: 80vh;
overflow-y: auto;
}

10
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.ts
View File

@@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-chart-config-modal',
templateUrl: './chart-config-modal.component.html',
styleUrls: ['./chart-config-modal.component.scss']
})
export class ChartConfigModalComponent {
// This component will be used to display the chart configuration manager in a modal
}

12
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.html
View File

@@ -11,6 +11,9 @@
<button class="btn btn-primary" (click)="openCommonFilterModal()" style="margin-left: 10px;" *ngIf="!fromRunner">
<clr-icon shape="filter"></clr-icon> Common Filter
</button>
<button class="btn btn-primary" (click)="openChartConfigManager()" style="margin-left: 10px;" *ngIf="!fromRunner">
<clr-icon shape="cog"></clr-icon> Chart Config
</button>
<div style="display: inline;">
{{dashboardName}}
</div>
@@ -732,6 +735,15 @@
</div>
</clr-modal>
<clr-modal [(clrModalOpen)]="chartConfigModalOpen" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
<h3 class="modal-title">Chart Configuration Manager</h3>
<div class="modal-body">
<app-chart-config-manager></app-chart-config-manager>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline" (click)="closeChartConfigManager()">Close</button>
</div>
</clr-modal>
<!-- Common Filter Modal -->
<clr-modal [(clrModalOpen)]="commonFilterModalOpen" [clrModalStaticBackdrop]="true" clrModalSize="lg">

15
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts
View File

@@ -30,8 +30,6 @@ 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;
@@ -208,6 +206,9 @@ export class EditnewdashComponent implements OnInit {
// Add drilldown column data property
drilldownColumnData = []; // Add drilldown column data property
// Add property for chart config modal
chartConfigModalOpen: boolean = false;
constructor(private route: ActivatedRoute,
private router: Router,
private dashboardService: Dashboard3Service,
@@ -2048,4 +2049,14 @@ export class EditnewdashComponent implements OnInit {
}
}
// Add method to open chart configuration manager
openChartConfigManager(): void {
this.chartConfigModalOpen = true;
}
// Add method to close chart configuration manager
closeChartConfigManager(): void {
this.chartConfigModalOpen = false;
}
}