@liedekef/ftable 1.1.1 → 1.1.3

package/CHANGES.md

@@ -1,3 +1,9 @@
+= 1.1.3 (2025/08/03) =
+* support fdatepicker
+
+= 1.1.2 (2025/08/01) =
+* support defaultDateLocale
+
 = 1.1.1 (2025/08/01) =
 * Correct build and include esm
 

package/ftable.esm.js

@@ -1,7 +1,7 @@
 
 // Modern fTable - Vanilla JS Refactor
 
-const JTABLE_DEFAULT_MESSAGES = {
+const FTABLE_DEFAULT_MESSAGES = {
     serverCommunicationError: 'An error occurred while communicating to the server.',
     loadingMessage: 'Loading records...',
     noDataAvailable: 'No data available!',
@@ -904,6 +904,10 @@ class FTableFormBuilder {
             case 'file':
                 input = this.createFileInput(fieldName, field, value);
                 break;
+            case 'date':
+            case 'datetime-local':
+                input = this.createDateInput(fieldName, field, value);
+                break;
             default:
                 input = this.createTypedInput(fieldName, field, value);
         }
@@ -948,14 +952,65 @@ class FTableFormBuilder {
         return container;
     }
 
+    createDateInput(fieldName, field, value) {
+        // Check if FDatepicker is available
+        if (typeof FDatepicker !== 'undefined') {
+            const dateFormat = field.dateFormat || this.options.defaultDateFormat;
+
+            const container = document.createElement('div');
+            // Create hidden input
+            const hiddenInput = Object.assign(document.createElement('input'), {
+                id: 'real-' + fieldName,
+                type: 'hidden',
+                value: value || '',
+                name: fieldName
+            });
+            // Create visible input
+            const visibleInput = Object.assign(document.createElement('input'), {
+                className: field.inputClass || 'datepicker-input',
+                id: 'Edit-' + fieldName,
+                type: 'text',
+                'data-date': 'alt-' + fieldName,
+                value: value || '',
+                readOnly: true
+            });
+
+            if (value) {
+                hiddenInput.value = value;
+                visibleInput.dataset.date = value;
+            }
+
+            // Set any additional attributes
+            if (field.inputAttributes) {
+                Object.keys(field.inputAttributes).forEach(key => {
+                    visibleInput.setAttribute(key, field.inputAttributes[key]);
+                });
+            }
+
+            // Append both inputs
+            container.appendChild(hiddenInput);
+            container.appendChild(visibleInput);
+
+            // Apply FDatepicker
+            const picker = new FDatepicker(visibleInput, {
+                format: dateFormat,
+                altField: 'real-' + fieldName,
+                altFormat: 'Y-m-d'
+            });
+
+            return container;
+        } else {
+            return createTypedInput(fieldName, field, value);
+        }
+    }
+
     createTypedInput(fieldName, field, value) {
         const inputType = field.type || 'text';
         const attributes = {
             type: inputType,
             id: `Edit-${fieldName}`,
             placeholder: field.placeholder || '',
-            value: value || '',
-            class: field.inputClass || ''
+            value: value || ''
         };
 
         // extra check for name and multiple
@@ -975,22 +1030,10 @@ class FTableFormBuilder {
         }
         attributes.name = name;
 
-        // Handle required attribute
-        if (field.required) {
-            attributes.required = 'required';
-        }
-
-        // Handle readonly attribute
-        if (field.readonly) {
-            attributes.readonly = 'readonly';
-        }
-
-        // Handle disabled attribute
-        if (field.disabled) {
-            attributes.disabled = 'disabled';
-        }
-
-        const input = FTableDOMHelper.create('input', { attributes });
+        const input = FTableDOMHelper.create('input', {
+            className: field.inputClass || '',
+            attributes: attributes
+        });
 
         // Prevent form submit on Enter, trigger change instead
         input.addEventListener('keypress', (e) => {
@@ -1237,18 +1280,6 @@ class FTableFormBuilder {
         return wrapper;
     }
 
-    createDateInput(fieldName, field, value) {
-        return FTableDOMHelper.create('input', {
-            attributes: {
-                type: 'date',
-                name: fieldName,
-                id: `Edit-${fieldName}`,
-                class: field.inputClass || '',
-                value: value || ''
-            }
-        });
-    }
-
     populateSelectOptions(select, options, selectedValue) {
         select.innerHTML = ''; // Clear existing options
 
@@ -1331,6 +1362,7 @@ class FTable extends FTableEventEmitter {
         }
         
         this.options = this.mergeOptions(options);
+        this.verifyOptions();
         this.logger = new FTableLogger(this.options.logLevel);
         this.userPrefs = new FTableUserPreferences('', this.options.saveUserPreferencesMethod);
         this.formBuilder = new FTableFormBuilder(this.options, this);
@@ -1365,15 +1397,18 @@ class FTable extends FTableEventEmitter {
             fields: {},
             animationsEnabled: true,
             loadingAnimationDelay: 1000,
-            defaultDateFormat: 'yyyy-mm-dd',
+            defaultDateLocale: 'en',
+            defaultDateFormat: 'm/d/Y',
             saveUserPreferences: true,
             saveUserPreferencesMethod: 'localStorage',
             defaultSorting: '',
+            tableReset: false,
             
             // Paging
             paging: false,
             pageList: 'normal',
             pageSize: 10,
+            pageSizes: [10, 25, 50, 100],
             gotoPageArea: 'combobox',
             
             // Sorting
@@ -1397,7 +1432,7 @@ class FTable extends FTableEventEmitter {
             listCache: 30000, // or listCache: 30000 (duration in ms)
 
             // Messages
-            messages: { ...JTABLE_DEFAULT_MESSAGES } // Safe copy
+            messages: { ...FTABLE_DEFAULT_MESSAGES } // Safe copy
         };
 
         return this.deepMerge(defaults, options);
@@ -1417,9 +1452,15 @@ class FTable extends FTableEventEmitter {
         return result;
     }
 
+    verifyOptions() {
+        if (this.options.pageSize && !this.options.pageSizes.includes(this.options.pageSize)) {
+            this.options.pageSize = this.options.pageSizes[0];
+        }
+    }
+
     // Public
     static setMessages(customMessages) {
-        Object.assign(JTABLE_DEFAULT_MESSAGES, customMessages);
+        Object.assign(FTABLE_DEFAULT_MESSAGES, customMessages);
     }
 
     init() {
@@ -1886,16 +1927,49 @@ class FTable extends FTableEventEmitter {
                 if (!field.type && field.options) {
                     field.type = 'select';
                 }
+                const fieldSearchName = 'ftable-toolbarsearch-' + fieldName;
 
                 switch (field.type) {
                     case 'date':
-                        input = FTableDOMHelper.create('input', {
-                            attributes: {
-                                type: 'date',
-                                'data-field-name': fieldName,
-                                class: 'ftable-toolbarsearch'
-                            }
-                        });
+                    case 'datetime-local':
+                        if (typeof FDatepicker !== 'undefined') {
+                            const dateFormat = field.dateFormat || this.options.defaultDateFormat;
+                            input = document.createElement('div');
+                            // Create hidden input
+                            const hiddenInput = Object.assign(document.createElement('input'), {
+                                id: 'ftable-toolbarsearch-extra-' + fieldName,
+                                type: 'hidden',
+                                name: fieldName,
+                                className: 'ftable-toolbarsearch-extra'
+                            });
+                            // Create visible input
+                            const visibleInput = Object.assign(document.createElement('input'), {
+                                className: 'ftable-toolbarsearch',
+                                id: 'ftable-toolbarsearch-' + fieldName,
+                                type: 'text',
+                                readOnly: true
+                            });
+                            // Append both inputs
+                            input.appendChild(hiddenInput);
+                            input.appendChild(visibleInput);
+
+                            // Apply FDatepicker
+                            const picker = new FDatepicker(visibleInput, {
+                                format: dateFormat,
+                                altField: 'ftable-toolbarsearch-extra-' + fieldName,
+                                altFormat: 'Y-m-d'
+                            });
+
+                        } else {
+                            input = FTableDOMHelper.create('input', {
+                                className: 'ftable-toolbarsearch',
+                                attributes: {
+                                    type: 'date',
+                                    'data-field-name': fieldName,
+                                    id: fieldSearchName,
+                                }
+                            });
+                        }
                         break;
 
                     case 'checkbox':
@@ -1903,10 +1977,11 @@ class FTable extends FTableEventEmitter {
                             input = await this.createSelectForSearch(fieldName, field, true);
                         } else {
                             input = FTableDOMHelper.create('input', {
+                                className: 'ftable-toolbarsearch',
                                 attributes: {
                                     type: 'text',
                                     'data-field-name': fieldName,
-                                    class: 'ftable-toolbarsearch',
+                                    id: fieldSearchName,
                                     placeholder: 'Search...'
                                 }
                             });
@@ -1918,10 +1993,11 @@ class FTable extends FTableEventEmitter {
                             input = await this.createSelectForSearch(fieldName, field, false);
                         } else {
                             input = FTableDOMHelper.create('input', {
+                                className: 'ftable-toolbarsearch',
                                 attributes: {
                                     type: 'text',
                                     'data-field-name': fieldName,
-                                    class: 'ftable-toolbarsearch',
+                                    id: fieldSearchName,
                                     placeholder: 'Search...'
                                 }
                             });
@@ -1930,10 +2006,11 @@ class FTable extends FTableEventEmitter {
 
                     default:
                         input = FTableDOMHelper.create('input', {
+                            className: 'ftable-toolbarsearch',
                             attributes: {
                                 type: 'text',
                                 'data-field-name': fieldName,
-                                class: 'ftable-toolbarsearch',
+                                id: fieldSearchName,
                                 placeholder: 'Search...'
                             }
                         });
@@ -1986,9 +2063,11 @@ class FTable extends FTableEventEmitter {
     }
 
     async createSelectForSearch(fieldName, field, isCheckboxValues) {
+        const fieldSearchName = 'ftable-toolbarsearch-' + fieldName;
         const select = FTableDOMHelper.create('select', {
             attributes: {
                 'data-field-name': fieldName,
+                id: fieldSearchName,
                 class: 'ftable-toolbarsearch'
             }
         });
@@ -2212,7 +2291,7 @@ class FTable extends FTableEventEmitter {
             if (Array.isArray(state.sorting)) {
                 this.state.sorting = state.sorting;
             }
-            if (state.pageSize) {
+            if (state.pageSize && this.options.pageSizes.includes(state.pageSize)) {
                 this.state.pageSize = state.pageSize;
             }
         } catch (error) {
@@ -2382,9 +2461,6 @@ class FTable extends FTableEventEmitter {
         this.createToolbarButtons();
         this.createCustomToolbarItems();
         
-        // Handle window unload
-        this.handlePageUnload();
-        
         // Keyboard shortcuts
         this.bindKeyboardEvents();
         
@@ -2671,20 +2747,6 @@ class FTable extends FTableEventEmitter {
         });
     }
 
-    handlePageUnload() {
-        let unloadingPage = false;
-        
-        window.addEventListener('beforeunload', () => {
-            unloadingPage = true;
-        });
-        
-        window.addEventListener('unload', () => {
-            unloadingPage = false;
-        });
-        
-        this.unloadingPage = () => unloadingPage;
-    }
-
     bindKeyboardEvents() {
         if (this.options.selecting) {
             this.shiftKeyDown = false;
@@ -3012,7 +3074,19 @@ class FTable extends FTableEventEmitter {
         }
 
         if (field.type === 'date' && value) {
-            return this.formatDate(value, field.dateFormat);
+            if (typeof FDatepicker !== 'undefined') {
+                return FDatepicker.formatDate(this._parseDate(value), field.dateFormat || this.options.defaultDateFormat);
+            } else {
+                return this.formatDate(value, field.dateLocale || this.options.defaultDateLocale || 'en' );
+            }
+        }
+
+        if (field.type === 'datetime-local' && value) {
+            if (typeof FDatepicker !== 'undefined') {
+                return FDatepicker.formatDate(this._parseDate(value), field.dateFormat || this.options.defaultDateFormat);
+            } else {
+                return this.formatDateTime(value, field.dateLocale || this.options.defaultDateLocale || 'en' );
+            }
         }
 
         if (field.type === 'checkbox') {
@@ -3027,18 +3101,53 @@ class FTable extends FTableEventEmitter {
         return value || '';
     }
 
+    _parseDate(dateString) {
+        if (dateString.includes('Date')) { // Format: /Date(1320259705710)/
+            return new Date(
+                parseInt(dateString.substr(6), 10)
+            );
+        } else if (dateString.length == 10) { // Format: 2011-01-01
+            return new Date(
+                parseInt(dateString.substr(0, 4), 10),
+                parseInt(dateString.substr(5, 2), 10) - 1,
+                parseInt(dateString.substr(8, 2), 10)
+            );
+        } else if (dateString.length == 19) { // Format: 2011-01-01 20:32:42
+            return new Date(
+                parseInt(dateString.substr(0, 4), 10),
+                parseInt(dateString.substr(5, 2), 10) - 1,
+                parseInt(dateString.substr(8, 2), 10),
+                parseInt(dateString.substr(11, 2), 10),
+                parseInt(dateString.substr(14, 2), 10),
+                parseInt(dateString.substr(17, 2), 10)
+            );
+        } else {
+            return new Date(dateString);
+        }
+    }
+
     formatDate(dateValue, format) {
         if (!dateValue) return '';
-        
-        const date = new Date(dateValue);
-        if (isNaN(date.getTime())) return dateValue;
 
-        // Simple date formatting - could be enhanced with a proper date library
-        const year = date.getFullYear();
-        const month = String(date.getMonth() + 1).padStart(2, '0');
-        const day = String(date.getDate()).padStart(2, '0');
-        
-        return `${year}-${month}-${day}`;
+        const date = this._parseDate(dateValue);
+        try {
+            if (isNaN(date.getTime())) return dateValue;
+            return date.toLocaleDateString(format,{ year: "numeric", month: "2-digit", day: "2-digit" });
+        } catch {
+            return dateValue;
+        }
+    }
+
+    formatDateTime(dateValue, format) {
+        if (!dateValue) return '';
+
+        const date = this._parseDate(dateValue);
+        try {
+            if (isNaN(date.getTime())) return dateValue;
+            return date.toLocaleString(format);
+        } catch {
+            return dateValue;
+        }
     }
 
     getCheckboxText(fieldName, value) {
@@ -4060,55 +4169,6 @@ class FTable extends FTableEventEmitter {
         });
     }
 
-    // Data validation
-    validateRecord(record, operation = 'create') {
-        const errors = [];
-
-        Object.entries(this.options.fields).forEach(([fieldName, field]) => {
-            const value = record[fieldName];
-            
-            // Required field validation
-            if (field.required && (!value || value.toString().trim() === '')) {
-                errors.push(`${field.title || fieldName} is required`);
-            }
-
-            // Type validation
-            if (value && field.validate && typeof field.validate === 'function') {
-                const validationResult = field.validate(value, record);
-                if (validationResult !== true) {
-                    errors.push(validationResult || `${field.title || fieldName} is invalid`);
-                }
-            }
-
-            // Built-in type validations
-            if (value) {
-                switch (field.type) {
-                    case 'email':
-                        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-                        if (!emailRegex.test(value)) {
-                            errors.push(`${field.title || fieldName} must be a valid email`);
-                        }
-                        break;
-                    case 'number':
-                        if (isNaN(value)) {
-                            errors.push(`${field.title || fieldName} must be a number`);
-                        }
-                        break;
-                    case 'date':
-                        if (isNaN(new Date(value).getTime())) {
-                            errors.push(`${field.title || fieldName} must be a valid date`);
-                        }
-                        break;
-                }
-            }
-        });
-
-        return {
-            isValid: errors.length === 0,
-            errors
-        };
-    }
-
     // Advanced search functionality
     enableSearch(options = {}) {
         const searchOptions = {