133 lines
3.3 KiB
Vue
133 lines
3.3 KiB
Vue
<template>
|
|
<div class="w-full flex flex-col">
|
|
<form-editor v-if="pageLoaded" ref="editor"
|
|
:is-edit="true"
|
|
@on-save="formInitialHash=null"
|
|
/>
|
|
<div v-else-if="!loading && error" class="mt-4 rounded-lg max-w-xl mx-auto p-6 bg-red-100 text-red-500">
|
|
{{ error }}
|
|
</div>
|
|
<div v-else class="text-center mt-4 py-6">
|
|
<Loader class="h-6 w-6 text-nt-blue mx-auto" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { computed } from 'vue'
|
|
import Form from 'vform'
|
|
import Breadcrumb from '~/components/global/Breadcrumb.vue'
|
|
import SeoMeta from '../../../mixins/seo-meta.js'
|
|
|
|
export default {
|
|
name: 'EditForm',
|
|
components: { Breadcrumb },
|
|
mixins: [SeoMeta],
|
|
middleware: 'auth',
|
|
|
|
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()
|
|
},
|
|
|
|
setup () {
|
|
const formsStore = useFormsStore()
|
|
const workingFormStore = useWorkingFormStore()
|
|
const workspacesStore = useWorkspacesStore()
|
|
|
|
if (!formsStore.allLoaded) {
|
|
formsStore.loadAll(useWorkspacesStore().currentId)
|
|
}
|
|
workingFormStore.set(null) // Reset old working form
|
|
|
|
return {
|
|
formsStore,
|
|
workingFormStore,
|
|
workspacesStore,
|
|
formsLoading: computed(() => formsStore.loading)
|
|
}
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
error: null,
|
|
formInitialHash: null
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
updatedForm: {
|
|
get () {
|
|
return this.workingFormStore.content
|
|
},
|
|
/* We add a setter */
|
|
set (value) {
|
|
this.workingFormStore.set(value)
|
|
}
|
|
},
|
|
form () {
|
|
return this.formsStore.getByKey(this.$route.params.slug)
|
|
},
|
|
pageLoaded () {
|
|
return !this.loading && this.updatedForm !== null
|
|
},
|
|
metaTitle () {
|
|
return 'Edit ' + (this.form ? this.form.title : 'Your Form')
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
form () {
|
|
this.updatedForm = new Form(this.form)
|
|
}
|
|
},
|
|
|
|
created () {},
|
|
unmounted () {},
|
|
|
|
mounted () {
|
|
window.onbeforeunload = () => {
|
|
if (this.isDirty()) {
|
|
return false
|
|
}
|
|
}
|
|
|
|
// this.closeAlert()
|
|
if (!this.form) {
|
|
loadForms()
|
|
} else {
|
|
this.updatedForm = new Form(this.form)
|
|
this.formInitialHash = this.hashString(JSON.stringify(this.updatedForm.data()))
|
|
}
|
|
|
|
if (this.updatedForm && (!this.updatedForm.notification_settings || Array.isArray(this.updatedForm.notification_settings))) {
|
|
this.updatedForm.notification_settings = {}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
isDirty () {
|
|
return !this.loading && this.formInitialHash && this.formInitialHash !== this.hashString(JSON.stringify(this.updatedForm.data()))
|
|
},
|
|
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>
|