basesite-shared-grid-lib 15.10.282 → 15.10.283

package/fesm2022/basesite-shared-grid-lib.mjs

@@ -1140,7 +1140,6 @@ class GridLibraryComponent {
         this.gridService = gridService;
         this.formatterService = formatterService;
         this._tokenSharingService = _tokenSharingService;
-        //@Input() pageSize: number = 20;
         this.paginationAutoPageSize = true;
         this.rowSelection = 'multiple';
         this.enableServerSidePaging = false;
@@ -1155,8 +1154,6 @@ class GridLibraryComponent {
         this.filterChanged = new EventEmitter();
         this.selectionChanged = new EventEmitter();
         this.totalRowCount = new EventEmitter();
-        //viewChilds
-        //@ViewChild('agGrid') agGrid!: AgGridAngular;
         //paramters
         this.initialColumnDef = [];
         this.rowDataHidden = [];
@@ -1239,6 +1236,10 @@ class GridLibraryComponent {
                 setTimeout(() => this.updatePaginationInfo(), 0);
             }
         };
+        this.filterHighlightingObserver = null;
+        this.filterHighlightingRetryCount = 0;
+        this.MAX_RETRY_ATTEMPTS = 10;
+        this.RETRY_DELAY = 200;
         this.gridStateLoaded$.subscribe(val => {
             if (val) {
                 this.configureDataState();
@@ -1266,11 +1267,23 @@ class GridLibraryComponent {
         else {
             this.rowModelType = 'clientSide';
         }
-        // this.gridPageSize = this.pageSize;
         this.cacheBlockSize = this.cacheBlockSize = 0 ? 100 : this.cacheBlockSize;
         this.gridService.setBaseUrl(this.environment);
-        //this.getGridState();
-        /*this.getColDef();*/
+        this.setupWindowFocusListener();
+    }
+    // Handling page refresh scenarios
+    setupWindowFocusListener() {
+        const handleWindowFocus = () => {
+            setTimeout(() => {
+                if (this.gridAPI && this.floatingFilter) {
+                    this.applyFilterHighlightingWithRetry();
+                }
+            }, 500);
+        };
+        window.addEventListener('focus', handleWindowFocus);
+        this.unsubscribe$.subscribe(() => {
+            window.removeEventListener('focus', handleWindowFocus);
+        });
     }
     get isOverride() {
         return (!!this.overrideColumnDefs);
@@ -1282,7 +1295,6 @@ class GridLibraryComponent {
         else {
             this.gridAPI.resetColumnState();
             this.getGridState();
-            //setTimeout(() => { this.setGridState(); }, 2000);
         }
     }
     ngOnChanges(changes) {
@@ -1316,7 +1328,6 @@ class GridLibraryComponent {
                     this.columnDefs = coldef;
                     this.gridColumns = coldef;
                     this.getGridState();
-                    // this.agGrid.gridOptions?.api?.setColumnDefs(coldef);
                 }
                 else {
                     console.log('ColDef Read Error=>', response.message);
@@ -1404,7 +1415,6 @@ class GridLibraryComponent {
                         valueFormatter: (params) => this.formatterService.colValueFormatter(params, res.columnType),
                         filterable: res.filterable,
                         filter: 'agDateColumnFilter',
-                        //headerComponent: DateHeaderComponent,      
                         filterParams: {
                             comparator: (filterLocalDateAtMidnight, cellValue) => {
                                 const dateAsString = cellValue;
@@ -1463,7 +1473,6 @@ class GridLibraryComponent {
                     };
                 }
                 else {
-                    // if (!hideDacStatus) {
                     return {
                         width: 120,
                         pinned: res.pinPosition,
@@ -1505,14 +1514,9 @@ class GridLibraryComponent {
                             buttons: ['reset'],
                         },
                     };
-                    // } 
-                    // else {
-                    //   return;
-                    // }
                 }
             }
             else {
-                // if (!hideBtn) {
                 return {
                     field: res.field,
                     headerName: res.title,
@@ -1540,9 +1544,6 @@ class GridLibraryComponent {
                     lockPinned: true,
                     width: res.label ? 100 : 40,
                 };
-                // } else {
-                //   return;
-                // }
             }
         });
     }
@@ -1551,7 +1552,6 @@ class GridLibraryComponent {
             const isAEGroup = this.userRoles.some((role) => role?.toLowerCase().includes('ae'));
             const isDesignManager = this.userRoles.includes(this._Design_Manager);
             return isAEGroup || isDesignManager ? true : false;
-            //return !(isAEGroup || isDesignManager);
         }
         return false;
     }
@@ -1644,8 +1644,8 @@ class GridLibraryComponent {
                 }
             }));
         }
-        // Apply initial filter highlighting
-        setTimeout(() => this.updateFilteredColumnHighlighting(), 500);
+        // Apply initial filter highlighting with retry mechanism
+        this.applyFilterHighlightingWithRetry();
         // Event listeners for highlighting
         if (this.floatingFilter) {
             this.setupFilterInputListeners();
@@ -1747,11 +1747,8 @@ class GridLibraryComponent {
                     this.gridAPI.showLoadingOverlay();
                     this.gridColumnState = JSON.parse(response.result.gridConfig);
                     this.setGridState();
-                    //let manualEvent = { type: 'columnResized' };
-                    //this.onSaveGridColumnState(manualEvent);
                 }
                 else {
-                    //this.setGridState();
                     console.log('no grid state found.');
                 }
                 setTimeout(() => { this.gridStateLoaded = true; this.gridAPI.hideOverlay(); }, 1000);
@@ -1784,7 +1781,6 @@ class GridLibraryComponent {
                 this.gridService.saveColumnConfig(columnData)
                     .pipe(takeUntil(this.unsubscribe$))
                     .subscribe((res) => {
-                    //this.setGridState();
                     if (res.status == 0) {
                         console.log('Error while saving column configuration:', res.message);
                     }
@@ -1908,15 +1904,20 @@ class GridLibraryComponent {
             return;
         // Clear all filter inputs and highlighting
         this.clearFilterInputHighlighting();
-        // Force ag-grid to refresh all filter components
+        // Force ag-grid to refresh all filter components with retry mechanism
         setTimeout(() => {
             if (this.gridAPI) {
                 this.gridAPI.refreshHeader();
-                this.updateFilteredColumnHighlighting();
+                // Use robust highlighting approach
+                this.applyFilterHighlightingWithRetry();
                 this.gridAPI.redrawRows();
             }
         }, 100);
     }
+    // Public method to force refresh of filter highlighting (can be called externally when needed)
+    refreshFilterHighlighting() {
+        this.applyFilterHighlightingWithRetry();
+    }
     onFirstDataRendered(e) {
         const storedPageNumber = localStorage.getItem('pageNumber');
         this.pageNumber = storedPageNumber ? parseInt(storedPageNumber) : 0;
@@ -1925,7 +1926,7 @@ class GridLibraryComponent {
         }
         this.dataLoaded = true;
         setTimeout(() => this.updatePaginationInfo(), 0);
-        setTimeout(() => this.updateFilteredColumnHighlighting(), 100);
+        setTimeout(() => this.applyFilterHighlightingWithRetry(), 100);
         this.firstDataRendered.emit(e);
     }
     onGridReadyExcel(params) {
@@ -2006,29 +2007,64 @@ class GridLibraryComponent {
     updateFilteredColumnHighlighting() {
         if (!this.gridAPI)
             return;
-        const filterModel = this.gridAPI.getFilterModel();
-        const allColumns = this.gridAPI.getColumns();
-        if (allColumns) {
-            allColumns.forEach((column) => {
-                const columnId = column.getColId();
-                const isFiltered = filterModel && filterModel[columnId];
-                const headerElement = document.querySelector(`[col-id="${columnId}"]`);
-                if (headerElement) {
-                    if (isFiltered) {
-                        headerElement.classList.add('ag-header-cell-filtered');
-                    }
-                    else {
-                        headerElement.classList.remove('ag-header-cell-filtered');
+        try {
+            const filterModel = this.gridAPI.getFilterModel();
+            const allColumns = this.gridAPI.getColumns();
+            if (allColumns) {
+                allColumns.forEach((column) => {
+                    const columnId = column.getColId();
+                    const isFiltered = filterModel && filterModel[columnId];
+                    // Update header highlighting
+                    const headerElement = document.querySelector(`[col-id="${columnId}"]`);
+                    if (headerElement) {
+                        if (isFiltered) {
+                            headerElement.classList.add('ag-header-cell-filtered');
+                        }
+                        else {
+                            headerElement.classList.remove('ag-header-cell-filtered');
+                        }
                     }
-                }
-                this.highlightFilterInputs(columnId, isFiltered);
-            });
+                    // Update filter input highlighting
+                    this.highlightFilterInputs(columnId, isFiltered);
+                });
+            }
+            // Clear all highlighting when no filter model
+            if (!filterModel || Object.keys(filterModel).length === 0) {
+                this.clearFilterInputHighlighting();
+            }
+            this.ensureAllValuedInputsAreHighlighted();
         }
-        // If filter model is empty or null, clear all input highlighting
-        if (!filterModel || Object.keys(filterModel).length === 0) {
-            this.clearFilterInputHighlighting();
+        catch (error) {
+            console.warn('Error updating filter highlighting:', error);
         }
     }
+    ensureAllValuedInputsAreHighlighted() {
+        if (!this.floatingFilter)
+            return;
+        const allFilterInputs = document.querySelectorAll(`
+      .ag-floating-filter-body input,
+      .ag-floating-filter-body .ag-input-field-input,
+      .ag-floating-filter-body .ag-text-field-input,
+      .ag-floating-filter-body .ag-number-field-input,
+      .ag-floating-filter-body .ag-date-field-input,
+      .ag-floating-filter-body .ag-select-field-input,
+      .ag-floating-filter input,
+      .ag-floating-filter .ag-input-field-input,
+      .ag-floating-filter .ag-text-field-input,
+      .ag-floating-filter .ag-number-field-input,
+      .ag-floating-filter .ag-date-field-input,
+      .ag-floating-filter .ag-select-field-input
+    `);
+        allFilterInputs.forEach((input) => {
+            const inputElement = input;
+            if (inputElement.value && inputElement.value.trim() !== '') {
+                inputElement.classList.add('ag-filter-input-active');
+            }
+            else {
+                inputElement.classList.remove('ag-filter-input-active');
+            }
+        });
+    }
     // Highlight filter inputs when they have values
     highlightFilterInputs(columnId, isFiltered) {
         if (!this.floatingFilter)
@@ -2093,11 +2129,20 @@ class GridLibraryComponent {
         return false;
     }
     setupFilterInputListeners() {
+        if (this.filterHighlightingObserver) {
+            this.filterHighlightingObserver.disconnect();
+        }
         const observer = new MutationObserver((mutations) => {
+            let shouldUpdateHighlighting = false;
             mutations.forEach((mutation) => {
                 mutation.addedNodes.forEach((node) => {
                     if (node.nodeType === Node.ELEMENT_NODE) {
                         const element = node;
+                        if (element.classList.contains('ag-floating-filter-body') ||
+                            element.classList.contains('ag-floating-filter') ||
+                            element.querySelector('.ag-floating-filter-body, .ag-floating-filter')) {
+                            shouldUpdateHighlighting = true;
+                        }
                         this.addInputListenersToElement(element);
                         // Check child elements
                         const inputs = element.querySelectorAll('input, .ag-input-field-input, .ag-text-field-input, .ag-number-field-input, .ag-date-field-input, .ag-select-field-input');
@@ -2105,18 +2150,56 @@ class GridLibraryComponent {
                     }
                 });
             });
+            // Update highlighting if filter elements were added
+            if (shouldUpdateHighlighting) {
+                setTimeout(() => this.updateFilteredColumnHighlighting(), 50);
+            }
         });
-        const gridContainer = document.querySelector('.ag-root-wrapper');
+        this.filterHighlightingObserver = observer;
+        // Observe the entire document body to catch all changes
+        const gridContainer = document.querySelector('.ag-root-wrapper') || document.body;
         if (gridContainer) {
             observer.observe(gridContainer, {
                 childList: true,
-                subtree: true
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['class', 'style']
             });
         }
-        setTimeout(() => {
-            const existingInputs = document.querySelectorAll('.ag-floating-filter-body input, .ag-floating-filter-body .ag-input-field-input, .ag-floating-filter-body .ag-text-field-input, .ag-floating-filter-body .ag-number-field-input, .ag-floating-filter-body .ag-date-field-input, .ag-floating-filter-body .ag-select-field-input');
-            existingInputs.forEach(input => this.addInputListener(input));
-        }, 1000);
+        this.applyListenersToExistingInputs();
+    }
+    applyListenersToExistingInputs() {
+        const selectors = [
+            '.ag-floating-filter-body input',
+            '.ag-floating-filter-body .ag-input-field-input',
+            '.ag-floating-filter-body .ag-text-field-input',
+            '.ag-floating-filter-body .ag-number-field-input',
+            '.ag-floating-filter-body .ag-date-field-input',
+            '.ag-floating-filter-body .ag-select-field-input',
+            '.ag-floating-filter input',
+            '.ag-floating-filter .ag-input-field-input',
+            '.ag-floating-filter .ag-text-field-input',
+            '.ag-floating-filter .ag-number-field-input',
+            '.ag-floating-filter .ag-date-field-input',
+            '.ag-floating-filter .ag-select-field-input'
+        ];
+        let attempts = 0;
+        const maxAttempts = 5;
+        const attemptInterval = 200;
+        const attemptToApplyListeners = () => {
+            const existingInputs = document.querySelectorAll(selectors.join(', '));
+            if (existingInputs.length > 0) {
+                existingInputs.forEach(input => this.addInputListener(input));
+                // update highlighting for existing inputs
+                setTimeout(() => this.updateFilteredColumnHighlighting(), 50);
+                return;
+            }
+            if (attempts < maxAttempts) {
+                attempts++;
+                setTimeout(attemptToApplyListeners, attemptInterval * attempts);
+            }
+        };
+        attemptToApplyListeners();
     }
     addInputListenersToElement(element) {
         const inputs = element.querySelectorAll('input, .ag-input-field-input, .ag-text-field-input, .ag-number-field-input, .ag-date-field-input, .ag-select-field-input');
@@ -2140,8 +2223,48 @@ class GridLibraryComponent {
         // First check
         highlightInput();
     }
+    applyFilterHighlightingWithRetry() {
+        this.filterHighlightingRetryCount = 0;
+        this.attemptFilterHighlighting();
+    }
+    attemptFilterHighlighting() {
+        if (!this.gridAPI) {
+            this.scheduleRetry();
+            return;
+        }
+        // Check if grid is ready/has columns
+        const columns = this.gridAPI.getColumns();
+        if (!columns || columns.length === 0) {
+            this.scheduleRetry();
+            return;
+        }
+        // Check if filter elements exist
+        const filterElements = document.querySelectorAll('.ag-floating-filter-body, .ag-floating-filter');
+        if (filterElements.length === 0) {
+            this.scheduleRetry();
+            return;
+        }
+        this.updateFilteredColumnHighlighting();
+        this.setupFilterInputListeners();
+        this.filterHighlightingRetryCount = 0;
+    }
+    scheduleRetry() {
+        if (this.filterHighlightingRetryCount < this.MAX_RETRY_ATTEMPTS) {
+            this.filterHighlightingRetryCount++;
+            setTimeout(() => {
+                this.attemptFilterHighlighting();
+            }, this.RETRY_DELAY * this.filterHighlightingRetryCount);
+        }
+        else {
+            console.warn('Filter highlighting retry limit reached. Some filter inputs may not be highlighted.');
+        }
+    }
     //destroy all associated subscriptions on component destroy
     ngOnDestroy() {
+        if (this.filterHighlightingObserver) {
+            this.filterHighlightingObserver.disconnect();
+            this.filterHighlightingObserver = null;
+        }
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
     }