opnform/client/pages/forms/[slug]/edit.vue

100 lines
2.4 KiB
Vue
Raw Normal View History

2023-12-09 14:47:03 +00:00
<template>
<div class="w-full flex flex-col">
2023-12-24 08:51:22 +00:00
<form-editor v-if="!formsLoading || form" ref="editor"
2023-12-09 14:47:03 +00:00
:is-edit="true"
@on-save="formInitialHash=null"
/>
2023-12-24 08:51:22 +00:00
<div v-else-if="!formsLoading && error" class="mt-4 rounded-lg max-w-xl mx-auto p-6 bg-red-100 text-red-500">
2023-12-09 14:47:03 +00:00
{{ error }}
</div>
<div v-else class="text-center mt-4 py-6">
2024-01-18 10:37:04 +00:00
<Loader class="h-6 w-6 text-nt-blue mx-auto"/>
2023-12-09 14:47:03 +00:00
</div>
</div>
</template>
2024-01-18 10:37:04 +00:00
<script setup>
import {computed} from 'vue'
2023-12-24 08:51:22 +00:00
import FormEditor from "~/components/open/forms/components/FormEditor.vue";
import {hash} from "~/lib/utils.js";
2023-12-09 14:47:03 +00:00
2024-01-18 10:37:04 +00:00
const formsStore = useFormsStore()
const workingFormStore = useWorkingFormStore()
const workspacesStore = useWorkspacesStore()
2023-12-09 14:47:03 +00:00
2024-01-18 10:37:04 +00:00
if (!formsStore.allLoaded) {
formsStore.startLoading()
}
const updatedForm = storeToRefs(workingFormStore).content
const form = computed(() => formsStore.getByKey(useRoute().params.slug))
const formsLoading = computed(() => formsStore.loading)
2023-12-09 14:47:03 +00:00
2024-01-18 10:37:04 +00:00
const error = ref(null)
const formInitialHash = ref(null)
2023-12-20 17:38:43 +00:00
2024-01-18 10:37:04 +00:00
function isDirty() {
2024-02-10 11:20:45 +00:00
return formInitialHash.value &&
updatedForm.value &&
formInitialHash.value !== hash(JSON.stringify(updatedForm?.value?.data() ?? null))
2024-01-18 10:37:04 +00:00
}
2023-12-24 08:51:22 +00:00
2024-01-18 10:37:04 +00:00
function initUpdatedForm() {
if (!form || !form.value) {
return
}
2023-12-20 17:38:43 +00:00
2024-01-18 10:37:04 +00:00
updatedForm.value = useForm(form.value)
if (!updatedForm.value) {
return
}
formInitialHash.value = hash(JSON.stringify(updatedForm.value.data()))
2024-01-18 10:37:04 +00:00
if (updatedForm.value && (!updatedForm.value.notification_settings || Array.isArray(updatedForm.value.notification_settings))) {
updatedForm.value.notification_settings = {}
}
}
2023-12-09 14:47:03 +00:00
2024-01-18 10:37:04 +00:00
// Create a form.id watcher that updates working form
watch(form, (form) => {
2024-02-10 11:46:17 +00:00
if (form?.value) {
2024-01-18 10:37:04 +00:00
initUpdatedForm()
}
})
2023-12-09 14:47:03 +00:00
2024-01-18 10:37:04 +00:00
onBeforeRouteLeave((to, from, next) => {
if (isDirty()) {
return useAlert().confirm('Changes you made may not be saved. Are you sure want to leave?', () => {
window.onbeforeunload = null
next()
}, () => {
})
}
next()
})
2023-12-09 14:47:03 +00:00
2024-01-18 10:37:04 +00:00
onBeforeMount(() => {
if (process.client) {
2023-12-09 14:47:03 +00:00
window.onbeforeunload = () => {
2024-01-18 10:37:04 +00:00
if (isDirty()) {
2023-12-09 14:47:03 +00:00
return false
}
}
2024-01-18 10:37:04 +00:00
}
2023-12-09 14:47:03 +00:00
2024-01-18 10:37:04 +00:00
if (!form.value && !formsStore.allLoaded) {
formsStore.loadAll(workspacesStore.currentId).then(()=>{
initUpdatedForm()
})
} else {
initUpdatedForm()
2023-12-09 14:47:03 +00:00
}
2024-01-18 10:37:04 +00:00
})
useOpnSeoMeta({
title: 'Edit ' + ((form && form.value) ? form.value.title : 'Your Form')
})
definePageMeta({
middleware: "auth"
})
2023-12-09 14:47:03 +00:00
</script>