@liedekef/ftable 1.3.6 → 1.3.8

package/ftable.js

@@ -34,7 +34,8 @@
     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'
 };
 
@@ -1332,7 +1333,23 @@ class FTableFormBuilder {
         });
 
         if (field.options) {
-            this.populateSelectOptions(select, field.options, value);
+            // If a placeholder is defined and the options don't already start with an empty
+            // option, prepend one so that populateSelectOptions handles selected-state correctly.
+            let options = field.options;
+            if (field.placeholder !== undefined) {
+                const firstValue = Array.isArray(options)
+                    ? (options[0]?.Value ?? options[0]?.value ?? options[0])
+                    : Object.keys(options)[0];
+                if (firstValue !== '' && firstValue !== undefined) {
+                    const emptyOption = Array.isArray(options)
+                        ? { Value: '', DisplayText: field.placeholder }
+                        : { '': field.placeholder };
+                    options = Array.isArray(options)
+                        ? [emptyOption, ...options]
+                        : Object.fromEntries([['', field.placeholder], ...Object.entries(options)]);
+                }
+            }
+            this.populateSelectOptions(select, options, value);
         }
 
         return select;
@@ -2018,7 +2035,8 @@ class FTable extends FTableEventEmitter {
             saveUserPreferences: true,
             saveUserPreferencesMethod: 'localStorage',
             defaultSorting: '',
-            tableReset: false,
+            tableResetButton: false,
+            sortingResetButton: false,
             
             // Paging
             paging: false,
@@ -2228,6 +2246,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() {
@@ -2826,7 +2861,7 @@ class FTable extends FTableEventEmitter {
         if (!hasEmptyFirst) {
             FTableDOMHelper.create('option', {
                 value: '',
-                innerHTML: '&nbsp;',
+                innerHTML: field.searchPlaceholder || field.placeholder || '&nbsp;',
                 parent: select
             });
         }
@@ -3197,6 +3232,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());
     }
@@ -3282,6 +3321,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,
@@ -3565,6 +3632,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,
@@ -4604,19 +4686,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
@@ -5198,8 +5306,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');
@@ -5244,200 +5352,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') {
@@ -5618,65 +5532,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);
-        }
     }
 
     /**