154 lines
4.0 KiB
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>
|