filter

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

@@ -343,8 +343,20 @@
           <h5>Base Drilldown Filters</h5>
           <div class="clr-subtext">Configure filters for the base drilldown level</div>
           
+          <!-- Common Filter Toggle for Base Drilldown -->
+          <div class="clr-form-control" style="margin-top: 10px;">
+            <div class="clr-control-container">
+              <div class="clr-checkbox-wrapper">
+                <input type="checkbox" id="commonFilterToggleDrilldown" [(ngModel)]="gadgetsEditdata.commonFilterEnabledDrilldown" 
+                       (change)="onCommonFilterToggleDrilldown()" [ngModelOptions]="{standalone: true}" class="clr-checkbox" />
+                <label for="commonFilterToggleDrilldown" class="clr-control-label">Use Common Filter</label>
+              </div>
+            </div>
+          </div>
+          
           <!-- Add Drilldown Filter Button -->
-          <button class="btn btn-sm btn-primary" (click)="addDrilldownFilter()" style="margin-top: 10px; margin-bottom: 10px;">
+          <button class="btn btn-sm btn-primary" (click)="addDrilldownFilter()" style="margin-top: 10px; margin-bottom: 10px;" 
+                  [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
             <clr-icon shape="plus"></clr-icon> Add Filter
           </button>
           
@@ -353,14 +365,16 @@
                style="margin-bottom: 10px; padding: 8px; border: 1px solid #eee; border-radius: 4px; background-color: #f9f9f9;">
             <div style="display: flex; justify-content: space-between; align-items: center;">
               <span>Filter {{i + 1}}</span>
-              <button class="btn btn-icon btn-danger btn-sm" (click)="removeDrilldownFilter(i)">
+              <button class="btn btn-icon btn-danger btn-sm" (click)="removeDrilldownFilter(i)" 
+                      [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
                 <clr-icon shape="trash"></clr-icon>
               </button>
             </div>
             
             <div class="clr-row" style="margin-top: 8px;">
               <div class="clr-col-sm-5">
-                <select [(ngModel)]="filter.field" [ngModelOptions]="{standalone: true}" class="clr-select">
+                <select [(ngModel)]="filter.field" [ngModelOptions]="{standalone: true}" class="clr-select" 
+                        [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
                   <option value="">Select Field</option>
                   <option *ngFor="let column of getAvailableFields(gadgetsEditdata.drilldownFilters, i, drilldownColumnData)" [value]="column">{{column}}</option>
                 </select>
@@ -368,11 +382,13 @@
               
               <div class="clr-col-sm-5">
                 <input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" 
-                       class="clr-input" placeholder="Filter Value" />
+                       class="clr-input" placeholder="Filter Value" 
+                       [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown"/>
               </div>
               
               <div class="clr-col-sm-2">
-                <button class="btn btn-icon btn-danger btn-sm" (click)="removeDrilldownFilter(i)">
+                <button class="btn btn-icon btn-danger btn-sm" (click)="removeDrilldownFilter(i)" 
+                        [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
                   <clr-icon shape="trash"></clr-icon>
                 </button>
               </div>
@@ -472,8 +488,20 @@
               <h5>Layer {{i + 1}} Filters</h5>
               <div class="clr-subtext">Configure filters for this drilldown layer</div>
               
+              <!-- Common Filter Toggle for Layer -->
+              <div class="clr-form-control" style="margin-top: 10px;">
+                <div class="clr-control-container">
+                  <div class="clr-checkbox-wrapper">
+                    <input type="checkbox" [id]="'commonFilterToggleLayer' + i" [(ngModel)]="layer.commonFilterEnabled" 
+                           (change)="onCommonFilterToggleLayer(i)" [ngModelOptions]="{standalone: true}" class="clr-checkbox" />
+                    <label [for]="'commonFilterToggleLayer' + i" class="clr-control-label">Use Common Filter</label>
+                  </div>
+                </div>
+              </div>
+              
               <!-- Add Layer Filter Button -->
-              <button class="btn btn-sm btn-primary" (click)="addLayerFilter(i)" style="margin-top: 10px; margin-bottom: 10px;">
+              <button class="btn btn-sm btn-primary" (click)="addLayerFilter(i)" style="margin-top: 10px; margin-bottom: 10px;" 
+                      [disabled]="layer.commonFilterEnabled">
                 <clr-icon shape="plus"></clr-icon> Add Filter
               </button>
               
@@ -482,14 +510,16 @@
                    style="margin-bottom: 10px; padding: 8px; border: 1px solid #eee; border-radius: 4px; background-color: #f9f9f9;">
                 <div style="display: flex; justify-content: space-between; align-items: center;">
                   <span>Filter {{j + 1}}</span>
-                  <button class="btn btn-icon btn-danger btn-sm" (click)="removeLayerFilter(i, j)">
+                  <button class="btn btn-icon btn-danger btn-sm" (click)="removeLayerFilter(i, j)" 
+                          [disabled]="layer.commonFilterEnabled">
                     <clr-icon shape="trash"></clr-icon>
                   </button>
                 </div>
                 
                 <div class="clr-row" style="margin-top: 8px;">
                   <div class="clr-col-sm-5">
-                    <select [(ngModel)]="filter.field" [ngModelOptions]="{standalone: true}" class="clr-select">
+                    <select [(ngModel)]="filter.field" [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] || [])" [value]="column">{{column}}</option>
                     </select>
@@ -497,11 +527,13 @@
                   
                   <div class="clr-col-sm-5">
                     <input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" 
-                           class="clr-input" placeholder="Filter Value" />
+                           class="clr-input" placeholder="Filter Value" 
+                           [disabled]="layer.commonFilterEnabled"/>
                   </div>
                   
                   <div class="clr-col-sm-2">
-                    <button class="btn btn-icon btn-danger btn-sm" (click)="removeLayerFilter(i, j)">
+                    <button class="btn btn-icon btn-danger btn-sm" (click)="removeLayerFilter(i, j)" 
+                            [disabled]="layer.commonFilterEnabled">
                       <clr-icon shape="trash"></clr-icon>
                     </button>
                   </div>

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

@@ -159,8 +159,9 @@ export class EditnewdashComponent implements OnInit {
     drilldownFilters: [] as any[], // Add separate drilldown filters
     // Multi-layer drilldown configurations
     drilldownLayers: [] as any[],
-    // Common filter property
+    // Common filter properties
-    commonFilterEnabled: false
+    commonFilterEnabled: false,
+    commonFilterEnabledDrilldown: false
   };
 
   // Add sureconnect data property
@@ -537,6 +538,10 @@ export class EditnewdashComponent implements OnInit {
     if (item['commonFilterEnabled'] === undefined) { 
       this.gadgetsEditdata['commonFilterEnabled'] = false; 
     }
+    // Initialize drilldown common filter property if not present
+    if (item['commonFilterEnabledDrilldown'] === undefined) { 
+      this.gadgetsEditdata['commonFilterEnabledDrilldown'] = false; 
+    }
     this.getStores();
     
     // Set default connection if none is set and we have connections
@@ -579,7 +584,7 @@ export class EditnewdashComponent implements OnInit {
       this.gadgetsEditdata['drilldownLayers'] = []; 
     } else {
       // Ensure each layer has proper structure (removed parameterKey, added parameter)
-      this.gadgetsEditdata['drilldownLayers'].forEach(layer => {
+      this.gadgetsEditdata['drilldownLayers'].forEach((layer, index) => {
         // Initialize parameter if not present
         if (layer['parameter'] === undefined) {
           layer['parameter'] = '';
@@ -588,6 +593,10 @@ export class EditnewdashComponent implements OnInit {
         if (layer['filters'] === undefined) {
           layer['filters'] = [];
         }
+        // Initialize common filter property for layer if not present
+        if (layer['commonFilterEnabled'] === undefined) {
+          layer['commonFilterEnabled'] = false;
+        }
       });
     }
     
@@ -824,6 +833,7 @@ export class EditnewdashComponent implements OnInit {
         updatedItem.drilldownFilters = this.gadgetsEditdata.drilldownFilters; // Add drilldown filters
         updatedItem.drilldownLayers = this.gadgetsEditdata.drilldownLayers;
         updatedItem.commonFilterEnabled = this.gadgetsEditdata.commonFilterEnabled; // Add common filter property
+        updatedItem.commonFilterEnabledDrilldown = this.gadgetsEditdata.commonFilterEnabledDrilldown; // Add drilldown common filter property
         
         console.log('Updated item:', updatedItem);
         return updatedItem;
@@ -1158,13 +1168,21 @@ export class EditnewdashComponent implements OnInit {
     // 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
-        return {
+        const updatedItem = {
           ...item,
           table: this.commonFilterData.apiUrl,
           connection: this.commonFilterData.connection,
           baseFilters: [...this.commonFilterData.filters]
         };
+        
+        // Restore the component reference
+        updatedItem.component = componentRef;
+        
+        return updatedItem;
       }
       return item;
     });
@@ -1172,13 +1190,21 @@ export class EditnewdashComponent implements OnInit {
     // 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
-        return {
+        const updatedItem = {
           ...item,
           table: this.commonFilterData.apiUrl,
           connection: this.commonFilterData.connection,
           baseFilters: [...this.commonFilterData.filters]
         } as DashboardContentModel;
+        
+        // Restore the component reference
+        updatedItem.component = componentRef;
+        
+        return updatedItem;
       }
       return item;
     });
@@ -1196,4 +1222,29 @@ 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];
+      }
+      // When disabling, the user can edit the filters normally
+    }
+  }
 }