Work in progress for form create guess user
This commit is contained in:
parent
5df3245543
commit
b4365b5e30
|
@ -90,6 +90,7 @@ const closeOnEscape = (e) => {
|
|||
onMounted(() => {
|
||||
if (process.server) return
|
||||
document.addEventListener('keydown', closeOnEscape)
|
||||
initMotions()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
|
@ -160,13 +161,15 @@ const content = ref(null)
|
|||
const backdropMotion = ref(null)
|
||||
const contentMotion = ref(null)
|
||||
|
||||
watch(() => props.show, (newVal, oldVal) => {
|
||||
if (newVal) {
|
||||
const initMotions = () => {
|
||||
if (props.show) {
|
||||
nextTick(() => {
|
||||
backdropMotion.value = useMotion(backdrop.value, motionFadeIn)
|
||||
contentMotion.value = useMotion(content.value, motionSlideBottom)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => props.show, initMotions)
|
||||
|
||||
</script>
|
||||
|
|
|
@ -61,6 +61,7 @@ export default {
|
|||
setup () {
|
||||
return {
|
||||
authStore: useAuthStore(),
|
||||
formsStore: useFormsStore(),
|
||||
workspaceStore: useWorkspacesStore()
|
||||
}
|
||||
},
|
||||
|
@ -88,6 +89,9 @@ export default {
|
|||
const workspaces = await fetchAllWorkspaces()
|
||||
this.workspaceStore.set(workspaces.data.value)
|
||||
|
||||
// Load forms
|
||||
this.formsStore.loadAll(this.workspaceStore.currentId)
|
||||
|
||||
// Redirect home.
|
||||
this.redirect()
|
||||
},
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<modal :show="show" :closeable="!aiForm.busy" @close="$emit('close')">
|
||||
<Modal :show="show" :closeable="!aiForm.busy" @close="$emit('close')">
|
||||
<template #icon>
|
||||
<template v-if="state=='default'">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-10 h-10 text-blue">
|
||||
|
@ -87,7 +87,7 @@
|
|||
~60 sec
|
||||
</p>
|
||||
</div>
|
||||
</modal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
@ -9,10 +9,10 @@
|
|||
class="w-full flex flex-grow"
|
||||
:error="error"
|
||||
:is-guest="isGuest"
|
||||
@openRegister="openRegister"
|
||||
@openRegister="registerModal=true"
|
||||
/>
|
||||
<div v-else class="text-center mt-4 py-6">
|
||||
<Loader class="h-6 w-6 text-nt-blue mx-auto" />
|
||||
<Loader class="h-6 w-6 text-nt-blue mx-auto"/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
@ -23,124 +23,74 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {initForm} from "~/composables/forms/initForm.js"
|
||||
<script setup>
|
||||
import FormEditor from "~/components/open/forms/components/FormEditor.vue"
|
||||
import QuickRegister from '~/components/pages/auth/components/QuickRegister.vue'
|
||||
import CreateFormBaseModal from '../../../components/pages/forms/create/CreateFormBaseModal.vue'
|
||||
import {initForm} from "~/composables/forms/initForm.js"
|
||||
import {loadAllTemplates} from "~/stores/templates.js";
|
||||
import {fetchAllWorkspaces} from "~/stores/workspaces.js";
|
||||
|
||||
const loadTemplates = function () {
|
||||
const templatesStore = useTemplatesStore()
|
||||
templatesStore.startLoading()
|
||||
templatesStore.loadIfEmpty().then(() => {
|
||||
templatesStore.stopLoading()
|
||||
})
|
||||
// middleware: 'guest',
|
||||
|
||||
const templatesStore = useTemplatesStore()
|
||||
const workingFormStore = useWorkingFormStore()
|
||||
const workspacesStore = useWorkspacesStore()
|
||||
const route = useRoute()
|
||||
loadAllTemplates(templatesStore)
|
||||
|
||||
// Store values
|
||||
const workspace = computed(() => workspacesStore.getCurrent)
|
||||
const workspacesLoading = computed(() => workspacesStore.loading)
|
||||
const form = storeToRefs(workingFormStore).content
|
||||
|
||||
// metaTitle: 'Create a new Form as Guest',
|
||||
// Data
|
||||
const stateReady = ref(false)
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
const registerModal = ref(false)
|
||||
const isGuest = ref(true)
|
||||
const showInitialFormModal = ref(false)
|
||||
|
||||
// Component ref
|
||||
const editor = ref(null)
|
||||
|
||||
onMounted(() => {
|
||||
// Set as guest user
|
||||
workspacesStore.set([{
|
||||
id: null,
|
||||
name: 'Guest Workspace',
|
||||
is_enterprise: false,
|
||||
is_pro: false
|
||||
}])
|
||||
|
||||
form.value = initForm()
|
||||
if (route.query.template !== undefined && route.query.template) {
|
||||
const template = this.templatesStore.getByKey(route.query.template)
|
||||
if (template && template.structure) {
|
||||
form.value = useForm({...this.form.data(), ...template.structure})
|
||||
}
|
||||
} else {
|
||||
// No template loaded, ask how to start
|
||||
showInitialFormModal.value = true
|
||||
}
|
||||
// this.closeAlert()
|
||||
stateReady.value = true
|
||||
})
|
||||
|
||||
const afterLogin = () => {
|
||||
registerModal.value = false
|
||||
isGuest.value = false
|
||||
fetchAllWorkspaces()
|
||||
setTimeout(() => {
|
||||
if (editor) {
|
||||
editor.saveFormCreate()
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'CreateFormGuest',
|
||||
components: {
|
||||
QuickRegister, CreateFormBaseModal
|
||||
},
|
||||
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.form = initForm()
|
||||
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 = useForm({ ...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 = useForm({ ...this.form.data(), ...form })
|
||||
}
|
||||
}
|
||||
const formGenerated = (newForm) => {
|
||||
form.value = useForm({...form.value.data(), ...newForm})
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue