@liedekef/ftable 1.1.24 → 1.1.25

package/ftable.umd.js

@@ -42,6 +42,7 @@
 class FTableOptionsCache {
     constructor() {
         this.cache = new Map();
+        this.pendingRequests = new Map(); // Track ongoing requests
     }
 
     generateKey(url, params) {
@@ -81,6 +82,37 @@ class FTableOptionsCache {
         }
     }
 
+    async getOrCreate(url, params, fetchFn) {
+        const key = this.generateKey(url, params);
+
+        // Return cached result if available
+        const cached = this.cache.get(key);
+        if (cached) return cached;
+
+        // Check if same request is already in progress
+        if (this.pendingRequests.has(key)) {
+            // Wait for the existing request to complete
+            return await this.pendingRequests.get(key);
+        }
+
+        // Create new request
+        const requestPromise = (async () => {
+            try {
+                const result = await fetchFn();
+                this.cache.set(key, result);
+                return result;
+            } finally {
+                // Clean up pending request tracking
+                this.pendingRequests.delete(key);
+            }
+        })();
+
+        // Track this request
+        this.pendingRequests.set(key, requestPromise);
+
+        return await requestPromise;
+    }
+
     size() {
         return this.cache.size;
     }
@@ -146,6 +178,7 @@ class FTableLogger {
         
         const levelName = Object.keys(FTableLogger.LOG_LEVELS)
             .find(key => FTableLogger.LOG_LEVELS[key] === level);
+        console.trace();
         console.log(`fTable ${levelName}: ${message}`);
     }
 
@@ -572,7 +605,7 @@ class FTableFormBuilder {
         }
 
         // Determine if we should skip caching for this specific context
-        const shouldSkipCache = this.shouldSkipCachingForContext(field, context, params);
+        const shouldSkipCache = this.shouldForceRefreshForContext(field, context, params);
         const cacheKey = this.generateOptionsCacheKey(context, params);
         // Skip cache if configured or forceRefresh requested
         if (!shouldSkipCache && !params.forceRefresh) {
@@ -587,10 +620,8 @@ class FTableFormBuilder {
                 ...params
             }, context, shouldSkipCache);
             
-            // Only cache if noCache is not enabled
-            if (!shouldSkipCache) {
-                this.resolvedFieldOptions.get(fieldName)[cacheKey] = resolved;
-            }
+            // we store the resolved option always
+            this.resolvedFieldOptions.get(fieldName)[cacheKey] = resolved;
             return resolved;
         } catch (err) {
             console.error(`Failed to resolve options for ${fieldName} (${context}):`, err);
@@ -598,24 +629,49 @@ class FTableFormBuilder {
         }
     }
 
