@liedekef/ftable 1.0.0 → 1.1.1

package/ftable.js

@@ -1,4 +1,10 @@
-// Modern fTable - Vanilla JS Refactor
+
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.FTable = factory());
+}(this, (function () {
+    // Modern fTable - Vanilla JS Refactor
 
 const JTABLE_DEFAULT_MESSAGES = {
     serverCommunicationError: 'An error occurred while communicating to the server.',
@@ -653,10 +659,6 @@ class FTableFormBuilder {
             }
         });
 
-        /*if (this.options.formCreated) {
-            this.options.formCreated(form, formType, record);
-        }*/
-
         // Set up dependency listeners after all fields are created
         this.setupDependencyListeners(form);
 
@@ -1335,7 +1337,7 @@ class FTable extends FTableEventEmitter {
         
         this.options = this.mergeOptions(options);
         this.logger = new FTableLogger(this.options.logLevel);
-        this.userPrefs = new FTableUserPreferences('', this.options.saveFTableUserPreferencesMethod);
+        this.userPrefs = new FTableUserPreferences('', this.options.saveUserPreferencesMethod);
         this.formBuilder = new FTableFormBuilder(this.options, this);
         
         this.state = {
@@ -1351,6 +1353,7 @@ class FTable extends FTableEventEmitter {
         this.elements = {};
         this.modals = {};
         this.searchTimeout = null; // For debouncing
+        this.lastSortEvent = null;
         this._recalculatedOnce = false;
 
         // store it on the DOM too, so people can access it
@@ -1368,23 +1371,28 @@ class FTable extends FTableEventEmitter {
             animationsEnabled: true,
             loadingAnimationDelay: 1000,
             defaultDateFormat: 'yyyy-mm-dd',
-            saveFTableUserPreferences: true,
-            saveFTableUserPreferencesMethod: 'localStorage',
+            saveUserPreferences: true,
+            saveUserPreferencesMethod: 'localStorage',
             defaultSorting: '',
             
             // Paging
             paging: false,
+            pageList: 'normal',
             pageSize: 10,
             gotoPageArea: 'combobox',
             
             // Sorting
             sorting: false,
             multiSorting: false,
+            multiSortingCtrlKey: true,
             
             // Selection
             selecting: false,
             multiselect: false,
 
+            // child tables
+            openChildAsAccordion: false,
+
             // Toolbar search
             toolbarsearch: false, // Enable/disable toolbar search row
             toolbarreset: true,   // Show reset button
@@ -1621,6 +1629,9 @@ class FTable extends FTableEventEmitter {
                 if (field.list === undefined) {
                     field.list = true;
                 }
+                if (field.sorting === undefined) {
+                    field.sorting = true;
+                }
                 if (!field.hasOwnProperty('visibility')) {
                     field.visibility = 'visible';
                 }
@@ -1748,9 +1759,9 @@ class FTable extends FTableEventEmitter {
         });
 
         // Add selecting column if enabled
-        if (this.options.selecting) {
+        if (this.options.selecting && this.options.selectingCheckboxes) {
             const selectHeader = FTableDOMHelper.create('th', {
-                className: 'ftable-column-header ftable-column-header-select',
+                className: `ftable-column-header ftable-column-header-select`,
                 parent: headerRow
             });
 
@@ -1770,7 +1781,7 @@ class FTable extends FTableEventEmitter {
         this.columnList.forEach(fieldName => {
             const field = this.options.fields[fieldName];
             const th = FTableDOMHelper.create('th', {
-                className: 'ftable-column-header',
+                className: `ftable-column-header ${field.listClass || ''} ${field.listClassHeader || ''}`,
                 attributes: { 'data-field-name': fieldName },
                 parent: headerRow
             });
@@ -1785,6 +1796,10 @@ class FTable extends FTableEventEmitter {
                 parent: th
             });
 
+            if (field.tooltip) {
+                container.setAttribute('title', field.tooltip);
+            }
+
             FTableDOMHelper.create('span', {
                 className: 'ftable-column-header-text',
                 text: field.title || fieldName,
@@ -1794,7 +1809,12 @@ class FTable extends FTableEventEmitter {
             // Make sortable if enabled
             if (this.options.sorting && field.sorting !== false) {
                 FTableDOMHelper.addClass(th, 'ftable-column-header-sortable');
-                th.addEventListener('click', () => this.sortByColumn(fieldName));
+                th.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    // Store event for multiSortingCtrlKey logic
+                    this.lastSortEvent = e;
+                    this.sortByColumn(fieldName);
+                });
             }
 
             // Add resize handler if column resizing is enabled
@@ -1845,7 +1865,7 @@ class FTable extends FTableEventEmitter {
         });
 
         // Add empty cell for selecting column if enabled
-        if (this.options.selecting) {
+        if (this.options.selecting && this.options.selectingCheckboxes) {
             FTableDOMHelper.create('th', { parent: searchRow });
         }
 
@@ -2131,14 +2151,14 @@ class FTable extends FTableEventEmitter {
             document.removeEventListener('mouseup', handleMouseUp);
             
             // Save column width preference if enabled
-            if (this.options.saveFTableUserPreferences) {
+            if (this.options.saveUserPreferences) {
                 this.saveColumnSettings();
             }
         };
     }
 
     saveColumnSettings() {
-        if (!this.options.saveFTableUserPreferences) return;
+        if (!this.options.saveUserPreferences) return;
         
         const settings = {};
         this.columnList.forEach(fieldName => {
@@ -2156,7 +2176,7 @@ class FTable extends FTableEventEmitter {
     }
 
     saveState() {
-        if (!this.options.saveFTableUserPreferences) return;
+        if (!this.options.saveUserPreferences) return;
 
         const state = {
             sorting: this.state.sorting,
@@ -2167,7 +2187,7 @@ class FTable extends FTableEventEmitter {
     }
 
     loadColumnSettings() {
-        if (!this.options.saveFTableUserPreferences) return;
+        if (!this.options.saveUserPreferences) return;
         
         const settingsJson = this.userPrefs.get('column-settings');
         if (!settingsJson) return;
@@ -2187,7 +2207,7 @@ class FTable extends FTableEventEmitter {
     }
 
     loadState() {
-        if (!this.options.saveFTableUserPreferences) return;
+        if (!this.options.saveUserPreferences) return;
 
         const stateJson = this.userPrefs.get('table-state');
         if (!stateJson) return;
@@ -2266,9 +2286,6 @@ class FTable extends FTableEventEmitter {
                     onClick: () => {
                         this.modals.addRecord.close();
                         this.emit('formClosed', { form: this.currentForm, formType: 'create', record: null });
-                        /*if (this.options.formClosed) {
-                            this.options.formClosed(this.currentForm, 'create', null);
-                        }*/
                     }
                 },
                 {
@@ -2621,6 +2638,11 @@ class FTable extends FTableEventEmitter {
                 parent: this.elements.toolbarDiv
             });
 
+            // Add title/tooltip if provided
+            if (item.tooltip) {
+                button.setAttribute('title', item.tooltip);
+            }
+
             // Add icon if provided
             if (item.icon) {
                 const img = FTableDOMHelper.create('img', {
@@ -2683,12 +2705,12 @@ class FTable extends FTableEventEmitter {
     }
 
     setupFTableUserPreferences() {
-        if (this.options.saveFTableUserPreferences) {
+        if (this.options.saveUserPreferences) {
             const prefix = this.userPrefs.generatePrefix(
                 this.options.tableId || '',
                 this.fieldList
             );
-            this.userPrefs = new FTableUserPreferences(prefix, this.options.saveFTableUserPreferencesMethod);
+            this.userPrefs = new FTableUserPreferences(prefix, this.options.saveUserPreferencesMethod);
             
             // Load saved column settings
             this.loadState();
@@ -2860,7 +2882,7 @@ class FTable extends FTableEventEmitter {
         row.recordData = record;
 
         // Add selecting checkbox if enabled
-        if (this.options.selecting) {
+        if (this.options.selecting && this.options.selectingCheckboxes) {
             this.addSelectingCell(row);
         }
 
@@ -3085,10 +3107,7 @@ class FTable extends FTableEventEmitter {
                 this.modals.addRecord.close();
 
                 // Call formClosed
-                // this.emit('formClosed', { form: this.currentForm, formType: 'create', record: null });
-                if (this.options.formClosed) {
-                    this.options.formClosed(this.currentForm, 'create', null);
-                }
+                this.emit('formClosed', { form: this.currentForm, formType: 'create', record: null });
 
                 if (result.Message) {
                     this.showInfo(result.Message);
@@ -3135,17 +3154,14 @@ class FTable extends FTableEventEmitter {
                 this.modals.editRecord.close();
 
                 // Call formClosed
-                // this.emit('formClosed', { form: this.currentForm, formType: 'edit', record: result.Record || formData });
-                if (this.options.formClosed) {
-                    this.options.formClosed(this.currentForm, 'edit', this.currentEditingRow.recordData);
-                }
+                this.emit('formClosed', { form: this.currentForm, formType: 'edit', record: this.currentEditingRow.recordData });
 
                 // Update the row with new data
                 this.updateRowData(this.currentEditingRow, result.Record || formData);
                 if (result.Message) {
                     this.showInfo(result.Message);
                 }
-                this.emit('recordUpdated', { record: result.Record || formData });
+                this.emit('recordUpdated', { record: result.Record || formData, row: this.currentEditingRow });
             } else {
                 this.showError(result.Message || 'Update failed');
             }
@@ -3451,25 +3467,42 @@ class FTable extends FTableEventEmitter {
 
     // Sorting Methods
     sortByColumn(fieldName) {
+        const field = this.options.fields[fieldName];
+
+        if (!field || field.sorting === false) return;
+
         const existingSortIndex = this.state.sorting.findIndex(s => s.fieldName === fieldName);
-        
-        if (!this.options.multiSorting) {
-            this.state.sorting = [];
-        }
-        
+        let isSorted = true;
+        let newDirection = 'ASC';
         if (existingSortIndex >= 0) {
-            const currentSort = this.state.sorting[existingSortIndex];
-            if (currentSort.direction === 'ASC') {
-                currentSort.direction = 'DESC';
+            const wasAsc = this.state.sorting[existingSortIndex].direction === 'ASC';
+            if (wasAsc) {
+                newDirection = 'DESC';
+                this.state.sorting[existingSortIndex].direction = newDirection;
             } else {
-                this.state.sorting.splice(existingSortIndex, 1);
+                this.state.sorting.splice(existingSortIndex,1);
+                isSorted = false;
             }
         } else {
-            this.state.sorting.push({ fieldName, direction: 'ASC' });
+            this.state.sorting.push({ fieldName, direction: newDirection });
         }
-        
+
+        // Handle multiSortingCtrlKey: did user press Ctrl/Cmd?
+        const isCtrlPressed = this.lastSortEvent?.ctrlKey || this.lastSortEvent?.metaKey; // metaKey for Mac
+
+        if (this.options.multiSorting) {
+            // If multiSorting is enabled, respect multiSortingCtrlKey
+            if (this.options.multiSortingCtrlKey && !isCtrlPressed) {
+                // Not using Ctrl → treat as single sort (clear others)
+                this.state.sorting = isSorted ? [{ fieldName, direction: newDirection }] : [];
+            }
+        } else {
+            // If multiSorting is disabled, always clear other sorts
+            this.state.sorting = isSorted ? [{ fieldName, direction: newDirection }] : [];
+        }
+
         this.updateSortingHeaders();
-        this.load(); // Reload with new sorting
+        this.load();
         this.saveState();
     }
 
@@ -3528,27 +3561,29 @@ class FTable extends FTableEventEmitter {
         this.createPageButton('‹', this.state.currentPage - 1, this.state.currentPage === 1, 'ftable-page-number-previous');
 
         // Page numbers
-        const pageNumbers = this.calculatePageNumbers(totalPages);
-        let lastNumber = 0;
-        
-        pageNumbers.forEach(pageNum => {
-            if (pageNum - lastNumber > 1) {
-                FTableDOMHelper.create('span', {
-                    className: 'ftable-page-number-space',
-                    text: '...',
-                    parent: this.elements.pagingListArea
-                });
-            }
-            
-            this.createPageButton(
-                pageNum.toString(), 
-                pageNum, 
-                false, 
-                pageNum === this.state.currentPage ? 'ftable-page-number ftable-page-number-active' : 'ftable-page-number'
-            );
-            
-            lastNumber = pageNum;
-        });
+        if (this.options.pageList == 'normal') {
+            const pageNumbers = this.calculatePageNumbers(totalPages);
+            let lastNumber = 0;
+
+            pageNumbers.forEach(pageNum => {
+                if (pageNum - lastNumber > 1) {
+                    FTableDOMHelper.create('span', {
+                        className: 'ftable-page-number-space',
+                        text: '...',
+                        parent: this.elements.pagingListArea
+                    });
+                }
+
+                this.createPageButton(
+                    pageNum.toString(), 
+                    pageNum, 
+                    false, 
+                    pageNum === this.state.currentPage ? 'ftable-page-number ftable-page-number-active' : 'ftable-page-number'
+                );
+
+                lastNumber = pageNum;
+            });
+        }
 
         // Next and Last buttons
         this.createPageButton('›', this.state.currentPage + 1, this.state.currentPage >= totalPages, 'ftable-page-number-next');
@@ -3956,7 +3991,7 @@ class FTable extends FTableEventEmitter {
         if (columnIndex >= 0) {
             // Calculate actual column index (accounting for selecting column)
             let actualIndex = columnIndex + 1; // CSS nth-child is 1-based
-            if (this.options.selecting) {
+            if (this.options.selecting && this.options.selectingCheckboxes) {
                 actualIndex += 1; // Account for selecting column
             }
             
@@ -3973,7 +4008,7 @@ class FTable extends FTableEventEmitter {
         }
 
         // Save column settings
-        if (this.options.saveFTableUserPreferences) {
+        if (this.options.saveUserPreferences) {
             this.saveColumnSettings();
             this.saveState(); // sorting might affect state
         }
@@ -4171,27 +4206,6 @@ class FTable extends FTableEventEmitter {
         });
     }
 
-    // Performance optimization for large datasets
-    enableVirtualScrolling(options = {}) {
-        const virtualOptions = {
-            rowHeight: 40,
-            overscan: 5,
-            ...options
-        };
-
-        // This would implement virtual scrolling for performance with large datasets
-        // Simplified version - full implementation would be more complex
-        this.virtualScrolling = {
-            enabled: true,
-            ...virtualOptions,
-            visibleRange: { start: 0, end: 0 },
-            scrollContainer: null
-        };
-
-        // Replace table body with virtual scroll container
-        // Implementation would calculate visible rows and only render those
-    }
-
     // Real-time updates via WebSocket
     enableRealTimeUpdates(websocketUrl) {
         if (!websocketUrl) return;
@@ -4315,6 +4329,15 @@ class FTable extends FTableEventEmitter {
         return this;
     }
 
+    editRecordByKey(keyValue) {
+        const row = this.getRowByKey(keyValue);
+        if (row) {
+            this.editRecord(row);
+        } else {
+            this.showError(`Record with key '${keyValue}' not found`);
+        }
+    }
+
     async editRecordViaAjax(recordId, url, params = {}) {
         try {
             // Get the actual key field name (e.g., 'asset_id', 'user_id', etc.)
@@ -4354,6 +4377,10 @@ class FTable extends FTableEventEmitter {
     }
     
     openChildTable(parentRow, childOptions, onInit) {
+        // Close any open child tables if accordion mode
+        if (this.options.openChildAsAccordion) {
+            this.closeAllChildTables();
+        }
         // Prevent multiple child tables
         this.closeChildTable(parentRow);
 
@@ -4422,6 +4449,31 @@ class FTable extends FTableEventEmitter {
         }
     }
 
+    closeAllChildTables() {
+        Object.values(this.elements.tableRows).forEach(row => {
+            if (row.childTable) {
+                this.closeChildTable(row);
+            }
+        });
+    }
+
+    getSortingInfo() {
+        // Build sorted fields list with translated directions
+        const messages = this.options.messages || {};
+        const sortingInfo = this.state.sorting.map(s => {
+            const field = this.options.fields[s.fieldName];
+            const title = field?.title || s.fieldName;
+
+            // Translate direction
+            const directionText = s.direction === 'ASC'
+                ? (messages.ascending || 'ascending')
+                : (messages.descending || 'descending');
+
+            return `${title} (${directionText})`;
+        }).join(', ');
+        return sortingInfo;
+    }
+
     renderSortingInfo() {
         if (!this.options.sortingInfoSelector || !this.options.sorting) return;
 
@@ -4443,20 +4495,10 @@ class FTable extends FTableEventEmitter {
         }
 
         // Build sorted fields list with translated directions
-        const sortedItems = this.state.sorting.map(s => {
-            const field = this.options.fields[s.fieldName];
-            const title = field?.title || s.fieldName;
-
-            // Translate direction
-            const directionText = s.direction === 'ASC'
-                ? (messages.ascending || 'ascending')
-                : (messages.descending || 'descending');
-
-            return `${title} (${directionText})`;
-        }).join(', ');
+        const sortingInfo = this.getSortingInfo();
 
         // Combine with prefix and suffix
-        container.innerHTML = `${prefix}${sortedItems}${suffix}`;
+        container.innerHTML = `${prefix}${sortingInfo}${suffix}`;
 
         // Add reset sorting button
         if (this.state.sorting.length > 0) {
@@ -4747,3 +4789,6 @@ table.load();
 */
 
 window.FTable = FTable;
+
+    return FTable;
+})));