Work in progress for form create guess user

This commit is contained in:
Julien Nahum 2023-12-25 19:57:00 +01:00
parent 5df3245543
commit b4365b5e30
4 changed files with 78 additions and 121 deletions

View File

@ -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>

View File

@ -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()
},

View File

@ -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>

View File

@ -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>