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 501335c..106458b 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 @@ -335,8 +335,8 @@
-
- @@ -345,7 +345,26 @@
-
+
+ +
+ +
+ +
+ Available: {{ filter.availableValues }} +
+
+ +
@@ -476,8 +495,8 @@
-
-
-
+
+ +
+ +
+ +
+ Available: {{ filter.availableValues }} +
+
+ +
@@ -629,8 +667,8 @@
-
-
-
- +
+ +
+ +
+ +
+ Available: {{ filter.availableValues }} +
+
+ +
+
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 f2e600e..5190c2b 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 @@ -597,6 +597,7 @@ export class EditnewdashComponent implements OnInit { } modelid: number; + // Update the editGadget method to initialize filter properties editGadget(item) { this.modeledit = true; this.modelid = item.chartid; @@ -639,6 +640,65 @@ export class EditnewdashComponent implements OnInit { this.filterOptionsString = ''; } + // Initialize base filters with type and options if not present + 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 => ({ + field: filter.field || '', + value: filter.value || '', + type: filter.type || 'text', + options: filter.options || '', + availableValues: filter.availableValues || '' + })); + } + + // Initialize drilldown filters with type and options if not present + 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 => ({ + field: filter.field || '', + value: filter.value || '', + type: filter.type || 'text', + options: filter.options || '', + availableValues: filter.availableValues || '' + })); + } + + // Initialize drilldown layers with proper filter structure if not present + if (item['drilldownLayers'] === undefined) { + this.gadgetsEditdata['drilldownLayers'] = []; + } else { + // Ensure each layer has proper filter structure + this.gadgetsEditdata['drilldownLayers'] = this.gadgetsEditdata['drilldownLayers'].map(layer => { + // Initialize parameter if not present + if (layer['parameter'] === undefined) { + layer['parameter'] = ''; + } + // Initialize filters if not present + if (layer['filters'] === undefined) { + layer['filters'] = []; + } else { + // Ensure each layer filter has type and options properties + layer['filters'] = layer['filters'].map(filter => ({ + field: filter.field || '', + value: filter.value || '', + type: filter.type || 'text', + options: filter.options || '', + availableValues: filter.availableValues || '' + })); + } + // Initialize common filter property for layer if not present + if (layer['commonFilterEnabled'] === undefined) { + layer['commonFilterEnabled'] = false; + } + return layer; + }); + } + this.getStores(); // Set default connection if none is set and we have connections @@ -666,37 +726,6 @@ export class EditnewdashComponent implements OnInit { this.gadgetsEditdata['drilldownParameter'] = ''; } - // Initialize base filters if not present - if (item['baseFilters'] === undefined) { - this.gadgetsEditdata['baseFilters'] = []; - } - - // Initialize drilldown filters if not present - if (item['drilldownFilters'] === undefined) { - this.gadgetsEditdata['drilldownFilters'] = []; - } - - // Initialize drilldown layers if not present - if (item['drilldownLayers'] === undefined) { - this.gadgetsEditdata['drilldownLayers'] = []; - } else { - // Ensure each layer has proper structure (removed parameterKey, added parameter) - this.gadgetsEditdata['drilldownLayers'].forEach((layer, index) => { - // Initialize parameter if not present - if (layer['parameter'] === undefined) { - layer['parameter'] = ''; - } - // Initialize filters if not present - if (layer['filters'] === undefined) { - layer['filters'] = []; - } - // Initialize common filter property for layer if not present - if (layer['commonFilterEnabled'] === undefined) { - layer['commonFilterEnabled'] = false; - } - }); - } - // Reset drilldown column data this.drilldownColumnData = []; @@ -784,6 +813,7 @@ export class EditnewdashComponent implements OnInit { // } } + // Update the onSubmit method to properly save filter data onSubmit(id) { console.log(id); if (!isNullArray(this.selectedyAxis)) { @@ -978,8 +1008,8 @@ export class EditnewdashComponent implements OnInit { drilldownXAxis: item['drilldownXAxis'], drilldownYAxis: item['drilldownYAxis'], drilldownParameter: item['drilldownParameter'], // Add drilldown parameter - baseFilters: item['baseFilters'] || [], // Add base filters - drilldownFilters: item['drilldownFilters'] || [], // Add drilldown filters + baseFilters: item['baseFilters'] || [], // Add base filters with type information + drilldownFilters: item['drilldownFilters'] || [], // Add drilldown filters with type information // Multi-layer drilldown configurations drilldownLayers: item['drilldownLayers'] || [] }; @@ -994,6 +1024,7 @@ export class EditnewdashComponent implements OnInit { return chartInputs; } + // Update the applyChanges method to properly save filter data applyChanges(id) { console.log('Apply changes for chart ID:', id); @@ -1293,46 +1324,239 @@ export class EditnewdashComponent implements OnInit { // We're now using removeBaseFilter and removeLayerFilter methods instead } - // Add method to add a base filter + // Add method to handle base filter field change + onBaseFilterFieldChange(index: number, field: string) { + const filter = this.gadgetsEditdata.baseFilters[index]; + if (filter) { + filter.field = field; + // If field changes, reset value and options + 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, + 'base' + ); + } + } + } + + // Add method to handle base filter type change + onBaseFilterTypeChange(index: number, type: string) { + const filter = this.gadgetsEditdata.baseFilters[index]; + if (filter) { + filter.type = type; + // 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, + 'base' + ); + } + } + } + + // Add method to handle drilldown filter field change + onDrilldownFilterFieldChange(index: number, field: string) { + const filter = this.gadgetsEditdata.drilldownFilters[index]; + if (filter) { + filter.field = field; + // If field changes, reset value and options + 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, + 'drilldown' + ); + } + } + } + + // Add method to handle drilldown filter type change + onDrilldownFilterTypeChange(index: number, type: string) { + const filter = this.gadgetsEditdata.drilldownFilters[index]; + if (filter) { + filter.type = type; + // 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, + 'drilldown' + ); + } + } + } + + // Add method to handle layer filter field change + onLayerFilterFieldChange(layerIndex: number, filterIndex: number, field: string) { + const layer = this.gadgetsEditdata.drilldownLayers[layerIndex]; + if (layer && layer.filters) { + const filter = layer.filters[filterIndex]; + if (filter) { + filter.field = field; + // If field changes, reset value and options + 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', + layerIndex + ); + } + } + } + } + + // Add method to handle layer filter type change + onLayerFilterTypeChange(layerIndex: number, filterIndex: number, type: string) { + const layer = this.gadgetsEditdata.drilldownLayers[layerIndex]; + if (layer && layer.filters) { + const filter = layer.filters[filterIndex]; + if (filter) { + filter.type = type; + // 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', + layerIndex + ); + } + } + } + } + + // Add method to load filter values for a specific field + loadFilterValuesForField( + apiUrl: string, + connectionId: string | undefined, + field: string, + filterIndex: number, + filterType: 'base' | 'drilldown' | 'layer', + layerIndex?: number + ) { + if (apiUrl && field) { + const connectionIdNum = connectionId ? parseInt(connectionId, 10) : undefined; + this.alertService.getValuesFromUrl(apiUrl, connectionIdNum, field).subscribe( + (values: string[]) => { + // Update the filter with available values + if (filterType === 'base') { + const filter = this.gadgetsEditdata.baseFilters[filterIndex]; + if (filter) { + filter.availableValues = values.join(', '); + // For dropdown/multiselect types, also update the options + if (filter.type === 'dropdown' || filter.type === 'multiselect') { + filter.options = filter.availableValues; + } + } + } else if (filterType === 'drilldown') { + const filter = this.gadgetsEditdata.drilldownFilters[filterIndex]; + if (filter) { + filter.availableValues = values.join(', '); + // For dropdown/multiselect types, also update the options + if (filter.type === 'dropdown' || filter.type === 'multiselect') { + filter.options = filter.availableValues; + } + } + } else if (filterType === 'layer' && layerIndex !== undefined) { + const layer = this.gadgetsEditdata.drilldownLayers[layerIndex]; + if (layer && layer.filters) { + const filter = layer.filters[filterIndex]; + if (filter) { + filter.availableValues = values.join(', '); + // For dropdown/multiselect types, also update the options + if (filter.type === 'dropdown' || filter.type === 'multiselect') { + filter.options = filter.availableValues; + } + } + } + } + }, + (error) => { + console.error('Error loading available values for field:', field, error); + } + ); + } + } + + // Add method to add a base filter with default properties addBaseFilter() { const newFilter = { field: '', - value: '' + value: '', + type: 'text', + options: '', + availableValues: '' }; this.gadgetsEditdata.baseFilters.push(newFilter); } + + // Add method to add a drilldown filter with default properties + addDrilldownFilter() { + const newFilter = { + field: '', + value: '', + type: 'text', + options: '', + availableValues: '' + }; + this.gadgetsEditdata.drilldownFilters.push(newFilter); + } + + // Add method to add a layer filter with default properties + addLayerFilter(layerIndex: number) { + const newFilter = { + field: '', + value: '', + type: 'text', + options: '', + availableValues: '' + }; + if (!this.gadgetsEditdata.drilldownLayers[layerIndex].filters) { + this.gadgetsEditdata.drilldownLayers[layerIndex].filters = []; + } + 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 add a drilldown filter - addDrilldownFilter() { - const newFilter = { - field: '', - value: '' - }; - this.gadgetsEditdata.drilldownFilters.push(newFilter); - } - // Add method to remove a drilldown filter removeDrilldownFilter(index: number) { this.gadgetsEditdata.drilldownFilters.splice(index, 1); } - // Add method to add a layer filter - addLayerFilter(layerIndex: number) { - const newFilter = { - field: '', - value: '' - }; - if (!this.gadgetsEditdata.drilldownLayers[layerIndex].filters) { - this.gadgetsEditdata.drilldownLayers[layerIndex].filters = []; - } - this.gadgetsEditdata.drilldownLayers[layerIndex].filters.push(newFilter); - } - // Add method to remove a layer filter removeLayerFilter(layerIndex: number, filterIndex: number) { this.gadgetsEditdata.drilldownLayers[layerIndex].filters.splice(filterIndex, 1);