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

@@ -12,23 +12,23 @@ import { ModulesetupService } from 'src/app/services/builder/modulesetup.service
   styleUrls: ['./dashrunnerall.component.scss']
 })
 export class DashrunnerallComponent implements OnInit {
-  addModall:boolean = false;
+  addModall: boolean = false;
-  selected:any[] = [];
+  selected: any[] = [];
   loading = false;
-  data:any;
+  data: any;
-  id:any;
+  id: any;
-  moduleId:any;
+  moduleId: any;
   modalDelete = false;
-  rowSelected :any= {};
+  rowSelected: any = {};
   rows: any[];
   projectname;
   projectId;
   error;
   constructor(
-    private router : Router,
+    private router: Router,
-    private route: ActivatedRoute,private dashboardService : Dashboard3Service,
+    private route: ActivatedRoute, private dashboardService: Dashboard3Service,
     // private wireframeservice : WireframeService,
-    private excel: ExcelService,private mainService: ModulesetupService,
+    private excel: ExcelService, private mainService: ModulesetupService,
     private toastr: ToastrService,) { }
 
   ngOnInit(): void {
@@ -42,50 +42,46 @@ export class DashrunnerallComponent implements OnInit {
     // this.getprojectName(this.projectId);
   }
 
-  getprojectName(id){
+  getprojectName(id) {
     this.mainService.getProjectModules(id).subscribe((data) => {
       console.log(data);
-      this.projectname=data.items[0]['projectName'];
+      this.projectname = data.items[0]['projectName'];
       console.log(this.projectname);
     });
   }
 
 
-  getdashboard()
+  getdashboard() {
-  {
+    this.dashboardService.getAllDash().subscribe((data) => {
-    this.dashboardService.getAllDash().subscribe((data) =>{
       this.data = data;
       this.rows = this.data;
       console.log(data);
-      this.error="No data Available";
+      this.error = "No data Available";
       console.log(this.error);
     });
   }
 
-  openModal()
+  openModal() {
-  {
     this.addModall = true;
   }
-  gotoadd()
+  gotoadd() {
-  {
+    this.router.navigate(['../../dashboardbuilder'], { relativeTo: this.route });
-      this.router.navigate(['../../dashboardbuilder'],{relativeTo:this.route});
   }
-//  for runner line navigation
+  //  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
-     // Navigate to editnewdash component instead of dashrunnerline
+    // Pass a query parameter to indicate this is from dashboard runner
-     // Pass a query parameter to indicate this is from dashboard runner
+    this.router.navigate(['../../dashboardbuilder/editdashn/' + id], {
-     this.router.navigate(['../../dashboardbuilder/editdashn/'+id], {
+      relativeTo: this.route,
-       relativeTo: this.route,
+      queryParams: { fromRunner: true }
-       queryParams: { fromRunner: true }
+    });
-     });
   }
 
-  goToEditData(id: number){
+  goToEditData(id: number) {
-    this.router.navigate(['../editdata/'+id],{relativeTo:this.route});
+    this.router.navigate(['../editdata/' + id], { relativeTo: this.route });
   }
 
   onExport() {
@@ -93,29 +89,28 @@ export class DashrunnerallComponent implements OnInit {
       moment().format('YYYYMMDD_HHmmss'))
   }
 
-  gotoAction(){
+  gotoAction() {
-    this.router.navigate(["../../actions"], { relativeTo: this.route, queryParams: { m_id: this.moduleId,pname:this.projectname } });
+    this.router.navigate(["../../actions"], { relativeTo: this.route, queryParams: { m_id: this.moduleId, pname: this.projectname } });
   }
-  gotoRepo(){
+  gotoRepo() {
     this.router.navigate(["../../modulecard"], { relativeTo: this.route, queryParams: { p_id: this.projectId } });
   }
 
-  onDelete(row){
+  onDelete(row) {
     this.rowSelected = row;
     console.log(this.rowSelected);
     this.modalDelete = true;
   }
-  delete(id)
+  delete(id) {
-  {
+    this.modalDelete = false;
-     this.modalDelete = false;
+    console.log("in delete  " + id);
-     console.log("in delete  "+id);
+    this.dashboardService.deleteField(id).subscribe((data) => {
-     this.dashboardService.deleteField(id).subscribe((data)=>{
       console.log(data);
       this.ngOnInit();
-     });
+    });
-     if (id) {
+    if (id) {
       this.toastr.success('Deleted successfully');
-          }
+    }
   }
   // openModal()
   // {