basesite-shared-grid-lib 21.0.1-beta.5 → 21.0.1-beta.7

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

@@ -239,7 +239,7 @@ class OdataProvider {
                         query = query + '&' + customFilters.join('and');
                 }
             }
-            query = query.replace('and$filter=', '&filter=');
+            query = query.replace('and$filter=', '&$filter=');
             return query;
         };
         /**
@@ -549,11 +549,49 @@ class OdataProvider {
             if (beforeRequest) {
                 beforeRequest(options);
             }
-            me.callApi(me.toQuery(options)).then((x) => {
-                if (x) {
-                    let values = me.getOdataResult(x);
-                    callback(values.map((y) => y[field]));
+            // OData wraps nested fields with '/' (e.g. parent/child); the response
+            // mirrors that shape, so we walk the path instead of using the raw key.
+            // We also fall back to a case-insensitive lookup because some OData
+            // services return PascalCase property names regardless of the request
+            // casing (e.g. asked for `dacStatus`, response is `DacStatus`).
+            const readField = (row) => {
+                if (row == null)
+                    return undefined;
+                if (Object.prototype.hasOwnProperty.call(row, field))
+                    return row[field];
+                const segments = String(field).split('.');
+                let current = row;
+                for (const seg of segments) {
+                    if (current == null)
+                        return undefined;
+                    if (Object.prototype.hasOwnProperty.call(current, seg)) {
+                        current = current[seg];
+                        continue;
+                    }
+                    // Case-insensitive key match as a last resort.
+                    const lower = seg.toLowerCase();
+                    const match = Object.keys(current).find(k => k.toLowerCase() === lower);
+                    if (!match)
+                        return undefined;
+                    current = current[match];
+                }
+                return current;
+            };
+            me.callApi(me.toQuery(options))
+                .then((x) => {
+                const values = x ? me.getOdataResult(x) || [] : [];
+                const mapped = values.map((y) => readField(y));
+                console.log('[OdataProvider] getFilterValuesParams response for', field, '— rows:', values.length, '— sample keys:', values[0] ? Object.keys(values[0]) : '(none)', '— mapped sample:', mapped.slice(0, 5));
+                // Helpful diagnostic when the response shape doesn't match the field.
+                if (values.length > 0 && mapped.every((v) => v === undefined)) {
+                    console.warn('[OdataProvider] getFilterValuesParams: response had', values.length, 'rows but none contained field', field, '— sample row keys:', Object.keys(values[0] || {}));
                 }
+                callback(mapped);
+            })
+                .catch((err) => {
+                console.error('[OdataProvider] getFilterValuesParams failed for field', field, err);
+                // Always invoke the callback so AG Grid's set filter doesn't hang.
+                callback([]);
             });
         };
         /**
@@ -2086,6 +2124,10 @@ class GridLibraryComponent {
         this.tooltipShowDelay = 500;
         this.tooltipHideDelay = 4000;
         this.rowModelType = 'clientSide';
+        // Per-field cache of distinct values for fill-cell set filters. Populated
+        // by the OData groupby fallback in _getFillFilterValues and cleared when
+        // the underlying grid data is refreshed.
+        this._fillFilterValuesCache = new Map();
         this._Design_Manager = 'Design Manager';
         this._Integration_Lead = 'Integration Lead';
         this._Tool_Owner = 'Tool Owner';
@@ -2385,6 +2427,9 @@ class GridLibraryComponent {
                             // handles case-insensitive matching server-side via tolower().
                             values: (params) => this._getFillFilterValues(res, params),
                             refreshValuesOnOpen: true,
+                            // Open with nothing checked so a user picking one option triggers
+                            // a single backend request instead of "uncheck all + pick one".
+                            defaultToNothingSelected: true,
                             buttons: ['reset'],
                             // Pretty label for each checkbox; falls back to the value itself
                             valueFormatter: (p) => {
@@ -2527,7 +2572,31 @@ class GridLibraryComponent {
         }
         const field = res?.field;
         if (this.enableServerSidePaging && this.odataProvider) {
-            this.odataProvider.getFilterValuesParams(field, (data) => params.success((data || []).filter(v => v !== null && v !== undefined && v !== '')), undefined);
+            // Cache OData distinct-values per field so repeated filter-opens for
+            // fill-cell columns don't re-hit the backend. Cache is invalidated on
+            // grid data refresh (see _invalidateFillFilterCache).
+            const cached = this._fillFilterValuesCache.get(field);
+            if (cached) {
+                params.success(cached);
+                return;
+            }
+            try {
+                this.odataProvider.getFilterValuesParams(field, (data) => {
+                    const cleaned = (data || []).filter(v => v !== null && v !== undefined && v !== '');
+                    // Only cache non-empty successful responses so a transient
+                    // failure doesn't permanently stick an empty list.
+                    if (cleaned.length > 0) {
+                        this._fillFilterValuesCache.set(field, cleaned);
+                    }
+                    // Never leave the set-filter spinning: always invoke success,
+                    // even with an empty list.
+                    params.success(cleaned);
+                }, undefined);
+            }
+            catch (err) {
+                console.error('[grid-library] getFilterValuesParams threw for field', field, err);
+                params.success([]);
+            }
             return;
         }
         const source = Array.isArray(this.rowData) ? this.rowData : [];
@@ -2582,28 +2651,86 @@ class GridLibraryComponent {
         return false;
     }
     setExternalFilters(options) {
-        if (options.includes('$filter=')) {
-            const filterMatch = options.match(/\$filter=([^&]*)/);
-            if (filterMatch) {
-                let filterValue = decodeURIComponent(filterMatch[1]);
-                filterValue = this.replaceDateFilters(filterValue);
-                options = options.replace(/\$filter=[^&]*/, `$filter=${encodeURIComponent(filterValue)}`);
-            }
-        }
-        var serverUrl = '';
-        if (this.serverDataUrl.indexOf('filter') >= 0 &&
-            options.indexOf('filter') >= 0) {
-            let slug = this.serverDataUrl.split('?$filter=');
-            if (slug && slug.length > 0) {
-                options = options + ' and ' + slug[1];
-                serverUrl = slug[0];
-            }
-        }
-        else if (this.serverDataUrl.indexOf('?') >= 0) {
-            serverUrl = this.serverDataUrl;
-            options = options.replace('?', '&');
+        // Extract any caller-supplied $filter predicate from the configured
+        // serverDataUrl so we can merge it correctly with whatever the provider
+        // built. Without this, requests like `$apply=groupby((dacStatus))` get a
+        // sibling `$filter=siteId eq 5` appended, which OData rejects because
+        // after `groupby` the only remaining property is the grouped one.
+        let serverUrl = this.serverDataUrl;
+        let externalFilter = '';
+        const filterIdx = serverUrl.indexOf('$filter=');
+        if (filterIdx >= 0) {
+            // Find the end of the $filter value (next & or end of string).
+            const after = serverUrl.indexOf('&', filterIdx);
+            externalFilter = serverUrl.substring(filterIdx + '$filter='.length, after === -1 ? serverUrl.length : after);
+            // Strip the $filter clause (and its leading ? or &) from the base URL.
+            const before = serverUrl.charAt(filterIdx - 1); // '?' or '&'
+            const removeStart = filterIdx - 1;
+            const removeEnd = after === -1 ? serverUrl.length : after;
+            serverUrl =
+                serverUrl.substring(0, removeStart) +
+                    (before === '?' && after !== -1 ? '?' : '') +
+                    serverUrl.substring(removeEnd + (before === '?' && after !== -1 ? 1 : 0));
+        }
+        // `options` always starts with '?' from the provider.
+        // If we still need to attach to a URL that already has '?', flip it to '&'.
+        if (serverUrl.indexOf('?') >= 0 && options.startsWith('?')) {
+            options = '&' + options.substring(1);
+        }
+        if (!externalFilter) {
+            return `${serverUrl}${options}`;
+        }
+        // Decode for matching; we'll re-emit the predicate as-is since OData
+        // accepts both encoded and decoded forms within a query string.
+        const decodedFilter = (() => {
+            try {
+                return decodeURIComponent(externalFilter);
+            }
+            catch {
+                return externalFilter;
+            }
+        })();
+        // Case 1: provider used $apply (e.g. groupby for set-filter values, or
+        // any aggregation). The external predicate must run BEFORE the aggregation
+        // as a filter() transformation, otherwise its columns no longer exist.
+        const applyMatch = options.match(/([?&])\$apply=([^&]+)/);
+        if (applyMatch) {
+            const sep = applyMatch[1];
+            const applyValue = applyMatch[2];
+            const decodedApply = (() => {
+                try {
+                    return decodeURIComponent(applyValue);
+                }
+                catch {
+                    return applyValue;
+                }
+            })();
+            const merged = `filter(${decodedFilter})/${decodedApply}`;
+            options = options.replace(`${sep}$apply=${applyValue}`, `${sep}$apply=${encodeURIComponent(merged)}`);
+            return `${serverUrl}${options}`;
+        }
+        // Case 2: provider already has its own $filter. AND them together.
+        const filterMatch = options.match(/([?&])\$filter=([^&]+)/);
+        if (filterMatch) {
+            const sep = filterMatch[1];
+            const existing = filterMatch[2];
+            const decodedExisting = (() => {
+                try {
+                    return decodeURIComponent(existing);
+                }
+                catch {
+                    return existing;
+                }
+            })();
+            const merged = `(${decodedExisting}) and (${decodedFilter})`;
+            options = options.replace(`${sep}$filter=${existing}`, `${sep}$filter=${encodeURIComponent(merged)}`);
+            return `${serverUrl}${options}`;
         }
-        return `${serverUrl}${options}`;
+        // Case 3: no provider filter and no $apply — just add the external $filter.
+        const joiner = options.length === 0
+            ? (serverUrl.indexOf('?') >= 0 ? '&' : '?')
+            : '&';
+        return `${serverUrl}${options}${joiner}$filter=${encodeURIComponent(decodedFilter)}`;
     }
     onGridReady(params) {
         this.gridAPI = params.api;
@@ -2619,8 +2746,17 @@ class GridLibraryComponent {
             // Add timeout to prevent infinite loading
             const API_TIMEOUT = 800000; //80 seconds
             let hasRetried = false;
+            // Fill-cell columns use the set filter, which only emits exact-match
+            // predicates (eq / in). Wrapping those in tolower() forces the DB to
+            // scan + lowercase every row (non-sargable), which was making filter
+            // requests ~10x+ slower than baseline. Skip tolower() for these
+            // columns by registering them as caseSensitive with the provider.
+            const fillCellFields = (this.initialColumnDef ?? [])
+                .filter((c) => c?.columnType === 'fill' && c?.field)
+                .map((c) => c.field);
             this.odataProvider = new OdataServerSideProvider({
                 isCaseSensitiveStringFilter: false,
+                caseSensitiveColumns: fillCellFields,
                 callApi: (options) => {
                     const url = this.setExternalFilters(options);
                     console.log('Server-side API call:', url);
@@ -2647,6 +2783,7 @@ class GridLibraryComponent {
                         if (!hasRetried) {
                             hasRetried = true;
                             setTimeout(() => {
+                                this._fillFilterValuesCache.clear();
                                 params.api.refreshServerSide({ purge: true });
                             }, 2000);
                         }
@@ -2663,6 +2800,7 @@ class GridLibraryComponent {
                             if (!hasRetried) {
                                 hasRetried = true;
                                 setTimeout(() => {
+                                    this._fillFilterValuesCache.clear();
                                     this.gridAPI.refreshServerSide({ purge: true });
                                 }, 2000);
                             }
@@ -2758,6 +2896,7 @@ class GridLibraryComponent {
         this.gridAPI.showLoadingOverlay();
         this.gridAPI.resetColumnState();
         this.gridAPI.setFilterModel(null);
+        this._fillFilterValuesCache.clear();
         this.gridColumnState = JSON.parse(overrideStateData);
         this.setGridState();
         setTimeout(() => { this.gridAPI.hideOverlay(); }, 500);