opnform/resources/js/pages/forms/create-guest.vue

154 lines
4.0 KiB
Vue

<template>
<div class="flex flex-wrap flex-col">
<transition v-if="stateReady" name="fade" mode="out-in">
<div key="2">
<create-form-base-modal :show="showInitialFormModal" @form-generated="formGenerated"
@close="showInitialFormModal=false"
/>
<form-editor v-if="!workspacesLoading" ref="editor"
class="w-full flex flex-grow"
:error="error"
:is-guest="isGuest"
@openRegister="openRegister"
/>
<div v-else class="text-center mt-4 py-6">
<loader class="h-6 w-6 text-nt-blue mx-auto" />
</div>
</div>
</transition>
<quick-register :show-register-modal="registerModal" @close="registerModal=false" @reopen="registerModal=true"
@afterLogin="afterLogin"
/>
</div>
</template>
<script>
import { computed } from 'vue'
import Form from 'vform'
import { useTemplatesStore } from '../../stores/templates'
import { useWorkingFormStore } from '../../stores/working_form'
import { useWorkspacesStore } from '../../stores/workspaces'
import QuickRegister from '../auth/components/QuickRegister.vue'
import initForm from '../../mixins/form_editor/initForm.js'
import SeoMeta from '../../mixins/seo-meta.js'
import CreateFormBaseModal from '../../components/pages/forms/create/CreateFormBaseModal.vue'
const loadTemplates = function () {
const templatesStore = useTemplatesStore()
templatesStore.startLoading()
templatesStore.loadIfEmpty().then(() => {
templatesStore.stopLoading()
})
}
export default {
name: 'CreateFormGuest',
components: {
QuickRegister, CreateFormBaseModal
},
mixins: [initForm, SeoMeta],
middleware: 'guest',
beforeRouteEnter (to, from, next) {
loadTemplates()
next()
},
setup () {
const templatesStore = useTemplatesStore()
const workingFormStore = useWorkingFormStore()
const workspacesStore = useWorkspacesStore()
return {
templatesStore,
workingFormStore,
workspacesStore,
workspaces : computed(() => workspacesStore.content),
workspacesLoading : computed(() => workspacesStore.loading)
}
},
data () {
return {
metaTitle: 'Create a new Form as Guest',
stateReady: false,
loading: false,
error: '',
registerModal: false,
isGuest: true,
showInitialFormModal: false
}
},
computed: {
form: {
get () {
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.workingFormStore.set(value)
}
},
workspace () {
return this.workspacesStore.getCurrent()
}
},
watch: {
workspace () {
if (this.workspace) {
this.form.workspace_id = this.workspace.id
}
}
},
mounted () {
// Set as guest user
const guestWorkspace = {
id: null,
name: 'Guest Workspace',
is_enterprise: false,
is_pro: false
}
this.workspacesStore.set([guestWorkspace])
this.workspacesStore.setCurrentId(guestWorkspace.id)
this.initForm()
if (this.$route.query.template !== undefined && this.$route.query.template) {
const template = this.templatesStore.getBySlug(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.stateReady = true
},
created () {},
unmounted () {},
methods: {
openRegister () {
this.registerModal = true
},
afterLogin () {
this.registerModal = false
this.isGuest = false
this.workspacesStore.load()
setTimeout(() => {
if (this.$refs.editor) {
this.$refs.editor.saveFormCreate()
}
}, 500)
},
formGenerated (form) {
this.form = new Form({ ...this.form.data(), ...form })
}
}
}
</script>