opnform/client/pages/forms/create/guest.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.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>