From 591d21d88874c17d521545cf53fea6bcc9a0cabb Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Fri, 23 May 2025 19:15:19 +0200
Subject: [PATCH] Enhance Form Management with Dynamic Configuration Updates

- Added a new watcher in `OpenCompleteForm.vue` to monitor changes to the form prop and update the form manager accordingly, ensuring that the form manager reflects the latest configuration.
- Introduced an `updateConfig` method in `useFormManager.js` to handle updates to the form configuration, resetting the form state and reinitializing with the new config. This improves the flexibility and responsiveness of the form management system.

These changes aim to enhance the user experience by ensuring that form updates are seamlessly integrated into the form management workflow, allowing for more dynamic interactions.
---
 .../open/forms/OpenCompleteForm.vue           | 12 +++++++++++
 .../lib/forms/composables/useFormManager.js   | 21 +++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/client/components/open/forms/OpenCompleteForm.vue b/client/components/open/forms/OpenCompleteForm.vue
index 7f0a2790..ee58f079 100644
--- a/client/components/open/forms/OpenCompleteForm.vue
+++ b/client/components/open/forms/OpenCompleteForm.vue
@@ -266,6 +266,18 @@ if (props.form) {
   })
 }
 
+// Watch for changes to the form prop and update formManager
+watch(() => props.form, (newForm) => {
+  // Only update if the form has changed and formManager is initialized
+  if (formManager && newForm) {
+    // Update form manager with the new config
+    formManager.updateConfig(newForm, {
+      submissionId: submissionId.value,
+      urlParams: import.meta.client ? new URLSearchParams(window.location.search) : null,
+    })
+  }
+})
+
 // Share the structure service with the working form store only when in admin edit context
 watch(() => formManager?.strategy?.value?.admin?.showAdminControls, (showAdminControls) => {
   if (workingFormStore && formManager?.structure && showAdminControls) {
diff --git a/client/lib/forms/composables/useFormManager.js b/client/lib/forms/composables/useFormManager.js
index 80012754..b2ae101f 100644
--- a/client/lib/forms/composables/useFormManager.js
+++ b/client/lib/forms/composables/useFormManager.js
@@ -54,6 +54,26 @@ export function useFormManager(initialFormConfig, mode = FormMode.LIVE, options
   const payment = useFormPayment(config, form)
   const submission = useFormSubmission(config, form)
 
+  /**
+   * Updates the form configuration when the entire form reference changes.
+   * @param {Object} newConfig - The new form configuration
+   * @param {Object} options - Optional initialization options
+   * @returns {Promise<void>}
+   */
+  const updateConfig = async (newConfig, options = {}) => {
+    if (!newConfig) return
+
+    // Update the config reference
+    config.value = newConfig
+    
+    // Reset form state
+    state.isSubmitted = false
+    state.currentPage = 0
+    
+    // Reinitialize with new config
+    return initialize(options)
+  }
+
   /**
    * Initializes the form: loads data, resets state, starts timer.
    * @param {Object} options - Initialization options (passed to useFormInitialization).
@@ -303,6 +323,7 @@ export function useFormManager(initialFormConfig, mode = FormMode.LIVE, options
 
     // Core Methods
     initialize,
+    updateConfig,   // New method to update form config
     nextPage,
     previousPage,
     submit,