basesite-shared-grid-lib 15.10.265 → 15.10.267

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

@@ -1579,7 +1579,6 @@ class GridLibraryComponent {
         return `${serverUrl}${options}`;
     }
     onGridReady(params) {
-        //this.gridPageSize = this.pageSize;
         this.gridAPI = params.api;
         if (this.enableServerSidePaging == true) {
             // Show loading overlay immediately when server-side paging is enabled
@@ -1598,11 +1597,9 @@ class GridLibraryComponent {
                     const url = this.setExternalFilters(options);
                     console.log('Server-side API call:', url);
                     localStorage.setItem('ServerSideUrl', url);
-                    // Create a timeout promise
                     const timeoutPromise = new Promise((_, reject) => {
                         setTimeout(() => reject(new Error('API request timeout')), API_TIMEOUT);
                     });
-                    // Create the fetch promise
                     const fetchPromise = fetch(url, {
                         headers: reqHeaders,
                     })
@@ -1641,6 +1638,12 @@ class GridLibraryComponent {
                 }
             }));
         }
+        // Apply initial filter highlighting
+        setTimeout(() => this.updateFilteredColumnHighlighting(), 500);
+        // Event listeners for highlighting
+        if (this.floatingFilter) {
+            this.setupFilterInputListeners();
+        }
     }
     setGridState() {
         if (this.gridColumns && this.gridColumns.length > 0) {
@@ -1666,6 +1669,8 @@ class GridLibraryComponent {
             if (this.gridColumnState.filter) {
                 var filterModel = this.gridColumnState.filter.filterModel;
                 this.gridAPI?.setFilterModel(filterModel);
+                // Apply highlighting after setting filter model
+                setTimeout(() => this.updateFilteredColumnHighlighting(), 100);
             }
             if (this.gridColumnState.columnVisibility) {
                 var hiddenColumns = this.gridColumnState.columnVisibility.hiddenColIds;
@@ -1823,6 +1828,63 @@ class GridLibraryComponent {
     onFilterChanged(e) {
         this.saveGridState(e);
         this.filterChanged.emit(e);
+        this.updateFilteredColumnHighlighting();
+    }
+    clearFilterInputHighlighting() {
+        if (!this.floatingFilter || !this.gridAPI)
+            return;
+        const allSelectors = [
+            '.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'
+        ];
+        allSelectors.forEach(selector => {
+            const inputs = document.querySelectorAll(selector);
+            inputs.forEach((input) => {
+                const inputElement = input;
+                if (inputElement.value !== undefined) {
+                    inputElement.value = '';
+                }
+                // Remove highlighting
+                inputElement.classList.remove('ag-filter-input-active');
+                const inputEvent = new Event('input', { bubbles: true });
+                const changeEvent = new Event('change', { bubbles: true });
+                inputElement.dispatchEvent(inputEvent);
+                inputElement.dispatchEvent(changeEvent);
+            });
+        });
+        const filterContainers = document.querySelectorAll('.ag-floating-filter-body, .ag-floating-filter');
+        filterContainers.forEach(container => {
+            container.classList.remove('ag-filter-input-active');
+        });
+        setTimeout(() => {
+            if (this.gridAPI) {
+                this.gridAPI.redrawRows();
+            }
+        }, 50);
+    }
+    handleExternalFilterReset() {
+        if (!this.gridAPI)
+            return;
+        // Clear all filter inputs and highlighting
+        this.clearFilterInputHighlighting();
+        // Force ag-grid to refresh all filter components
+        setTimeout(() => {
+            if (this.gridAPI) {
+                this.gridAPI.refreshHeader();
+                this.updateFilteredColumnHighlighting();
+                this.gridAPI.redrawRows();
+            }
+        }, 100);
     }
     onFirstDataRendered(e) {
         const storedPageNumber = localStorage.getItem('pageNumber');
@@ -1832,6 +1894,7 @@ class GridLibraryComponent {
         }
         this.dataLoaded = true;
         setTimeout(() => this.updatePaginationInfo(), 0);
+        setTimeout(() => this.updateFilteredColumnHighlighting(), 100);
         this.firstDataRendered.emit(e);
     }
     onGridReadyExcel(params) {
@@ -1909,6 +1972,143 @@ class GridLibraryComponent {
         }
     }
     //custom pagination ends...
+    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');
+                    }
+                }
+                this.highlightFilterInputs(columnId, isFiltered);
+            });
+        }
+        // If filter model is empty or null, clear all input highlighting
+        if (!filterModel || Object.keys(filterModel).length === 0) {
+            this.clearFilterInputHighlighting();
+        }
+    }
+    // Highlight filter inputs when they have values
+    highlightFilterInputs(columnId, isFiltered) {
+        if (!this.floatingFilter)
+            return;
+        const selectors = [
+            `[col-id="${columnId}"] .ag-floating-filter-body input`,
+            `[col-id="${columnId}"] .ag-floating-filter-body .ag-input-field-input`,
+            `[col-id="${columnId}"] .ag-floating-filter-body .ag-text-field-input`,
+            `[col-id="${columnId}"] .ag-floating-filter-body .ag-number-field-input`,
+            `[col-id="${columnId}"] .ag-floating-filter-body .ag-date-field-input`,
+            `[col-id="${columnId}"] .ag-floating-filter-body .ag-select-field-input`
+        ];
+        selectors.forEach(selector => {
+            const inputs = document.querySelectorAll(selector);
+            inputs.forEach((input) => {
+                const inputElement = input;
+                if (isFiltered) {
+                    inputElement.classList.add('ag-filter-input-active');
+                }
+                else {
+                    inputElement.classList.remove('ag-filter-input-active');
+                }
+            });
+        });
+        // Check for filter values in the filter model
+        if (isFiltered) {
+            const filterModel = this.gridAPI.getFilterModel();
+            const columnFilter = filterModel[columnId];
+            if (columnFilter) {
+                const hasValue = this.filterHasValue(columnFilter);
+                if (hasValue) {
+                    const valueInputs = document.querySelectorAll(`[col-id="${columnId}"] .ag-floating-filter-body input[value], [col-id="${columnId}"] .ag-floating-filter-body .ag-input-field-input[value]`);
+                    valueInputs.forEach((input) => {
+                        const inputElement = input;
+                        if (inputElement.value && inputElement.value.trim() !== '') {
+                            inputElement.classList.add('ag-filter-input-active');
+                        }
+                    });
+                }
+            }
+        }
+    }
+    filterHasValue(filter) {
+        if (!filter)
+            return false;
+        if (filter.filter) {
+            return filter.filter !== '' && filter.filter !== null && filter.filter !== undefined;
+        }
+        if (filter.condition1 && filter.condition1.filter) {
+            return filter.condition1.filter !== '' && filter.condition1.filter !== null && filter.condition1.filter !== undefined;
+        }
+        if (filter.condition2 && filter.condition2.filter) {
+            return filter.condition2.filter !== '' && filter.condition2.filter !== null && filter.condition2.filter !== undefined;
+        }
+        if (filter.dateFrom || filter.dateTo) {
+            return (filter.dateFrom && filter.dateFrom !== '') || (filter.dateTo && filter.dateTo !== '');
+        }
+        if (filter.filterTo || filter.filterFrom) {
+            return (filter.filterFrom !== null && filter.filterFrom !== undefined && filter.filterFrom !== '') ||
+                (filter.filterTo !== null && filter.filterTo !== undefined && filter.filterTo !== '');
+        }
+        return false;
+    }
+    setupFilterInputListeners() {
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.addedNodes.forEach((node) => {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        const element = node;
+                        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');
+                        inputs.forEach(input => this.addInputListener(input));
+                    }
+                });
+            });
+        });
+        const gridContainer = document.querySelector('.ag-root-wrapper');
+        if (gridContainer) {
+            observer.observe(gridContainer, {
+                childList: true,
+                subtree: true
+            });
+        }
+        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);
+    }
+    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');
+        inputs.forEach(input => this.addInputListener(input));
+    }
+    addInputListener(input) {
+        if (!input)
+            return;
+        const highlightInput = () => {
+            if (input.value && input.value.trim() !== '') {
+                input.classList.add('ag-filter-input-active');
+            }
+            else {
+                input.classList.remove('ag-filter-input-active');
+            }
+        };
+        input.addEventListener('input', highlightInput);
+        input.addEventListener('change', highlightInput);
+        input.addEventListener('keyup', highlightInput);
+        input.addEventListener('paste', highlightInput);
+        // First check
+        highlightInput();
+    }
     //destroy all associated subscriptions on component destroy
     ngOnDestroy() {
         this.unsubscribe$.next();