filter

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html

@@ -78,13 +78,17 @@
   </div>
 
   <!-- Multi-Select Filter -->
-  <div class="filter-control" *ngIf="filterType === 'multiselect'">
+  <div class="filter-control multiselect-container" *ngIf="filterType === 'multiselect'">
-    <select [(ngModel)]="filterValue" 
+    <div class="checkbox-group">
-            (ngModelChange)="onFilterValueChange($event)"
+      <div class="checkbox-item" *ngFor="let option of filterOptions">
-            multiple 
+        <input type="checkbox" 
-            class="clr-select compact-multiselect">
+               [value]="option" 
-      <option *ngFor="let option of filterOptions" [value]="option">{{ option }}</option>
+               [checked]="filterValue && filterValue.includes(option)" 
-    </select>
+               (change)="onMultiselectChange(option, $event)"
+               class="clr-checkbox">
+        <label class="checkbox-label">{{ option }}</label>
+      </div>
+    </div>
   </div>
 
   <!-- Date Range Filter -->

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.scss

@@ -70,6 +70,41 @@
     min-height: 24px;
   }
   
+  .multiselect-container {
+    max-height: 150px;
+    overflow-y: auto;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 5px;
+    background: white;
+  }
+  
+  .checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+  }
+  
+  .checkbox-item {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+  
+  .checkbox-label {
+    font-size: 12px;
+    margin: 0;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  .clr-checkbox {
+    margin: 0;
+    cursor: pointer;
+  }
+  
   .toggle-label {
     margin: 0;
     font-size: 12px;

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts

@@ -201,6 +201,29 @@ export class CompactFilterComponent implements OnInit, OnChanges {
     this.onFilterValueChange(dateRange);
   }
   
+  // Handle multiselect checkbox changes
+  onMultiselectChange(option: string, event: any): void {
+    const isChecked = event.target.checked;
+    
+    // Ensure filterValue is an array
+    if (!Array.isArray(this.filterValue)) {
+      this.filterValue = [];
+    }
+    
+    if (isChecked) {
+      // Add option to selected values if not already present
+      if (!this.filterValue.includes(option)) {
+        this.filterValue = [...this.filterValue, option];
+      }
+    } else {
+      // Remove option from selected values
+      this.filterValue = this.filterValue.filter((val: string) => val !== option);
+    }
+    
+    // Emit the change
+    this.onFilterValueChange(this.filterValue);
+  }
+  
   // Load available keys from API
   loadAvailableKeys(): void {
     if (this.apiUrl) {