basesite-shared-grid-lib 15.10.265 → 15.10.282

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

@@ -1065,10 +1065,10 @@ class FillCellRendererComponent {
 <span class="status-fill-cell text-white" *ngIf="params.value && params.field === 'completionStatus'" [ngStyle]="{'background': rowData.pocIndicator? rowData.pocIndicator:'#fff'}" >
       {{ params.value }}
 </span>
-<span class="status-fill-cell text-white" *ngIf="params.value && params.field === 'funding'" [ngStyle]="{'background': rowData.fundingIndicator? rowData.fundingIndicator:'#fff'}" >
+<span class="status-fill-cell" *ngIf="params.value && params.field === 'funding'">
       {{ params.value }}
 </span>
-<span class="status-fill-cell text-white" *ngIf="params.value && params.field === 'layout'" [ngStyle]="{'background': rowData.layoutIndicator? rowData.layoutIndicator:'#fff'}" >
+<span class="status-fill-cell" *ngIf="params.value && params.field === 'layout'" >
       {{ params.value }}
 </span>
 <span class="info-fill-cell text-white" *ngIf="params.value && params.field === 'facilityName'" [ngStyle]="{'background': 'var(--primary)'}" >
@@ -1091,10 +1091,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 <span class="status-fill-cell text-white" *ngIf="params.value && params.field === 'completionStatus'" [ngStyle]="{'background': rowData.pocIndicator? rowData.pocIndicator:'#fff'}" >
       {{ params.value }}
 </span>
-<span class="status-fill-cell text-white" *ngIf="params.value && params.field === 'funding'" [ngStyle]="{'background': rowData.fundingIndicator? rowData.fundingIndicator:'#fff'}" >
+<span class="status-fill-cell" *ngIf="params.value && params.field === 'funding'">
       {{ params.value }}
 </span>
-<span class="status-fill-cell text-white" *ngIf="params.value && params.field === 'layout'" [ngStyle]="{'background': rowData.layoutIndicator? rowData.layoutIndicator:'#fff'}" >
+<span class="status-fill-cell" *ngIf="params.value && params.field === 'layout'" >
       {{ params.value }}
 </span>
 <span class="info-fill-cell text-white" *ngIf="params.value && params.field === 'facilityName'" [ngStyle]="{'background': 'var(--primary)'}" >
@@ -1203,6 +1203,7 @@ class GridLibraryComponent {
         };
         // Custom right click Context Menu to support custom excel exports
         this.getContextMenuItems = (params) => {
+            return [];
             let res = [
                 'cut',
                 'copy',
@@ -1250,7 +1251,9 @@ class GridLibraryComponent {
     }
     saveGridState(e) {
         if (!this.overrideColumnDefs) {
-            setTimeout(() => { this.onSaveGridColumnState(e); }, 2000);
+            //setTimeout(() => {
+            this.onSaveGridColumnState(e);
+            //}, 2000)
         }
     }
     ngOnInit() {
@@ -1389,6 +1392,7 @@ class GridLibraryComponent {
                 }
                 else if (res.columnType === 'date') {
                     return {
+                        width: 120,
                         pinned: res.pinPosition,
                         field: res.field,
                         headerName: res.title,
@@ -1421,6 +1425,7 @@ class GridLibraryComponent {
                 }
                 else if (res.columnType === 'fill') {
                     return {
+                        width: 120,
                         pinned: res.pinPosition,
                         field: res.field,
                         headerName: res.title,
@@ -1460,6 +1465,7 @@ class GridLibraryComponent {
                 else {
                     // if (!hideDacStatus) {
                     return {
+                        width: 120,
                         pinned: res.pinPosition,
                         field: res.field,
                         headerName: res.title,
@@ -1579,7 +1585,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 +1603,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 +1644,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) {
@@ -1658,6 +1667,7 @@ class GridLibraryComponent {
             }
             this.columnDefs = this.gridColumns;
         }
+        debugger;
         if (this.gridColumnState) {
             this.gridAPI?.applyColumnState({ state: this.gridColumnState.columnSizing?.columnSizingModel, applyOrder: true });
             if (this.gridColumnState.sort) {
@@ -1666,35 +1676,61 @@ 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;
                 this.gridAPI?.setColumnsVisible(hiddenColumns, false);
             }
+            this.applyPinnedColumnState(this.gridColumnState);
         }
-        else {
-            var columns = this.gridAPI.getColumns();
-            if (columns && columns.length > 0) {
-                if (columns.length > 15) {
-                    const allColumnIds = [];
-                    this.gridAPI.getColumns().forEach((column) => {
-                        allColumnIds.push(column.getId());
-                    });
-                    this.gridAPI.autoSizeColumns(allColumnIds, false);
-                }
-                else {
-                    this.gridAPI.sizeColumnsToFit();
-                }
-            }
+        //else {
+        //  var columns = this.gridAPI.getColumns();
+        //  if (columns && columns.length > 0) {
+        //    if (columns.length > 15) {
+        //      const allColumnIds: string[] = [];
+        //      this.gridAPI!.getColumns()!.forEach((column: any) => {
+        //        allColumnIds.push(column.getId());
+        //      });
+        //      this.gridAPI.autoSizeColumns(allColumnIds, false);
+        //    } else {
+        //      this.gridAPI.sizeColumnsToFit();
+        //    }
+        //  }
+        //}
+    }
+    applyPinnedColumnState(gridState) {
+        const pinnedMap = {};
+        for (const colId of gridState.columnPinning?.leftColIds || []) {
+            pinnedMap[colId] = 'left';
+        }
+        for (const colId of gridState.columnPinning?.rightColIds || []) {
+            pinnedMap[colId] = 'right';
         }
+        // Create a map of column widths
+        const widthMap = new Map((gridState.columnSizing?.columnSizingModel || []).map((c) => [c.colId, c.width]));
+        // Merge all into a final state array
+        const columnState = (gridState.columnOrder?.orderedColIds || []).map((colId) => ({
+            colId: colId,
+            pinned: pinnedMap[colId] || null,
+            width: widthMap.get(colId),
+            hide: gridState.columnVisibility?.hiddenColIds?.includes(colId) || false,
+        }));
+        // Apply the full column state
+        this.gridAPI.applyColumnState({
+            state: columnState,
+            applyOrder: true
+        });
     }
     overrideGridState(overrideStateData) {
         this.gridAPI.showLoadingOverlay();
         this.gridAPI.resetColumnState();
+        this.gridAPI.setFilterModel(null);
         this.gridColumnState = JSON.parse(overrideStateData);
         this.setGridState();
-        this.gridAPI.autoSizeAllColumns();
-        setTimeout(() => { this.gridAPI.autoSizeAllColumns(); }, 2000);
+        //this.gridAPI.autoSizeAllColumns();
+        //setTimeout(() => { this.gridAPI.autoSizeAllColumns(); }, 2000);
         setTimeout(() => { this.gridAPI.hideOverlay(); }, 500);
     }
     getGridState() {
@@ -1711,7 +1747,6 @@ class GridLibraryComponent {
                     this.gridAPI.showLoadingOverlay();
                     this.gridColumnState = JSON.parse(response.result.gridConfig);
                     this.setGridState();
-                    setTimeout(() => { this.gridStateLoaded = true; this.gridAPI.hideOverlay(); }, 1000);
                     //let manualEvent = { type: 'columnResized' };
                     //this.onSaveGridColumnState(manualEvent);
                 }
@@ -1719,6 +1754,7 @@ class GridLibraryComponent {
                     //this.setGridState();
                     console.log('no grid state found.');
                 }
+                setTimeout(() => { this.gridStateLoaded = true; this.gridAPI.hideOverlay(); }, 1000);
                 if (this.overrideColumnDefs != null && this.overrideColumnDefs != undefined) {
                     this.gridStateLoaded$.next(true);
                 }
@@ -1823,6 +1859,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 +1925,7 @@ class GridLibraryComponent {
         }
         this.dataLoaded = true;
         setTimeout(() => this.updatePaginationInfo(), 0);
+        setTimeout(() => this.updateFilteredColumnHighlighting(), 100);
         this.firstDataRendered.emit(e);
     }
     onGridReadyExcel(params) {
@@ -1909,6 +2003,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();