Started to refactor pages

2023-12-09 17:02:23 +01:00
parent 12778fad34
commit 6ee56ac4cc
10 changed files with 48 additions and 33 deletions
--- a/client/pages/forms/create/guest.vue
+++ b/client/pages/forms/create/guest.vue
@@ -0,0 +1,153 @@
+<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.js'
+import { useWorkingFormStore } from '../../../stores/working_form.js'
+import { useWorkspacesStore } from '../../../stores/workspaces.js'
+import QuickRegister from '~/components/pages/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>