Working on form/show and editor

client/components/global/Modal.vue

@@ -11,7 +11,7 @@
              :class="maxWidthClass"
         >
           <div v-if="closeable" class="absolute top-4 right-4">
-            <button class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="close">
+            <button class="text-gray-500 hover:text-gray-900 cursor-pointer" @click="close()">
               <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                       stroke-linejoin="round"

client/components/global/ScrollShadow.vue

@@ -74,7 +74,9 @@ export default {
     window.removeEventListener('resize', this.calcDimensions)
     // Cleanup when the component is unmounted.
     this.wrapObserver.disconnect()
-    this.scrollContainerObserver.disconnect()
+    if (this.scrollContainerObserver) {
+      this.scrollContainerObserver.disconnect()
+    }
   },
   methods: {
     async calcDimensions () {
@@ -88,6 +90,7 @@ export default {
     },
     // Check if shadows are needed.
     toggleShadow () {
+      if (!this.$refs.scrollContainer) return
       const hasHorizontalScrollbar =
         this.$refs.scrollContainer.clientWidth <
         this.$refs.scrollContainer.scrollWidth

client/components/open/forms/components/FormEditor.vue

@@ -200,7 +200,7 @@ export default {
         }
       ]
     },
-    helpUrl: () => this.$config.links.help
+    helpUrl: () => useAppConfig().links.help
   },
 
   watch: {},
