compact

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

@@ -79,7 +79,12 @@
 
   <!-- Multi-Select Filter -->
   <div class="filter-control" *ngIf="filterType === 'multiselect'">
-    <div class="compact-multiselect-checkboxes" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; padding: 10px;">
+    <div class="compact-multiselect-display" (click)="toggleMultiselectDropdown()" style="padding: 5px; border: 1px solid #ddd; cursor: pointer; background-color: #f8f8f8;">
+      <span *ngIf="filterValue && filterValue.length > 0">{{ filterValue.length }} selected</span>
+      <span *ngIf="!filterValue || filterValue.length === 0">{{ filterLabel || filterKey || 'Select options' }}</span>
+      <clr-icon shape="caret down" style="float: right; margin-top: 3px;"></clr-icon>
+    </div>
+    <div class="compact-multiselect-dropdown" *ngIf="showMultiselectDropdown" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; border-top: none; padding: 10px; background-color: white; position: absolute; z-index: 1000; width: calc(100% - 2px); box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
       <div *ngFor="let option of filterOptions" class="clr-checkbox-wrapper" style="margin-bottom: 5px;">
         <input type="checkbox" 
                [id]="'multiselect-' + option" 

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
 import { FilterService, Filter } from './filter.service';
 import { AlertsService } from 'src/app/services/fnd/alerts.service';
 
@@ -7,7 +7,7 @@ import { AlertsService } from 'src/app/services/fnd/alerts.service';
   templateUrl: './compact-filter.component.html',
   styleUrls: ['./compact-filter.component.scss']
 })
-export class CompactFilterComponent implements OnInit, OnChanges {
+export class CompactFilterComponent implements OnInit, OnChanges, OnDestroy {
   @Input() filterKey: string = '';
   @Input() filterType: string = 'text';
   @Input() filterOptions: string[] = [];
@@ -23,6 +23,9 @@ export class CompactFilterComponent implements OnInit, OnChanges {
   availableKeys: string[] = [];
   availableValues: string[] = [];
   
+  // Multiselect dropdown state
+  showMultiselectDropdown: boolean = false;
+  
   // Configuration properties
   isConfigMode: boolean = false;
   configFilterKey: string = '';
@@ -73,6 +76,24 @@ export class CompactFilterComponent implements OnInit, OnChanges {
   }
   
   ngOnChanges(changes: SimpleChanges): void {
+    // If filterKey changes, clear the previous filter value and remove old filter from service
+    if (changes.filterKey) {
+      // Clear the previous filter value
+      this.filterValue = '';
+      
+      // Clear filter options
+      this.filterOptions = [];
+      
+      // Clear available values
+      this.availableValues = [];
+      
+      // If we had a previous selected filter, clear its value in the service
+      if (this.selectedFilter && changes.filterKey.previousValue) {
+        const oldFilterId = changes.filterKey.previousValue;
+        this.filterService.updateFilterValue(oldFilterId, '');
+      }
+    }
+    
     // If filterKey or filterType changes, re-register the filter
     if (changes.filterKey || changes.filterType) {
       // Load available values for the current filter key if it's a dropdown or multiselect
@@ -201,6 +222,10 @@ export class CompactFilterComponent implements OnInit, OnChanges {
     this.onFilterValueChange(dateRange);
   }
   
+  ngOnDestroy(): void {
+    // Component cleanup - nothing specific needed for now
+  }
+  
   // Load available keys from API
   loadAvailableKeys(): void {
     if (this.apiUrl) {
@@ -278,6 +303,9 @@ export class CompactFilterComponent implements OnInit, OnChanges {
     this.apiUrl = config.apiUrl;
     this.connectionId = config.connectionId;
     
+    // Clear filter value when changing configuration
+    this.filterValue = '';
+    
     // Load available keys if API URL is provided
     if (this.apiUrl) {
       this.loadAvailableKeys();
@@ -304,11 +332,23 @@ export class CompactFilterComponent implements OnInit, OnChanges {
   
   // Handle filter key change in configuration
   onFilterKeyChange(key: string): void {
+    // Clear the previous filter value when changing keys
+    this.filterValue = '';
+    
+    // Clear filter options until new values are loaded
+    this.filterOptions = [];
+    
     this.configFilterKey = key;
+    
     // Load available values for the selected key if it's a dropdown or multiselect
     if ((this.configFilterType === 'dropdown' || this.configFilterType === 'multiselect') && key) {
       this.loadAvailableValues(key);
     }
+    
+    // Clear the filter service value for the previous filter key
+    if (this.selectedFilter) {
+      this.filterService.updateFilterValue(this.selectedFilter.id, '');
+    }
   }
   
   // Handle API URL change in configuration
@@ -375,4 +415,23 @@ export class CompactFilterComponent implements OnInit, OnChanges {
     // Emit the change event
     this.onFilterValueChange(this.filterValue);
   }
+  
+  // Add method to toggle multiselect dropdown visibility
+  toggleMultiselectDropdown(): void {
+    this.showMultiselectDropdown = !this.showMultiselectDropdown;
+    
+    // Add document click handler to close dropdown when clicking outside
+    if (this.showMultiselectDropdown) {
+      setTimeout(() => {
+        const handleClick = (event: MouseEvent) => {
+          const target = event.target as HTMLElement;
+          if (!target.closest('.compact-multiselect-display') && !target.closest('.compact-multiselect-dropdown')) {
+            this.showMultiselectDropdown = false;
+            document.removeEventListener('click', handleClick);
+          }
+        };
+        document.addEventListener('click', handleClick);
+      }, 0);
+    }
+  }
 }

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerall/dashrunnerall.component.ts

@@ -51,8 +51,7 @@ export class DashrunnerallComponent implements OnInit {
   }
 
 
-  getdashboard()
-  {
+  getdashboard() {
     this.dashboardService.getAllDash().subscribe((data) => {
       this.data = data;
       this.rows = this.data;
@@ -62,20 +61,17 @@ export class DashrunnerallComponent implements OnInit {
     });
   }
 
-  openModal()
-  {
+  openModal() {
     this.addModall = true;
   }
-  gotoadd()
-  {
+  gotoadd() {
     this.router.navigate(['../../dashboardbuilder'], { relativeTo: this.route });
   }
   //  for runner line navigation
   //  goToEditData(id: number){
   //   this.router.navigate(['../editdata/'+id],{relativeTo:this.route});
   // }
-  goToEdit(id:number)
-  {
+  goToEdit(id: number) {
     // Navigate to editnewdash component instead of dashrunnerline
     // Pass a query parameter to indicate this is from dashboard runner
     this.router.navigate(['../../dashboardbuilder/editdashn/' + id], {
@@ -105,8 +101,7 @@ export class DashrunnerallComponent implements OnInit {
     console.log(this.rowSelected);
     this.modalDelete = true;
   }
-  delete(id)
-  {
+  delete(id) {
     this.modalDelete = false;
     console.log("in delete  " + id);
     this.dashboardService.deleteField(id).subscribe((data) => {