@liedekef/ftable 1.1.48 → 1.1.50

package/ftable.esm.js

@@ -1374,10 +1374,10 @@ class FTableFormBuilder {
 
         // extra check for name and multiple
         let name = fieldName;
+        let hasMultiple = false;
+        
         // Apply inputAttributes from field definition
         if (field.inputAttributes) {
-            let hasMultiple = false;
-
             const parsed = this.parseInputAttributes(field.inputAttributes);
             Object.assign(attributes, parsed);
 
@@ -1387,6 +1387,13 @@ class FTableFormBuilder {
                 name = `${fieldName}[]`;
             }
         }
+        
+        // If multiple select, create custom UI
+        if (hasMultiple) {
+            return this.createCustomMultiSelect(fieldName, field, value, attributes, name);
+        }
+        
+        // Standard single select
         attributes.name = name;
 
         const select = FTableDOMHelper.create('select', {
@@ -1403,6 +1410,297 @@ class FTableFormBuilder {
         return select;
     }
 
+    createCustomMultiSelect(fieldName, field, value, attributes, name) {
+        // Create container
+        const container = FTableDOMHelper.create('div', {
+            className: 'ftable-multiselect-container',
+            attributes: { 'data-field-name': fieldName }
+        });
+
+        // Create hidden input to store selected values
+        const hiddenInput = FTableDOMHelper.create('input', {
+            type: 'hidden',
+            name: name,
+            id: `Edit-${fieldName}`,
+            value: Array.isArray(value) ? value.join(',') : value || ''
+        });
+        container.appendChild(hiddenInput);
+
+        // Create display area
+        const display = FTableDOMHelper.create('div', {
+            className: 'ftable-multiselect-display',
+            parent: container
+        });
+
+        const selectedDisplay = FTableDOMHelper.create('div', {
+            className: 'ftable-multiselect-selected',
+            parent: display
+        });
+
+        const placeholderText = field.placeholder || this.options.messages.multiSelectPlaceholder || 'Click to select options...';
+        const placeholder = FTableDOMHelper.create('span', {
+            className: 'ftable-multiselect-placeholder',
+            textContent: placeholderText,
+            parent: selectedDisplay
+        });
+
+        // Create dropdown toggle button
+        const toggleBtn = FTableDOMHelper.create('button', {
+            type: 'button',
+            className: 'ftable-multiselect-toggle',
+            innerHTML: '▼',
+            parent: display
+        });
+
+        // Dropdown and overlay will be created on demand and appended to body
+        let dropdown = null;
+        let dropdownOverlay = null;
+
+        // Store selected values and checkbox references
+        const selectedValues = new Set(
+            Array.isArray(value) ? value : 
+            value ? value.toString().split(',').filter(v => v) : []
+        );
+        const checkboxMap = new Map(); // Map of value -> checkbox element
+
+        // Function to update display
+        const updateDisplay = () => {
+            selectedDisplay.innerHTML = '';
+            
+            if (selectedValues.size === 0) {
+                placeholder.textContent = placeholderText;
+                selectedDisplay.appendChild(placeholder);
+            } else {
+                const selectedArray = Array.from(selectedValues);
+                const optionsMap = new Map();
+                
+                // Build options map
+                if (field.options) {
+                    const options = Array.isArray(field.options) ? field.options : 
+                        Object.entries(field.options).map(([k, v]) => ({Value: k, DisplayText: v}));
+                    
+                    options.forEach(opt => {
+                        const val = opt.Value !== undefined ? opt.Value : 
+                            opt.value !== undefined ? opt.value : opt;
+                        const text = opt.DisplayText || opt.text || opt;
+                        optionsMap.set(val.toString(), text);
+                    });
+                }
+                
+                selectedArray.forEach(val => {
+                    const tag = FTableDOMHelper.create('span', {
+                        className: 'ftable-multiselect-tag',
+                        parent: selectedDisplay
+                    });
+                    
+                    FTableDOMHelper.create('span', {
+                        className: 'ftable-multiselect-tag-text',
+                        textContent: optionsMap.get(val.toString()) || val,
+                        parent: tag
+                    });
+                    
+                    const removeBtn = FTableDOMHelper.create('span', {
+                        className: 'ftable-multiselect-tag-remove',
+                        innerHTML: '×',
+                        parent: tag
+                    });
+                    
+                    removeBtn.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        selectedValues.delete(val);
+                        // Update the checkbox state
+                        const checkbox = checkboxMap.get(val.toString());
+                        if (checkbox) {
+                            checkbox.checked = false;
+                        }
+                        updateDisplay();
+                        hiddenInput.value = Array.from(selectedValues).join(',');
+                    });
+                });
+            }
+            
+            hiddenInput.value = Array.from(selectedValues).join(',');
+        };
+
+        // Function to close dropdown
+        const closeDropdown = () => {
+            if (dropdown) {
+                dropdown.remove();
+                dropdown = null;
+            }
+            if (dropdownOverlay) {
+                dropdownOverlay.remove();
+                dropdownOverlay = null;
+            }
+            if (container._cleanupHandlers) {
+                container._cleanupHandlers();
+                container._cleanupHandlers = null;
+            }
+        };
+
+        // Function to position dropdown
+        const positionDropdown = () => {
+            if (!dropdown) return;
+
+            const rect = display.getBoundingClientRect();
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+
+            let left = rect.left + scrollLeft;
+            let top = rect.bottom + scrollTop + 4; // 4px gap
+
+            dropdown.style.position = 'absolute';
+            dropdown.style.left = `${left}px`;
+            dropdown.style.top = `${top}px`;
+            dropdown.style.width = `${rect.width}px`;
+            dropdown.style.minWidth = `${rect.width}px`;
+            dropdown.style.boxSizing = 'border-box';
+            dropdown.style.zIndex = '10000';
+
+            // Adjust horizontal position if needed
+	    const dropdownRect = dropdown.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            if (dropdownRect.right > viewportWidth) {
+                left = Math.max(10, viewportWidth - dropdownRect.width - 10);
+                dropdown.style.left = `${left}px`;
+            }
+        };
+
+        // Populate options
+        const populateOptions = () => {
+            if (!field.options || !dropdown) return;
+            
+            const options = Array.isArray(field.options) ? field.options : 
+                Object.entries(field.options).map(([k, v]) => ({Value: k, DisplayText: v}));
+            
+            options.forEach(option => {
+                const optValue = option.Value !== undefined ? option.Value : 
+                    option.value !== undefined ? option.value : option;
+  
+                // Skip if value is empty
+                if (optValue == null || optValue === '') {
+                    return; // This continues to the next iteration
+                }
+
+                const optText = option.DisplayText || option.text || option;
+
+                const optionDiv = FTableDOMHelper.create('div', {
+                    className: 'ftable-multiselect-option',
+                    parent: dropdown
+                });
+                
+                const checkbox = FTableDOMHelper.create('input', {
+                    type: 'checkbox',
+                    className: 'ftable-multiselect-checkbox',
+                    checked: selectedValues.has(optValue.toString()),
+                    parent: optionDiv
+                });
+                
+                // Store checkbox reference
+                checkboxMap.set(optValue.toString(), checkbox);
+                
+                const label = FTableDOMHelper.create('label', {
+                    className: 'ftable-multiselect-label',
+                    textContent: optText,
+                    parent: optionDiv
+                });
+                
+                // Click anywhere on the option to toggle
+                optionDiv.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    
+                    if (selectedValues.has(optValue.toString())) {
+                        selectedValues.delete(optValue.toString());
+                        checkbox.checked = false;
+                    } else {
+                        selectedValues.add(optValue.toString());
+                        checkbox.checked = true;
+                    }
+                    
+                    updateDisplay();
+                });
+            });
+        };
+
+        // Toggle dropdown
+        const toggleDropdown = (e) => {
+            if (e) e.stopPropagation();
+            
+            if (dropdown) {
+                // Dropdown is open, close it
+                closeDropdown();
+            } else {
+                // Close any other open multiselect dropdowns
+                document.querySelectorAll('.ftable-multiselect-dropdown').forEach(dd => dd.remove());
+                document.querySelectorAll('.ftable-multiselect-overlay').forEach(ov => ov.remove());
+
+                // Create overlay
+                dropdownOverlay = FTableDOMHelper.create('div', {
+                    className: 'ftable-multiselect-overlay',
+                    parent: document.body
+                });
+
+                // Create dropdown
+                dropdown = FTableDOMHelper.create('div', {
+                    className: 'ftable-multiselect-dropdown',
+                    parent: document.body
+                });
+
+                // Populate options
+                populateOptions();
+
+                // Position dropdown
+                positionDropdown();
+
+                // Handle clicks outside
+                dropdownOverlay.addEventListener('click', (event) => {
+                    if (event.target === dropdownOverlay) {
+                        closeDropdown();
+                    }
+                });
+
+                // Reposition on scroll/resize
+                const repositionHandler = () => positionDropdown();
+                window.addEventListener('scroll', repositionHandler, true);
+                window.addEventListener('resize', repositionHandler);
+
+                // Store cleanup function
+                container._cleanupHandlers = () => {
+                    window.removeEventListener('scroll', repositionHandler, true);
+                    window.removeEventListener('resize', repositionHandler);
+                };
+            }
+        };
+
+        display.addEventListener('click', toggleDropdown);
+        toggleBtn.addEventListener('click', toggleDropdown);
+
+        // Clean up when container is removed from DOM
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.removedNodes.forEach((node) => {
+                    if (node === container || node.contains && node.contains(container)) {
+                        closeDropdown();
+                        observer.disconnect();
+                    }
+                });
+            });
+        });
+        
+        // Start observing once container is in the DOM
+        setTimeout(() => {
+            if (container.parentNode) {
+                observer.observe(container.parentNode, { childList: true, subtree: true });
+            }
+        }, 0);
+
+        // Initialize
+        populateOptions();
+        updateDisplay();
+
+        return container;
+    }
+
     createRadioGroup(fieldName, field, value) {
         const wrapper = FTableDOMHelper.create('div', {
             className: 'ftable-radio-group'
@@ -1722,9 +2020,6 @@ class FTable extends FTableEventEmitter {
         this.updateSortingHeaders();
         this.renderSortingInfo();
 
-        // Add essential CSS if not already present
-        //this.addEssentialCSS();
-
         // now make sure all tables have a % width
         this.initColumnWidths();
     }
@@ -1804,40 +2099,6 @@ class FTable extends FTableEventEmitter {
         return result;
     }
 
-    addEssentialCSS() {
-        // Check if our CSS is already added
-        if (document.querySelector('#ftable-essential-css')) return;
-        
-        const css = `
-            .ftable-row-animation {
-                transition: background-color 0.3s ease;
-            }
-
-            .ftable-row-added {
-                background-color: #d4edda !important;
-            }
-
-            .ftable-row-edited {
-                background-color: #d1ecf1 !important;
-            }
-
-            .ftable-row-deleted {
-                opacity: 0;
-                transform: translateY(-10px);
-                transition: opacity 0.3s ease, transform 0.3s ease;
-            }
-
-            .ftable-toolbarsearch {
-                width: 90%;
-            }
-        `;
-
-        const style = document.createElement('style');
-        style.id = 'ftable-essential-css';
-        style.textContent = css;
-        document.head.appendChild(style);
-    }
-
     createPagingUI() {
         this.elements.bottomPanel = FTableDOMHelper.create('div', {
             className: 'ftable-bottom-panel',
@@ -2308,12 +2569,19 @@ class FTable extends FTableEventEmitter {
                         container.appendChild(input.datalistElement);
                     }
 
-                    if (input.tagName === 'SELECT') {
-                        input.addEventListener('change', (e) => {
+                    // Handle event listeners - check if it's a custom multiselect container
+                    let targetElement = input;
+                    if (input.classList && input.classList.contains('ftable-multiselect-container') && input.hiddenSelect) {
+                        // It's a custom multiselect - attach listener to the hidden select
+                        targetElement = input.hiddenSelect;
+                    }
+
+                    if (targetElement.tagName === 'SELECT') {
+                        targetElement.addEventListener('change', (e) => {
                             this.handleSearchInputChange(e);
                         });
                     } else {
-                        input.addEventListener('input', (e) => {
+                        targetElement.addEventListener('input', (e) => {
                             this.handleSearchInputChange(e);
                         });
                     }
@@ -2378,12 +2646,6 @@ class FTable extends FTableEventEmitter {
         }
         attributes['data-field-name'] = name;
 
-        const select = FTableDOMHelper.create('select', {
-            attributes: attributes,
-            id: fieldSearchName,
-            className: 'ftable-toolbarsearch'
-        });
-
         let optionsSource;
         if (isCheckboxValues && field.values) {
             optionsSource = Object.entries(field.values).map(([value, displayText]) => ({
@@ -2394,6 +2656,24 @@ class FTable extends FTableEventEmitter {
             optionsSource = await this.formBuilder.getFieldOptions(fieldName);
         }
 
+        // If multiple, create custom UI
+        if (hasMultiple) {
+            return this.createCustomMultiSelectForSearch(
+                fieldSearchName, 
+                fieldName, 
+                field, 
+                optionsSource, 
+                attributes
+            );
+        }
+
+        // Standard single select
+        const select = FTableDOMHelper.create('select', {
+            attributes: attributes,
+            id: fieldSearchName,
+            className: 'ftable-toolbarsearch'
+        });
+
         // Add empty option only if first option is not already empty
         const hasEmptyFirst = optionsSource?.length > 0 &&
             (optionsSource[0].Value === '' ||
@@ -2430,6 +2710,320 @@ class FTable extends FTableEventEmitter {
         return select;
     }
 
+    createCustomMultiSelectForSearch(fieldSearchName, fieldName, field, optionsSource, attributes) {
+        // Create container
+        const container = FTableDOMHelper.create('div', {
+            className: 'ftable-multiselect-container ftable-multiselect-search ftable-toolbarsearch',
+            attributes: { 'data-field-name': attributes['data-field-name'] }
+        });
+
+        // Create hidden select to maintain compatibility with existing search logic
+        const hiddenSelect = FTableDOMHelper.create('select', {
+            id: fieldSearchName,
+            multiple: true,
+            style: 'display: none;',
+            attributes: attributes
+        });
+        container.appendChild(hiddenSelect);
+
+        // Expose hidden select for external access (needed for event listeners and reset)
+        container.hiddenSelect = hiddenSelect;
+
+        // Create display area
+        const display = FTableDOMHelper.create('div', {
+            className: 'ftable-multiselect-display',
+            parent: container
+        });
+
+        const selectedDisplay = FTableDOMHelper.create('div', {
+            className: 'ftable-multiselect-selected',
+            parent: display
+        });
+
+        const placeholderText = field.searchPlaceholder || field.placeholder || this.options.messages.multiSelectPlaceholder || 'Click to select options...';
+        const placeholder = FTableDOMHelper.create('span', {
+            className: 'ftable-multiselect-placeholder',
+            textContent: placeholderText,
+            parent: selectedDisplay
+        });
+
+        // Create dropdown toggle button
+        const toggleBtn = FTableDOMHelper.create('button', {
+            type: 'button',
+            className: 'ftable-multiselect-toggle',
+            innerHTML: '▼',
+            parent: display
+        });
+
+        // Dropdown and overlay will be created on demand and appended to body
+        let dropdown = null;
+        let dropdownOverlay = null;
+
+        // Store selected values and checkbox references
+        const selectedValues = new Set();
+        const checkboxMap = new Map(); // Map of value -> checkbox element
+
+        // Function to update display and hidden select
+        const updateDisplay = () => {
+            selectedDisplay.innerHTML = '';
+            
+            // Update hidden select
+            Array.from(hiddenSelect.options).forEach(opt => {
+                opt.selected = selectedValues.has(opt.value);
+            });
+            
+            // Trigger change event on hidden select for search functionality
+            hiddenSelect.dispatchEvent(new Event('change', { bubbles: true }));
+            
+            if (selectedValues.size === 0) {
+                placeholder.textContent = placeholderText;
+                selectedDisplay.appendChild(placeholder);
+            } else {
+                const selectedArray = Array.from(selectedValues);
+                const optionsMap = new Map();
+                
+                // Build options map
+                if (optionsSource && Array.isArray(optionsSource)) {
+                    optionsSource.forEach(opt => {
+                        const val = opt.Value !== undefined ? opt.Value : 
+                            opt.value !== undefined ? opt.value : opt;
+                        const text = opt.DisplayText || opt.text || opt;
+                        optionsMap.set(val.toString(), text);
+                    });
+                }
+                
+                selectedArray.forEach(val => {
+                    const tag = FTableDOMHelper.create('span', {
+                        className: 'ftable-multiselect-tag',
+                        parent: selectedDisplay
+                    });
+                    
+                    FTableDOMHelper.create('span', {
+                        className: 'ftable-multiselect-tag-text',
+                        textContent: optionsMap.get(val.toString()) || val,
+                        parent: tag
+                    });
+                    
+                    const removeBtn = FTableDOMHelper.create('span', {
+                        className: 'ftable-multiselect-tag-remove',
+                        innerHTML: '×',
+                        parent: tag
+                    });
+                    
+                    removeBtn.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        selectedValues.delete(val);
+                        // Update the checkbox state
+                        const checkbox = checkboxMap.get(val.toString());
+                        if (checkbox) {
+                            checkbox.checked = false;
+                        }
+                        updateDisplay();
+                    });
+                });
+            }
+        };
+
+        // Function to close dropdown
+        const closeDropdown = () => {
+            if (dropdown) {
+                dropdown.remove();
+                dropdown = null;
+            }
+            if (dropdownOverlay) {
+                dropdownOverlay.remove();
+                dropdownOverlay = null;
+            }
+            if (container._cleanupHandlers) {
+                container._cleanupHandlers();
+                container._cleanupHandlers = null;
+            }
+        };
+
+        // Function to position dropdown
+        const positionDropdown = () => {
+            if (!dropdown) return;
+
+            const rect = display.getBoundingClientRect();
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+
+            let left = rect.left + scrollLeft;
+            let top = rect.bottom + scrollTop + 4; // 4px gap
+
+            dropdown.style.position = 'absolute';
+            dropdown.style.left = `${left}px`;
+            dropdown.style.top = `${top}px`;
+            dropdown.style.width = `${rect.width}px`;
+            dropdown.style.minWidth = `${rect.width}px`;
+            dropdown.style.boxSizing = 'border-box';
+            dropdown.style.zIndex = '10000';
+
+            // Adjust horizontal position if needed
+	    const dropdownRect = dropdown.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            if (dropdownRect.right > viewportWidth) {
+                left = Math.max(10, viewportWidth - dropdownRect.width - 10);
+                dropdown.style.left = `${left}px`;
+            }
+        };
+
+        // Populate options in both hidden select and dropdown
+        const populateOptions = () => {
+            if (!optionsSource || !dropdown) return;
+            
+            const options = Array.isArray(optionsSource) ? optionsSource : 
+                Object.entries(optionsSource).map(([k, v]) => ({Value: k, DisplayText: v}));
+            
+            options.forEach(option => {
+                const optValue = option.Value !== undefined ? option.Value : 
+                    option.value !== undefined ? option.value : option;
+
+                // Skip if value is empty
+                if (optValue == null || optValue === '') {
+                    return; // This continues to the next iteration
+                }
+
+                const optText = option.DisplayText || option.text || option;
+
+                // Add to hidden select (only once)
+                if (!hiddenSelect.querySelector(`option[value="${optValue}"]`)) {
+                    FTableDOMHelper.create('option', {
+                        value: optValue,
+                        textContent: optText,
+                        parent: hiddenSelect
+                    });
+                }
+                
+                // Add to visual dropdown
+                const optionDiv = FTableDOMHelper.create('div', {
+                    className: 'ftable-multiselect-option',
+                    parent: dropdown
+                });
+                
+                const checkbox = FTableDOMHelper.create('input', {
+                    type: 'checkbox',
+                    className: 'ftable-multiselect-checkbox',
+                    parent: optionDiv
+                });
+                
+                // Set initial checked state
+                checkbox.checked = selectedValues.has(optValue.toString());
+                
+                // Store checkbox reference
+                checkboxMap.set(optValue.toString(), checkbox);
+                
+                const label = FTableDOMHelper.create('label', {
+                    className: 'ftable-multiselect-label',
+                    textContent: optText,
+                    parent: optionDiv
+                });
+                
+                // Click anywhere on the option to toggle
+                optionDiv.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    
+                    if (selectedValues.has(optValue.toString())) {
+                        selectedValues.delete(optValue.toString());
+                        checkbox.checked = false;
+                    } else {
+                        selectedValues.add(optValue.toString());
+                        checkbox.checked = true;
+                    }
+                    
+                    updateDisplay();
+                });
+            });
+        };
+
+        // Toggle dropdown
+        const toggleDropdown = (e) => {
+            if (e) e.stopPropagation();
+            
+            if (dropdown) {
+                // Dropdown is open, close it
+                closeDropdown();
+            } else {
+                // Close any other open multiselect dropdowns
+                document.querySelectorAll('.ftable-multiselect-dropdown').forEach(dd => dd.remove());
+                document.querySelectorAll('.ftable-multiselect-overlay').forEach(ov => ov.remove());
+
+                // Create overlay
+                dropdownOverlay = FTableDOMHelper.create('div', {
+                    className: 'ftable-multiselect-overlay',
+                    parent: document.body
+                });
+
+                // Create dropdown
+                dropdown = FTableDOMHelper.create('div', {
+                    className: 'ftable-multiselect-dropdown',
+                    parent: document.body
+                });
+
+                // Populate options
+                populateOptions();
+
+                // Position dropdown
+                positionDropdown();
+
+                // Handle clicks outside
+                dropdownOverlay.addEventListener('click', (event) => {
+                    if (event.target === dropdownOverlay) {
+                        closeDropdown();
+                    }
+                });
+
+                // Reposition on scroll/resize
+                const repositionHandler = () => positionDropdown();
+                window.addEventListener('scroll', repositionHandler, true);
+                window.addEventListener('resize', repositionHandler);
+
+                // Store cleanup function
+                container._cleanupHandlers = () => {
+                    window.removeEventListener('scroll', repositionHandler, true);
+                    window.removeEventListener('resize', repositionHandler);
+                };
+            }
+        };
+
+        display.addEventListener('click', toggleDropdown);
+        toggleBtn.addEventListener('click', toggleDropdown);
+
+        // Add reset method to container
+        container.resetMultiSelect = () => {
+            selectedValues.clear();
+            checkboxMap.forEach(checkbox => {
+                checkbox.checked = false;
+            });
+            closeDropdown();
+            updateDisplay();
+        };
+
+        // Clean up when container is removed from DOM
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.removedNodes.forEach((node) => {
+                    if (node === container || node.contains && node.contains(container)) {
+                        closeDropdown();
+                        observer.disconnect();
+                    }
+                });
+            });
+        });
+        
+        // Start observing once container is in the DOM
+        setTimeout(() => {
+            if (container.parentNode) {
+                observer.observe(container.parentNode, { childList: true, subtree: true });
+            }
+        }, 0);
+
+        // Initialize
+        updateDisplay();
+
+        return container;
+    }
+
     async createDatalistForSearch(fieldName, field) {
         const fieldSearchName = 'ftable-toolbarsearch-' + fieldName;
 
@@ -2520,6 +3114,14 @@ class FTable extends FTableEventEmitter {
             }
         });
 
+        // Clear custom multiselect containers
+        const multiSelectContainers = this.elements.table.querySelectorAll('.ftable-multiselect-container');
+        multiSelectContainers.forEach(container => {
+            if (typeof container.resetMultiSelect === 'function') {
+                container.resetMultiSelect();
+            }
+        });
+
         // Reload data without search parameters
         this.load();
     }