From 75ccca8caf656c4912172020bd0b5569b852113e Mon Sep 17 00:00:00 2001 From: Gaurav Kumar Date: Mon, 3 Nov 2025 16:50:53 +0530 Subject: [PATCH] config --- .../allnewdash/allnewdash.component.html | 275 +++++------ .../allnewdash/allnewdash.component.ts | 5 + .../chart-config-manager.component.html | 7 + .../chart-config-manager.component.ts | 3 + .../chart-config/ui-component.service.ts | 5 + .../add-chart-type.component.html | 76 ++++ .../add-chart-type.component.scss | 65 +++ .../add-chart-type.component.ts | 70 +++ .../chart-type-manager.component.html | 86 +--- .../chart-type-manager.component.scss | 95 ++-- .../chart-type-manager.component.ts | 55 --- .../chart-type-page.component.ts | 6 + .../chart-type-ui-components.component.html | 201 +++++++++ .../chart-type-ui-components.component.ts | 172 +++++++ .../chart-type-manager/chart-type.service.ts | 5 + .../edit-chart-type.component.html | 160 +++++++ .../edit-chart-type.component.scss | 163 +++++++ .../edit-chart-type.component.ts | 117 +++++ .../editnewdash/editnewdash.component.html | 16 +- .../editnewdash/editnewdash.component.ts | 426 +++++++++--------- 20 files changed, 1460 insertions(+), 548 deletions(-) create mode 100644 frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/add-chart-type.component.html create mode 100644 frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/add-chart-type.component.scss create mode 100644 frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/add-chart-type.component.ts create mode 100644 frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.html create mode 100644 frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.ts create mode 100644 frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.html create mode 100644 frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.scss create mode 100644 frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.ts diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/allnewdash/allnewdash.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/allnewdash/allnewdash.component.html index 5f66597..85294db 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/allnewdash/allnewdash.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/allnewdash/allnewdash.component.html @@ -1,61 +1,67 @@
    -
    2. -
  2. {{ 'Dashboard_builder' | translate }}
    3. -
- -
- -
-
-
-

{{ 'Dashboard_builder' | translate }}

-
-
- - - - -
-
- - - {{ 'Loading' | translate }} ...... -
{{error}}
 - - - - {{ 'Go_to' | translate }} - - - - - {{ 'Dashboard_Name' | translate }} - - - - - {{ 'Description' | translate }} - - - - - {{ 'Security_Profile' | translate }} - - - - - {{ 'Add_to_home' | translate }} - - - + + + +
+ + + + {{ 'Loading' | translate }} ...... + +
{{error}}
+ + + + + {{ 'Go_to' | translate }} + + + + + {{ 'Dashboard_Name' | translate }} + + + + + {{ 'Description' | translate }} + + + + + {{ 'Security_Profile' | translate }} + + + + + {{ 'Add_to_home' | translate }} + + + - - {{ 'Action' | translate }} - - - - {{ 'SET_UP' | translate }} - {{user.dashboard_name}} - {{user.description}} - {{user.secuirity_profile}} - {{user.add_to_home}} + + {{ 'Action' | translate }} + - - - - - - {{ 'Delete' | translate }} - - - - - -
{{ 'Who_Column' | translate }}
-
{{ 'Account_ID' | translate }}: {{ user.accountId }}
-
{{ 'Created_At' | translate }}: {{ user.createdAt | date }}
-
{{ 'Created_By' | translate }}: {{ user.createdBy }}
-
{{ 'Updated_At' | translate }}: {{ user.updatedAt | date }}
-
{{ 'Updated_By' | translate }}: {{ user.updatedBy }}
- - - - - - - - - - - - - {{ 'Users_per_page' | translate }} - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} - {{ 'of' | translate }} {{pagination.totalItems}} {{ 'users' | translate }} - - - + + + + + {{ 'Delete' | translate }} + + + + + +
{{ 'Who_Column' | translate }}
+
{{ 'Account_ID' | translate }}: {{ user.accountId }}
+
{{ 'Created_At' | translate }}: {{ user.createdAt | date }}
+
{{ 'Created_By' | translate }}: {{ user.createdBy }}
+
{{ 'Updated_At' | translate }}: {{ user.updatedAt | date }}
+
{{ 'Updated_By' | translate }}: {{ user.updatedBy }}
+ + + + + + + + + + + + + {{ 'Users_per_page' | translate }} + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} + {{ 'of' | translate }} {{pagination.totalItems}} {{ 'users' | translate }} + + + + + + +
+
+

+ +
{{ 'Start_from_scratch' | translate }}
+
+

+ +
{{ 'Import_from_template' | translate }}
+
+

+ +
{{ 'Import_from_public_project' | translate }}
+
- - -
-
-

- -
{{ 'Start_from_scratch' | translate }}
-
-

- -
{{ 'Import_from_template' | translate }}
-
-

- -
{{ 'Import_from_public_project' | translate }}
-
-
-
- - - -
-

{{ 'Are_you_sure_want_to_delete' | translate }}

-

{{rowSelected.id}}

-
- - -
-
- \ No newline at end of file +
+ + + +
+

{{ 'Are_you_sure_want_to_delete' | translate }}

+

{{rowSelected.id}}

