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.

client/components/open/forms/OpenCompleteForm.vue

@@ -398,7 +398,9 @@ const addPasswordError = (msg) => {
 }
 
 defineExpose({
-  addPasswordError
+  addPasswordError,
+  restart,
+  formManager
 })
 
 </script>

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() {

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
+    // Check if we should actually perform the submission based on mode strategy
-    const response = await toValue(form).post(url, { 
+    const formModeStrategy = options.formModeStrategy
-      data: metadata
+    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()
     }