Fixed form creation

2023-12-20 16:10:32 +01:00
parent b598a16406
commit af5656ce81
34 changed files with 363 additions and 356 deletions
--- a/client/components/forms/CodeInput.client.vue
+++ b/client/components/forms/CodeInput.client.vue
@@ -36,8 +36,6 @@ import { inputProps, useFormInput } from './useFormInput.js'
 import InputWrapper from './components/InputWrapper.vue'

 export default {
-  name: 'CodeInput',
-
  components: { InputWrapper, codemirror },
  props: {
    ...inputProps
--- a/client/components/forms/DateInput.vue
+++ b/client/components/forms/DateInput.vue
@@ -46,7 +46,6 @@
 <script>
 import { inputProps, useFormInput } from './useFormInput.js'
 import InputWrapper from './components/InputWrapper.vue'
-import { fixedClasses } from '../../plugins/config/vue-tailwind/datePicker.js'

 export default {
  name: 'DateInput',
@@ -68,7 +67,6 @@ export default {
  },

  data: () => ({
-    fixedClasses: fixedClasses,
    fromDate: null,
    toDate: null
  }),
@@ -142,7 +140,6 @@ export default {
      }
    }

-    this.fixedClasses.input = this.theme.default.input
    this.setInputColor()
  },

--- a/client/components/forms/components/VSelect.vue
+++ b/client/components/forms/components/VSelect.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="v-select relative">
+  <div class="v-select relative" ref="select">
    <span class="inline-block w-full rounded-md">
      <button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
              class="cursor-pointer"
@@ -31,7 +31,7 @@
        </span>
      </button>
    </span>
-    <collapsible v-model="isOpen"
+    <collapsible v-model="isOpen" @click-away="onClickAway"
                 class="absolute mt-1 rounded-md bg-white dark:bg-notion-dark-light shadow-xl z-10"
                 :class="dropdownClass"
    >
@@ -155,6 +155,12 @@ export default {
    }
  },
  methods: {
+    onClickAway (event) {
+      // Check that event target isn't children of dropdown
+      if (this.$refs.select && !this.$refs.select.contains(event.target)) {
+        this.isOpen = false
+      }
+    },
    isSelected (value) {
      if (!this.modelValue) return false

--- a/client/components/global/Dropdown.vue
+++ b/client/components/global/Dropdown.vue
@@ -33,7 +33,6 @@ const open = (event) => {
 }

 const close = (event) => {
-  console.log('closing')
  isOpen.value = false
 }

--- a/client/components/global/Navbar.vue
+++ b/client/components/global/Navbar.vue
@@ -144,15 +144,14 @@ export default {
  },

  setup () {
-    const authStore = useAuthStore()
-    const formsStore = useFormsStore()
-    const workspacesStore = useWorkspacesStore()
    const {openCrisp} = useCrisp()
+    const authStore = useAuthStore()
    return {
      authStore,
-      formsStore,
-      workspacesStore,
      openCrisp,
+      appStore: useAppStore(),
+      formsStore: useFormsStore(),
+      workspacesStore: useWorkspacesStore(),
      config: useConfig(),
      user: computed(() => authStore.user),
      isIframe: useIsIframe(),
@@ -189,7 +188,7 @@ export default {
          return false
        }
      }
-      return !this.$root.navbarHidden
+      return !this.appStore.navbarHidden
    },
    userOnboarded () {
      return this.user && this.user.workspaces_count > 0
--- a/client/components/global/WorkspaceDropdown.vue
+++ b/client/components/global/WorkspaceDropdown.vue
@@ -79,7 +79,8 @@ export default {
  methods: {
    switchWorkspace (workspace) {
      this.workspacesStore.setCurrentId(workspace.id)
-      this.$refs.dropdown.close()
+      this.formsStore.resetState()
+      this.formsStore.load(workspace.id)
      const router = useRouter()
      const route = useRoute()
      if (route.name !== 'home') {
--- a/client/components/open/editors/EditorRightSidebar.vue
+++ b/client/components/open/editors/EditorRightSidebar.vue
@@ -1,6 +1,6 @@
 <template>
-  <transition @leave="(el,done) => motions.slide.leave(done)">
-    <div v-if="show" v-motion-slide-right="'slide'"
+  <transition @leave="(el,done) => sidebarMotion.leave(done)">
+    <div v-if="show" ref="sidebar"
         class="absolute shadow-lg shadow-gray-800/30 top-0 h-[calc(100vh-53px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll md:max-w-[20rem] flex-shrink-0 z-50"
    >
      <slot />
@@ -8,21 +8,25 @@
  </transition>
 </template>

-<script>
-import { useMotions } from '@vueuse/motion'
+<script setup>
+import {slideRight, useMotion} from "@vueuse/motion"
+import {watch} from "vue";

-export default {
-  name: 'EditorRightSidebar',
-  props: {
-    show: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup (props) {
-    return {
-      motions: useMotions()
-    }
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
  }
-}
+})
+
+const sidebar = ref(null)
+const sidebarMotion = ref(null)
+watch(() => props.show, (newVal) => {
+  if (newVal) {
+    nextTick(() => {
+      sidebarMotion.value = useMotion(sidebar.value, slideRight)
+    })
+  }
+})
+
 </script>
--- a/client/components/open/forms/components/FormEditor.vue
+++ b/client/components/open/forms/components/FormEditor.vue
@@ -77,17 +77,12 @@
      />
    </div>
  </div>
-  <div v-else class="flex justify-center items-center">
+  <div v-else class="flex justify-center items-center p-8">
    <Loader class="w-6 h-6" />
  </div>
 </template>

 <script>
-import { computed } from 'vue'
-import { useAuthStore } from '../../../../stores/auth'
-import { useFormsStore } from '../../../../stores/forms'
-import { useWorkingFormStore } from '../../../../stores/working_form'
-import { useWorkspacesStore } from '../../../../stores/workspaces'
 import FormEditorSidebar from './form-components/FormEditorSidebar.vue'
 import FormErrorModal from './form-components/FormErrorModal.vue'
 import FormInformation from './form-components/FormInformation.vue'
@@ -100,8 +95,7 @@ import FormEditorPreview from './form-components/FormEditorPreview.vue'
 import FormSecurityPrivacy from './form-components/FormSecurityPrivacy.vue'
 import FormCustomSeo from './form-components/FormCustomSeo.vue'
 import FormAccess from './form-components/FormAccess.vue'
-import saveUpdateAlert from '../../../../mixins/forms/saveUpdateAlert.js'
-import fieldsLogic from '../../../../mixins/forms/fieldsLogic.js'
+import {validatePropertiesLogic} from "~/composables/forms/validatePropertiesLogic.js"

 export default {
  name: 'FormEditor',
@@ -119,7 +113,6 @@ export default {
    FormCustomSeo,
    FormAccess
  },
-  mixins: [saveUpdateAlert, fieldsLogic],
  props: {
    isEdit: {
      required: false,
@@ -144,15 +137,18 @@ export default {
  },

  setup () {
-    const authStore = useAuthStore()
+    const {user} = storeToRefs(useAuthStore())
    const formsStore = useFormsStore()
-    const workingFormStore = useWorkingFormStore()
-    const workspacesStore = useWorkspacesStore()
+    const {content: form} = storeToRefs(useWorkingFormStore())
+    const {getCurrent: workspace} = storeToRefs(useWorkspacesStore())
    return {
+      appStore: useAppStore(),
+      crisp: useCrisp(),
+      amplitude: useAmplitude(),
+      workspace,
      formsStore,
-      workingFormStore,
-      workspacesStore,
-      user: computed(() => authStore.user)
+      form,
+      user,
    }
  },

@@ -166,21 +162,9 @@ export default {
  },

  computed: {
-    form: {
-      get () {
-        return this.workingFormStore.content
-      },
-      /* We add a setter */
-      set (value) {
-        this.workingFormStore.set(value)
-      }
-    },
    createdForm () {
      return this.formsStore.getBySlug(this.createdFormSlug)
    },
-    workspace () {
-      return this.workspacesStore.getCurrent()
-    },
    steps () {
      return [
        {
@@ -223,23 +207,29 @@ export default {

  mounted () {
    this.$emit('mounted')
-    this.$root.hideNavbar()
+    this.appStore.hideNavbar()
  },

  beforeUnmount () {
-    this.$root.hideNavbar(false)
+    this.appStore.showNavbar()
  },

  methods: {
+    displayFormModificationAlert (responseData) {
+      if (responseData.form && responseData.form.cleanings && Object.keys(responseData.form.cleanings).length > 0) {
+        this.alertWarning(responseData.message)
+      } else {
+        this.alertSuccess(responseData.message)
+      }
+    },
    openCrisp () {
-      window.$crisp.push(['do', 'chat:show'])
-      window.$crisp.push(['do', 'chat:open'])
+      this.crisp.openChat()
    },
    showValidationErrors () {
      this.showFormErrorModal = true
    },
    saveForm () {
-      this.form.properties = this.validateFieldsLogic(this.form.properties)
+      this.form.properties = validatePropertiesLogic(this.form.properties)
      if (this.isGuest) {
        this.saveFormGuest()
      } else if (this.isEdit) {
@@ -253,12 +243,11 @@ export default {

      this.updateFormLoading = true
      this.validationErrorResponse = null
-      this.form.put('/api/open/forms/{id}/'.replace('{id}', this.form.id)).then((response) => {
-        const data = response.data
+      this.form.put('/open/forms/{id}/'.replace('{id}', this.form.id)).then((data) => {
        this.formsStore.addOrUpdate(data.form)
        this.$emit('on-save')
        this.$router.push({ name: 'forms.show', params: { slug: this.form.slug } })
-        this.$logEvent('form_saved', { form_id: this.form.id, form_slug: this.form.slug })
+        this.amplitude.logEvent('form_saved', { form_id: this.form.id, form_slug: this.form.slug })
        this.displayFormModificationAlert(data)
      }).catch((error) => {
        if (error.response.status === 422) {
@@ -275,27 +264,27 @@ export default {
      this.validationErrorResponse = null

      this.updateFormLoading = true
-      this.form.post('/api/open/forms').then((response) => {
-        this.formsStore.addOrUpdate(response.data.form)
+      this.form.post('/open/forms').then((response) => {
+        this.formsStore.save(response.form)
        this.$emit('on-save')
-        this.createdFormSlug = response.data.form.slug
+        this.createdFormSlug = response.form.slug

-        this.$logEvent('form_created', { form_id: response.data.form.id, form_slug: response.data.form.slug })
-        this.$crisp.push(['set', 'session:event', [[['form_created', {
-          form_id: response.data.form.id,
-          form_slug: response.data.form.slug
-        }, 'blue']]]])
-        this.displayFormModificationAlert(response.data)
-        this.$router.push({
-          name: 'forms.show',
+        this.amplitude.logEvent('form_created', { form_id: response.form.id, form_slug: response.form.slug })
+        this.crisp.pushEvent('form_created',{
+          form_id: response.form.id,
+          form_slug: response.form.slug
+        })
+        this.displayFormModificationAlert(response)
+        useRouter().push({
+          name: 'forms-show',
          params: {
            slug: this.createdForm.slug,
-            new_form: response.data.users_first_form
+            new_form: response.users_first_form
          }
        })
      }).catch((error) => {
        if (error.response && error.response.status === 422) {
-          this.validationErrorResponse = error.response.data
+          this.validationErrorResponse = error.response
          this.showValidationErrors()
        }
      }).finally(() => {
--- a/client/components/open/forms/components/FormFieldsEditor.vue
+++ b/client/components/open/forms/components/FormFieldsEditor.vue
@@ -166,8 +166,6 @@
 </template>

 <script>
-import { computed } from 'vue'
-import { useWorkingFormStore } from '../../../../stores/working_form'
 import draggable from 'vuedraggable'
 import ProTag from '~/components/global/ProTag.vue'
 import clonedeep from 'clone-deep'
@@ -187,6 +185,7 @@ export default {
  setup () {
    const workingFormStore = useWorkingFormStore()
    return {
+      route: useRoute(),
      workingFormStore
    }
  },
@@ -279,7 +278,7 @@ export default {
      ]
    },
    init () {
-      if (this.$route.name === 'forms-create' || this.$route.name === 'forms-create-guest') { // Set Default fields
+      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()
      } else {
        this.formFields = clonedeep(this.form.properties).map((field) => {
--- a/client/components/open/forms/components/form-components/AddFormBlock.vue
+++ b/client/components/open/forms/components/form-components/AddFormBlock.vue
@@ -73,7 +73,9 @@ export default {

  setup () {
    const workingFormStore = useWorkingFormStore()
+    const {content: form} = storeToRefs(workingFormStore)
    return {
+      form,
      workingFormStore,
      selectedFieldIndex : computed(() => workingFormStore.selectedFieldIndex)
    }
@@ -171,16 +173,6 @@ export default {
  },

  computed: {
-    form: {
-      get () {
-        return this.workingFormStore.content
-      },
-      /* We add a setter */
-      set (value) {
-        this.workingFormStore.set(value)
-      }
-    },
-
    defaultBlockNames () {
      return {
        text: 'Your name',
@@ -230,6 +222,7 @@ export default {
      }
      newBlock.help_position = 'below_input'
      if (this.selectedFieldIndex === null || this.selectedFieldIndex === undefined) {
+        console.log('------',this.form)
        const newFields = clonedeep(this.form.properties)
        newFields.push(newBlock)
        this.form.properties = newFields
--- a/client/components/open/forms/components/form-components/FormAboutSubmission.vue
+++ b/client/components/open/forms/components/form-components/FormAboutSubmission.vue
@@ -139,7 +139,9 @@ export default {
  props: {},
  setup () {
    const workingFormStore = useWorkingFormStore()
+    const {content: form} = storeToRefs(workingFormStore)
    return {
+      form,
      workingFormStore
    }
  },
--- a/client/components/open/forms/components/form-components/FormCustomCode.vue
+++ b/client/components/open/forms/components/form-components/FormCustomCode.vue
@@ -2,7 +2,9 @@
  <editor-options-panel name="Custom Code" :already-opened="false" :has-pro-tag="true">
    <template #icon>
      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305M14 17.5L16.5 15L14 12.5M10 12.5L7.5 15L10 17.5M20 9.98822V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H12.0118C12.7455 2 13.1124 2 13.4577 2.08289C13.7638 2.15638 14.0564 2.27759 14.3249 2.44208C14.6276 2.6276 14.887 2.88703 15.4059 3.40589L18.5941 6.59411C19.113 7.11297 19.3724 7.3724 19.5579 7.67515C19.7224 7.94356 19.8436 8.2362 19.9171 8.5423C20 8.88757 20 9.25445 20 9.98822Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path
+          d="M14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305M14 17.5L16.5 15L14 12.5M10 12.5L7.5 15L10 17.5M20 9.98822V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H12.0118C12.7455 2 13.1124 2 13.4577 2.08289C13.7638 2.15638 14.0564 2.27759 14.3249 2.44208C14.6276 2.6276 14.887 2.88703 15.4059 3.40589L18.5941 6.59411C19.113 7.11297 19.3724 7.3724 19.5579 7.67515C19.7224 7.94356 19.8436 8.2362 19.9171 8.5423C20 8.88757 20 9.25445 20 9.98822Z"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </template>
    <p class="mt-4">
@@ -17,31 +19,30 @@
 </template>

 <script>
-import { useWorkingFormStore } from '../../../../../stores/working_form'
 import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
-import CodeInput from '../../../../forms/CodeInput.vue'

 export default {
-  components: { EditorOptionsPanel, CodeInput },
+  components: {EditorOptionsPanel},
  props: {},
-  setup () {
+  setup() {
    const workingFormStore = useWorkingFormStore()
+    const {content: form} = storeToRefs(workingFormStore)
    return {
+      form,
      workingFormStore
    }
  },
-  data () {
-    return {
-    }
+  data() {
+    return {}
  },

  computed: {
    form: {
-      get () {
+      get() {
        return this.workingFormStore.content
      },
      /* We add a setter */
-      set (value) {
+      set(value) {
        this.workingFormStore.set(value)
      }
    }
--- a/client/components/open/forms/components/form-components/FormInformation.vue
+++ b/client/components/open/forms/components/form-components/FormInformation.vue
@@ -68,8 +68,6 @@
 <script>
 import { computed } from 'vue'
 import clonedeep from 'clone-deep'
-import { useFormsStore } from '../../../../../stores/forms'
-import { useWorkingFormStore } from '../../../../../stores/working_form'
 import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 import SelectInput from '../../../../forms/SelectInput.vue'

@@ -80,10 +78,11 @@ export default {
  setup () {
    const formsStore = useFormsStore()
    const workingFormStore = useWorkingFormStore()
+    const {getAll: forms} = storeToRefs(formsStore)
    return {
+      forms,
      formsStore,
      workingFormStore,
-      forms : computed(() => formsStore.content)
    }
  },

@@ -129,7 +128,7 @@ export default {
      }
    },
    allTagsOptions () {
-      return this.formsStore.getAllTags.map((tagname) => {
+      return this.formsStore.allTags.map((tagname) => {
        return {
          name: tagname,
          value: tagname
--- a/client/components/open/forms/components/form-components/FormNotifications.vue
+++ b/client/components/open/forms/components/form-components/FormNotifications.vue
@@ -44,8 +44,10 @@ export default {
  props: {},
  setup () {
    const workingFormStore = useWorkingFormStore()
+    const {content: form} = storeToRefs(workingFormStore)
    return {
-      workingFormStore
+      workingFormStore,
+      form
    }
  },
  data () {
@@ -54,16 +56,7 @@ export default {
  },

  computed: {
-    form: {
-      get () {
-        return this.workingFormStore.content
-      },
-      /* We add a setter */
-      set (value) {
-        this.workingFormStore.set(value)
-      }
-    },
-    zapierUrl: () => this.$config.links.zapier_integration
+    zapierUrl: () => useConfig().links.zapier_integration
  },

  watch: {
--- a/client/components/open/forms/components/form-components/components/FormNotificationsOption.vue
+++ b/client/components/open/forms/components/form-components/components/FormNotificationsOption.vue
@@ -50,15 +50,15 @@
 </template>

 <script>
-import { useWorkingFormStore } from '../../../../../../stores/working_form'
 import ProTag from '~/components/global/ProTag.vue'

 export default {
  components: { ProTag },
-  props: {},
  setup () {
    const workingFormStore = useWorkingFormStore()
+    const {content: form} = storeToRefs(workingFormStore)
    return {
+      form,
      workingFormStore
    }
  },
@@ -69,17 +69,8 @@ export default {
  },

  computed: {
-    form: {
-      get () {
-        return this.workingFormStore.content
-      },
-      /* We add a setter */
-      set (value) {
-        this.workingFormStore.set(value)
-      }
-    },
    replayToEmailField () {
-      const emailFields = this.form.properties.filter((field) => {
+      const emailFields = this.form.value.properties.filter((field) => {
        return field.type === 'email' && !field.hidden
      })
      if (emailFields.length === 1) return emailFields[0]
--- a/client/components/open/forms/fields/components/BlockOptions.vue
+++ b/client/components/open/forms/fields/components/BlockOptions.vue
@@ -91,11 +91,9 @@
 </template>

 <script>
-import CodeInput from '../../../../forms/CodeInput.vue'
-
 export default {
  name: 'BlockOptions',
-  components: { CodeInput },
+  components: { },
  props: {
    field: {
      type: Object,
--- a/client/components/open/forms/fields/components/FieldOptions.vue
+++ b/client/components/open/forms/fields/components/FieldOptions.vue
@@ -387,8 +387,8 @@
 </template>

 <script>
-import timezones from '../../../../../../data/timezones.json'
-import countryCodes from '../../../../../../data/country_codes.json'
+import timezones from '~/data/timezones.json'
+import countryCodes from '~/data/country_codes.json'
 import CountryFlag from 'vue-country-flag-next'

 export default {
--- a/client/components/pages/forms/create/CreateFormBaseModal.vue
+++ b/client/components/pages/forms/create/CreateFormBaseModal.vue
@@ -91,20 +91,16 @@
 </template>

 <script>
-import Loader from '~/components/global/Loader.vue'
-import Form from 'vform'
 import axios from 'axios'

 export default {
-  name: 'CreateFormBaseModal',
-  components: { Loader },
  props: {
    show: { type: Boolean, required: true }
  },

  data: () => ({
    state: 'default',
-    aiForm: new Form({
+    aiForm: useForm({
      form_prompt: ''
    }),
    loading: false
@@ -112,7 +108,7 @@ export default {

  computed: {
    aiFeaturesEnabled () {
-      return this.$config.ai_features_enabled
+      return useConfig().ai_features_enabled
    }
  },

--- a/client/components/pages/forms/show/ExtraMenu.vue
+++ b/client/components/pages/forms/show/ExtraMenu.vue
@@ -41,8 +41,8 @@
        </svg>
        View form
      </a>
-      <router-link v-if="isMainPage" v-track.edit_form_click="{form_id:form.id, form_slug:form.slug}"
-                   :to="{name:'forms-edit', params: {slug: form.slug}}"
+      <nuxt-link v-if="isMainPage" v-track.edit_form_click="{form_id:form.id, form_slug:form.slug}"
+                   :to="{name:'forms-slug-edit', params: {slug: form.slug}}"
                   class="block block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
      >
        <svg class="w-4 h-4 mr-2" width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -52,7 +52,7 @@
          />
        </svg>
        Edit
-      </router-link>
+      </nuxt-link>
      <a v-if="isMainPage" href="#"
         class="block block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
         @click.prevent="copyLink"