+
+ + +
+
+ \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/allnewdash/allnewdash.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/allnewdash/allnewdash.component.ts index b471651..e40ebc4 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/allnewdash/allnewdash.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/allnewdash/allnewdash.component.ts @@ -122,4 +122,9 @@ export class AllnewdashComponent implements OnInit { // this.router.navigate(['../editdashn'],{relativeTo:this.route}); // } + // Add method to open chart configuration manager + openChartConfig(): void { + this.router.navigate(['../chart-types'],{relativeTo:this.route}); + + } } diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.html index bb36ba8..b2b3579 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.html @@ -1,6 +1,13 @@

Chart Configuration Manager

+ +
+
+ Chart Config Manager Component Loaded Successfully +
+
+
+
+ {{ errorMessage }} +
+
+ +
+ +
+ {{ successMessage }} +
+
+ +
+
+
+ + + + Enter a unique name for the chart type (e.g., "line-chart", "bar-chart") + + + + + + This is the user-friendly name shown in the UI + + + + + + Provide a detailed description of this chart type and when to use it + + + + + + + + + Deactivate chart types that should not be available for selection + + +
+ + +
+
+
+
+ +
+

About Chart Types

+

Chart types define the different visualization options available in the dashboard builder. Each chart type can have:

+
    +
  • Associated UI components that define the configuration form
    • +
  • Templates that define how the chart is rendered
    • +
  • Dynamic fields that capture specific configuration parameters
    • +
+

After creating a chart type, you can configure its components, templates, and fields in the chart configuration manager.

+
+
\ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/add-chart-type.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/add-chart-type.component.scss new file mode 100644 index 0000000..ed422e0 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/add-chart-type.component.scss @@ -0,0 +1,65 @@ +.add-chart-type-page { + padding: 20px; + max-width: 800px; + margin: 0 auto; + + .header { + margin-bottom: 20px; + h2 { + color: #0079b8; + font-weight: 300; + } + } + + .card { + margin-bottom: 20px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + + .card-block { + padding: 20px; + } + } + + .form-actions { + margin-top: 20px; + display: flex; + gap: 10px; + } + + .info-section { + background-color: #f6f6f6; + border-left: 4px solid #0079b8; + padding: 15px; + border-radius: 4px; + + h4 { + margin-top: 0; + color: #0079b8; + } + + ul { + padding-left: 20px; + + li { + margin-bottom: 8px; + } + } + + p { + margin: 10px 0; + } + } + + @media (max-width: 768px) { + padding: 10px; + + .form-actions { + flex-direction: column; + + button { + width: 100%; + margin-bottom: 10px; + } + } + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/add-chart-type.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/add-chart-type.component.ts new file mode 100644 index 0000000..2edd075 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/add-chart-type.component.ts @@ -0,0 +1,70 @@ +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; +import { ClrLoadingState } from '@clr/angular'; +import { ChartType, ChartTypeService } from './chart-type.service'; + +@Component({ + selector: 'app-add-chart-type', + templateUrl: './add-chart-type.component.html', + styleUrls: ['./add-chart-type.component.scss'] +}) +export class AddChartTypeComponent { + chartType: Partial = { + isActive: true + }; + loadingState: ClrLoadingState = ClrLoadingState.DEFAULT; + errorMessage: string | null = null; + successMessage: string | null = null; + + // Make ClrLoadingState available to template + readonly ClrLoadingState = ClrLoadingState; + + constructor( + private chartTypeService: ChartTypeService, + private router: Router + ) { } + + // 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); + } + + createChartType(): void { + if (!this.chartType.name) { + this.showError('Chart type name is required'); + return; + } + + this.loadingState = ClrLoadingState.LOADING; + this.chartTypeService.createChartType(this.chartType).subscribe({ + next: (data) => { + this.showSuccess('Chart type created successfully'); + this.loadingState = ClrLoadingState.SUCCESS; + // Redirect to chart types list after a short delay + setTimeout(() => { + this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']); + }, 1500); + }, + error: (error) => { + console.error('Error creating chart type:', error); + this.showError('Error creating chart type: ' + (error.error?.message || error.message || 'Unknown error')); + this.loadingState = ClrLoadingState.ERROR; + } + }); + } + + onCancel(): void { + this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']); + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.html index 5c1ad40..406c963 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.html @@ -20,47 +20,6 @@ - -
-
-

Add New Chart Type

-
-
-
- - - - - - - - - - - - - - - - - - - - - - - -
- - -
-
-
-
-
@@ -69,7 +28,7 @@

Chart Types

-
@@ -98,7 +57,7 @@ {{chartType.createdAt | date:'short'}} {{chartType.updatedAt | date:'short'}} -
- - -
-
-

Edit Chart Type

-
-
-
- - - - - - - - - - - - - - - - - - - - - - - -
- - -
-
-
-
\ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.scss index 2e15184..bdc412a 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.scss +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.scss @@ -1,60 +1,71 @@ .chart-type-manager { padding: 20px; - + + h2 { + color: #0079b8; + font-weight: 300; + margin-bottom: 20px; + } + .card { margin-bottom: 20px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); .card-header { - display: flex; - justify-content: space-between; - align-items: center; - h3 { margin: 0; + color: #0079b8; } } .card-block { - padding: 15px; - - form { - margin-bottom: 20px; + padding: 20px; + } + } + + .label { + padding: 4px 8px; + border-radius: 12px; + font-size: 12px; + font-weight: bold; + + &.label-success { + background-color: #3d9970; + color: white; + } + + &.label-danger { + background-color: #d32f2f; + color: white; + } + } + + clr-datagrid { + margin-top: 10px; + + clr-dg-cell { + &:first-child { + font-weight: 500; } } } - - .form-actions { - display: flex; - gap: 10px; - margin-top: 15px; + + .btn-icon { + margin-right: 5px; } - - 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; + + @media (max-width: 768px) { + padding: 10px; + + .card-header { + .clr-row { + flex-direction: column; + + .clr-col { + text-align: left !important; + margin-bottom: 10px; + } + } + } } } \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.ts index ed60b3f..f401760 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.ts @@ -9,9 +9,6 @@ import { ChartType, ChartTypeService } from './chart-type.service'; }) export class ChartTypeManagerComponent implements OnInit { chartTypes: ChartType[] = []; - selectedChartType: ChartType | null = null; - newChartType: Partial = {}; - showAddChartTypeForm = false; chartTypeLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT; // Make ClrLoadingState available to template @@ -59,54 +56,6 @@ export class ChartTypeManagerComponent implements OnInit { }); } - 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?')) { return; @@ -126,8 +75,4 @@ export class ChartTypeManagerComponent implements OnInit { } }); } - - selectChartTypeForEdit(chartType: ChartType): void { - this.selectedChartType = { ...chartType }; - } } \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-page.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-page.component.ts index a3385fa..0cf2c7e 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-page.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-page.component.ts @@ -11,6 +11,12 @@ import { Component } from '@angular/core'; .chart-type-page { padding: 20px; } + + @media (max-width: 768px) { + .chart-type-page { + padding: 10px; + } + } `] }) export class ChartTypePageComponent { } \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.html new file mode 100644 index 0000000..cf53d0c --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.html @@ -0,0 +1,201 @@ +
+
+

+ + UI Components for {{ chartType?.name || 'Chart Type' }} +

+
+ + +
+ +
+ {{ errorMessage }} +
+
+ +
+ +
+ {{ successMessage }} +
+
+ + +
+
+

Add New UI Component

+
+
+
+ + + + Enter a unique name for the UI component (e.g., "title-config", "axis-config") + + + + + + Type of the component (e.g., "input", "select", "checkbox") + + + + + + User-friendly label shown in the configuration form + + + + + + Placeholder text for input fields + + + + + + Order in which components appear in the form + + + + + + + + + Mark as required if this component must be filled + + +
+ + +
+
+
+
+ + +
+
+
+
+

UI Components

+
+
+ +
+
+
+ +
+ + Component Name + Component Type + Display Label + Placeholder + Required + Sort Order + Actions + + + {{uiComponent.componentName}} + {{uiComponent.componentType}} + {{uiComponent.displayLabel}} + {{uiComponent.placeholder}} + + + {{uiComponent.isRequired ? 'Yes' : 'No'}} + + + {{uiComponent.sortOrder}} + + + + + + + + {{uiComponents.length}} UI component(s) + + +
+
+ + +
+
+

Edit UI Component

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+
+
+ +
+

About UI Components

+

UI components define the configuration form elements for a chart type. Each component represents:

+
    +
  • A form field that appears when configuring a chart of this type
    • +
  • Metadata like label, placeholder, and validation rules
    • +
  • An order in which they appear in the configuration form
    • +
+

After creating UI components, you can define their properties in the component properties section.

+
+
\ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.ts new file mode 100644 index 0000000..562508a --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.ts @@ -0,0 +1,172 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { ClrLoadingState } from '@clr/angular'; +import { ChartType, ChartTypeService } from './chart-type.service'; +import { UiComponent, UiComponentService } from '../../chart-config/ui-component.service'; + +@Component({ + selector: 'app-chart-type-ui-components', + templateUrl: './chart-type-ui-components.component.html', + styleUrls: ['./chart-type-ui-components.component.scss'] +}) +export class ChartTypeUiComponentsComponent implements OnInit { + chartType: ChartType | null = null; + uiComponents: UiComponent[] = []; + newUiComponent: Partial = { + isRequired: false + }; + selectedUiComponent: UiComponent | null = null; + showAddForm = false; + + loadingState: ClrLoadingState = ClrLoadingState.DEFAULT; + errorMessage: string | null = null; + successMessage: string | null = null; + + // Make ClrLoadingState available to template + readonly ClrLoadingState = ClrLoadingState; + + constructor( + private chartTypeService: ChartTypeService, + private uiComponentService: UiComponentService, + private route: ActivatedRoute, + private router: Router + ) { } + + ngOnInit(): void { + const chartTypeId = Number(this.route.snapshot.paramMap.get('id')); + if (chartTypeId) { + this.loadChartType(chartTypeId); + this.loadUiComponents(chartTypeId); + } else { + this.showError('Invalid chart type ID'); + } + } + + // 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); + } + + loadChartType(id: number): void { + this.chartTypeService.getChartTypeById(id).subscribe({ + next: (data) => { + this.chartType = data; + }, + error: (error) => { + console.error('Error loading chart type:', error); + this.showError('Error loading chart type: ' + (error.error?.message || error.message || 'Unknown error')); + } + }); + } + + loadUiComponents(chartTypeId: number): void { + this.loadingState = ClrLoadingState.LOADING; + this.uiComponentService.getUiComponentsByChartType(chartTypeId).subscribe({ + next: (data) => { + this.uiComponents = data; + this.loadingState = 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.loadingState = ClrLoadingState.ERROR; + } + }); + } + + createUiComponent(): void { + if (!this.chartType || !this.newUiComponent.componentName) { + this.showError('Component name is required'); + return; + } + + const componentData = { + ...this.newUiComponent, + chartType: { id: this.chartType.id } + }; + + this.loadingState = ClrLoadingState.LOADING; + this.uiComponentService.createUiComponent(componentData).subscribe({ + next: (data) => { + this.uiComponents.push(data); + this.newUiComponent = { isRequired: false }; + this.showAddForm = false; + this.showSuccess('UI component created successfully'); + this.loadingState = 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.loadingState = ClrLoadingState.ERROR; + } + }); + } + + updateUiComponent(): void { + if (!this.selectedUiComponent || !this.selectedUiComponent.componentName) { + this.showError('Component name is required'); + return; + } + + this.loadingState = 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.loadingState = 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.loadingState = ClrLoadingState.ERROR; + } + }); + } + + deleteUiComponent(id: number): void { + if (!confirm('Are you sure you want to delete this UI component?')) { + return; + } + + this.loadingState = ClrLoadingState.LOADING; + this.uiComponentService.deleteUiComponent(id).subscribe({ + next: () => { + this.uiComponents = this.uiComponents.filter(uc => uc.id !== id); + this.showSuccess('UI component deleted successfully'); + this.loadingState = 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.loadingState = ClrLoadingState.ERROR; + } + }); + } + + selectUiComponentForEdit(uiComponent: UiComponent): void { + this.selectedUiComponent = { ...uiComponent }; + } + + goBack(): void { + if (this.chartType) { + this.router.navigate(['/cns-portal/dashboardbuilder/chart-types/edit', this.chartType.id]); + } else { + this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']); + } + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type.service.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type.service.ts index 77fd94d..d475ff9 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type.service.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type.service.ts @@ -22,29 +22,34 @@ export class ChartTypeService { // Get all chart types getAllChartTypes(): Observable { + console.log('Fetching all chart types from', this.chartTypesUrl); return this.apiRequest.get(this.chartTypesUrl); } // Get chart type by ID getChartTypeById(id: number): Observable { const url = `${this.chartTypesUrl}/${id}`; + console.log(`Fetching chart type ${id} from ${url}`); return this.apiRequest.get(url); } // Create new chart type createChartType(chartType: Partial): Observable { + console.log('Creating chart type:', chartType); return this.apiRequest.post(this.chartTypesUrl, chartType); } // Update chart type updateChartType(id: number, chartType: ChartType): Observable { const url = `${this.chartTypesUrl}/${id}`; + console.log(`Updating chart type ${id}:`, chartType); return this.apiRequest.put(url, chartType); } // Delete chart type deleteChartType(id: number): Observable { const url = `${this.chartTypesUrl}/${id}`; + console.log(`Deleting chart type ${id}`); return this.apiRequest.delete(url); } } \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.html new file mode 100644 index 0000000..3ec1527 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.html @@ -0,0 +1,160 @@ +
+
+

Edit Chart Type

+
+ + + + + +
+ +
+ {{ errorMessage }} +
+
+ +
+ +
+ {{ successMessage }} +
+
+ + +
+
+
+

{{ chartType.name }}

+ + {{ chartType.isActive ? 'Active' : 'Inactive' }} + +
+
+
+
+ + + + Enter a unique name for the chart type (e.g., "line-chart", "bar-chart") + + + + + + This is the user-friendly name shown in the UI + + + + + + Provide a detailed description of this chart type and when to use it + + + + + + + + + Deactivate chart types that should not be available for selection + + +
+ + + +
+
+
+
+ + +
+
+

Related Configuration

+
+
+
+
+
+ +

UI Components

+
+

Manage the UI components that define the configuration form for this chart type.

+ +
+ +
+
+ +

Chart Templates

+
+

Manage the templates that define how this chart type is rendered.

+ +
+ +
+
+ +

Dynamic Fields

+
+

Manage the dynamic fields that capture specific configuration parameters.

+ +
+
+
+
+ + +
+
+

Chart Type Details

+
+
+
+
+ + {{ chartType.id }} +
+
+ + {{ chartType.createdAt | date:'medium' }} +
+
+ + {{ chartType.updatedAt | date:'medium' }} +
+
+
+
+ +
+

About Chart Types

+

Chart types define the different visualization options available in the dashboard builder. Each chart type can have:

+
    +
  • Associated UI components that define the configuration form
    • +
  • Templates that define how the chart is rendered
    • +
  • Dynamic fields that capture specific configuration parameters
    • +
+

After creating a chart type, you can configure its components, templates, and fields using the management links above.

+
+
\ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.scss new file mode 100644 index 0000000..2c38984 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.scss @@ -0,0 +1,163 @@ +.edit-chart-type-page { + padding: 20px; + max-width: 1200px; + margin: 0 auto; + + .header { + margin-bottom: 20px; + h2 { + color: #0079b8; + font-weight: 300; + } + } + + .loading-spinner { + display: flex; + align-items: center; + justify-content: center; + padding: 20px; + gap: 10px; + } + + .card { + margin-bottom: 20px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + + .card-block { + padding: 20px; + } + + .card-header { + .chart-type-header { + display: flex; + justify-content: space-between; + align-items: center; + + h3 { + margin: 0; + } + } + } + } + + .form-actions { + margin-top: 20px; + display: flex; + gap: 10px; + } + + .related-entities-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 20px; + + .entity-card { + border: 1px solid #ddd; + border-radius: 4px; + padding: 20px; + text-align: center; + background-color: #f9f9f9; + + .entity-header { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 15px; + + cds-icon { + color: #0079b8; + margin-bottom: 10px; + } + + h4 { + margin: 0; + color: #0079b8; + } + } + + p { + color: #666; + margin-bottom: 15px; + min-height: 60px; + } + + .btn-link { + font-weight: 500; + } + } + } + + .details-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 15px; + + .detail-item { + display: flex; + flex-direction: column; + + label { + font-weight: bold; + margin-bottom: 5px; + color: #333; + } + + span { + padding: 8px; + background-color: #f6f6f6; + border-radius: 4px; + } + } + } + + .info-section { + background-color: #f6f6f6; + border-left: 4px solid #0079b8; + padding: 15px; + border-radius: 4px; + + h4 { + margin-top: 0; + color: #0079b8; + } + + ul { + padding-left: 20px; + + li { + margin-bottom: 8px; + } + } + + p { + margin: 10px 0; + } + } + + @media (max-width: 768px) { + padding: 10px; + + .form-actions { + flex-direction: column; + + button { + width: 100%; + margin-bottom: 10px; + } + } + + .chart-type-header { + flex-direction: column; + align-items: flex-start !important; + + .label { + margin-top: 10px; + } + } + + .related-entities-grid { + grid-template-columns: 1fr; + } + } +} + \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.ts new file mode 100644 index 0000000..6f543ac --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.ts @@ -0,0 +1,117 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { ClrLoadingState } from '@clr/angular'; +import { ChartType, ChartTypeService } from './chart-type.service'; + +@Component({ + selector: 'app-edit-chart-type', + templateUrl: './edit-chart-type.component.html', + styleUrls: ['./edit-chart-type.component.scss'] +}) +export class EditChartTypeComponent implements OnInit { + chartType: ChartType | null = null; + loadingState: ClrLoadingState = ClrLoadingState.DEFAULT; + errorMessage: string | null = null; + successMessage: string | null = null; + + // Make ClrLoadingState available to template + readonly ClrLoadingState = ClrLoadingState; + + constructor( + private chartTypeService: ChartTypeService, + private route: ActivatedRoute, + private router: Router + ) { } + + ngOnInit(): void { + const id = Number(this.route.snapshot.paramMap.get('id')); + if (id) { + this.loadChartType(id); + } else { + this.showError('Invalid chart type ID'); + } + } + + // 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); + } + + loadChartType(id: number): void { + this.loadingState = ClrLoadingState.LOADING; + this.chartTypeService.getChartTypeById(id).subscribe({ + next: (data) => { + this.chartType = data; + this.loadingState = ClrLoadingState.SUCCESS; + }, + error: (error) => { + console.error('Error loading chart type:', error); + this.showError('Error loading chart type: ' + (error.error?.message || error.message || 'Unknown error')); + this.loadingState = ClrLoadingState.ERROR; + } + }); + } + + updateChartType(): void { + if (!this.chartType || !this.chartType.name) { + this.showError('Chart type name is required'); + return; + } + + this.loadingState = ClrLoadingState.LOADING; + this.chartTypeService.updateChartType(this.chartType.id, this.chartType).subscribe({ + next: (data) => { + this.chartType = data; + this.showSuccess('Chart type updated successfully'); + this.loadingState = ClrLoadingState.SUCCESS; + // Redirect to chart types list after a short delay + setTimeout(() => { + this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']); + }, 1500); + }, + error: (error) => { + console.error('Error updating chart type:', error); + this.showError('Error updating chart type: ' + (error.error?.message || error.message || 'Unknown error')); + this.loadingState = ClrLoadingState.ERROR; + } + }); + } + + onCancel(): void { + this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']); + } + + onDelete(): void { + if (!this.chartType) return; + + if (confirm('Are you sure you want to delete this chart type? This action cannot be undone.')) { + this.loadingState = ClrLoadingState.LOADING; + this.chartTypeService.deleteChartType(this.chartType.id).subscribe({ + next: () => { + this.showSuccess('Chart type deleted successfully'); + this.loadingState = ClrLoadingState.SUCCESS; + // Redirect to chart types list after a short delay + setTimeout(() => { + this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']); + }, 1500); + }, + error: (error) => { + console.error('Error deleting chart type:', error); + this.showError('Error deleting chart type: ' + (error.error?.message || error.message || 'Unknown error')); + this.loadingState = ClrLoadingState.ERROR; + } + }); + } + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.html index 8ab587f..407de1d 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.html @@ -11,9 +11,6 @@ -
{{dashboardName}}
@@ -735,16 +732,6 @@ - -

Chart Configuration Manager

-
- -
-
- -
- -

Configure Common Filter

@@ -828,5 +815,4 @@ - - + \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts index 8e7b5ae..d5e67a2 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts @@ -51,10 +51,10 @@ export class EditnewdashComponent implements OnInit { commonFilterModalOpen: boolean = false; // Add common filter modal state public entryForm: FormGroup; public commonFilterForm: FormGroup; // Add common filter form - + // Add filterOptionsString property for compact filter filterOptionsString: string = ''; - + // Add availableKeys property for compact filter availableKeys: string[] = []; @@ -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', @@ -156,7 +156,7 @@ export class EditnewdashComponent implements OnInit { apiUrl: '', filters: [] as any[] }; - + // Add common filter column data property commonFilterColumnData: any[] = []; @@ -206,9 +206,6 @@ 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, @@ -221,7 +218,7 @@ export class EditnewdashComponent implements OnInit { // Add property to track if coming from dashboard runner fromRunner: boolean = false; - + ngOnInit(): void { // Reset the filter service when the component is initialized this.filterService.resetFilters(); @@ -249,7 +246,7 @@ export class EditnewdashComponent implements OnInit { // Add resize callback to handle chart resizing itemResizeCallback: this.itemResize.bind(this) }; - + // Check if coming from dashboard runner this.route.queryParams.subscribe(params => { if (params['fromRunner'] === 'true') { @@ -295,20 +292,20 @@ export class EditnewdashComponent implements OnInit { drilldownParameter: [null] // Add drilldown parameter to form group // Note: Dynamic drilldown layers and filters will be handled separately since they're complex objects }); - + // Initialize common filter form this.commonFilterForm = this._fb.group({ connection: [''], apiUrl: [''] }); - + // Load sureconnect data first, then load dashboard data this.loadSureconnectData(); - + // Load common filter data if it exists this.loadCommonFilterData(); } - + // Add method to load sureconnect data loadSureconnectData() { this.sureconnectService.getAll().subscribe((data: any[]) => { @@ -322,19 +319,18 @@ export class EditnewdashComponent implements OnInit { this.getData(); }); } - + // Add method to load common filter data loadCommonFilterData() { // In a real implementation, this would fetch common filter data from the server // For now, we'll initialize with empty values console.log('Loading common filter data'); } - + toggleMenu() { this.toggle = !this.toggle; } - onDrag(event, identifier) { console.log("on drag", identifier); console.log("on drag ", event); @@ -346,7 +342,7 @@ export class EditnewdashComponent implements OnInit { getData() { // Reset the filter service when switching between dashboard records this.filterService.resetFilters(); - + // We get the id in get current router dashboard/:id this.route.params.subscribe(params => { // + is used to cast string to int @@ -366,7 +362,7 @@ export class EditnewdashComponent implements OnInit { console.log(this.dashboardCollection); // We parse serialized Json to generate components on the fly this.parseJson(this.dashboardCollection); - + // Set default connections for all gadgets if sureconnect data is available if (this.sureconnectData && this.sureconnectData.length > 0) { this.dashboardCollection.dashboard.forEach(item => { @@ -375,7 +371,7 @@ export class EditnewdashComponent implements OnInit { } }); } - + // We copy array without reference this.dashboardArray = this.dashboardCollection.dashboard.slice(); console.log("this.dashboardArray", this.dashboardArray); @@ -396,7 +392,7 @@ export class EditnewdashComponent implements OnInit { dashboard.component = component.componentInstance; } }); - + // Map chart names to unified chart types const chartTypeMap = { 'Radar Chart': 'radar', @@ -410,14 +406,14 @@ export class EditnewdashComponent implements OnInit { 'Dynamic Chart': 'line', 'Financial Chart': 'line' }; - + // If this is a chart, set the chartType property if (chartTypeMap.hasOwnProperty(dashboard.name)) { dashboard.chartType = chartTypeMap[dashboard.name]; // Keep the original name instead of changing it to "Unified Chart" // dashboard.name = "Unified Chart"; } - + // Ensure compact filter configuration properties are properly initialized if (dashboard.component === 'Compact Filter' || dashboard.name === 'Compact Filter') { // Make sure all compact filter properties exist @@ -441,7 +437,7 @@ export class EditnewdashComponent implements OnInit { dashboard.component = component.name; } }); - + // Map unified chart types back to chart names for serialization const chartNameMap = { 'radar': 'Radar Chart', @@ -453,18 +449,18 @@ export class EditnewdashComponent implements OnInit { 'bubble': 'Bubble Chart', 'scatter': 'Scatter Chart' }; - + // If this is a unified chart, set the name back to the appropriate chart name if (dashboard.name === 'Unified Chart' && dashboard.chartType && chartNameMap.hasOwnProperty(dashboard.chartType)) { dashboard.name = chartNameMap[dashboard.chartType]; } // 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]) { + else if (dashboard.chartType && chartNameMap.hasOwnProperty(dashboard.chartType) && + dashboard.name === chartNameMap[dashboard.chartType]) { // The name is already correct, no need to change it dashboard.component = "Unified Chart"; } - + // Ensure compact filter configuration properties are preserved if (dashboard.name === 'Compact Filter') { // Make sure all compact filter properties exist @@ -476,22 +472,22 @@ export class EditnewdashComponent implements OnInit { } }); } - + // Add method to get available fields for a filter dropdown (excluding already selected fields) getAvailableFields(filters: any[], currentIndex: number, allFields: string[]): string[] { if (!filters || !allFields) { return allFields || []; } - + // Get all selected fields except the current one const selectedFields = filters .filter((filter, index) => filter.field && index !== currentIndex) .map(filter => filter.field); - + // Return fields that haven't been selected yet return allFields.filter(field => !selectedFields.includes(field)); } - + itemChange() { this.dashboardCollection.dashboard = this.dashboardArray; console.log("itemChange this.dashboardCollection.dashboard ", this.dashboardCollection.dashboard); @@ -516,7 +512,7 @@ export class EditnewdashComponent implements OnInit { const validChartIds = this.dashboardArray .map(item => item.chartid) .filter(chartid => typeof chartid === 'number' && !isNaN(chartid)); - + if (validChartIds.length > 0) { maxChartId = Math.max(...validChartIds); } @@ -756,7 +752,7 @@ export class EditnewdashComponent implements OnInit { console.log('Coming from dashboard runner, skipping config modal'); return; } - + this.modeledit = true; this.modelid = item.chartid; console.log(this.modelid); @@ -766,31 +762,31 @@ export class EditnewdashComponent implements OnInit { if (item.chartcolor === undefined) { item.chartcolor = true; } if (item.chartlegend === undefined) { item.chartlegend = true; } // Initialize common filter property if not present - if (item['commonFilterEnabled'] === undefined) { - this.gadgetsEditdata['commonFilterEnabled'] = false; + if (item['commonFilterEnabled'] === undefined) { + this.gadgetsEditdata['commonFilterEnabled'] = false; } // Initialize drilldown common filter property if not present - if (item['commonFilterEnabledDrilldown'] === undefined) { - this.gadgetsEditdata['commonFilterEnabledDrilldown'] = false; + if (item['commonFilterEnabledDrilldown'] === undefined) { + this.gadgetsEditdata['commonFilterEnabledDrilldown'] = false; } // Initialize compact filter properties if not present - if (item['filterKey'] === undefined) { - this.gadgetsEditdata['filterKey'] = ''; + if (item['filterKey'] === undefined) { + this.gadgetsEditdata['filterKey'] = ''; } - if (item['filterType'] === undefined) { - this.gadgetsEditdata['filterType'] = 'text'; + if (item['filterType'] === undefined) { + this.gadgetsEditdata['filterType'] = 'text'; } - if (item['filterLabel'] === undefined) { - this.gadgetsEditdata['filterLabel'] = ''; + if (item['filterLabel'] === undefined) { + this.gadgetsEditdata['filterLabel'] = ''; } - if (item['filterOptions'] === undefined) { - this.gadgetsEditdata['filterOptions'] = []; + if (item['filterOptions'] === undefined) { + this.gadgetsEditdata['filterOptions'] = []; } // Initialize chartType property if not present (for unified chart) - if (item['chartType'] === undefined) { - this.gadgetsEditdata['chartType'] = 'bar'; + if (item['chartType'] === undefined) { + this.gadgetsEditdata['chartType'] = 'bar'; } - + // Initialize filterOptionsString for compact filter if (item.name === 'Compact Filter') { this.filterOptionsString = this.gadgetsEditdata['filterOptions'].join(', '); @@ -801,10 +797,10 @@ export class EditnewdashComponent implements OnInit { } else { this.filterOptionsString = ''; } - + // Initialize base filters with type and options if not present - if (item['baseFilters'] === undefined) { - this.gadgetsEditdata['baseFilters'] = []; + if (item['baseFilters'] === undefined) { + this.gadgetsEditdata['baseFilters'] = []; } else { // Ensure each base filter has type and options properties this.gadgetsEditdata['baseFilters'] = this.gadgetsEditdata['baseFilters'].map(filter => ({ @@ -815,10 +811,10 @@ export class EditnewdashComponent implements OnInit { availableValues: filter.availableValues || '' })); } - + // Initialize drilldown filters with type and options if not present - if (item['drilldownFilters'] === undefined) { - this.gadgetsEditdata['drilldownFilters'] = []; + if (item['drilldownFilters'] === undefined) { + this.gadgetsEditdata['drilldownFilters'] = []; } else { // Ensure each drilldown filter has type and options properties this.gadgetsEditdata['drilldownFilters'] = this.gadgetsEditdata['drilldownFilters'].map(filter => ({ @@ -829,10 +825,10 @@ export class EditnewdashComponent implements OnInit { availableValues: filter.availableValues || '' })); } - + // Initialize drilldown layers with proper filter structure if not present - if (item['drilldownLayers'] === undefined) { - this.gadgetsEditdata['drilldownLayers'] = []; + if (item['drilldownLayers'] === undefined) { + this.gadgetsEditdata['drilldownLayers'] = []; } else { // Ensure each layer has proper filter structure this.gadgetsEditdata['drilldownLayers'] = this.gadgetsEditdata['drilldownLayers'].map(layer => { @@ -860,58 +856,58 @@ export class EditnewdashComponent implements OnInit { return layer; }); } - + this.getStores(); - + // Set default connection if none is set and we have connections if ((!item['connection'] || item['connection'] === '') && this.sureconnectData && this.sureconnectData.length > 0) { this.gadgetsEditdata['connection'] = this.sureconnectData[0].id; // Also update the form control this.entryForm.patchValue({ connection: this.sureconnectData[0].id }); } - + // Initialize base drilldown properties if not present - if (item['drilldownEnabled'] === undefined) { - this.gadgetsEditdata['drilldownEnabled'] = false; + if (item['drilldownEnabled'] === undefined) { + this.gadgetsEditdata['drilldownEnabled'] = false; } - if (item['drilldownApiUrl'] === undefined) { - this.gadgetsEditdata['drilldownApiUrl'] = ''; + if (item['drilldownApiUrl'] === undefined) { + this.gadgetsEditdata['drilldownApiUrl'] = ''; } // Removed drilldownParameterKey initialization - if (item['drilldownXAxis'] === undefined) { - this.gadgetsEditdata['drilldownXAxis'] = ''; + if (item['drilldownXAxis'] === undefined) { + this.gadgetsEditdata['drilldownXAxis'] = ''; } - if (item['drilldownYAxis'] === undefined) { - this.gadgetsEditdata['drilldownYAxis'] = ''; + if (item['drilldownYAxis'] === undefined) { + this.gadgetsEditdata['drilldownYAxis'] = ''; } - if (item['drilldownParameter'] === undefined) { - this.gadgetsEditdata['drilldownParameter'] = ''; + if (item['drilldownParameter'] === undefined) { + this.gadgetsEditdata['drilldownParameter'] = ''; } - + // Reset drilldown column data this.drilldownColumnData = []; - + // If drilldown is enabled and we have a drilldown API URL, fetch the drilldown column data if (this.gadgetsEditdata.drilldownEnabled && this.gadgetsEditdata.drilldownApiUrl) { this.refreshBaseDrilldownColumns(); } - + // 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)) { + if ((item.datastore !== undefined && item.datastore !== '' && item.datastore !== null) || + (item.table !== undefined && item.table !== '' && item.table !== null)) { const datastore = item.datastore; const table = item.table; - + // Fetch tables if datastore is available if (datastore) { this.getTables(datastore); } - + // Fetch columns if table is available if (table) { this.getColumns(datastore, table); } - + console.log(item.yAxis); // Set selectedyAxis regardless of whether it's an array or string if (item.yAxis !== undefined && item.yAxis !== '' && item.yAxis !== null) { @@ -997,24 +993,24 @@ export class EditnewdashComponent implements OnInit { // Update the onSubmit method to properly save filter data onSubmit(id) { console.log(id); - + // Check if ID is valid, including handling NaN if (id === null || id === undefined || isNaN(id)) { console.warn('Chart ID is null, undefined, or NaN, using modelid instead:', this.modelid); id = this.modelid; } - + // Ensure we have a valid numeric ID const numId = typeof id === 'number' ? id : parseInt(id, 10); if (isNaN(numId)) { console.error('Unable to determine valid chart ID, aborting onSubmit'); return; } - + // 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 !== ''))) { + if (this.selectedyAxis !== undefined && this.selectedyAxis !== null && + ((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 }); } @@ -1025,13 +1021,13 @@ export class EditnewdashComponent implements OnInit { if (item.chartid == num) { // Preserve the component reference const componentRef = item.component; - + //item["product_id"] = "thisistest"; const xyz = { ...item, ...formdata } - + // Restore the component reference xyz.component = componentRef; - + // Explicitly ensure drilldown properties are preserved xyz.drilldownEnabled = this.gadgetsEditdata.drilldownEnabled; xyz.drilldownApiUrl = this.gadgetsEditdata.drilldownApiUrl; @@ -1042,7 +1038,7 @@ export class EditnewdashComponent implements OnInit { xyz.drilldownFilters = this.gadgetsEditdata.drilldownFilters; // Add drilldown filters xyz.drilldownLayers = this.gadgetsEditdata.drilldownLayers; xyz.commonFilterEnabled = this.gadgetsEditdata.commonFilterEnabled; // Add common filter property - + // For compact filter, preserve filter configuration properties if (item.name === 'Compact Filter') { xyz.filterKey = this.gadgetsEditdata.filterKey || ''; @@ -1057,24 +1053,24 @@ export class EditnewdashComponent implements OnInit { xyz.table = this.gadgetsEditdata.table || ''; xyz.connection = this.gadgetsEditdata.connection || undefined; } - + // For unified chart, preserve chart configuration properties if (item.name === 'Unified Chart') { xyz.chartType = this.gadgetsEditdata.chartType || 'bar'; } - + console.log(xyz); return xyz; } return item }); console.log('dashboard collection ', this.dashboardCollection.dashboard); - + // Force gridster to refresh by triggering change detection if (this.options && this.options.api) { this.options.api.optionsChanged(); } - + // Trigger change detection manually // This is a workaround to ensure the gridster re-renders the components setTimeout(() => { @@ -1085,7 +1081,7 @@ export class EditnewdashComponent implements OnInit { this.dashboardArray = tempArray; }, 0); }, 0); - + this.modeledit = false; // this.entryForm.reset(); @@ -1107,7 +1103,7 @@ export class EditnewdashComponent implements OnInit { apiUrl: item['table'] || '', // Use table as API URL connectionId: item['connection'] ? parseInt(item['connection'], 10) : undefined }; - + // Preserve configuration in the item itself item['filterKey'] = filterInputs['filterKey']; item['filterType'] = filterInputs['filterType']; @@ -1115,17 +1111,17 @@ export class EditnewdashComponent implements OnInit { item['filterOptions'] = filterInputs['filterOptions']; item['table'] = filterInputs['apiUrl']; item['connection'] = item['connection']; - + // Remove undefined properties to avoid passing unnecessary data Object.keys(filterInputs).forEach(key => { if (filterInputs[key] === undefined) { delete filterInputs[key]; } }); - + return filterInputs; } - + // For CommonFilterComponent, pass only filter-related properties if (item.component && item.component.name === 'CommonFilterComponent') { const commonFilterInputs = { @@ -1135,25 +1131,25 @@ export class EditnewdashComponent implements OnInit { fieldName: item['name'] || '', connection: item['connection'] || undefined }; - + // Remove undefined properties to avoid passing unnecessary data Object.keys(commonFilterInputs).forEach(key => { if (commonFilterInputs[key] === undefined) { delete commonFilterInputs[key]; } }); - + return commonFilterInputs; } - + // For UnifiedChartComponent, pass chart properties with chartType // Check for specific chart names that use UnifiedChartComponent const unifiedChartNames = [ - 'Radar Chart', 'Line Chart', 'Doughnut Chart', 'Bar Chart', + 'Radar Chart', 'Line Chart', 'Doughnut Chart', 'Bar Chart', 'Pie Chart', 'Polar Area Chart', 'Bubble Chart', 'Scatter Chart', 'Dynamic Chart', 'Financial Chart', 'Unified Chart' ]; - + if (unifiedChartNames.includes(item.name)) { const unifiedChartInputs = { chartType: item.chartType || 'bar', @@ -1184,17 +1180,17 @@ export class EditnewdashComponent implements OnInit { // Multi-layer drilldown configurations drilldownLayers: item['drilldownLayers'] || [] }; - + // Remove undefined properties to avoid passing unnecessary data Object.keys(unifiedChartInputs).forEach(key => { if (unifiedChartInputs[key] === undefined) { delete unifiedChartInputs[key]; } }); - + return unifiedChartInputs; } - + // For GridViewComponent, pass chart properties with drilldown support if (item.component && item.component.name === 'GridViewComponent') { const gridInputs = { @@ -1225,17 +1221,17 @@ export class EditnewdashComponent implements OnInit { // Multi-layer drilldown configurations drilldownLayers: item['drilldownLayers'] || [] }; - + // Remove undefined properties to avoid passing unnecessary data Object.keys(gridInputs).forEach(key => { if (gridInputs[key] === undefined) { delete gridInputs[key]; } }); - + return gridInputs; } - + // For all other chart components, pass chart-specific properties const chartInputs = { xAxis: item.xAxis, @@ -1265,60 +1261,60 @@ export class EditnewdashComponent implements OnInit { // Multi-layer drilldown configurations drilldownLayers: item['drilldownLayers'] || [] }; - + // Remove undefined properties to avoid passing unnecessary data Object.keys(chartInputs).forEach(key => { if (chartInputs[key] === undefined) { delete chartInputs[key]; } }); - + return chartInputs; } // Update the applyChanges method to properly save filter data applyChanges(id) { console.log('Apply changes for chart ID:', id); - + // Check if ID is valid, including handling NaN if (id === null || id === undefined || isNaN(id)) { console.warn('Chart ID is null, undefined, or NaN, using modelid instead:', this.modelid); id = this.modelid; } - + // Ensure we have a valid numeric ID const numId = typeof id === 'number' ? id : parseInt(id, 10); if (isNaN(numId)) { console.error('Unable to determine valid chart ID, aborting applyChanges'); return; } - + // 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 !== ''))) { + if (this.selectedyAxis !== undefined && this.selectedyAxis !== null && + ((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 }); } - + // Get form data let formdata = this.entryForm.value; let num = id; console.log('Form data:', this.entryForm.value); - + // Update the dashboard collection with the new configuration this.dashboardCollection.dashboard = this.dashboardCollection.dashboard.map(item => { if (item.chartid == num) { // Preserve the component reference const componentRef = item.component; - + // Merge the existing item with the new form data const updatedItem = { ...item, ...formdata } - + // Restore the component reference updatedItem.component = componentRef; - + // Explicitly ensure drilldown properties are preserved updatedItem.drilldownEnabled = this.gadgetsEditdata.drilldownEnabled; updatedItem.drilldownApiUrl = this.gadgetsEditdata.drilldownApiUrl; @@ -1330,7 +1326,7 @@ export class EditnewdashComponent implements OnInit { updatedItem.drilldownLayers = this.gadgetsEditdata.drilldownLayers; updatedItem.commonFilterEnabled = this.gadgetsEditdata.commonFilterEnabled; // Add common filter property updatedItem.commonFilterEnabledDrilldown = this.gadgetsEditdata.commonFilterEnabledDrilldown; // Add drilldown common filter property - + // For compact filter, preserve filter configuration properties if (item.name === 'Compact Filter') { updatedItem.filterKey = this.gadgetsEditdata.filterKey || ''; @@ -1344,22 +1340,22 @@ export class EditnewdashComponent implements OnInit { } updatedItem.table = this.gadgetsEditdata.table || ''; // API URL updatedItem.connection = this.gadgetsEditdata.connection || undefined; // Connection ID - + // Also preserve these properties in gadgetsEditdata for consistency this.gadgetsEditdata.filterKey = updatedItem.filterKey; this.gadgetsEditdata.filterType = updatedItem.filterType; this.gadgetsEditdata.filterLabel = updatedItem.filterLabel; this.gadgetsEditdata.filterOptions = updatedItem.filterOptions; } - + console.log('Updated item:', updatedItem); return updatedItem; } return item }); - + console.log('Updated dashboard collection:', this.dashboardCollection.dashboard); - + // Update the dashboardArray to reflect changes immediately // Create a new array with new object references to ensure change detection this.dashboardArray = this.dashboardCollection.dashboard.map(item => { @@ -1370,12 +1366,12 @@ export class EditnewdashComponent implements OnInit { newItem.component = componentRef; return newItem; }); - + // Force gridster to refresh by triggering change detection if (this.options && this.options.api) { this.options.api.optionsChanged(); } - + // Trigger change detection manually // This is a workaround to ensure the gridster re-renders the components setTimeout(() => { @@ -1386,10 +1382,10 @@ export class EditnewdashComponent implements OnInit { this.dashboardArray = tempArray; }, 0); }, 0); - + // Note: We don't close the modal here, allowing the user to make additional changes // The user can click "Save" when they're done with all changes - + // Reset the filter service to ensure clean state this.filterService.resetFilters(); } @@ -1480,7 +1476,7 @@ export class EditnewdashComponent implements OnInit { })); this.drilldownColumnData = []; } - + // Add method to add a new drilldown layer addDrilldownLayer() { const newLayer = { @@ -1493,12 +1489,12 @@ export class EditnewdashComponent implements OnInit { }; this.gadgetsEditdata.drilldownLayers.push(newLayer); } - + // Add method to remove a drilldown layer removeDrilldownLayer(index: number) { this.gadgetsEditdata.drilldownLayers.splice(index, 1); } - + // Add method to refresh drilldown columns for a specific layer refreshDrilldownLayerColumns(layerIndex: number) { const layer = this.gadgetsEditdata.drilldownLayers[layerIndex]; @@ -1520,7 +1516,7 @@ export class EditnewdashComponent implements OnInit { }); } } - + // Add method to refresh base drilldown columns refreshBaseDrilldownColumns() { if (this.gadgetsEditdata.drilldownApiUrl) { @@ -1534,22 +1530,22 @@ export class EditnewdashComponent implements OnInit { }); } } - + // Add method to build drilldown URL with template parameters using angle brackets buildDrilldownUrl(baseUrl: string, parameterValue: string): string { // If no base URL, return empty string if (!baseUrl) { return ''; } - + // If no parameter value, return the base URL as-is if (!parameterValue) { return baseUrl; } - + // Check if the URL contains angle brackets for parameter replacement const hasAngleBrackets = /<[^>]+>/.test(baseUrl); - + if (hasAngleBrackets) { // Replace angle brackets placeholder with actual value // Example: http://localhost:9292/State_ListFilter1/State_ListFilter11/ @@ -1563,32 +1559,32 @@ export class EditnewdashComponent implements OnInit { return baseUrl; } } - + // Add method to get the parameter key from URL template using angle brackets getParameterKeyFromUrl(baseUrl: string): string { if (!baseUrl) { return ''; } - + // Extract parameter key from angle brackets // Example: http://localhost:9292/State_ListFilter1/State_ListFilter11/ // returns: country const match = baseUrl.match(/<([^>]+)>/); return match ? match[1] : ''; } - + // Add method to add a new filter field addFilterField() { // This method is no longer needed with the simplified approach // We're now using addBaseFilter and addLayerFilter methods instead } - + // Add method to remove a filter field removeFilterField(index: number) { // This method is no longer needed with the simplified approach // We're now using removeBaseFilter and removeLayerFilter methods instead } - + // Add method to handle base filter field change onBaseFilterFieldChange(index: number, field: string) { const filter = this.gadgetsEditdata.baseFilters[index]; @@ -1598,14 +1594,14 @@ export class EditnewdashComponent implements OnInit { filter.value = ''; filter.options = ''; filter.availableValues = ''; - + // If we have a field and table URL, load available values if (field && this.gadgetsEditdata.table) { this.loadFilterValuesForField( - this.gadgetsEditdata.table, - this.gadgetsEditdata.connection, - field, - index, + this.gadgetsEditdata.table, + this.gadgetsEditdata.connection, + field, + index, 'base' ); } @@ -1620,10 +1616,10 @@ export class EditnewdashComponent implements OnInit { // If type changes to dropdown/multiselect and we have a field, load available values if ((type === 'dropdown' || type === 'multiselect') && filter.field && this.gadgetsEditdata.table) { this.loadFilterValuesForField( - this.gadgetsEditdata.table, - this.gadgetsEditdata.connection, - filter.field, - index, + this.gadgetsEditdata.table, + this.gadgetsEditdata.connection, + filter.field, + index, 'base' ); } @@ -1639,14 +1635,14 @@ export class EditnewdashComponent implements OnInit { filter.value = ''; filter.options = ''; filter.availableValues = ''; - + // If we have a field and drilldown API URL, load available values if (field && this.gadgetsEditdata.drilldownApiUrl) { this.loadFilterValuesForField( - this.gadgetsEditdata.drilldownApiUrl, - this.gadgetsEditdata.connection, - field, - index, + this.gadgetsEditdata.drilldownApiUrl, + this.gadgetsEditdata.connection, + field, + index, 'drilldown' ); } @@ -1661,10 +1657,10 @@ export class EditnewdashComponent implements OnInit { // If type changes to dropdown/multiselect and we have a field, load available values if ((type === 'dropdown' || type === 'multiselect') && filter.field && this.gadgetsEditdata.drilldownApiUrl) { this.loadFilterValuesForField( - this.gadgetsEditdata.drilldownApiUrl, - this.gadgetsEditdata.connection, - filter.field, - index, + this.gadgetsEditdata.drilldownApiUrl, + this.gadgetsEditdata.connection, + filter.field, + index, 'drilldown' ); } @@ -1682,14 +1678,14 @@ export class EditnewdashComponent implements OnInit { filter.value = ''; filter.options = ''; filter.availableValues = ''; - + // If we have a field and layer API URL, load available values if (field && layer.apiUrl) { this.loadFilterValuesForField( - layer.apiUrl, - this.gadgetsEditdata.connection, - field, - filterIndex, + layer.apiUrl, + this.gadgetsEditdata.connection, + field, + filterIndex, 'layer', layerIndex ); @@ -1708,10 +1704,10 @@ export class EditnewdashComponent implements OnInit { // If type changes to dropdown/multiselect and we have a field, load available values if ((type === 'dropdown' || type === 'multiselect') && filter.field && layer.apiUrl) { this.loadFilterValuesForField( - layer.apiUrl, - this.gadgetsEditdata.connection, - filter.field, - filterIndex, + layer.apiUrl, + this.gadgetsEditdata.connection, + filter.field, + filterIndex, 'layer', layerIndex ); @@ -1722,10 +1718,10 @@ export class EditnewdashComponent implements OnInit { // Add method to load filter values for a specific field loadFilterValuesForField( - apiUrl: string, - connectionId: string | undefined, - field: string, - filterIndex: number, + apiUrl: string, + connectionId: string | undefined, + field: string, + filterIndex: number, filterType: 'base' | 'drilldown' | 'layer', layerIndex?: number ) { @@ -1811,27 +1807,27 @@ export class EditnewdashComponent implements OnInit { } this.gadgetsEditdata.drilldownLayers[layerIndex].filters.push(newFilter); } - + // Add method to remove a base filter removeBaseFilter(index: number) { this.gadgetsEditdata.baseFilters.splice(index, 1); } - + // Add method to remove a drilldown filter removeDrilldownFilter(index: number) { this.gadgetsEditdata.drilldownFilters.splice(index, 1); } - + // Add method to remove a layer filter removeLayerFilter(layerIndex: number, filterIndex: number) { this.gadgetsEditdata.drilldownLayers[layerIndex].filters.splice(filterIndex, 1); } - + // Add method to open common filter modal openCommonFilterModal() { this.commonFilterModalOpen = true; } - + // Add method to add a common filter addCommonFilter() { const newFilter = { @@ -1840,12 +1836,12 @@ export class EditnewdashComponent implements OnInit { }; this.commonFilterData.filters.push(newFilter); } - + // Add method to remove a common filter removeCommonFilter(index: number) { this.commonFilterData.filters.splice(index, 1); } - + // Add method to refresh common filter columns refreshCommonFilterColumns() { if (this.commonFilterData.apiUrl) { @@ -1859,31 +1855,31 @@ export class EditnewdashComponent implements OnInit { }); } } - + // Add method to save common filter saveCommonFilter() { // Here we would typically make an API call to save the common filter // For now, we'll just close the modal console.log('Saving common filter:', this.commonFilterData); - + // Update all charts that have common filter enabled this.updateChartsWithCommonFilter(); - + this.commonFilterModalOpen = false; } - + // Add method to update charts with common filter data updateChartsWithCommonFilter() { // This method will be called when common filter is saved // It will update all charts that have common filter enabled console.log('Updating charts with common filter data'); - + // Update the dashboardArray to reflect changes this.dashboardArray = this.dashboardArray.map(item => { if (item.commonFilterEnabled) { // Preserve the component reference const componentRef = item.component; - + // Update the chart with common filter data const updatedItem = { ...item, @@ -1891,21 +1887,21 @@ export class EditnewdashComponent implements OnInit { connection: this.commonFilterData.connection, baseFilters: [...this.commonFilterData.filters] }; - + // Restore the component reference updatedItem.component = componentRef; - + return updatedItem; } return item; }); - + // Also update the dashboardCollection to persist changes this.dashboardCollection.dashboard = this.dashboardCollection.dashboard.map(item => { if (item.commonFilterEnabled) { // Preserve the component reference const componentRef = item.component; - + // Update the chart with common filter data const updatedItem = { ...item, @@ -1913,20 +1909,20 @@ export class EditnewdashComponent implements OnInit { connection: this.commonFilterData.connection, baseFilters: [...this.commonFilterData.filters] } as DashboardContentModel; - + // Restore the component reference updatedItem.component = componentRef; - + return updatedItem; } return item; }); } - + // Add method to handle common filter toggle onCommonFilterToggle() { console.log('Common filter toggled:', this.gadgetsEditdata.commonFilterEnabled); - + if (this.gadgetsEditdata.commonFilterEnabled) { // When enabling common filter, save current values and apply common filter data this.gadgetsEditdata.table = this.commonFilterData.apiUrl; @@ -1935,24 +1931,24 @@ export class EditnewdashComponent implements OnInit { } // When disabling, the user can edit the filters normally } - + // Add method to handle common filter toggle for base drilldown onCommonFilterToggleDrilldown() { console.log('Common filter drilldown toggled:', this.gadgetsEditdata.commonFilterEnabledDrilldown); - + if (this.gadgetsEditdata.commonFilterEnabledDrilldown) { // When enabling common filter, save current values and apply common filter data this.gadgetsEditdata.drilldownFilters = [...this.commonFilterData.filters]; } // When disabling, the user can edit the filters normally } - + // Add method to handle common filter toggle for drilldown layers onCommonFilterToggleLayer(layerIndex: number) { const layer = this.gadgetsEditdata.drilldownLayers[layerIndex]; if (layer) { console.log(`Common filter layer ${layerIndex} toggled:`, layer.commonFilterEnabled); - + if (layer.commonFilterEnabled) { // When enabling common filter, save current values and apply common filter data layer.filters = [...this.commonFilterData.filters]; @@ -1960,20 +1956,20 @@ export class EditnewdashComponent implements OnInit { // When disabling, the user can edit the filters normally } } - + // Add method to handle item resize events itemResize(item: any, itemComponent: any) { console.log('Item resized:', item); // Trigger a window resize event to notify charts to resize window.dispatchEvent(new Event('resize')); - + // Also try to directly notify the chart component if possible if (itemComponent && itemComponent.item && itemComponent.item.component) { // If the resized item contains a chart, we could try to call its resize method directly // This would require the chart component to have a public resize method } } - + // Add method to load available keys for compact filter loadAvailableKeys(apiUrl: string, connectionId: string | undefined) { if (apiUrl) { @@ -1993,13 +1989,13 @@ export class EditnewdashComponent implements OnInit { // Add method to load available values for a specific key loadAvailableValues(key: string) { if (key && this.gadgetsEditdata['table']) { - const connectionIdNum = this.gadgetsEditdata['connection'] ? + const connectionIdNum = this.gadgetsEditdata['connection'] ? parseInt(this.gadgetsEditdata['connection'], 10) : undefined; this.alertService.getValuesFromUrl(this.gadgetsEditdata['table'], connectionIdNum, key).subscribe( (values: string[]) => { // Update filter options string for dropdown/multiselect - if (this.gadgetsEditdata['filterType'] === 'dropdown' || - this.gadgetsEditdata['filterType'] === 'multiselect') { + if (this.gadgetsEditdata['filterType'] === 'dropdown' || + this.gadgetsEditdata['filterType'] === 'multiselect') { this.filterOptionsString = values.join(', '); // Also update the gadgetsEditdata filterOptions array this.gadgetsEditdata['filterOptions'] = values; @@ -2016,8 +2012,8 @@ export class EditnewdashComponent implements OnInit { onFilterKeyChange(key: string) { this.gadgetsEditdata['filterKey'] = key; // Load available values when filter key changes - if (key && (this.gadgetsEditdata['filterType'] === 'dropdown' || - this.gadgetsEditdata['filterType'] === 'multiselect')) { + if (key && (this.gadgetsEditdata['filterType'] === 'dropdown' || + this.gadgetsEditdata['filterType'] === 'multiselect')) { this.loadAvailableValues(key); } } @@ -2049,14 +2045,4 @@ 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; - } - }