filter

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

@@ -335,8 +335,8 @@
               </div>
 
               <div class="clr-row" style="margin-top: 8px;">
-                <div class="clr-col-sm-5">
+                <div class="clr-col-sm-4">
-                  <select [(ngModel)]="filter.field" [ngModelOptions]="{standalone: true}" class="clr-select"
+                  <select [(ngModel)]="filter.field" (ngModelChange)="onBaseFilterFieldChange(i, $event)" [ngModelOptions]="{standalone: true}" class="clr-select"
                     [disabled]="gadgetsEditdata.commonFilterEnabled">
                     <option value="">Select Field</option>
                     <!-- Base API filters should always use columnData, not drilldownColumnData -->
@@ -345,7 +345,26 @@
                   </select>
                 </div>
 
-                <div class="clr-col-sm-5">
+                <div class="clr-col-sm-3">
+                  <select [(ngModel)]="filter.type" (ngModelChange)="onBaseFilterTypeChange(i, $event)" [ngModelOptions]="{standalone: true}" class="clr-select"
+                    [disabled]="gadgetsEditdata.commonFilterEnabled">
+                    <option value="text">Text</option>
+                    <option value="dropdown">Dropdown</option>
+                    <option value="multiselect">Multi-Select</option>
+                    <option value="date-range">Date Range</option>
+                    <option value="toggle">Toggle</option>
+                  </select>
+                </div>
+
+                <div class="clr-col-sm-3" *ngIf="filter.type === 'dropdown' || filter.type === 'multiselect'">
+                  <input type="text" [(ngModel)]="filter.options" [ngModelOptions]="{standalone: true}" class="clr-input"
+                    placeholder="Option1,Option2,Option3" [disabled]="gadgetsEditdata.commonFilterEnabled" />
+                  <div class="clr-subtext" *ngIf="filter.availableValues">
+                    Available: {{ filter.availableValues }}
+                  </div>
+                </div>
+
+                <div class="clr-col-sm-3" *ngIf="filter.type !== 'dropdown' && filter.type !== 'multiselect'">
                   <input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" class="clr-input"
                     placeholder="Filter Value" [disabled]="gadgetsEditdata.commonFilterEnabled" />
                 </div>
@@ -476,8 +495,8 @@
               </div>
 
               <div class="clr-row" style="margin-top: 8px;">
-                <div class="clr-col-sm-5">
+                <div class="clr-col-sm-4">
-                  <select [(ngModel)]="filter.field" [ngModelOptions]="{standalone: true}" class="clr-select"
+                  <select [(ngModel)]="filter.field" (ngModelChange)="onDrilldownFilterFieldChange(i, $event)" [ngModelOptions]="{standalone: true}" class="clr-select"
                     [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
                     <option value="">Select Field</option>
                     <option
@@ -486,7 +505,26 @@
                   </select>
                 </div>
 
-                <div class="clr-col-sm-5">
+                <div class="clr-col-sm-3">
+                  <select [(ngModel)]="filter.type" (ngModelChange)="onDrilldownFilterTypeChange(i, $event)" [ngModelOptions]="{standalone: true}" class="clr-select"
+                    [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
+                    <option value="text">Text</option>
+                    <option value="dropdown">Dropdown</option>
+                    <option value="multiselect">Multi-Select</option>
+                    <option value="date-range">Date Range</option>
+                    <option value="toggle">Toggle</option>
+                  </select>
+                </div>
+
+                <div class="clr-col-sm-3" *ngIf="filter.type === 'dropdown' || filter.type === 'multiselect'">
+                  <input type="text" [(ngModel)]="filter.options" [ngModelOptions]="{standalone: true}" class="clr-input"
+                    placeholder="Option1,Option2,Option3" [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown" />
+                  <div class="clr-subtext" *ngIf="filter.availableValues">
+                    Available: {{ filter.availableValues }}
+                  </div>
+                </div>
+
+                <div class="clr-col-sm-3" *ngIf="filter.type !== 'dropdown' && filter.type !== 'multiselect'">
                   <input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" class="clr-input"
                     placeholder="Filter Value" [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown" />
                 </div>
@@ -629,8 +667,8 @@
                   </div>
 
                   <div class="clr-row" style="margin-top: 8px;">
-                    <div class="clr-col-sm-5">
+                    <div class="clr-col-sm-4">
-                      <select [(ngModel)]="filter.field" [ngModelOptions]="{standalone: true}" class="clr-select"
+                      <select [(ngModel)]="filter.field" (ngModelChange)="onLayerFilterFieldChange(i, j, $event)" [ngModelOptions]="{standalone: true}" class="clr-select"
                         [disabled]="layer.commonFilterEnabled">
                         <option value="">Select Field</option>
                         <option *ngFor="let column of getAvailableFields(layer.filters, j, layerColumnData[i] || [])"
@@ -638,9 +676,28 @@
                       </select>
                     </div>
 
-                    <div class="clr-col-sm-5">
+                    <div class="clr-col-sm-3">
-                      <input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}"
+                      <select [(ngModel)]="filter.type" (ngModelChange)="onLayerFilterTypeChange(i, j, $event)" [ngModelOptions]="{standalone: true}" class="clr-select"
-                        class="clr-input" placeholder="Filter Value" [disabled]="layer.commonFilterEnabled" />
+                        [disabled]="layer.commonFilterEnabled">
+                        <option value="text">Text</option>
+                        <option value="dropdown">Dropdown</option>
+                        <option value="multiselect">Multi-Select</option>
+                        <option value="date-range">Date Range</option>
+                        <option value="toggle">Toggle</option>
+                      </select>
+                    </div>
+
+                    <div class="clr-col-sm-3" *ngIf="filter.type === 'dropdown' || filter.type === 'multiselect'">
+                      <input type="text" [(ngModel)]="filter.options" [ngModelOptions]="{standalone: true}" class="clr-input"
+                        placeholder="Option1,Option2,Option3" [disabled]="layer.commonFilterEnabled" />
+                      <div class="clr-subtext" *ngIf="filter.availableValues">
+                        Available: {{ filter.availableValues }}
+                      </div>
+                    </div>
+
+                    <div class="clr-col-sm-3" *ngIf="filter.type !== 'dropdown' && filter.type !== 'multiselect'">
+                      <input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" class="clr-input"
+                        placeholder="Filter Value" [disabled]="layer.commonFilterEnabled" />
                     </div>
 
                     <div class="clr-col-sm-2">

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
+      baseFilters: item['baseFilters'] || [], // Add base filters with type information
-      drilldownFilters: item['drilldownFilters'] || [], // Add drilldown filters
+      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);