basesite-shared-grid-lib 15.10.267 → 15.10.283

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)'}" >
@@ -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 = [];
@@ -1203,6 +1200,7 @@ class GridLibraryComponent {
         };
         // Custom right click Context Menu to support custom excel exports
         this.getContextMenuItems = (params) => {
+            return [];
             let res = [
                 'cut',
                 'copy',
@@ -1238,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();
@@ -1250,7 +1252,9 @@ class GridLibraryComponent {
     }
     saveGridState(e) {
         if (!this.overrideColumnDefs) {
-            setTimeout(() => { this.onSaveGridColumnState(e); }, 2000);
+            //setTimeout(() => {
+            this.onSaveGridColumnState(e);
+            //}, 2000)
         }
     }
     ngOnInit() {
@@ -1263,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);
@@ -1279,7 +1295,6 @@ class GridLibraryComponent {
         else {
             this.gridAPI.resetColumnState();
             this.getGridState();
-            //setTimeout(() => { this.setGridState(); }, 2000);
         }
     }
     ngOnChanges(changes) {
@@ -1313,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);
@@ -1389,6 +1403,7 @@ class GridLibraryComponent {
                 }
                 else if (res.columnType === 'date') {
                     return {
+                        width: 120,
                         pinned: res.pinPosition,
                         field: res.field,
                         headerName: res.title,
@@ -1400,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;
@@ -1421,6 +1435,7 @@ class GridLibraryComponent {
                 }
                 else if (res.columnType === 'fill') {
                     return {
+                        width: 120,
                         pinned: res.pinPosition,
                         field: res.field,
                         headerName: res.title,
@@ -1458,8 +1473,8 @@ class GridLibraryComponent {
                     };
                 }
                 else {
-                    // if (!hideDacStatus) {
                     return {
+                        width: 120,
                         pinned: res.pinPosition,
                         field: res.field,
                         headerName: res.title,
@@ -1499,14 +1514,9 @@ class GridLibraryComponent {
                             buttons: ['reset'],
                         },
                     };
-                    // } 
-                    // else {
-                    //   return;
-                    // }
                 }
             }
             else {
-                // if (!hideBtn) {
                 return {
                     field: res.field,
                     headerName: res.title,
@@ -1534,9 +1544,6 @@ class GridLibraryComponent {
                     lockPinned: true,
                     width: res.label ? 100 : 40,
                 };
-                // } else {
-                //   return;
-                // }
             }
         });
     }
@@ -1545,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;
     }
@@ -1638,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();
@@ -1661,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) {
@@ -1676,30 +1683,54 @@ class GridLibraryComponent {
                 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() {
@@ -1716,14 +1747,11 @@ 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);
                 }
                 else {
-                    //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);
                 }
@@ -1753,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);
                     }
@@ -1877,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;
@@ -1894,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) {
@@ -1975,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)
@@ -2062,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');
@@ -2074,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');
@@ -2109,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();
     }