-    // Helper method to determine caching behavior
-    shouldSkipCachingForContext(field, context, params) {
-        if (!field.noCache) return false;
-
-        if (typeof field.noCache === 'boolean') {
-            return field.noCache; // true = skip all contexts
+    /**
+     * Clear resolved options for specific field or all fields
+     * @param {string|null} fieldName - Field name to clear, or null for all fields
+     * @param {string|null} context - Context to clear ('table', 'create', 'edit'), or null for all contexts
+     */
+    clearResolvedOptions(fieldName = null, context = null) {
+        if (fieldName) {
+            // Clear specific field
+            if (this.resolvedFieldOptions.has(fieldName)) {
+                if (context) {
+                    // Clear specific context for specific field
+                    this.resolvedFieldOptions.get(fieldName)[context] = null;
+                } else {
+                    // Clear all contexts for specific field
+                    this.resolvedFieldOptions.set(fieldName, { table: null, create: null, edit: null });
+                }
+            }
+        } else {
+            // Clear all fields
+            if (context) {
+                // Clear specific context for all fields
+                this.resolvedFieldOptions.forEach((value, key) => {
+                    this.resolvedFieldOptions.get(key)[context] = null;
+                });
+            } else {
+                // Clear everything
+                this.resolvedFieldOptions.forEach((value, key) => {
+                    this.resolvedFieldOptions.set(key, { table: null, create: null, edit: null });
+                });
+            }
         }
+    }
 
-        if (typeof field.noCache === 'function') {
-            return field.noCache({ context, ...params });
-        }
+    // Helper method to determine caching behavior
+    shouldForceRefreshForContext(field, context, params) {
+        // Rename to reflect what it actually does now
+        if (!field.noCache) return false;
 
-        if (typeof field.noCache === 'object') {
-            // Check if this specific context should skip cache
-            return field.noCache[context] === true;
-        }
+        if (typeof field.noCache === 'boolean') return field.noCache;
+        if (typeof field.noCache === 'function') return field.noCache({ context, ...params });
+        if (typeof field.noCache === 'object') return field.noCache[context] === true;
 
-        return false; // Default to caching
+        return false;
     }
 
     generateOptionsCacheKey(context, params) {
@@ -644,18 +700,20 @@ class FTableFormBuilder {
     createFieldContainer(fieldName, field, record, formType) {
         // in this function, field.options already contains the resolved values
         const container = FTableDOMHelper.create('div', {
-            className: 'ftable-input-field-container',
+            className: (field.type != 'hidden' ? 'ftable-input-field-container' : ''),
             attributes: {
                 id: `ftable-input-field-container-div-${fieldName}`,
             }
         });
 
-        // Label
-        const label = FTableDOMHelper.create('div', {
-            className: 'ftable-input-label',
-            text: field.inputTitle || field.title,
-            parent: container
-        });
+        if (field.type != 'hidden') {
+            // Label
+            const label = FTableDOMHelper.create('div', {
+                className: 'ftable-input-label',
+                text: field.inputTitle || field.title,
+                parent: container
+            });
+        }
 
         // Input
         const inputContainer = this.createInput(fieldName, field, record[fieldName], formType);
@@ -668,9 +726,6 @@ class FTableFormBuilder {
 
         this.currentFormRecord = record;
 
-        // Pre-resolve all options for fields depending on nothing, the others are handled down the road when dependancies are calculated
-        await this.resolveFormFieldOptions(record, formType);
-
         const form = FTableDOMHelper.create('form', {
             className: `ftable-dialog-form ftable-${formType}-form`
         });
@@ -694,7 +749,6 @@ class FTableFormBuilder {
                     fieldWithOptions.options = field.options;
                 }
 
-
                 const fieldContainer = this.createFieldContainer(fieldName, fieldWithOptions, record, formType);
                 form.appendChild(fieldContainer);
             }
@@ -706,28 +760,6 @@ class FTableFormBuilder {
         return form;
     }
 
-    async resolveFormFieldOptions(record, formType) {
-        const promises = Object.entries(this.options.fields).map(async ([fieldName, field]) => {
-            if (field.dependsOn) {
-                // Dependent fields will be resolved when dependencies change
-                return;
-            }
-            
-            if (this.shouldResolveOptions(field.options)) {
-                try {
-                    await this.getFieldOptions(fieldName, formType, {
-                        record,
-                        source: formType
-                    });
-                } catch (err) {
-                    console.error(`Failed to resolve form options for ${fieldName}:`, err);
-                }
-            }
-        });
-        
-        await Promise.all(promises);
-    }
-
     shouldResolveOptions(options) {
         return options &&
                (typeof options === 'function' || typeof options === 'string') &&
@@ -820,27 +852,31 @@ class FTableFormBuilder {
         if (typeof url !== 'string') return [];
 
         // Only use cache if noCache is NOT set
-        if (!noCache) {
-            const cached = this.optionsCache.get(url, {});
-            if (cached) return cached;
-        }
-
-        try {
-            const response = this.options.forcePost
-                ? await FTableHttpClient.post(url)
-                : await FTableHttpClient.get(url);
-            const options = response.Options || response.options || response || [];
-
-            // Only cache if noCache is false
-            if (!noCache) {
-                this.optionsCache.set(url, {}, options);
+        if (noCache) {
+            try {
+                const response = this.options.forcePost
+                    ? await FTableHttpClient.post(url)
+                    : await FTableHttpClient.get(url);
+                return response.Options || response.options || response || [];
+            } catch (error) {
+                console.error(`Failed to load options from ${url}:`, error);
+                return [];
             }
-
-            return options;
-        } catch (error) {
-            console.error(`Failed to load options from ${url}:`, error);
-            return [];
+        } else {
+            // Use getOrCreate to prevent duplicate requests
+            return await this.optionsCache.getOrCreate(url, {}, async () => {
+                try {
+                    const response = this.options.forcePost
+                        ? await FTableHttpClient.post(url)
+                        : await FTableHttpClient.get(url);
+                    return response.Options || response.options || response || [];
+                } catch (error) {
+                    console.error(`Failed to load options from ${url}:`, error);
+                    return [];
+                }
+            });
         }
+
     }
 
     updateFieldCacheSetting(field, context, skipCache) {
@@ -940,6 +976,9 @@ class FTableFormBuilder {
                     if (datalist) datalist.innerHTML = '';
                 }
 
+                // Get current field value BEFORE resolving new options
+                const currentValue = input.value || record[fieldName] || '';
+
                 // Resolve options with current context
                 const params = {
                     ...baseParams,
@@ -951,9 +990,11 @@ class FTableFormBuilder {
 
                 // Populate the input
                 if (input.tagName === 'SELECT') {
-                    this.populateSelectOptions(input, newOptions, '');
+                    this.populateSelectOptions(input, newOptions, currentValue);
                 } else if (input.tagName === 'INPUT' && input.list) {
                     this.populateDatalistOptions(input.list, newOptions);
+                    // For datalist, set the value directly
+                    if (currentValue) input.value = currentValue;
                 }
 
                 setTimeout(() => {
@@ -1275,7 +1316,6 @@ class FTableFormBuilder {
         const select = FTableDOMHelper.create('select', { attributes });
 
         if (field.options) {
-            // the field options are already the resolved ones
             this.populateSelectOptions(select, field.options, value);
         }
 
@@ -1593,6 +1633,11 @@ class FTable extends FTableEventEmitter {
         // Start resolving in background
         this.resolveAsyncFieldOptions().then(() => {
             // re-render dynamic options rows — no server call
+            // this is needed so that once options are resolved, the table shows correct display values
+            // why: load() can actually finish faster than option resolving (and calling refreshDisplayValues
+            //      there is then pointless, since the resolving hasn't finished yet),
+            //      so we need to do it when the options are actually resolved (here)
+            //  We could call await this.resolveAsyncFieldOptions() during load, but that would slow down the loading ...
             setTimeout(() => {
                 this.refreshDisplayValues();
             }, 0);
@@ -1853,7 +1898,6 @@ class FTable extends FTableEventEmitter {
         });
 
         await Promise.all(promises);
-        // DON'T call refreshDisplayValues() here - let renderTableData do it
     }
 
     async refreshDisplayValues() {
@@ -1869,8 +1913,9 @@ class FTable extends FTableEventEmitter {
                 if (!cell) continue;
 
                 // Get table-specific options
-                const options = await this.formBuilder.getFieldOptions(fieldName, 'table');
-                const value = this.getDisplayText(row.recordData, fieldName, options);
+                const cacheKey = this.formBuilder.generateOptionsCacheKey('table', {});
+                const resolvedOptions = this.formBuilder.resolvedFieldOptions.get(fieldName)?.[cacheKey];
+                const value = this.getDisplayText(row.recordData, fieldName, resolvedOptions);
                 cell.innerHTML = field.listEscapeHTML ? FTableDOMHelper.escapeHtml(value) : value;
             }
         }
@@ -2229,7 +2274,7 @@ class FTable extends FTableEventEmitter {
                 DisplayText: displayText
             }));
         } else if (field.options) {
-            optionsSource = await this.formBuilder.resolveOptions(field, {}, 'search');
+            optionsSource = await this.formBuilder.getFieldOptions(fieldName);
         }
 
         // Add empty option only if first option is not already empty
@@ -3132,7 +3177,9 @@ class FTable extends FTableEventEmitter {
         });
 
         this.refreshRowStyles();
-        this.refreshDisplayValues(); // for options that uses functions/url's
+        // the next call might not do anything if option resolving hasn't finished yet
+        // in fact, it might even not be needed, since we call it when option resolving finishes (see init)
+        //this.refreshDisplayValues(); // for options that uses functions/url's
     }
 
     createTableRow(record) {
@@ -3194,7 +3241,9 @@ class FTable extends FTableEventEmitter {
 
     addDataCell(row, record, fieldName) {
         const field = this.options.fields[fieldName];
-        const value = this.getDisplayText(record, fieldName);
+        const cacheKey = this.formBuilder.generateOptionsCacheKey('table', {});
+        const resolvedOptions = this.formBuilder.resolvedFieldOptions.get(fieldName)?.[cacheKey];
+        const value = this.getDisplayText(record, fieldName, resolvedOptions);
         
         const cell = FTableDOMHelper.create('td', {
             className: `${field.listClass || ''} ${field.listClassEntry || ''}`,
@@ -3673,7 +3722,9 @@ class FTable extends FTableEventEmitter {
             if (!cell) return;
 
             // Get display text
-            const value = this.getDisplayText(row.recordData, fieldName);
+            const cacheKey = this.formBuilder.generateOptionsCacheKey('table', {});
+            const resolvedOptions = this.formBuilder.resolvedFieldOptions.get(fieldName)?.[cacheKey];
+            const value = this.getDisplayText(row.recordData, fieldName, resolvedOptions);
             cell.innerHTML = field.listEscapeHTML ? FTableDOMHelper.escapeHtml(value) : value;
             cell.className = `${field.listClass || ''} ${field.listClassEntry || ''}`.trim();
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liedekef/ftable",
-  "version": "1.1.24",
+  "version": "1.1.25",
   "description": "Modern, lightweight, jQuery-free CRUD table for dynamic AJAX-powered tables.",
   "main": "ftable.js",
   "module": "ftable.esm.js",