Work in progress for form create guess user

client/components/global/Modal.vue

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

client/components/pages/auth/components/LoginForm.vue

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

client/components/pages/forms/create/CreateFormBaseModal.vue

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

client/pages/forms/create/guest.vue

@@ -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',
 
-export default {
-  name: 'CreateFormGuest',
-  components: {
-    QuickRegister, CreateFormBaseModal
-  },
-  middleware: 'guest',
+const templatesStore = useTemplatesStore()
+const workingFormStore = useWorkingFormStore()
+const workspacesStore = useWorkspacesStore()
+const route = useRoute()
+loadAllTemplates(templatesStore)
 
-  beforeRouteEnter (to, from, next) {
-    loadTemplates()
-    next()
-  },
+// Store values
+const workspace = computed(() => workspacesStore.getCurrent)
+const workspacesLoading = computed(() => workspacesStore.loading)
+const form = storeToRefs(workingFormStore).content
 
-  setup () {
-    const templatesStore = useTemplatesStore()
-    const workingFormStore = useWorkingFormStore()
-    const workspacesStore = useWorkspacesStore()
-    return {
-      templatesStore,
-      workingFormStore,
-      workspacesStore,
-      workspaces : computed(() => workspacesStore.content),
-      workspacesLoading : computed(() => workspacesStore.loading)
-    }
-  },
+// 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)
 
-  data () {
-    return {
-      metaTitle: 'Create a new Form as Guest',
-      stateReady: false,
-      loading: false,
-      error: '',
-      registerModal: false,
-      isGuest: true,
-      showInitialFormModal: false
-    }
-  },
+// Component ref
+const editor = ref(null)
 
-  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 () {
+onMounted(() => {
   // Set as guest user
-    const guestWorkspace = {
+  workspacesStore.set([{
     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)
+  form.value = initForm()
+  if (route.query.template !== undefined && route.query.template) {
+    const template = this.templatesStore.getByKey(route.query.template)
     if (template && template.structure) {
-        this.form = useForm({ ...this.form.data(), ...template.structure })
+      form.value = useForm({...this.form.data(), ...template.structure})
     }
   } else {
     // No template loaded, ask how to start
-      this.showInitialFormModal = true
+    showInitialFormModal.value = true
   }
-    this.closeAlert()
-    this.stateReady = true
-  },
+  // this.closeAlert()
+  stateReady.value = true
+})
 
-  created () {},
-  unmounted () {},
-
-  methods: {
-    openRegister () {
-      this.registerModal = true
-    },
-    afterLogin () {
-      this.registerModal = false
-      this.isGuest = false
-      this.workspacesStore.load()
+const afterLogin = () => {
+  registerModal.value = false
+  isGuest.value = false
+  fetchAllWorkspaces()
   setTimeout(() => {
-        if (this.$refs.editor) {
-          this.$refs.editor.saveFormCreate()
+    if (editor) {
+      editor.saveFormCreate()
     }
   }, 500)
-    },
-    formGenerated (form) {
-      this.form = useForm({ ...this.form.data(), ...form })
-    }
-  }
+}
+
+const formGenerated = (newForm) => {
+  form.value = useForm({...form.value.data(), ...newForm})
 }
 </script>