Apply refactor changes for edit submission (#757)
This commit is contained in:
parent
a430621b4c
commit
9b2d4551b8
|
|
@ -5,19 +5,16 @@
|
||||||
@close="emit('close')"
|
@close="emit('close')"
|
||||||
>
|
>
|
||||||
<open-form
|
<open-form
|
||||||
|
v-if="form"
|
||||||
|
:form-manager="formManager"
|
||||||
:theme="theme"
|
:theme="theme"
|
||||||
:loading="false"
|
|
||||||
:form="form"
|
|
||||||
:fields="form.properties"
|
|
||||||
:default-data-form="submission"
|
|
||||||
:mode="FormMode.EDIT"
|
|
||||||
@submit="updateForm"
|
@submit="updateForm"
|
||||||
>
|
>
|
||||||
<template #submit-btn="{ submitForm }">
|
<template #submit-btn="{ loading }">
|
||||||
<v-button
|
<v-button
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
class="mt-2 px-8 mx-1"
|
class="mt-2 px-8 mx-1"
|
||||||
@click.prevent="submitForm"
|
@click.prevent="updateForm"
|
||||||
>
|
>
|
||||||
Update Submission
|
Update Submission
|
||||||
</v-button>
|
</v-button>
|
||||||
|
|
@ -25,11 +22,13 @@
|
||||||
</open-form>
|
</open-form>
|
||||||
</modal>
|
</modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, defineProps, defineEmits } from "vue"
|
import { ref, defineProps, defineEmits } from "vue"
|
||||||
import OpenForm from "../forms/OpenForm.vue"
|
import OpenForm from "../forms/OpenForm.vue"
|
||||||
import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
|
import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
|
||||||
import { FormMode } from "~/lib/forms/FormModeStrategy.js"
|
import { FormMode } from "~/lib/forms/FormModeStrategy.js"
|
||||||
|
import { useFormManager } from '~/lib/forms/composables/useFormManager'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
show: { type: Boolean, required: true },
|
show: { type: Boolean, required: true },
|
||||||
|
|
@ -46,13 +45,37 @@ const props = defineProps({
|
||||||
submission: { type: Object },
|
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 loading = ref(false)
|
||||||
|
|
||||||
const emit = defineEmits(["close", "updated"])
|
const emit = defineEmits(["close", "updated"])
|
||||||
const updateForm = (form, onFailure) => {
|
const updateForm = () => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
form
|
formManager.form.put("/open/forms/" + props.form.id + "/submissions/" + props.submission.id)
|
||||||
.put("/open/forms/" + props.form.id + "/submissions/" + props.submission.id)
|
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
useAlert().success(res.message)
|
useAlert().success(res.message)
|
||||||
loading.value = false
|
loading.value = false
|
||||||
|
|
@ -65,7 +88,6 @@ const updateForm = (form, onFailure) => {
|
||||||
useAlert().formValidationError(error.data)
|
useAlert().formValidationError(error.data)
|
||||||
}
|
}
|
||||||
loading.value = false
|
loading.value = false
|
||||||
onFailure()
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
orientation="horizontal"
|
orientation="horizontal"
|
||||||
>
|
>
|
||||||
<UButton
|
<UButton
|
||||||
v-track.delete_record_click
|
v-track.edit_record_click
|
||||||
size="sm"
|
size="sm"
|
||||||
color="white"
|
color="white"
|
||||||
icon="heroicons:pencil-square"
|
icon="heroicons:pencil-square"
|
||||||
|
|
|
||||||
|
|
@ -50,12 +50,8 @@ export function useFormInitialization(formConfig, form, pendingSubmission) {
|
||||||
*/
|
*/
|
||||||
const applyDefaultValues = (defaultData) => {
|
const applyDefaultValues = (defaultData) => {
|
||||||
if (!defaultData || Object.keys(defaultData).length === 0) return
|
if (!defaultData || Object.keys(defaultData).length === 0) return
|
||||||
|
|
||||||
for (const key in defaultData) {
|
form.resetAndFill(defaultData)
|
||||||
if (Object.hasOwnProperty.call(defaultData, key) && form[key] === undefined) {
|
|
||||||
form[key] = defaultData[key]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -167,7 +163,7 @@ export function useFormInitialization(formConfig, form, pendingSubmission) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 3. Try loading from pendingSubmission
|
// 3. Try loading from pendingSubmission
|
||||||
if (tryLoadFromPendingSubmission()) {
|
if (!(options.skipPendingSubmission ?? false) && tryLoadFromPendingSubmission()) {
|
||||||
updateSpecialFields()
|
updateSpecialFields()
|
||||||
return // Exit if loaded successfully
|
return // Exit if loaded successfully
|
||||||
}
|
}
|
||||||
|
|
@ -176,7 +172,7 @@ export function useFormInitialization(formConfig, form, pendingSubmission) {
|
||||||
const formData = {}
|
const formData = {}
|
||||||
|
|
||||||
// 5. Apply URL parameters
|
// 5. Apply URL parameters
|
||||||
if (options.urlParams) {
|
if (!(options.skipUrlParams ?? false) && options.urlParams) {
|
||||||
applyUrlParameters(options.urlParams)
|
applyUrlParameters(options.urlParams)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -184,13 +180,9 @@ export function useFormInitialization(formConfig, form, pendingSubmission) {
|
||||||
updateSpecialFields()
|
updateSpecialFields()
|
||||||
|
|
||||||
// 7. Apply default data from config or options
|
// 7. Apply default data from config or options
|
||||||
const defaultData = options.defaultData || config?.default_data
|
const defaultValuesToApply = options.defaultData || config?.default_data
|
||||||
if (defaultData) {
|
if (defaultValuesToApply) {
|
||||||
for (const key in defaultData) {
|
applyDefaultValues(defaultValuesToApply, config?.properties)
|
||||||
if (!formData[key]) { // Only if not already set
|
|
||||||
formData[key] = defaultData[key]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 8. Fill the form with the collected data
|
// 8. Fill the form with the collected data
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue