Stuck at changing routes

2023-10-14 18:24:44 +02:00
parent 358bf0e4d0
commit 3d3759c58c
29 changed files with 316 additions and 540 deletions
--- a/resources/js/pages/forms/create-guest.vue
+++ b/resources/js/pages/forms/create-guest.vue
@@ -2,34 +2,35 @@
  <div class="flex flex-wrap flex-col">
    <transition v-if="stateReady" name="fade" mode="out-in">
      <div key="2">
-        <create-form-base-modal @form-generated="formGenerated" :show="showInitialFormModal"
-                                @close="showInitialFormModal=false"/>
+        <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"
-                     :isGuest="isGuest"
+                     :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"/>
+          <loader class="h-6 w-6 text-nt-blue mx-auto" />
        </div>
      </div>
    </transition>

-    <quick-register :showRegisterModal="registerModal" @close="registerModal=false" @reopen="registerModal=true"
-                    @afterLogin="afterLogin"/>
-
+    <quick-register :show-register-modal="registerModal" @close="registerModal=false" @reopen="registerModal=true"
+                    @afterLogin="afterLogin"
+    />
  </div>
 </template>

 <script>
 import store from '~/store'
 import Form from 'vform'
-import {mapState, mapActions} from 'vuex'
+import { mapState, mapActions } from 'vuex'
 import QuickRegister from '../auth/components/QuickRegister.vue'
-import initForm from "../../mixins/form_editor/initForm.js"
+import initForm from '../../mixins/form_editor/initForm.js'
 import SeoMeta from '../../mixins/seo-meta.js'
-import CreateFormBaseModal from "../../components/pages/forms/create/CreateFormBaseModal.vue"
+import CreateFormBaseModal from '../../components/pages/forms/create/CreateFormBaseModal.vue'

 const loadTemplates = function () {
  store.commit('open/templates/startLoading')
@@ -40,19 +41,19 @@ const loadTemplates = function () {

 export default {
  name: 'CreateFormGuest',
-  mixins: [initForm, SeoMeta],
  components: {
    QuickRegister, CreateFormBaseModal
  },
+  mixins: [initForm, SeoMeta],

-  middleware: 'guest',
-
-  beforeRouteEnter(to, from, next) {
+  beforeRouteEnter (to, from, next) {
    loadTemplates()
    next()
  },

-  data() {
+  middleware: 'guest',
+
+  data () {
    return {
      metaTitle: 'Create a new Form as Guest',
      stateReady: false,
@@ -67,35 +68,35 @@ export default {
  computed: {
    ...mapState({
      workspaces: state => state['open/workspaces'].content,
-      workspacesLoading: state => state['open/workspaces'].loading,
+      workspacesLoading: state => state['open/workspaces'].loading
    }),
    form: {
-      get() {
+      get () {
        return this.$store.state['open/working_form'].content
      },
      /* We add a setter */
-      set(value) {
+      set (value) {
        this.$store.commit('open/working_form/set', value)
      }
    },
-    workspace() {
+    workspace () {
      return this.$store.getters['open/workspaces/getCurrent']()
-    },
+    }
  },

  watch: {
-    workspace() {
+    workspace () {
      if (this.workspace) {
        this.form.workspace_id = this.workspace.id
      }
    }
  },

-  mounted() {
+  mounted () {
    // Set as guest user
    const guestWorkspace = {
      id: null,
-      name: "Guest Workspace",
+      name: 'Guest Workspace',
      is_enterprise: false,
      is_pro: false
    }
@@ -106,7 +107,7 @@ export default {
    if (this.$route.query.template !== undefined && this.$route.query.template) {
      const template = this.$store.getters['open/templates/getBySlug'](this.$route.query.template)
      if (template && template.structure) {
-        this.form = new Form({...this.form.data(), ...template.structure})
+        this.form = new Form({ ...this.form.data(), ...template.structure })
      }
    } else {
      // No template loaded, ask how to start
@@ -116,17 +117,17 @@ export default {
    this.stateReady = true
  },

-  created() {},
-  destroyed() {},
+  created () {},
+  unmounted () {},

  methods: {
    ...mapActions({
      loadWorkspaces: 'open/workspaces/load'
    }),
-    openRegister() {
+    openRegister () {
      this.registerModal = true
    },
-    afterLogin() {
+    afterLogin () {
      this.registerModal = false
      this.isGuest = false
      this.loadWorkspaces()
@@ -136,8 +137,8 @@ export default {
        }
      }, 500)
    },
-    formGenerated(form) {
-      this.form = new Form({...this.form.data(), ...form})
+    formGenerated (form) {
+      this.form = new Form({ ...this.form.data(), ...form })
    }
  }
 }
--- a/resources/js/pages/forms/create.vue
+++ b/resources/js/pages/forms/create.vue
@@ -2,15 +2,16 @@
  <div class="flex flex-wrap flex-col">
    <transition v-if="stateReady" name="fade" mode="out-in">
      <div key="2">
-        <create-form-base-modal @form-generated="formGenerated" :show="showInitialFormModal"
-                                @close="showInitialFormModal=false"/>
+        <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"
                     @on-save="formInitialHash=null"
        />
        <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>
@@ -20,10 +21,10 @@
 <script>
 import store from '~/store'
 import Form from 'vform'
-import {mapState, mapActions} from 'vuex'
-import initForm from "../../mixins/form_editor/initForm.js";
+import { mapState, mapActions } from 'vuex'
+import initForm from '../../mixins/form_editor/initForm.js'
 import SeoMeta from '../../mixins/seo-meta.js'
-import CreateFormBaseModal from "../../components/pages/forms/create/CreateFormBaseModal.vue"
+import CreateFormBaseModal from '../../components/pages/forms/create/CreateFormBaseModal.vue'

 const loadTemplates = function () {
  store.commit('open/templates/startLoading')
@@ -34,11 +35,11 @@ const loadTemplates = function () {

 export default {
  name: 'CreateForm',
+  components: { CreateFormBaseModal },

  mixins: [initForm, SeoMeta],
-  components: {CreateFormBaseModal},

-  beforeRouteEnter(to, from, next) {
+  beforeRouteEnter (to, from, next) {
    loadTemplates()
    next()
  },
@@ -55,7 +56,7 @@ export default {

  middleware: 'auth',

-  data() {
+  data () {
    return {
      metaTitle: 'Create a new Form',
      stateReady: false,
@@ -73,31 +74,31 @@ export default {
      user: state => state.auth.user
    }),
    form: {
-      get() {
+      get () {
        return this.$store.state['open/working_form'].content
      },
      /* We add a setter */
-      set(value) {
+      set (value) {
        this.$store.commit('open/working_form/set', value)
      }
    },
-    workspace() {
+    workspace () {
      return this.$store.getters['open/workspaces/getCurrent']()
-    },
+    }
  },

  watch: {
-    workspace() {
+    workspace () {
      if (this.workspace) {
        this.form.workspace_id = this.workspace.id
      }
    },
-    user() {
+    user () {
      this.stateReady = true
    }
  },

-  mounted() {
+  mounted () {
    window.onbeforeunload = () => {
      if (this.isDirty()) {
        return false
@@ -109,7 +110,7 @@ export default {
    if (this.$route.query.template !== undefined && this.$route.query.template) {
      const template = this.$store.getters['open/templates/getBySlug'](this.$route.query.template)
      if (template && template.structure) {
-        this.form = new Form({...this.form.data(), ...template.structure})
+        this.form = new Form({ ...this.form.data(), ...template.structure })
      }
    } else {
      // No template loaded, ask how to start
@@ -121,15 +122,15 @@ export default {
    this.stateReady = this.user !== null
  },

-  created() {},
-  destroyed() {},
+  created () {},
+  unmounted () {},

  methods: {
    ...mapActions({
      loadWorkspaces: 'open/workspaces/loadIfEmpty'
    }),
-    formGenerated(form) {
-      this.form = new Form({...this.form.data(), ...form})
+    formGenerated (form) {
+      this.form = new Form({ ...this.form.data(), ...form })
    },
    isDirty () {
      return !this.loading && this.formInitialHash && this.formInitialHash !== this.hashString(JSON.stringify(this.form.data()))
--- a/resources/js/pages/forms/edit.vue
+++ b/resources/js/pages/forms/edit.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="w-full flex flex-col">
    <form-editor v-if="pageLoaded" ref="editor"
-                 :isEdit="true"
+                 :is-edit="true"
                 @on-save="formInitialHash=null"
    />
    <div v-else-if="!loading && error" class="mt-4 rounded-lg max-w-xl mx-auto p-6 bg-red-100 text-red-500">
@@ -31,6 +31,7 @@ const loadForms = function () {
 export default {
  name: 'EditForm',
  components: { Breadcrumb },
+  mixins: [SeoMeta],

  beforeRouteEnter (to, from, next) {
    if (!store.getters['open/forms/getBySlug'](to.params.slug)) {
@@ -51,7 +52,6 @@ export default {
  },

  middleware: 'auth',
-  mixins: [SeoMeta],

  data () {
    return {
@@ -82,7 +82,7 @@ export default {
    },
    metaTitle () {
      return 'Edit ' + (this.form ? this.form.title : 'Your Form')
-    },
+    }
  },

  watch: {
@@ -92,7 +92,7 @@ export default {
  },

  created () {},
-  destroyed () {},
+  unmounted () {},

  mounted () {
    window.onbeforeunload = () => {
@@ -109,11 +109,11 @@ export default {
      this.formInitialHash = this.hashString(JSON.stringify(this.updatedForm.data()))
    }

-    if(!this.updatedForm.notification_settings || Array.isArray(this.updatedForm.notification_settings)){
+    if (!this.updatedForm.notification_settings || Array.isArray(this.updatedForm.notification_settings)) {
      this.updatedForm.notification_settings = {}
    }
  },
-  
+
  methods: {
    isDirty () {
      return !this.loading && this.formInitialHash && this.formInitialHash !== this.hashString(JSON.stringify(this.updatedForm.data()))