Apply refactor changes for edit submission (#757)

client/components/open/components/EditSubmissionModal.vue

@@ -5,19 +5,16 @@
     @close="emit('close')"
   >
     <open-form
+      v-if="form"
+      :form-manager="formManager"
       :theme="theme"
-      :loading="false"
-      :form="form"
-      :fields="form.properties"
-      :default-data-form="submission"
-      :mode="FormMode.EDIT"
       @submit="updateForm"
     >
-      <template #submit-btn="{ submitForm }">
+      <template #submit-btn="{ loading }">
         <v-button
           :loading="loading"
           class="mt-2 px-8 mx-1"
-          @click.prevent="submitForm"
+          @click.prevent="updateForm"
         >
           Update Submission
         </v-button>
@@ -25,11 +22,13 @@
     </open-form>
   </modal>
 </template>
+
 <script setup>
 import { ref, defineProps, defineEmits } from "vue"
 import OpenForm from "../forms/OpenForm.vue"
 import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
 import { FormMode } from "~/lib/forms/FormModeStrategy.js"
+import { useFormManager } from '~/lib/forms/composables/useFormManager'
 
 const props = defineProps({
   show: { type: Boolean, required: true },
@@ -46,13 +45,37 @@ const props = defineProps({
   submission: { type: Object },
 })
 
+// Set up form manager with proper mode
+let formManager = null
+const setupFormManager = () => {
+  if (!props.form) return null
+  
+  formManager = useFormManager(props.form, FormMode.EDIT)
+  
+  return formManager
+}
+
+// Initialize form manager
+formManager = setupFormManager()
+
+watch(() => props.show, (newShow) => {
+  if (newShow) {
+    nextTick(() => {
+      formManager.initialize({
+        skipPendingSubmission: true,
+        skipUrlParams: true,
+        defaultData: props.submission
+      })
+    })
+  }
+})
+
 const loading = ref(false)
 
 const emit = defineEmits(["close", "updated"])
-const updateForm = (form, onFailure) => {
+const updateForm = () => {
   loading.value = true
-  form
-    .put("/open/forms/" + props.form.id + "/submissions/" + props.submission.id)
+  formManager.form.put("/open/forms/" + props.form.id + "/submissions/" + props.submission.id)
     .then((res) => {
       useAlert().success(res.message)
       loading.value = false
@@ -65,7 +88,6 @@ const updateForm = (form, onFailure) => {
         useAlert().formValidationError(error.data)
       }
       loading.value = false
-      onFailure()
     })
 }
 </script>

client/components/open/components/RecordOperations.vue

@@ -4,7 +4,7 @@
     orientation="horizontal"
   >
     <UButton
-      v-track.delete_record_click
+      v-track.edit_record_click
       size="sm"
       color="white"
       icon="heroicons:pencil-square"

client/lib/forms/composables/useFormInitialization.js

@@ -51,11 +51,7 @@ export function useFormInitialization(formConfig, form, pendingSubmission) {
   const applyDefaultValues = (defaultData) => {
     if (!defaultData || Object.keys(defaultData).length === 0) return
 
-    for (const key in defaultData) {
-      if (Object.hasOwnProperty.call(defaultData, key) && form[key] === undefined) {
-        form[key] = defaultData[key]
-      }
-    }
+    form.resetAndFill(defaultData)
   }
 
   /**
@@ -167,7 +163,7 @@ export function useFormInitialization(formConfig, form, pendingSubmission) {
     }
     
     // 3. Try loading from pendingSubmission
-    if (tryLoadFromPendingSubmission()) {
+    if (!(options.skipPendingSubmission ?? false) && tryLoadFromPendingSubmission()) {
       updateSpecialFields()
       return // Exit if loaded successfully
     }
@@ -176,7 +172,7 @@ export function useFormInitialization(formConfig, form, pendingSubmission) {
     const formData = {}
     
     // 5. Apply URL parameters
-    if (options.urlParams) {
+    if (!(options.skipUrlParams ?? false) && options.urlParams) {
       applyUrlParameters(options.urlParams)
     }
     
@@ -184,13 +180,9 @@ export function useFormInitialization(formConfig, form, pendingSubmission) {
     updateSpecialFields()
     
     // 7. Apply default data from config or options
-    const defaultData = options.defaultData || config?.default_data
-    if (defaultData) {
-      for (const key in defaultData) {
-        if (!formData[key]) { // Only if not already set
-          formData[key] = defaultData[key]
-        }
-      }
+    const defaultValuesToApply = options.defaultData || config?.default_data
+    if (defaultValuesToApply) {
+      applyDefaultValues(defaultValuesToApply, config?.properties)
     }
     
     // 8. Fill the form with the collected data