commons-shared-web-ui 0.0.78 → 0.0.80

package/fesm2022/commons-shared-web-ui.mjs

@@ -6067,7 +6067,12 @@ class SmartFormComponent {
             const payloadPath = cfg.payloadPrefix ? `${cfg.payloadPrefix}.${payloadField}` : payloadField;
             const apiUrl = (cfg.dataApiUrl || '')
                 .replace(/\{classCode\}/g, encodeURIComponent(code))
-                .replace(/\{templateCode\}/g, encodeURIComponent(templateCode));
+                .replace(/\{templateCode\}/g, encodeURIComponent(templateCode))
+                // Multiple hierarchy templates can share the same templateCode (see 'byId' selection
+                // above, distinguished by templateName with one flagged isDefault) — hierarchyTemplateCode
+                // alone can't disambiguate between them server-side either, so the resolved template's own
+                // unique numeric id is offered as a second placeholder for configs that need it.
+                .replace(/\{templateId\}/g, encodeURIComponent(template?.id ?? ''));
             const optionConfig = {
                 apiUrl,
                 dataPath: cfg.dataPath,
@@ -6113,7 +6118,15 @@ class SmartFormComponent {
             }
             if (nodeOvr['placeholder'])
                 fieldDef['placeholder'] = nodeOvr['placeholder'];
+            if (nodeOvr['disabled'])
+                fieldDef['disabled'] = true;
             fields.push(fieldDef);
+            // `leaf: true` stops the walk from descending past this classCode — e.g. a filter
+            // that should offer Country/State/District but not whatever the tenant's template
+            // configures below District (Ward, Sub-District, ...). Without this every consumer
+            // of a given hierarchy template is forced to render its full depth.
+            if (nodeOvr['leaf'])
+                return;
             const children = childrenMap.get(code) || [];
             if (children.length > 1) {
                 // Branch point: dynamically build Area Type selector from children
@@ -14191,6 +14204,12 @@ class SmartTableComponent {
     deleteModalOpen = false;
     deleteModalConfig = {};
     pendingDeleteAction = null;
+    /** code -> label maps for column lookups, bucketed by lookup cache key. */
+    lookupMaps = {};
+    /** Guards against firing the same lookup request twice. */
+    lookupInFlight = new Set();
+    /** Full-list lookups already attempted — stops an empty/failed list refetching on every page. */
+    lookupLoaded = new Set();
     searchSubject = new Subject();
     stickyHeaders;
     resizeObserver = null;
@@ -14231,12 +14250,14 @@ class SmartTableComponent {
                 this.isSortActive = true;
             }
             this.loadFilterOptions();
+            this.loadColumnLookups();
             if (this.tableData !== undefined) {
                 // External-data mode: sync incoming data, skip internal API call
                 this.data = this.tableData;
                 if (this.totalItemsCount !== undefined) {
                     this.totalItems = this.totalItemsCount;
                 }
+                this.loadColumnLookups();
             }
             else {
                 this.loadData();
@@ -14247,6 +14268,7 @@ class SmartTableComponent {
         // External data changed — sync directly without an API call
         if (changes['tableData']) {
             this.data = this.tableData || [];
+            this.loadColumnLookups();
         }
         // Total count updated from parent
         if (changes['totalItemsCount'] && this.totalItemsCount !== undefined) {
@@ -14257,6 +14279,7 @@ class SmartTableComponent {
             this.sortColumnsBySequence();
             this.applyPaginationDefaults();
             this.loadFilterOptions();
+            this.loadColumnLookups();
             if (this.tableData === undefined) {
                 this.loadData();
             }
@@ -14467,6 +14490,7 @@ class SmartTableComponent {
                 }
             }
             this.syncSelection();
+            this.loadColumnLookups();
         });
     }
     /**
@@ -14827,6 +14851,12 @@ class SmartTableComponent {
         // Support nested properties via labelPath or key
         const path = col.labelPath || col.key;
         let val = this.getValueByPath(row, path);
+        // Code -> label resolution (roles, MDM master data, ...). Falls back to the
+        // raw code until the lookup response lands, so the cell is never blank.
+        const lookupCfg = this.getLookupConfig(col);
+        if (lookupCfg) {
+            val = this.resolveLookupLabel(val, lookupCfg);
+        }
         // Formatting (Date, etc.)
         if (col.type === 'date' && val) {
             if (col.dateFormat) {
@@ -14846,7 +14876,11 @@ class SmartTableComponent {
         return val;
     }
     getBadgeClass(row, col) {
-        const val = this.getCellValue(row, col);
+        // A lookup column keeps its badgeConfig keyed on the raw code rather than
+        // the resolved label, so pick the variant from the underlying value.
+        const val = this.getLookupConfig(col)
+            ? this.normalizeRuleValue(this.getValueByPath(row, col.labelPath || col.key))
+            : this.getCellValue(row, col);
         const strVal = String(val);
         // Config approach
         if (col.badgeConfig && col.badgeConfig[strVal]) {
@@ -14877,6 +14911,197 @@ class SmartTableComponent {
     replaceParams(template, row) {
         return template.replace(/:([a-zA-Z0-9_]+)/g, (_, key) => row[key] || '');
     }
+    // --- Column Lookups (code -> label) ---
+    /**
+     * Merges a column's inline lookup config with the shared definition it
+     * references (`TableConfig.lookups`). Inline properties win.
+     */
+    getLookupConfig(col) {
+        const raw = col?.lookupConfig;
+        if (!raw)
+            return null;
+        const shared = raw.ref ? this.config?.lookups?.[raw.ref] : undefined;
+        const merged = shared ? { ...shared, ...raw } : raw;
+        return merged.apiUrl ? merged : null;
+    }
+    /** Bucket the resolved code -> label map lives in. Identical endpoints share one. */
+    getLookupCacheKey(cfg) {
+        if (cfg.cacheKey)
+            return cfg.cacheKey;
+        if (cfg.ref)
+            return cfg.ref;
+        return [
+            (cfg.apiMethod || 'GET').toUpperCase(),
+            cfg.apiUrl,
+            JSON.stringify(cfg.queryParams || {}),
+            JSON.stringify(cfg.apiPayload || {})
+        ].join('|');
+    }
+    /**
+     * Fires the lookup request for every column that declares one.
+     * - Full-list mode (no `paramName`): one request per endpoint, ever.
+     * - Targeted mode (`paramName` set): requests only the codes on the current
+     *   page that are not cached yet, so it re-runs as the user pages/searches.
+     */
+    loadColumnLookups() {
+        if (!this.config?.columns)
+            return;
+        this.config.columns.forEach(col => {
+            const cfg = this.getLookupConfig(col);
+            if (!cfg)
+                return;
+            const cacheKey = this.getLookupCacheKey(cfg);
+            if (!this.lookupMaps[cacheKey]) {
+                this.lookupMaps[cacheKey] = new Map();
+            }
+            const map = this.lookupMaps[cacheKey];
+            if (cfg.paramName) {
+                const missing = this.collectColumnCodes(col)
+                    .filter(code => !map.has(this.normalizeLookupKey(code, cfg)));
+                if (!missing.length)
+                    return;
+                const requestKey = cacheKey + '::' + missing.slice().sort().join(',');
+                if (this.lookupInFlight.has(requestKey))
+                    return;
+                this.lookupInFlight.add(requestKey);
+                this.fetchLookup(cfg, cacheKey, requestKey, missing);
+            }
+            else {
+                if (this.lookupInFlight.has(cacheKey) || this.lookupLoaded.has(cacheKey))
+                    return;
+                this.lookupInFlight.add(cacheKey);
+                this.fetchLookup(cfg, cacheKey, cacheKey, null);
+            }
+        });
+    }
+    /** Distinct, non-empty codes held by `col` across the rows currently loaded. */
+    collectColumnCodes(col) {
+        const path = col.labelPath || col.key;
+        const codes = new Set();
+        (this.data || []).forEach(row => {
+            const raw = this.getValueByPath(row, path);
+            const values = Array.isArray(raw) ? raw : [raw];
+            values.forEach(v => {
+                const code = this.normalizeRuleValue(v);
+                if (code !== null && code !== undefined && code !== '' && typeof code !== 'object') {
+                    codes.add(String(code));
+                }
+            });
+        });
+        return Array.from(codes);
+    }
+    /** Substitutes the `{codes}` / `{value}` placeholder in a url or param value. */
+    applyLookupPlaceholders(input, codes) {
+        return input.replace(/\{codes\}/g, codes).replace(/\{value\}/g, codes);
+    }
+    /**
+     * Issues the lookup request with any verb, then folds the response into the
+     * code -> label map. `codes` is null in full-list mode.
+     */
+    fetchLookup(cfg, cacheKey, requestKey, codes) {
+        const method = (cfg.apiMethod || 'GET').toUpperCase();
+        const codeCsv = (codes || []).join(cfg.paramSeparator || ',');
+        let headers = this.getHeaders();
+        Object.keys(cfg.headers || {}).forEach(key => {
+            headers = headers.set(key, cfg.headers[key]);
+        });
+        let params = new HttpParams();
+        const addParam = (key, value) => {
+            if (value === null || value === undefined)
+                return;
+            params = params.append(key, this.applyLookupPlaceholders(String(value), codeCsv));
+        };
+        Object.keys(cfg.queryParams || {}).forEach(key => {
+            const value = cfg.queryParams[key];
+            if (Array.isArray(value)) {
+                value.forEach(item => addParam(key, item));
+            }
+            else {
+                addParam(key, value);
+            }
+        });
+        const body = cfg.apiPayload !== undefined && cfg.apiPayload !== null
+            ? JSON.parse(JSON.stringify(cfg.apiPayload))
+            : {};
+        // Targeted mode: attach the page's codes as a query param (GET) or body key.
+        if (codes && cfg.paramName) {
+            const format = cfg.paramFormat || (method === 'GET' ? 'csv' : 'array');
+            if (method === 'GET') {
+                if (format === 'repeat') {
+                    codes.forEach(code => { params = params.append(cfg.paramName, code); });
+                }
+                else {
+                    params = params.set(cfg.paramName, codeCsv);
+                }
+            }
+            else {
+                body[cfg.paramName] = format === 'csv' ? codeCsv : codes;
+            }
+        }
+        const url = this.applyLookupPlaceholders(cfg.apiUrl, codeCsv);
+        const request$ = method === 'GET'
+            ? this.http.get(url, { headers, params })
+            : this.http.request(method, url, { body, headers, params });
+        request$.pipe(finalize(() => {
+            this.lookupInFlight.delete(requestKey);
+            // Full-list mode is a one-shot fetch: never re-request it, even if the
+            // list came back empty or the call failed.
+            if (!codes)
+                this.lookupLoaded.add(cacheKey);
+        }), catchError(err => {
+            console.error('[SmartTable] Lookup failed for ' + cfg.apiUrl, err);
+            return of(null);
+        })).subscribe((response) => {
+            if (response === null || response === undefined)
+                return;
+            const extracted = this.getValueByPath(response, cfg.dataPath || '');
+            const items = Array.isArray(extracted) ? extracted : (extracted ? [extracted] : []);
+            const map = this.lookupMaps[cacheKey] || (this.lookupMaps[cacheKey] = new Map());
+            items.forEach((item) => {
+                const code = this.getValueByPath(item, cfg.valueKey || 'code');
+                if (code === null || code === undefined || code === '')
+                    return;
+                const label = this.coerceLookupLabel(this.getValueByPath(item, cfg.labelKey || 'name'), code);
+                map.set(this.normalizeLookupKey(code, cfg), label);
+            });
+            this.cdr.markForCheck();
+        });
+    }
+    /** A label must be printable — objects/arrays degrade to the raw code. */
+    coerceLookupLabel(label, code) {
+        if (label === null || label === undefined || label === '')
+            return String(code);
+        if (typeof label === 'object')
+            return String(code);
+        return String(label);
+    }
+    /** Map key for a code, honouring `caseInsensitive` (default true). */
+    normalizeLookupKey(code, cfg) {
+        const str = String(code);
+        return cfg.caseInsensitive === false ? str : str.toLowerCase();
+    }
+    /**
+     * Turns the raw cell value into its label(s). Accepts a single code, an array
+     * of codes, or objects wrapping a code. Unresolved codes are shown as-is
+     * (`fallback: 'code'`, the default) or dropped (`fallback: 'empty'`).
+     * Returns null when nothing is left, so the caller applies `emptyValue`.
+     */
+    resolveLookupLabel(value, cfg) {
+        if (value === null || value === undefined || value === '')
+            return value;
+        const map = this.lookupMaps[this.getLookupCacheKey(cfg)];
+        const values = Array.isArray(value) ? value : [value];
+        const labels = values.map(entry => {
+            const code = this.normalizeRuleValue(entry);
+            if (code === null || code === undefined || code === '' || typeof code === 'object')
+                return null;
+            const hit = map?.get(this.normalizeLookupKey(code, cfg));
+            if (hit !== undefined)
+                return hit;
+            return cfg.fallback === 'empty' ? null : String(code);
+        }).filter(label => label !== null && label !== '');
+        return labels.length ? labels.join(cfg.separator ?? ', ') : null;
+    }
     loadFilterOptions() {
         if (!this.config.filters)
             return;