/**
|
* view.js
|
* Frontend JavaScript for the Form Block
|
* Handles form validation and submission
|
*/
|
class FormBlock {
|
constructor() {
|
this.controller = new window.jvbForm();
|
|
document.querySelectorAll('.jvb-form-block form').forEach(form => {
|
this.controller.registerForm(form, {autosave: true});
|
});
|
|
this.controller.subscribe((event, data) => {
|
if (event === 'form-submit') {
|
this.handleFormSubmission(data);
|
}
|
});
|
}
|
|
async handleFormSubmission(data) {
|
let formId = data.formId;
|
let formConfig = data.config;
|
let formData = data.fullData;
|
let form = formConfig.element;
|
|
let headers = {
|
'X-WP-Nonce': jvbSettings.nonce,
|
'Content-Type': 'application/json'
|
};
|
|
let block = form.closest('.jvb-form-block');
|
this.controller.showFormStatus(formId, 'uploading');
|
|
try {
|
const response = await fetch(`${jvbSettings.api}forms`, {
|
method: 'POST',
|
headers,
|
body: JSON.stringify(formData)
|
});
|
|
if (!response.ok) {
|
this.controller.showFormStatus(formId, 'error');
|
const errorData = await response.json().catch(() => ({}));
|
throw new Error(errorData.message || `Request failed with status ${response.status}`);
|
}
|
|
this.controller.showFormStatus(formId, 'submitted');
|
this.controller.showSummary(formId, '.jvb-form-block');
|
} catch (error) {
|
throw error;
|
} finally {
|
this.controller.store.delete(formId);
|
}
|
}
|
}
|
|
document.addEventListener('DOMContentLoaded', function() {
|
new FormBlock();
|
});
|
