@liedekef/ftable 1.3.5 → 1.3.7

package/ftable.esm.js

@@ -33,7 +33,8 @@ const FTABLE_DEFAULT_MESSAGES = {
     printTable: '🖨️ Print',
     cloneRecord: 'Clone Record',
     resetTable: 'Reset table',
-    resetTableConfirm: 'This will reset all columns, pagesize, sorting to their defaults. Do you want to continue?',
+    resetTableConfirm: 'This will reset column visibility, column widths and page size to their defaults. Do you want to continue?',
+    resetTableTooltip: 'Resets column visibility, column widths and page size to defaults. Sorting is not affected.',
     resetSearch: 'Reset'
 };
 
@@ -622,124 +623,46 @@ class FTableFormBuilder {
         this.options = options;
         this.dependencies = new Map(); // Track field dependencies
         this.optionsCache = new FTableOptionsCache();
-        this.originalFieldOptions = new Map(); // Store original field.options
-        this.resolvedFieldOptions = new Map(); // Store resolved options per context
-
-        // Initialize with empty cache objects
-        Object.keys(this.options.fields || {}).forEach(fieldName => {
-            this.resolvedFieldOptions.set(fieldName, {});
-        });
-        Object.entries(this.options.fields).forEach(([fieldName, field]) => {
-            this.originalFieldOptions.set(fieldName, {
-                options: field.options,
-                searchOptions: field.searchOptions
-            });
-        });
     }
 
