Enable Discovery debug logging for production troubleshooting
- Add DISCOVERY_LOG_LEVEL=debug - Add DISCOVERY_SHOW_PROGRESS=true - Temporary changes for debugging InitializerProcessor fixes on production
This commit is contained in:
125
resources/js/modules/form-handling/index.js
Normal file
125
resources/js/modules/form-handling/index.js
Normal file
@@ -0,0 +1,125 @@
|
||||
import { Logger } from '../../core/logger.js';
|
||||
import { FormHandler } from './FormHandler.js';
|
||||
import { FormValidator } from './FormValidator.js';
|
||||
import { FormState } from './FormState.js';
|
||||
|
||||
/**
|
||||
* Form Handling Module
|
||||
*
|
||||
* Provides comprehensive form handling with:
|
||||
* - HTML5-based validation (reads validation rules from HTML attributes)
|
||||
* - AJAX form submission with error handling
|
||||
* - Form state management (pristine, dirty, touched)
|
||||
* - Progressive enhancement
|
||||
*
|
||||
* Usage:
|
||||
* - Add data-module="form-handling" to any form element
|
||||
* - Configure via data-options attribute:
|
||||
* data-options='{"validateOnBlur": true, "ajaxSubmit": true}'
|
||||
*
|
||||
* HTML Validation Attributes Supported:
|
||||
* - required: Field is required
|
||||
* - pattern: Custom regex pattern
|
||||
* - minlength/maxlength: String length limits
|
||||
* - min/max: Number range limits
|
||||
* - type="email": Email validation
|
||||
* - type="url": URL validation
|
||||
* - data-validate: Custom validation (phone, postal-code-de, no-html)
|
||||
* - data-error-*: Custom error messages
|
||||
*/
|
||||
|
||||
const FormHandlingModule = {
|
||||
name: 'form-handling',
|
||||
|
||||
// Module-level init (called by module system)
|
||||
init(config = {}, state = null) {
|
||||
Logger.info('[FormHandling] Module initialized (ready for DOM elements)');
|
||||
// Module is now ready - no DOM operations here
|
||||
return this;
|
||||
},
|
||||
|
||||
// Element-specific init (called for individual form elements)
|
||||
initElement(element, options = {}) {
|
||||
Logger.info(`[FormHandling] Initializing on form: ${element.id || 'unnamed'}`);
|
||||
|
||||
// Default configuration
|
||||
const config = {
|
||||
validateOnSubmit: true,
|
||||
validateOnBlur: false,
|
||||
validateOnInput: false,
|
||||
showInlineErrors: true,
|
||||
preventSubmitOnError: true,
|
||||
ajaxSubmit: true,
|
||||
submitMethod: 'POST',
|
||||
enableStateTracking: true,
|
||||
enableUnsavedWarning: false,
|
||||
...options
|
||||
};
|
||||
|
||||
// Initialize form handler
|
||||
const formHandler = FormHandler.create(element, config);
|
||||
|
||||
// Store reference for later access
|
||||
element._formHandler = formHandler;
|
||||
element._formValidator = formHandler.validator;
|
||||
element._formState = formHandler.state;
|
||||
|
||||
// Enable unsaved changes warning if configured
|
||||
if (config.enableUnsavedWarning) {
|
||||
formHandler.state.enableUnsavedChangesWarning();
|
||||
}
|
||||
|
||||
// Add module-specific CSS classes
|
||||
element.classList.add('form-enhanced');
|
||||
|
||||
// Trigger initialization event
|
||||
const event = new CustomEvent('form:initialized', {
|
||||
detail: {
|
||||
handler: formHandler,
|
||||
validator: formHandler.validator,
|
||||
state: formHandler.state,
|
||||
config: config
|
||||
},
|
||||
bubbles: true
|
||||
});
|
||||
|
||||
element.dispatchEvent(event);
|
||||
|
||||
Logger.info(`[FormHandling] Successfully initialized for form: ${element.id || 'unnamed'}`);
|
||||
|
||||
return formHandler;
|
||||
},
|
||||
|
||||
// Element-specific destroy (for form elements)
|
||||
destroyElement(element) {
|
||||
if (element._formHandler) {
|
||||
element._formHandler.destroy();
|
||||
delete element._formHandler;
|
||||
delete element._formValidator;
|
||||
delete element._formState;
|
||||
}
|
||||
|
||||
element.classList.remove('form-enhanced');
|
||||
element.removeAttribute('data-enhanced');
|
||||
|
||||
Logger.info(`[FormHandling] Destroyed for form: ${element.id || 'unnamed'}`);
|
||||
},
|
||||
|
||||
// Module-level destroy
|
||||
destroy() {
|
||||
Logger.info('[FormHandling] Module destroyed');
|
||||
}
|
||||
};
|
||||
|
||||
// Export individual classes for direct usage
|
||||
export { FormHandler, FormValidator, FormState };
|
||||
|
||||
// Export as default for module system
|
||||
export default FormHandlingModule;
|
||||
|
||||
// Export init function directly for compatibility with module system
|
||||
export const init = FormHandlingModule.init.bind(FormHandlingModule);
|
||||
export const initElement = FormHandlingModule.initElement.bind(FormHandlingModule);
|
||||
|
||||
// Also export named for direct usage
|
||||
export { FormHandlingModule };
|
||||
Reference in New Issue
Block a user