Working on form/show and editor

client/pages/forms/[slug]/edit.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="w-full flex flex-col">
-    <form-editor v-if="pageLoaded" ref="editor"
+    <form-editor v-if="!formsLoading || form" ref="editor"
                  :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">
+    <div v-else-if="!formsLoading && error" class="mt-4 rounded-lg max-w-xl mx-auto p-6 bg-red-100 text-red-500">
       {{ error }}
     </div>
     <div v-else class="text-center mt-4 py-6">
@@ -15,14 +15,12 @@
 
 <script>
 import { computed } from 'vue'
-import Form from 'vform'
 import Breadcrumb from '~/components/global/Breadcrumb.vue'
-import SeoMeta from '../../../mixins/seo-meta.js'
+import FormEditor from "~/components/open/forms/components/FormEditor.vue";
 
 export default {
   name: 'EditForm',
-  components: { Breadcrumb },
-  mixins: [SeoMeta],
+  components: { Breadcrumb, FormEditor },
   middleware: 'auth',
 
   beforeRouteLeave (to, from, next) {
@@ -41,71 +39,56 @@ export default {
     const workspacesStore = useWorkspacesStore()
 
     if (!formsStore.allLoaded) {
-      formsStore.loadAll(useWorkspacesStore().currentId)
+      formsStore.startLoading()
     }
-    workingFormStore.set(null) // Reset old working form
+    const updatedForm = storeToRefs(workingFormStore).content
+    const form = computed(() => formsStore.getByKey(useRoute().params.slug))
+
+    // Create a form.id watcher that updates working form
+    watch(form, (form) => {
+      if (form) {
+        updatedForm.value = useForm(form)
+        console.log('updatedForm.value',updatedForm.value)
+      }
+    })
 
     return {
       formsStore,
       workingFormStore,
       workspacesStore,
-      formsLoading: computed(() => formsStore.loading)
+      updatedForm,
+      form,
+      formsLoading: computed(() => formsStore.loading),
     }
   },
 
   data () {
     return {
-      loading: false,
       error: null,
       formInitialHash: null
     }
   },
 
   computed: {
-    updatedForm: {
-      get () {
-        return this.workingFormStore.content
-      },
-      /* We add a setter */
-      set (value) {
-        this.workingFormStore.set(value)
-      }
-    },
-    form () {
-      return this.formsStore.getByKey(this.$route.params.slug)
-    },
-    pageLoaded () {
-      return !this.loading && this.updatedForm !== null
-    },
     metaTitle () {
       return 'Edit ' + (this.form ? this.form.title : 'Your Form')
     }
   },
 
-  watch: {
-    form () {
-      this.updatedForm = new Form(this.form)
-    }
-  },
-
-  created () {},
-  unmounted () {},
-
-  mounted () {
+  async beforeMount() {
     window.onbeforeunload = () => {
       if (this.isDirty()) {
         return false
       }
     }
 
-    // this.closeAlert()
-    if (!this.form) {
-      loadForms()
-    } else {
-      this.updatedForm = new Form(this.form)
-      this.formInitialHash = this.hashString(JSON.stringify(this.updatedForm.data()))
+    if (!this.form && !this.formsStore.allLoaded) {
+      await this.formsStore.loadAll(this.workspacesStore.currentId)
     }
 
+    this.updatedForm = useForm(this.form)
+    this.formInitialHash = this.hashString(JSON.stringify(this.updatedForm.data()))
+
     if (this.updatedForm && (!this.updatedForm.notification_settings || Array.isArray(this.updatedForm.notification_settings))) {
       this.updatedForm.notification_settings = {}
     }
@@ -113,7 +96,7 @@ export default {
 
   methods: {
     isDirty () {
-      return !this.loading && this.formInitialHash && this.formInitialHash !== this.hashString(JSON.stringify(this.updatedForm.data()))
+      return this.formInitialHash && this.formInitialHash !== this.hashString(JSON.stringify(this.updatedForm.data()))
     },
     hashString (str, seed = 0) {
       let h1 = 0xdeadbeef ^ seed

client/pages/forms/[slug]/show.vue

@@ -132,7 +132,6 @@ import Form from 'vform'
 import ProTag from '~/components/global/ProTag.vue'
 import VButton from '~/components/global/VButton.vue'
 import ExtraMenu from '../../../components/pages/forms/show/ExtraMenu.vue'
-import SeoMeta from '../../../mixins/seo-meta.js'
 import FormCleanings from '../../../components/pages/forms/show/FormCleanings.vue'
 export default {
   name: 'ShowForm',
@@ -142,11 +141,6 @@ export default {
     ExtraMenu,
     FormCleanings
   },
-  mixins: [SeoMeta],
-
-  beforeUnmount() {
-    this.workingForm = null
-  },
 
   middleware: 'auth',
 

client/pages/forms/[slug]/show/share.vue

@@ -1,5 +1,14 @@
 <template>
-  <div>
+  <div class="mb-20">
+
+    <div class="mb-6 pb-6 border-b w-full flex flex-col sm:flex-row gap-2">
+      <regenerate-form-link class="sm:w-1/2 flex" :form="form" />
+
+      <url-form-prefill class="sm:w-1/2" :form="form" :extra-query-param="shareUrlForQueryParams" />
+
+      <embed-form-as-popup-modal class="sm:w-1/2 flex" :form="form" />
+    </div>
+
     <share-link class="mt-4" :form="form" :extra-query-param="shareUrlForQueryParams" />
 
     <embed-code class="mt-6" :form="form" :extra-query-param="shareUrlForQueryParams" />
@@ -8,13 +17,6 @@
 
     <advanced-form-url-settings :form="form" v-model="shareFormConfig" />
 
-    <div class="mt-6 pt-6 border-t w-full flex">
-      <regenerate-form-link class="sm:w-1/2 mr-4" :form="form" />
-
-      <url-form-prefill class="sm:w-1/2 mr-4" :form="form" :extra-query-param="shareUrlForQueryParams" />
-
-      <embed-form-as-popup-modal class="sm:w-1/2" :form="form" />
-    </div>
   </div>
 </template>