<template> <div class="flex flex-wrap flex-col"> <transition name="fade" mode="out-in"> <div key="2"> <create-form-base-modal :show="showInitialFormModal" @form-generated="formGenerated" @close="showInitialFormModal=false" /> <form-editor v-if="form && !workspacesLoading" ref="editor" class="w-full flex flex-grow" :error="error" @on-save="formInitialHash=null" /> <div v-else class="text-center mt-4 py-6"> <Loader class="h-6 w-6 text-nt-blue mx-auto"/> </div> </div> </transition> </div> </template> <script setup> import {watch} from 'vue' import {initForm} from "~/composables/forms/initForm.js" import FormEditor from "~/components/open/forms/components/FormEditor.vue" import CreateFormBaseModal from '../../../components/pages/forms/create/CreateFormBaseModal.vue' // metaTitle: 'Create a new Form', // beforeRouteLeave (to, from, next) { // if (this.isDirty()) { // return this.alertConfirm('Changes you made may not be saved. Are you sure want to leave?', () => { // window.onbeforeunload = null // next() // }, () => {}) // } // next() // }, const route = useRoute() const authStore = useAuthStore() const templatesStore = useTemplatesStore() const workingFormStore = useWorkingFormStore() const workspacesStore = useWorkspacesStore() const formStore = useFormsStore() const { getCurrent: workspace, getAll: workspaces, workspacesLoading: workspacesLoading } = storeToRefs(workspacesStore) const {content: form} = storeToRefs(workingFormStore) // State const loading = ref(false) const error = ref('') const showInitialFormModal = ref(false) const formInitialHash = ref(null) watch(() => workspace, () => { if (workspace) { form.workspace_id = workspace.value.id } }) onMounted(() => { if (process.client) { // window.onbeforeunload = () => { if (isDirty()) { return false } } if (!formStore.allLoaded) { formStore.load(workspace.value.id) } form.value = initForm({workspace_id: workspace.value?.id}) formInitialHash.value = hashString(JSON.stringify(form.value.data())) // if (this.$route.query.template !== undefined && this.$route.query.template) { // const template = this.templatesStore.getByKey(this.$route.query.template) // if (template && template.structure) { // this.form = new Form({...this.form.data(), ...template.structure}) // } // } else { // // No template loaded, ask how to start // this.showInitialFormModal = true // } // this.closeAlert() // this.workspacesStore.loadIfEmpty() }) // Methods const formGenerated = (newForm) => { form.value = useForm({...form.value.data(), ...newForm}) } const isDirty = () => { return !loading.value && formInitialHash.value && formInitialHash.value !== hashString(JSON.stringify(form.value.data())) } const hashString = (str, seed = 0) => { let h1 = 0xdeadbeef ^ seed let h2 = 0x41c6ce57 ^ seed for (let i = 0, ch; i < str.length; i++) { ch = str.charCodeAt(i) h1 = Math.imul(h1 ^ ch, 2654435761) h2 = Math.imul(h2 ^ ch, 1597334677) } h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909) h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909) return 4294967296 * (2097151 & h2) + (h1 >>> 0) } </script>