From 418b02acd79fc3d856c334f31164af00e552e75c Mon Sep 17 00:00:00 2001
From: Gaurav Kumar <GAURAVRK215@GMAIL.COM>
Date: Mon, 27 Oct 2025 19:02:47 +0530
Subject: [PATCH] checkbox multislect filter, in edit new dash

---
 .../compact-filter.component.html             | 16 ++++---
 .../common-filter/compact-filter.component.ts | 44 +++++++++++++++++++
 2 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html
index 26c2383..1564cf7 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html
@@ -79,12 +79,16 @@
 
   <!-- Multi-Select Filter -->
   <div class="filter-control" *ngIf="filterType === 'multiselect'">
-    <select [(ngModel)]="filterValue" 
-            (ngModelChange)="onFilterValueChange($event)"
-            multiple 
-            class="clr-select compact-multiselect">
-      <option *ngFor="let option of filterOptions" [value]="option">{{ option }}</option>
-    </select>
+    <div class="compact-multiselect-checkboxes" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; padding: 10px;">
+      <div *ngFor="let option of filterOptions" class="clr-checkbox-wrapper" style="margin-bottom: 5px;">
+        <input type="checkbox" 
+               [id]="'multiselect-' + option" 
+               [value]="option" 
+               [checked]="isOptionSelected(option)"
+               (change)="onMultiselectOptionChange($event, option)">
+        <label [for]="'multiselect-' + option" class="clr-control-label">{{ option }}</label>
+      </div>
+    </div>
   </div>
 
   <!-- Date Range Filter -->
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts
index 7424e96..32ee3b9 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts
@@ -331,4 +331,48 @@ export class CompactFilterComponent implements OnInit, OnChanges {
       this.loadAvailableValues(this.configFilterKey);
     }
   }
+  
+  // Add method to check if an option is selected for checkboxes
+  isOptionSelected(option: string): boolean {
+    if (!this.filterValue) {
+      return false;
+    }
+    
+    // Ensure filterValue is an array for multiselect
+    if (!Array.isArray(this.filterValue)) {
+      this.filterValue = [];
+      return false;
+    }
+    
+    return this.filterValue.includes(option);
+  }
+  
+  // Add method to handle multiselect option change
+  onMultiselectOptionChange(event: any, option: string): void {
+    // Initialize filterValue array if it doesn't exist
+    if (!this.filterValue) {
+      this.filterValue = [];
+    }
+    
+    // Ensure filterValue is an array
+    if (!Array.isArray(this.filterValue)) {
+      this.filterValue = [];
+    }
+    
+    if (event.target.checked) {
+      // Add option if not already in array
+      if (!this.filterValue.includes(option)) {
+        this.filterValue.push(option);
+      }
+    } else {
+      // Remove option from array
+      const index = this.filterValue.indexOf(option);
+      if (index > -1) {
+        this.filterValue.splice(index, 1);
+      }
+    }
+    
+    // Emit the change event
+    this.onFilterValueChange(this.filterValue);
+  }
 }
\ No newline at end of file