-    // Get options for specific context
+    // Get options for a field, respecting context ('search' prefers searchOptions over options).
+    // URL-level caching and concurrent-request deduplication is handled by FTableOptionsCache
+    // inside resolveOptions
     async getFieldOptions(fieldName, context = 'table', params = {}) {
         const field = this.options.fields[fieldName];
-        const stored = this.originalFieldOptions.get(fieldName);
 
-        // Determine which options source to use for this context
-        let originalOptions;
-        if (context === 'search') {
-            // Prefer searchOptions; fall back to regular options
-            originalOptions = stored?.searchOptions ?? stored?.options;
-        } else {
-            originalOptions = stored?.options;
-        }
+        // For search context, prefer searchOptions and fall back to options
+        const optionsSource = (context === 'search')
+            ? (field.searchOptions ?? field.options)
+            : field.options;
 
-        // If no options or already resolved for this context with same params, return cached
-        if (!originalOptions) {
-            return null;
-        }
+        if (!optionsSource) return null;
 
-        // Determine if we should skip caching for this specific context
-        const shouldSkipCache = this.shouldForceRefreshForContext(field, context, params);
-        const cacheKey = this.generateOptionsCacheKey(context, params);
-        // Skip cache if configured or forceRefresh requested
-        if (!shouldSkipCache && !params.forceRefresh) {
-            const cached = this.resolvedFieldOptions.get(fieldName)[cacheKey];
-            if (cached) return cached;
-        }
+        const noCache = this.shouldSkipCache(field, context, params);
 
         try {
-            // Create temp field with original options for resolution
-            const tempField = { ...field, options: originalOptions };
-            const resolved = await this.resolveOptions(tempField, {
-                ...params
-            }, context, shouldSkipCache);
-            
-            // we store the resolved option always
-            this.resolvedFieldOptions.get(fieldName)[cacheKey] = resolved;
-            return resolved;
+            return await this.resolveOptions(
+                { ...field, options: optionsSource },
+                params,
+                context,
+                noCache
+            );
         } catch (err) {
             console.error(`Failed to resolve options for ${fieldName} (${context}):`, err);
-            return originalOptions;
-        }
-    }
-
-    /**
-     * 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 });
-                });
-            }
+            return optionsSource;
         }
     }
 
-    // Helper method to determine caching behavior
-    shouldForceRefreshForContext(field, context, params) {
-        // Rename to reflect what it actually does now
+    // Determine whether to bypass the URL cache for this field/context
+    shouldSkipCache(field, context, params) {
+        if (params.forceRefresh) return true;
         if (!field.noCache) return false;
-
         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;
     }
 
-    generateOptionsCacheKey(context, params) {
-        // Create a unique key based on context and dependency values
-        const keyParts = [context];
-
-        if (params.dependedValues) {
-            // Include relevant dependency values in the cache key
-            Object.keys(params.dependedValues).sort().forEach(key => {
-                keyParts.push(`${key}=${params.dependedValues[key]}`);
-            });
-        }
-
-        return keyParts.join('|');
-    }
-
     shouldIncludeField(field, formType) {
         if (formType === 'create') {
             return field.create !== false && !(field.key === true && field.create !== true);
@@ -812,12 +735,6 @@ class FTableFormBuilder {
         return form;
     }
 
-    shouldResolveOptions(options) {
-        return options &&
-               (typeof options === 'function' || typeof options === 'string') &&
-               !Array.isArray(options) &&
-               !(typeof options === 'object' && !Array.isArray(options) && Object.keys(options).length > 0);
-    }
 
     buildDependencyMap() {
         this.dependencies.clear();
@@ -2101,7 +2018,8 @@ class FTable extends FTableEventEmitter {
             saveUserPreferences: true,
             saveUserPreferencesMethod: 'localStorage',
             defaultSorting: '',
-            tableReset: false,
+            tableResetButton: false,
+            sortingResetButton: false,
             
             // Paging
             paging: false,
@@ -2176,13 +2094,13 @@ class FTable extends FTableEventEmitter {
         }
 
         // Start resolving in background
-        this.resolveAsyncFieldOptions().then(() => {
+        this.resolveAllFieldOptionsForTable().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 ...
+            //  We could call await this.resolveAllFieldOptionsForTable() during load, but that would slow down the loading ...
             setTimeout(() => {
                 this.refreshDisplayValues();
             }, 0);
@@ -2311,6 +2229,23 @@ class FTable extends FTableEventEmitter {
             this.createPageSizeSelector();
         }
 
+        // Table reset button — resets column visibility/widths and pageSize (not sorting)
+        if (this.options.tableResetButton) {
+            const resetTableBtn = FTableDOMHelper.create('button', {
+                className: 'ftable-toolbar-item ftable-table-reset-btn',
+                textContent: this.options.messages.resetTable || 'Reset table',
+                title: this.options.messages.resetTableTooltip || 'Resets column visibility, column widths and page size to defaults.',
+                type: 'button',
+                parent: this.elements.rightArea
+            });
+            resetTableBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                const msg = this.options.messages.resetTableConfirm;
+                this.modals.resetTable.setContent(`<p>${msg}</p>`);
+                this.modals.resetTable.show();
+            });
+        }
+
     }
 
     createPageSizeSelector() {
@@ -2403,22 +2338,17 @@ class FTable extends FTableEventEmitter {
         }
     }
 
-    async resolveAsyncFieldOptions() {
+    async resolveAllFieldOptionsForTable() {
+        this.tableOptionsCache = new Map();
+
         const promises = this.columnList.map(async (fieldName) => {
             const field = this.options.fields[fieldName];
             if (field.action) return; // Skip action columns
-            const originalOptions = this.formBuilder.originalFieldOptions.get(fieldName)?.options;
-
-            if (this.formBuilder.shouldResolveOptions(originalOptions)) {
-                try {
-                    // Check if already resolved to avoid duplicate work
-                    const cacheKey = this.formBuilder.generateOptionsCacheKey('table', {});
-                    if (!this.formBuilder.resolvedFieldOptions.get(fieldName)?.[cacheKey]) {
-                        await this.formBuilder.getFieldOptions(fieldName, 'table');
-                    }
-                } catch (err) {
-                    console.error(`Failed to resolve table options for ${fieldName}:`, err);
-                }
+            try {
+                const resolved = await this.formBuilder.getFieldOptions(fieldName, 'table');
+                if (resolved) this.tableOptionsCache.set(fieldName, resolved);
+            } catch (err) {
+                console.error(`Failed to resolve table options for ${fieldName}:`, err);
             }
         });
 
@@ -2437,9 +2367,7 @@ class FTable extends FTableEventEmitter {
                 const cell = row.querySelector(`td[data-field-name="${fieldName}"]`);
                 if (!cell) continue;
 
-                // Get table-specific options
-                const cacheKey = this.formBuilder.generateOptionsCacheKey('table', {});
-                const resolvedOptions = this.formBuilder.resolvedFieldOptions.get(fieldName)?.[cacheKey];
+                const resolvedOptions = this.tableOptionsCache?.get(fieldName);
                 const value = this.getDisplayText(row.recordData, fieldName, resolvedOptions);
                 cell.innerHTML = field.listEscapeHTML ? FTableDOMHelper.escapeHtml(value) : value;
             }
@@ -3287,6 +3215,10 @@ class FTable extends FTableEventEmitter {
         this.createInfoModal();
         this.createLoadingModal();
 
+        if (this.options.tableResetButton) {
+            this.createResetTableModal();
+        }
+
         // Initialize them (create DOM) once
         Object.values(this.modals).forEach(modal => modal.create());
     }
@@ -3372,6 +3304,34 @@ class FTable extends FTableEventEmitter {
         });
     }
 
+    createResetTableModal() {
+        this.modals.resetTable = new FtableModal({
+            parent: this.elements.mainContainer,
+            title: this.options.messages.resetTable || 'Reset table',
+            className: 'ftable-reset-table-modal',
+            closeOnOverlayClick: this.options.closeOnOverlayClick,
+            buttons: [
+                {
+                    text: this.options.messages.cancel,
+                    className: 'ftable-dialog-cancelbutton',
+                    onClick: () => this.modals.resetTable.close()
+                },
+                {
+                    text: this.options.messages.yes,
+                    className: 'ftable-dialog-savebutton',
+                    onClick: () => {
+                        this.userPrefs.remove('column-settings');
+                        // Preserve current sorting, only reset column settings and pageSize
+                        this.userPrefs.set('table-state', JSON.stringify({
+                            sorting: this.state.sorting
+                        }));
+                        location.reload();
+                    }
+                }
+            ]
+        });
+    }
+
     createErrorModal() {
         this.modals.error = new FtableModal({
             parent: this.elements.mainContainer,
@@ -3655,6 +3615,21 @@ class FTable extends FTableEventEmitter {
             });
         }
 
+        // Sorting reset button — visible only when sorting differs from default
+        if (this.options.sorting && this.options.sortingResetButton) {
+            this.elements.sortingResetBtn = this.addToolbarButton({
+                text: this.options.messages.resetSorting || 'Reset sorting',
+                className: 'ftable-toolbar-item-sorting-reset',
+                onClick: () => {
+                    this.state.sorting = [];
+                    this.updateSortingHeaders();
+                    this.load();
+                    this.saveState();
+                }
+            });
+            FTableDOMHelper.hide(this.elements.sortingResetBtn); // hidden by default
+        }
+
         if (this.options.actions.createAction) {
             this.addToolbarButton({
                 text: this.options.messages.addNewRecord,
@@ -4025,8 +4000,7 @@ class FTable extends FTableEventEmitter {
 
     addDataCell(row, record, fieldName) {
         const field = this.options.fields[fieldName];
-        const cacheKey = this.formBuilder.generateOptionsCacheKey('table', {});
-        const resolvedOptions = this.formBuilder.resolvedFieldOptions.get(fieldName)?.[cacheKey];
+        const resolvedOptions = this.tableOptionsCache?.get(fieldName);
         const value = this.getDisplayText(record, fieldName, resolvedOptions);
         
         const cell = FTableDOMHelper.create('td', {
@@ -4529,8 +4503,7 @@ class FTable extends FTableEventEmitter {
             if (!cell) return;
 
             // Get display text
-            const cacheKey = this.formBuilder.generateOptionsCacheKey('table', {});
-            const resolvedOptions = this.formBuilder.resolvedFieldOptions.get(fieldName)?.[cacheKey];
+            const resolvedOptions = this.tableOptionsCache?.get(fieldName);
             const value = this.getDisplayText(row.recordData, fieldName, resolvedOptions);
             cell.innerHTML = field.listEscapeHTML ? FTableDOMHelper.escapeHtml(value) : value;
             cell.className = `${field.listClass || ''} ${field.listClassEntry || ''}`.trim();
@@ -4696,19 +4669,45 @@ class FTable extends FTableEventEmitter {
     }
 
     updateSortingHeaders() {
-        // Clear all sorting classes
+        // Clear all sorting classes and remove any existing sort badges
         const headers = this.elements.table.querySelectorAll('.ftable-column-header-sortable');
         headers.forEach(header => {
             FTableDOMHelper.removeClass(header, 'ftable-column-header-sorted-asc ftable-column-header-sorted-desc');
+            const existing = header.querySelector('.ftable-sort-badge');
+            if (existing) existing.remove();
         });
-        
-        // Apply current sorting classes
-        this.state.sorting.forEach(sort => {
+
+        // Apply current sorting classes and sort number badges
+        this.state.sorting.forEach((sort, index) => {
             const header = this.elements.table.querySelector(`[data-field-name="${sort.fieldName}"]`);
-            if (header) {
-                FTableDOMHelper.addClass(header, `ftable-column-header-sorted-${sort.direction.toLowerCase()}`);
+            if (!header) return;
+
+            FTableDOMHelper.addClass(header, `ftable-column-header-sorted-${sort.direction.toLowerCase()}`);
+
+            // Sort number badge — only show when multisorting with more than 1 active sort
+            if (this.options.multiSorting && this.state.sorting.length > 1) {
+                const container = header.querySelector('.ftable-column-header-container');
+                if (container) {
+                    FTableDOMHelper.create('span', {
+                        className: 'ftable-sort-badge',
+                        textContent: String(index + 1),
+                        parent: container
+                    });
+                }
             }
         });
+
+        // Update visibility of the sorting reset toolbar button
+        this._updateSortingResetButton();
+    }
+
+    _updateSortingResetButton() {
+        if (!this.elements.sortingResetBtn) return;
+        if (this.state.sorting.length === 0) {
+            FTableDOMHelper.hide(this.elements.sortingResetBtn);
+        } else {
+            FTableDOMHelper.show(this.elements.sortingResetBtn);
+        }
     }
 
     // Paging Methods
@@ -5290,8 +5289,8 @@ class FTable extends FTableEventEmitter {
         // this.emit('columnVisibilityChanged', { field: field });
     }
 
-    // Responsive helpers
 /*
+    // Responsive helpers
     makeResponsive() {
         // Add responsive classes and behavior
         FTableDOMHelper.addClass(this.elements.mainContainer, 'ftable-responsive');
@@ -5336,200 +5335,6 @@ class FTable extends FTableEventEmitter {
         });
     }
 
-    // Advanced search functionality
-    enableSearch(options = {}) {
-        const searchOptions = {
-            placeholder: 'Search...',
-            debounceMs: 300,
-            searchFields: this.columnList,
-            ...options
-        };
-
-        const searchContainer = FTableDOMHelper.create('div', {
-            className: 'ftable-search-container',
-            parent: this.elements.toolbarDiv
-        });
-
-        const searchInput = FTableDOMHelper.create('input', {
-            attributes: {
-                type: 'text',
-                placeholder: searchOptions.placeholder,
-                class: 'ftable-search-input'
-            },
-            parent: searchContainer
-        });
-
-        // Debounced search
-        let searchTimeout;
-        searchInput.addEventListener('input', (e) => {
-            clearTimeout(searchTimeout);
-            searchTimeout = setTimeout(() => {
-                this.performSearch(e.target.value, searchOptions.searchFields);
-            }, searchOptions.debounceMs);
-        });
-
-        return searchInput;
-    }
-
-    async performSearch(query, searchFields) {
-        if (!query.trim()) {
-            return this.load(); // Clear search
-        }
-
-        const searchParams = {
-            search: query,
-            searchFields: searchFields.join(',')
-        };
-
-        return this.load(searchParams);
-    }
-
-    // Keyboard shortcuts
-    enableKeyboardShortcuts() {
-        document.addEventListener('keydown', (e) => {
-            // Only handle shortcuts when table has focus or is active
-            if (!this.elements.mainContainer.contains(document.activeElement)) return;
-
-            switch (e.key) {
-                case 'n':
-                    if (e.ctrlKey && this.options.actions.createAction) {
-                        e.preventDefault();
-                        this.showAddRecordForm();
-                    }
-                    break;
-                case 'r':
-                    if (e.ctrlKey) {
-                        e.preventDefault();
-                        this.reload();
-                    }
-                    break;
-                case 'Delete':
-                    if (this.options.actions.deleteAction) {
-                        const selectedRows = this.getSelectedRows();
-                        if (selectedRows.length > 0) {
-                            e.preventDefault();
-                            this.bulkDelete();
-                        }
-                    }
-                    break;
-                case 'a':
-                    if (e.ctrlKey && this.options.selecting && this.options.multiselect) {
-                        e.preventDefault();
-                        this.toggleSelectAll(true);
-                    }
-                    break;
-                case 'Escape':
-                    // Close any open modals
-                    Object.values(this.modals).forEach(modal => {
-                        if (modal.isOpen) modal.close();
-                    });
-                    break;
-            }
-        });
-    }
-
-    // Real-time updates via WebSocket
-    enableRealTimeUpdates(websocketUrl) {
-        if (!websocketUrl) return;
-
-        this.websocket = new WebSocket(websocketUrl);
-        
-        this.websocket.onmessage = (event) => {
-            try {
-                const data = JSON.parse(event.data);
-                this.handleRealTimeUpdate(data);
-            } catch (error) {
-                this.logger.error('Failed to parse WebSocket message', error);
-            }
-        };
-
-        this.websocket.onerror = (error) => {
-            this.logger.error('WebSocket error', error);
-        };
-
-        this.websocket.onclose = () => {
-            this.logger.info('WebSocket connection closed');
-            // Attempt to reconnect after delay
-            setTimeout(() => {
-                if (this.websocket.readyState === WebSocket.CLOSED) {
-                    this.enableRealTimeUpdates(websocketUrl);
-                }
-            }, 5000);
-        };
-    }
-
-    handleRealTimeUpdate(data) {
-        switch (data.type) {
-            case 'record_added':
-                this.addRecordToTable(data.record);
-                break;
-            case 'record_updated':
-                this.updateRecordInTable(data.record);
-                break;
-            case 'record_deleted':
-                this.removeRecordFromTable(data.recordKey);
-                break;
-            case 'refresh':
-                this.reload();
-                break;
-        }
-    }
-
-    addRecordToTable(record) {
-        const row = this.createTableRow(record);
-        
-        // Add to beginning or end based on sorting
-        if (this.state.sorting.length > 0) {
-            // Would need to calculate correct position based on sort
-            this.elements.tableBody.appendChild(row);
-        } else {
-            this.elements.tableBody.appendChild(row);
-        }
-        
-        this.state.records.push(record);
-        this.removeNoDataRow();
-        this.refreshRowStyles();
-        
-        // Show animation
-        if (this.options.animationsEnabled) {
-            this.showRowAnimation(row, 'added');
-        }
-    }
-
-    updateRecordInTable(record) {
-        const keyValue = this.getKeyValue(record);
-        const existingRow = this.getRowByKey(keyValue);
-        
-        if (existingRow) {
-            this.updateRowData(existingRow, record);
-            
-            if (this.options.animationsEnabled) {
-                this.showRowAnimation(existingRow, 'updated');
-            }
-        }
-    }
-
-    removeRecordFromTable(keyValue) {
-        const row = this.getRowByKey(keyValue);
-        if (row) {
-            this.removeRowFromTable(row);
-            
-            // Remove from state
-            this.state.records = this.state.records.filter(r => 
-                this.getKeyValue(r) !== keyValue
-            );
-        }
-    }
-
-    showRowAnimation(row, type) {
-        const animationClass = `ftable-row-${type}`;
-        FTableDOMHelper.addClass(row, animationClass);
-        
-        setTimeout(() => {
-            FTableDOMHelper.removeClass(row, animationClass);
-        }, 2000);
-    }
-
     // Plugin system for extensions
     use(plugin, options = {}) {
         if (typeof plugin === 'function') {
@@ -5710,65 +5515,20 @@ class FTable extends FTableEventEmitter {
 
         const messages = this.options.messages || {};
 
-        // Get prefix/suffix if defined
-        const prefix = messages.sortingInfoPrefix ? `<span class="ftable-sorting-prefix">${messages.sortingInfoPrefix}</span> ` : '';
-        const suffix = messages.sortingInfoSuffix ? ` <span class="ftable-sorting-suffix">${messages.sortingInfoSuffix}</span>` : '';
-
         if (this.state.sorting.length === 0) {
             container.innerHTML = messages.sortingInfoNone || '';
             return;
         }
 
+        // Get prefix/suffix if defined
+        const prefix = messages.sortingInfoPrefix ? `<span class="ftable-sorting-prefix">${messages.sortingInfoPrefix}</span> ` : '';
+        const suffix = messages.sortingInfoSuffix ? ` <span class="ftable-sorting-suffix">${messages.sortingInfoSuffix}</span>` : '';
+
         // Build sorted fields list with translated directions
         const sortingInfo = this.getSortingInfo();
 
         // Combine with prefix and suffix
         container.innerHTML = `${prefix}${sortingInfo}${suffix}`;
-
-        // Add reset sorting button
-        if (this.state.sorting.length > 0) {
-            const resetSortBtn = document.createElement('button');
-            resetSortBtn.textContent = messages.resetSorting || 'Reset Sorting';
-            resetSortBtn.style.marginLeft = '10px';
-            resetSortBtn.classList.add('ftable-sorting-reset-btn');
-            resetSortBtn.addEventListener('click', (e) => {
-                e.preventDefault();
-                this.state.sorting = [];
-                this.updateSortingHeaders();
-                this.load();
-                this.saveState();
-            });
-            container.appendChild(resetSortBtn);
-        }
-
-        // Add reset table button if enabled
-        if (this.options.tableReset) {
-            const resetTableBtn = document.createElement('button');
-            resetTableBtn.textContent = messages.resetTable || 'Reset Table';
-            resetTableBtn.style.marginLeft = '10px';
-            resetTableBtn.classList.add('ftable-table-reset-btn');
-            resetTableBtn.addEventListener('click', (e) => {
-                e.preventDefault();
-                const confirmMsg = messages.resetTableConfirm;
-                if (confirm(confirmMsg)) {
-                    this.userPrefs.remove('column-settings');
-                    this.userPrefs.remove('table-state');
-
-                    // Clear any in-memory state that might affect rendering
-                    this.state.sorting = [];
-                    this.state.pageSize = this.options.pageSize;
-
-                    // Reset field visibility to default
-                    this.columnList.forEach(fieldName => {
-                        const field = this.options.fields[fieldName];
-                        // Reset to default: hidden only if explicitly set
-                        field.visibility = field.visibility === 'fixed' ? 'fixed' : 'visible';
-                    });
-                    location.reload();
-                }
-            });
-            container.appendChild(resetTableBtn);
-        }
     }
 
     /**