From 088e76955d09a3a3e630b6f29a705c0292ba8bf5 Mon Sep 17 00:00:00 2001
From: JhumanJ <julien@nahum.net>
Date: Mon, 19 May 2025 12:23:37 +0200
Subject: [PATCH] Enhance Form Functionality and Submission Logic

- Added `restart` and `formManager` to the exposed properties in `OpenCompleteForm.vue` for improved form management.
- Implemented a watcher in `FormEditorPreview.vue` to reset the form when switching modes, enhancing user experience during form interactions.
- Updated the `restartForm` function in `FormEditorPreview.vue` to handle errors gracefully and ensure the form can be restarted correctly.
- Modified the `useFormSubmission.js` to conditionally perform submissions based on the form mode strategy, allowing for mock submissions in preview mode.

These changes aim to improve the overall functionality and user experience of form handling within the application, ensuring better management and interaction with forms.
---
 .../open/forms/OpenCompleteForm.vue           |  4 ++-
 .../form-components/FormEditorPreview.vue     | 18 ++++++++++++-
 .../forms/composables/useFormSubmission.js    | 26 +++++++++++++++----
 3 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/client/components/open/forms/OpenCompleteForm.vue b/client/components/open/forms/OpenCompleteForm.vue
index cca884ea..981d4fe0 100644
--- a/client/components/open/forms/OpenCompleteForm.vue
+++ b/client/components/open/forms/OpenCompleteForm.vue
@@ -398,7 +398,9 @@ const addPasswordError = (msg) => {
 }
 
 defineExpose({
-  addPasswordError
+  addPasswordError,
+  restart,
+  formManager
 })
 
 </script>
diff --git a/client/components/open/forms/components/form-components/FormEditorPreview.vue b/client/components/open/forms/components/form-components/FormEditorPreview.vue
index bcfac8ff..eea6e71b 100644
--- a/client/components/open/forms/components/form-components/FormEditorPreview.vue
+++ b/client/components/open/forms/components/form-components/FormEditorPreview.vue
@@ -142,6 +142,13 @@ watch(() => form.value.dark_mode, () => {
   handleDarkModeChange()
 })
 
+// Watch for form mode changes to reset the form when switching modes
+watch(formMode, () => {
+  if (previewFormSubmitted.value) {
+    restartForm()
+  }
+})
+
 onMounted(() => {
   handleDarkModeChange()
 })
@@ -163,7 +170,16 @@ function handleDarkModeChange() {
 
 function restartForm() {
   previewFormSubmitted.value = false
-  formPreview.value.restart()
+  
+  try {
+    // Try using the component reference first
+    if (formPreview.value && typeof formPreview.value.restart === 'function') {
+      formPreview.value.restart()
+      return
+    }
+  } catch (error) {
+    console.error('Error restarting form:', error)
+  }
 }
 
 function toggleExpand() {
diff --git a/client/lib/forms/composables/useFormSubmission.js b/client/lib/forms/composables/useFormSubmission.js
index 883ea4a3..f5576b4c 100644
--- a/client/lib/forms/composables/useFormSubmission.js
+++ b/client/lib/forms/composables/useFormSubmission.js
@@ -56,13 +56,29 @@ export function useFormSubmission(formConfig, form) {
     // Prepare metadata only (form data will be auto-merged by Form.js)
     const metadata = _prepareMetadata(options)
 
-    // Use the vForm post method, which will automatically merge form data with metadata
-    const response = await toValue(form).post(url, { 
-      data: metadata
-    })
+    // Check if we should actually perform the submission based on mode strategy
+    const formModeStrategy = options.formModeStrategy
+    const shouldSubmit = formModeStrategy?.validation?.performActualSubmission !== false
+    
+    let response
+    
+    if (shouldSubmit) {
+      // Only perform the actual API call if the strategy allows it
+      response = await toValue(form).post(url, { 
+        data: metadata
+      })
+    } else {
+      // Return a mock successful response when in preview/test mode
+      response = {
+        success: true,
+        data: {
+          message: 'Form preview submission (no actual submission performed)',
+          mock: true
+        }
+      }
+    }
     
     // Optionally reset form after successful submission based on strategy
-    const formModeStrategy = options.formModeStrategy
     if (formModeStrategy?.submission?.resetAfterSubmit) {
       toValue(form).reset()
     }