From ced99e09409a1709d006e509d6c68632fa843289 Mon Sep 17 00:00:00 2001 From: Gaurav Kumar Date: Tue, 28 Oct 2025 15:11:40 +0530 Subject: [PATCH] grid view --- .../grid-view/grid-view.component.html | 81 ++++++++++++------- .../grid-view/grid-view.component.scss | 72 ++++++++++++++--- .../gadgets/grid-view/grid-view.component.ts | 76 +++++++++++++++++ 3 files changed, 190 insertions(+), 39 deletions(-) diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/grid-view/grid-view.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/grid-view/grid-view.component.html index 57ddac8..b4bf8f7 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/grid-view/grid-view.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/grid-view/grid-view.component.html @@ -28,16 +28,25 @@ - +
-
-
- - +
+ {{ filter.field }} + + ({{ getSelectedOptionsCount(filter) }} selected) + + +
+
+
+
+ + +
@@ -98,16 +107,25 @@
- +
-
-
- - +
+ {{ filter.field }} + + ({{ getSelectedOptionsCount(filter) }} selected) + + +
+
+
+
+ + +
@@ -168,16 +186,25 @@
- +
-
-
- - +
+ {{ filter.field }} + + ({{ getSelectedOptionsCount(filter) }} selected) + + +
+
+
+
+ + +
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/grid-view/grid-view.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/grid-view/grid-view.component.scss index 7937ca0..a2d9ba4 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/grid-view/grid-view.component.scss +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/grid-view/grid-view.component.scss @@ -58,21 +58,69 @@ } .multiselect-container { - .checkbox-group { - display: flex; - flex-direction: column; - gap: 5px; + position: relative; +} + +.multiselect-display { + display: flex; + align-items: center; + justify-content: space-between; + padding: 6px 12px; + border: 1px solid #ccc; + border-radius: 4px; + background: white; + cursor: pointer; + min-height: 34px; + + .multiselect-label { + flex: 1; + font-size: 14px; } - .checkbox-item { - display: flex; - align-items: center; - gap: 8px; + .multiselect-value { + color: #666; + font-size: 12px; + margin-right: 8px; + } + + .dropdown-icon { + flex-shrink: 0; + transition: transform 0.2s ease; + } + + &:hover { + border-color: #999; + } +} + +.multiselect-dropdown { + position: absolute; + top: 100%; + left: 0; + right: 0; + z-index: 1000; + background: white; + border: 1px solid #ccc; + border-top: none; + border-radius: 0 0 4px 4px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + max-height: 200px; + overflow-y: auto; + + .checkbox-group { + padding: 8px; - .checkbox-label { - margin: 0; - font-size: 14px; - cursor: pointer; + .checkbox-item { + display: flex; + align-items: center; + gap: 8px; + padding: 4px 0; + + .checkbox-label { + margin: 0; + font-size: 14px; + cursor: pointer; + } } } } diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/grid-view/grid-view.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/grid-view/grid-view.component.ts index 278b88e..bccaa81 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/grid-view/grid-view.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/grid-view/grid-view.component.ts @@ -69,6 +69,12 @@ export class GridViewComponent implements OnInit, OnChanges, OnDestroy { // Add a flag to track if filters have been initialized private filtersInitialized: boolean = false; + // Add properties to track open multiselect dropdowns + private openMultiselects: Map = new Map(); // Map of filterId -> context + + // Add property to track document click handler + private documentClickHandler: ((event: MouseEvent) => void) | null = null; + constructor( private mainservice: UsergrpmaintainceService, private dashboardService: Dashboard3Service, @@ -828,6 +834,67 @@ export class GridViewComponent implements OnInit, OnChanges, OnDestroy { this.fetchGridData(); } + // Toggle multiselect dropdown visibility + toggleMultiselect(filter: any, context: string): void { + const filterId = `${context}-${filter.field}`; + if (this.isMultiselectOpen(filter, context)) { + this.openMultiselects.delete(filterId); + } else { + // Close all other multiselects first + this.openMultiselects.clear(); + this.openMultiselects.set(filterId, context); + + // Add document click handler to close dropdown when clicking outside + this.addDocumentClickHandler(); + } + } + + // Add document click handler to close dropdowns when clicking outside + private addDocumentClickHandler(): void { + if (!this.documentClickHandler) { + this.documentClickHandler = (event: MouseEvent) => { + const target = event.target as HTMLElement; + // Check if click is outside any multiselect dropdown + if (!target.closest('.multiselect-container')) { + this.openMultiselects.clear(); + this.removeDocumentClickHandler(); + } + }; + + // Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it + setTimeout(() => { + document.addEventListener('click', this.documentClickHandler!); + }, 0); + } + } + + // Remove document click handler + private removeDocumentClickHandler(): void { + if (this.documentClickHandler) { + document.removeEventListener('click', this.documentClickHandler); + this.documentClickHandler = null; + } + } + + // Check if multiselect dropdown is open + isMultiselectOpen(filter: any, context: string): boolean { + const filterId = `${context}-${filter.field}`; + return this.openMultiselects.has(filterId); + } + + // Get count of selected options for a multiselect filter + getSelectedOptionsCount(filter: any): number { + if (!filter.value) { + return 0; + } + + if (Array.isArray(filter.value)) { + return filter.value.length; + } + + return 0; + } + // Clear all filters clearAllFilters(): void { // Clear base filters @@ -879,6 +946,9 @@ export class GridViewComponent implements OnInit, OnChanges, OnDestroy { }); } + // Close all multiselect dropdowns + this.openMultiselects.clear(); + // Refresh data this.fetchGridData(); } @@ -899,6 +969,12 @@ export class GridViewComponent implements OnInit, OnChanges, OnDestroy { this.drilldownStack = []; this.originalGridData = []; + // Clear multiselect tracking + this.openMultiselects.clear(); + + // Remove document click handler + this.removeDocumentClickHandler(); + console.log('GridViewComponent destroyed and cleaned up'); } } \ No newline at end of file