Jake Vanderwerf
2025-12-21 3aada9949d51024a92a8b5c6cb70d12f9c3cac16
src/forms/view.js
@@ -1,4 +1,5 @@
/**
 * view.js
 * Frontend JavaScript for the Form Block
 * Handles form validation and submission
 */
@@ -7,7 +8,7 @@
      this.controller = new window.jvbForm();
      document.querySelectorAll('.jvb-form-block form').forEach(form => {
         this.controller.registerForm(form);
         this.controller.registerForm(form, {autosave: true});
      });
      this.controller.subscribe((event, data) => {
@@ -18,15 +19,9 @@
   }
   async handleFormSubmission(data) {
      let [
         formId,
         formConfig,
         formData
      ] = [
         data.formId,
         data.config,
         data.data
      ];
      let formId = data.formId;
      let formConfig = data.config;
      let formData = data.fullData;
      let form = formConfig.element;
      let headers = {
@@ -34,51 +29,30 @@
         'Content-Type': 'application/json'
      };
      data['form_type'] = formId;
      data['form_id'] = form.id;
      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)
            });
         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}`);
            throw new Error(errorData.message || `Request failed with status ${response.status}`);
         }
         this.controller.showFormStatus(formId, 'submitted');
         this.controller.showSummary(formId, '.jvb-form-block');
         this.controller.store.delete(formId);
      } catch (error) {
         throw error;
      } finally {
         this.controller.store.delete(formId);
      }
   }
   updateUI(response, block) {
      let summary = window.getTemplate('formSummary');
      summary.querySelector('h2').textContent = 'Success!';
      console.log('Form Response: ', response);
      console.log(summary);
      for (let [key, value] of Object.entries(response)) {
         let item = summary.querySelector(`#${key}`);
         if (item) {
            let title = item.querySelector('h4');
            if (title.innerText.includes('%s')) {
               title.innerHTML = title.replace('%s', '<b>'+value+'</b>');
            } else {
               item.querySelector('div').innerHTML = value;
            }
         }
      }
      block.append(summary);
   }
}
document.addEventListener('DOMContentLoaded', function() {