@@ -217,9 +217,9 @@ export default {
   methods: {
     displayFormModificationAlert (responseData) {
       if (responseData.form && responseData.form.cleanings && Object.keys(responseData.form.cleanings).length > 0) {
-        this.alertWarning(responseData.message)
+        // this.alertWarning(responseData.message)
       } else {
-        this.alertSuccess(responseData.message)
+        // this.alertSuccess(responseData.message)
       }
     },
     openCrisp () {
@@ -244,12 +244,13 @@ export default {
       this.updateFormLoading = true
       this.validationErrorResponse = null
       this.form.put('/open/forms/{id}/'.replace('{id}', this.form.id)).then((data) => {
-        this.formsStore.addOrUpdate(data.form)
+        this.formsStore.save(data.form)
         this.$emit('on-save')
-        this.$router.push({ name: 'forms-slug-show', params: { slug: this.form.slug } })
+        this.$router.push({ name: 'forms-slug-show-share', params: { slug: this.form.slug } })
         this.amplitude.logEvent('form_saved', { form_id: this.form.id, form_slug: this.form.slug })
         this.displayFormModificationAlert(data)
       }).catch((error) => {
+        console.log(error)
         if (error.response.status === 422) {
           this.validationErrorResponse = error.response.data
           this.showValidationErrors()

client/components/open/forms/components/FormFieldsEditor.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-button v-if="formFields && formFields.length > 8"
+    <v-button v-if="form.properties && form.properties.length > 8"
               class="w-full mb-3" color="light-gray"
               @click="openAddFieldSidebar"
     >
@@ -14,7 +14,7 @@
       Add block
     </v-button>
 
-    <draggable v-model="formFields"
+    <draggable v-model="form.properties"
                item-key="id"
                class="bg-white overflow-hidden dark:bg-notion-dark-light rounded-md w-full mx-auto border transition-colors"
                ghost-class="bg-gray-50"
@@ -23,7 +23,7 @@
     >
       <template #item="{element, index}">
         <div class="w-full mx-auto transition-colors"
-             :class="{'bg-gray-100 dark:bg-gray-800':element.hidden,'bg-white dark:bg-notion-dark-light':!element.hidden && !element.type==='nf-page-break', 'border-b': (index!== formFields.length -1), 'bg-blue-50 dark:bg-blue-900':element && element.type==='nf-page-break'}"
+             :class="{'bg-gray-100 dark:bg-gray-800':element.hidden,'bg-white dark:bg-notion-dark-light':!element.hidden && !element.type==='nf-page-break', 'border-b': (index!== form.properties.length -1), 'bg-blue-50 dark:bg-blue-900':element && element.type==='nf-page-break'}"
         >
           <div v-if="element" class="flex items-center space-x-1 group py-2 pr-4 relative">
             <!-- Drag handler -->
@@ -186,51 +186,23 @@ export default {
     const workingFormStore = useWorkingFormStore()
     return {
       route: useRoute(),
-      workingFormStore
+      workingFormStore,
+      form: storeToRefs(workingFormStore).content,
     }
   },
 
   data () {
     return {
-      formFields: [],
       removing: null
     }
   },
 
-  computed: {
+  beforeMount() {
-    form: {
+    console.log('beforemounted formfields editor with', this.form)
-      get () {
-        return this.workingFormStore.content
-      },
-      /* We add a setter */
-      set (value) {
-        this.workingFormStore.set(value)
-      }
-    }
-  },
-
-  watch: {
-    formFields: {
-      deep: true,
-      handler () {
-        this.form.properties = this.formFields
-      }
-    },
-
-    'form.properties': {
-      deep: true,
-      handler () {
-        // If different, then update
-        if (this.form.properties.length !== this.formFields.length ||
-          JSON.stringify(this.form.properties) !== JSON.stringify(this.formFields)) {
-          this.formFields = clonedeep(this.form.properties)
-        }
-      }
-    }
-
   },
 
   mounted () {
+    console.log('mounted formfields editor with', this.form)
     this.init()
   },
 
@@ -279,9 +251,11 @@ export default {
     },
     init () {
       if (this.route.name === 'forms-create' || this.route.name === 'forms-create-guest') { // Set Default fields
-        this.formFields = (this.form.properties.length > 0) ? clonedeep(this.form.properties) : this.getDefaultFields()
+        if (!this.form.properties) {
+          this.form.properties = this.getDefaultFields()
+        }
       } else {
-        this.formFields = clonedeep(this.form.properties).map((field) => {
+        this.form.properties = this.form.properties.map((field) => {
           // Add more field properties
           field.placeholder = field.placeholder || null
           field.prefill = field.prefill || null
@@ -291,7 +265,6 @@ export default {
           return field
         })
       }
-      this.form.properties = this.formFields
     },
     generateUUID () {
       let d = new Date().getTime()// Timestamp
@@ -324,9 +297,7 @@ export default {
       this.workingFormStore.openSettingsForField(index)
     },
     removeBlock (blockIndex) {
-      const newFields = clonedeep(this.formFields)
+      this.form.properties.splice(blockIndex, 1)
-      newFields.splice(blockIndex, 1)
-      this.formFields = newFields
       this.closeSidebar()
     },
     closeSidebar () {

client/components/open/forms/components/FormSubmissions.vue

@@ -23,18 +23,26 @@
           <h4 class="font-bold mb-2">
             Form Fields
           </h4>
-          <div v-for="field in properties" :key="field.id" class="p-2 border">
+          <div class="border border-gray-300 rounded-md">
-            {{ field.name }}
+            <div v-for="(field,index) in properties" :key="field.id" class="p-2 border-gray-300 flex items-center" :class="{'border-t':index!=0}">
-            <v-switch v-model="displayColumns[field.id]" class="float-right" @update:model-value="onChangeDisplayColumns" />
+              <p class="flex-grow truncate">
+              {{ field.name }}
+              </p>
+              <v-switch v-model="displayColumns[field.id]" class="float-right" @update:model-value="onChangeDisplayColumns" />
+            </div>
           </div>
         </template>
         <template v-if="removed_properties.length > 0">
           <h4 class="font-bold mb-2 mt-4">
             Removed Fields
           </h4>
-          <div v-for="field in removed_properties" :key="field.id" class="p-2 border">
+          <div class="border border-gray-300 rounded-md">
-            {{ field.name }}
+            <div v-for="(field,index) in removed_properties" :key="field.id" class="p-2 border-gray-300 flex items-center" :class="{'border-t':index!=0}">
-            <v-switch v-model="displayColumns[field.id]" class="float-right" @update:model-value="onChangeDisplayColumns" />
+              <p class="flex-grow truncate">
+                {{ field.name }}
+              </p>
+              <v-switch v-model="displayColumns[field.id]" class="float-right" @update:model-value="onChangeDisplayColumns" />
+            </div>
           </div>
         </template>
       </div>
@@ -80,18 +88,15 @@
 </template>
 
 <script>
-import axios from 'axios'
 import Fuse from 'fuse.js'
 import Form from 'vform'
-import { useWorkingFormStore } from '../../../../stores/working_form'
-import ScrollShadow from '~/components/global/ScrollShadow.vue'
-import OpenTable from '../../tables/OpenTable.vue'
 import clonedeep from 'clone-deep'
 import VSwitch from '../../../forms/components/VSwitch.vue'
+import OpenTable from '../../tables/OpenTable.vue'
 
 export default {
   name: 'FormSubmissions',
-  components: { ScrollShadow, OpenTable, VSwitch },
+  components: { OpenTable, VSwitch },
   props: {},
 
   setup () {

client/components/open/tables/components/ResizableTh.vue

@@ -43,7 +43,7 @@ export default {
       this.w = parseInt(styles.width, 10)
 
       // Attach the listeners to `document`
-      if (process.server) {
+      if (process.client) {
         document.addEventListener('mousemove', this.mouseMoveHandler)
         document.addEventListener('mouseup', this.mouseUpHandler)
       }
@@ -57,7 +57,7 @@ export default {
     },
     mouseUpHandler () {
       // Remove the handlers of `mousemove` and `mouseup`
-      if (process.server) {
+      if (process.client) {
         document.removeEventListener('mousemove', this.mouseMoveHandler)
         document.removeEventListener('mouseup', this.mouseUpHandler)
       }

client/components/pages/forms/show/EmbedFormAsPopupModal.vue

@@ -6,12 +6,12 @@
       color="light-gray"
       @click="showEmbedFormAsPopupModal=true"
     >
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-4 text-blue-600 inline" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-blue-600 inline" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round"
               d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
         />
       </svg>
-      Embed form as popup
+      Embed as popup
     </v-button>
 
     <modal :show="showEmbedFormAsPopupModal" @close="onClose">

client/components/pages/forms/show/RegenerateFormLink.vue

@@ -6,13 +6,13 @@
       v-track.regenerate_form_link_click="{form_id:form.id, form_slug:form.slug}"
       @click="showGenerateFormLinkModal=true"
     >
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-4 text-blue-600 inline" fill="none"
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-blue-600 inline" fill="none"
             viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
               d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
         />
       </svg>
-      Regenerate form link
+      Regenerate link
     </v-button>
 
     <!--  Regenerate form link modal  -->
@@ -105,7 +105,7 @@ export default {
       this.loadingNewLink = true
       axios.put(this.formEndpoint.replace('{id}', this.form.id) + '/regenerate-link/' + option).then((response) => {
         this.formsStore.addOrUpdate(response.data.form)
-        this.$router.push({name: 'forms-slug-show', params: {slug: response.data.form.slug}})
+        this.$router.push({name: 'forms-slug-show-share', params: {slug: response.data.form.slug}})
         this.alertSuccess(response.data.message)
         this.loadingNewLink = false
       }).finally(() => {

client/components/pages/forms/show/UrlFormPrefill.vue

@@ -6,13 +6,13 @@
       v-track.url_form_prefill_click="{form_id:form.id, form_slug:form.slug}"
       @click="showUrlFormPrefillModal=true"
     >
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-4 text-blue-600 inline" fill="none"
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-blue-600 inline" fill="none"
             viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
               d="M17 16v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-7a2 2 0 012-2h2m3-4H9a2 2 0 00-2 2v7a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-1m-1 4l-3 3m0 0l-3-3m3 3V3"
         />
       </svg>
-      Url form pre-fill
+      Url pre-fill
     </v-button>
 
     <modal :show="showUrlFormPrefillModal" @close="showUrlFormPrefillModal=false">

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 },
+  components: { Breadcrumb, FormEditor },
-  mixins: [SeoMeta],
   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: {
+  async beforeMount() {
-    form () {
-      this.updatedForm = new Form(this.form)
-    }
-  },
-
-  created () {},
-  unmounted () {},
-
-  mounted () {
     window.onbeforeunload = () => {
       if (this.isDirty()) {
         return false
       }
     }
 
-    // this.closeAlert()
+    if (!this.form && !this.formsStore.allLoaded) {
-    if (!this.form) {
+      await this.formsStore.loadAll(this.workspacesStore.currentId)
-      loadForms()
-    } else {
-      this.updatedForm = new Form(this.form)
-      this.formInitialHash = this.hashString(JSON.stringify(this.updatedForm.data()))
     }
 
+    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>
 

client/pages/home.vue

@@ -65,8 +65,9 @@
               <div v-for="(form) in enrichedForms" :key="form.id"
                    class="mt-4 p-4 flex group bg-white hover:bg-gray-50 dark:bg-notion-dark items-center relative"
               >
-                <div class="flex-grow items-center truncate cursor-pointer" role="button"
+                <div class="flex-grow items-center truncate cursor-pointer relative">
-                     @click.prevent="viewForm(form)">
+                  <NuxtLink :to="{name:'forms-slug-show-submissions', params: {slug:form.slug}}"
+                            class="absolute inset-0"/>
                   <span class="font-semibold text-gray-900 dark:text-white">{{ form.title }}</span>
                   <ul class="flex text-gray-500">
                     <li class="pr-1">
@@ -164,9 +165,6 @@ const onTagClick = (tag) => {
     selectedTags.value.add(tag)
   }
 }
-const viewForm = (form) => {
-  useRouter().push({name: 'forms-slug-show', params: {slug: form.slug}})
-}
 
 // Computed
 const isFilteringForms = computed(() => {

client/stores/forms.js

@@ -27,14 +27,18 @@ export const useFormsStore = defineStore('forms', () => {
           contentStore.stopLoading()
           currentPage.value = 1
         }
+      }).catch((error) => {
+        contentStore.stopLoading()
+        currentPage.value = 1
+        throw error
       })
   }
 
   const load = (workspaceId, slug) => {
     contentStore.startLoading()
     return opnFetch(formsEndpoint.replace('{workspaceId}', workspaceId) + '/' + slug)
-      .then((response) => {
+      .finally(() => {
-        console.log(response.data.value)
+        contentStore.stopLoading()
       })
   }
 

client/stores/working_form.js

@@ -13,6 +13,8 @@ export const useWorkingFormStore = defineStore('working_form', {
   }),
   actions: {
     set (form) {
+      console.log('setting working form', form)
+      console.trace();
       this.content = form
     },
     setProperties (properties) {

client/stores/workspaces.js

@@ -22,7 +22,7 @@ export const useWorkspacesStore = defineStore('workspaces', () => {
 
   const save = (items) => {
     contentStore.save(items)
-    if (currentId.value == null && contentStore.length.value) {
+    if ((getCurrent.value == null) && contentStore.length.value) {
       setCurrentId(items[0].id)
     }
   }