Working on form/show and editor

2023-12-24 09:51:22 +01:00 · 2023-12-24 09:51:22 +01:00 · d93b696b05
parent 56e533581c
commit d93b696b05
16 changed files with 96 additions and 133 deletions
--- a/client/components/global/Modal.vue
+++ b/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"
--- a/client/components/global/ScrollShadow.vue
+++ b/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
--- a/client/components/open/forms/components/FormEditor.vue
+++ b/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()
--- a/client/components/open/forms/components/FormFieldsEditor.vue
+++ b/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: {
-    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)
-        }
-      }
-    }
-
+  beforeMount() {
+    console.log('beforemounted formfields editor with', this.form)
  },

  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)
-      newFields.splice(blockIndex, 1)
-      this.formFields = newFields
+      this.form.properties.splice(blockIndex, 1)
      this.closeSidebar()
    },
    closeSidebar () {
--- a/client/components/open/forms/components/FormSubmissions.vue
+++ b/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">
-            {{ field.name }}
-            <v-switch v-model="displayColumns[field.id]" class="float-right" @update:model-value="onChangeDisplayColumns" />
+          <div class="border border-gray-300 rounded-md">
+            <div v-for="(field,index) in properties" :key="field.id" class="p-2 border-gray-300 flex items-center" :class="{'border-t':index!=0}">
+              <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">
-            {{ field.name }}
-            <v-switch v-model="displayColumns[field.id]" class="float-right" @update:model-value="onChangeDisplayColumns" />
+          <div class="border border-gray-300 rounded-md">
+            <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}">
+              <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 () {
--- a/client/components/open/tables/components/ResizableTh.vue
+++ b/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)
      }
--- a/client/components/pages/forms/show/EmbedFormAsPopupModal.vue
+++ b/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">
--- a/client/components/pages/forms/show/RegenerateFormLink.vue
+++ b/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(() => {
--- a/client/components/pages/forms/show/UrlFormPrefill.vue
+++ b/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">
--- a/client/pages/forms/[slug]/edit.vue
+++ b/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
--- a/client/pages/forms/[slug]/show.vue
+++ b/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',

--- a/client/pages/forms/[slug]/show/share.vue
+++ b/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>

--- a/client/pages/home.vue
+++ b/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"
-                     @click.prevent="viewForm(form)">
+                <div class="flex-grow items-center truncate cursor-pointer relative">
+                  <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(() => {
--- a/client/stores/forms.js
+++ b/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) => {
-        console.log(response.data.value)
+      .finally(() => {
+        contentStore.stopLoading()
      })
  }

--- a/client/stores/working_form.js
+++ b/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) {
--- a/client/stores/workspaces.js
+++ b/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)
    }
  }