Fixed form creation

client/components/forms/CodeInput.vue → 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

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()
   },
 

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
 

client/components/global/Dropdown.vue

@@ -33,7 +33,6 @@ const open = (event) => {
 }
 
 const close = (event) => {
-  console.log('closing')
   isOpen.value = false
 }
 

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

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') {

client/components/open/editors/EditorRightSidebar.vue

@@ -1,28 +1,32 @@
 <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 />
     </div>
   </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>

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(() => {

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) => {

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