@liedekef/ftable 1.1.24 → 1.1.26

package/ftable.esm.js

@@ -37,6 +37,7 @@ const FTABLE_DEFAULT_MESSAGES = {
 class FTableOptionsCache {
     constructor() {
         this.cache = new Map();
+        this.pendingRequests = new Map(); // Track ongoing requests
     }
 
     generateKey(url, params) {
@@ -76,6 +77,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;
     }
@@ -141,6 +173,7 @@ class FTableLogger {
         
         const levelName = Object.keys(FTableLogger.LOG_LEVELS)
             .find(key => FTableLogger.LOG_LEVELS[key] === level);
+        console.trace();
         console.log(`fTable ${levelName}: ${message}`);
     }
 
@@ -567,7 +600,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) {
@@ -582,10 +615,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);
@@ -593,24 +624,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) {
@@ -639,18 +695,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);
@@ -663,9 +721,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`
         });
@@ -689,7 +744,6 @@ class FTableFormBuilder {
                     fieldWithOptions.options = field.options;
                 }
 
-
                 const fieldContainer = this.createFieldContainer(fieldName, fieldWithOptions, record, formType);
                 form.appendChild(fieldContainer);
             }
@@ -701,28 +755,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') &&
@@ -815,27 +847,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) {
@@ -935,6 +971,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,
@@ -946,9 +985,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(() => {
@@ -1261,16 +1302,26 @@ class FTableFormBuilder {
             class: field.inputClass || ''
         };
 
-        // Apply inputAttributes
+        // extra check for name and multiple
+        let name = fieldName;
+        // Apply inputAttributes from field definition
         if (field.inputAttributes) {
+            let hasMultiple = false;
+
             const parsed = this.parseInputAttributes(field.inputAttributes);
             Object.assign(attributes, parsed);
+
+            hasMultiple = parsed.multiple !== undefined && parsed.multiple !== false;
+
+            if (hasMultiple) {
+                name = `${fieldName}[]`;
+            }
         }
+        attributes.name = name;
 
         const select = FTableDOMHelper.create('select', { attributes });
 
         if (field.options) {
-            // the field options are already the resolved ones
             this.populateSelectOptions(select, field.options, value);
         }
 
@@ -1307,7 +1358,7 @@ class FTableFormBuilder {
                 // Apply inputAttributes
                 if (field.inputAttributes) {
                     const parsed = this.parseInputAttributes(field.inputAttributes);
-                    Object.assign(attributes, parsed);
+                    Object.assign(radioAttributes, parsed);
                 }
 
                 const radio = FTableDOMHelper.create('input', {
@@ -1588,6 +1639,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);
@@ -1848,7 +1904,6 @@ class FTable extends FTableEventEmitter {
         });
 
         await Promise.all(promises);
-        // DON'T call refreshDisplayValues() here - let renderTableData do it
     }
 
     async refreshDisplayValues() {
@@ -1864,8 +1919,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;
             }
         }
@@ -1972,7 +2028,7 @@ class FTable extends FTableEventEmitter {
 
             const textHeader = FTableDOMHelper.create('span', {
                 className: 'ftable-column-header-text',
-                text: field.title || fieldName,
+                html: field.title || fieldName,
                 parent: container
             });
 
@@ -2059,14 +2115,19 @@ class FTable extends FTableEventEmitter {
                 });
 
                 let input;
+                let searchType = 'text';
 
                 // Auto-detect select type if options are provided
-                if (!field.type && field.options) {
-                    field.type = 'select';
+                if (field.searchType) {
+                    searchType = field.searchType;
+                } else if (!field.type && field.options) {
+                    searchType = 'select';
+                } else if (field.type) {
+                    searchType = field.type;
                 }
                 const fieldSearchName = 'ftable-toolbarsearch-' + fieldName;
 
-                switch (field.type) {
+                switch (searchType) {
                     case 'date':
                     case 'datetime-local':
                         if (typeof FDatepicker !== 'undefined') {
@@ -2224,7 +2285,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
@@ -3127,7 +3188,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) {
@@ -3189,7 +3252,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 || ''}`,
@@ -3668,7 +3733,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();
         });