Nuxt Migration notifications (#265)

* Nuxt Migration notifications * @input to @update:model-value * change field type fixes * @update:model-value * Enable form-block-logic-editor * vue-confetti migration * PR request changes * useAlert in setup
2023-12-31 17:09:01 +05:30
parent b4365b5e30
commit 6fd2985ff5
38 changed files with 586 additions and 1390 deletions
--- a/client/components/open/forms/OpenCompleteForm.vue
+++ b/client/components/open/forms/OpenCompleteForm.vue
@@ -129,7 +129,8 @@ export default {
  setup(props) {
    return {
      isIframe: useIsIframe(),
-      pendingSubmission: pendingSubmission(props.form)
+      pendingSubmission: pendingSubmission(props.form),
+      confetti: useConfetti()
    }
  },

@@ -214,12 +215,11 @@ export default {

        // If enabled display confetti
        if (this.form.confetti_on_submission) {
-          this.playConfetti()
+          this.confetti.play()
        }
      }).catch((error) => {
        if (error.response && error.response.data && error.response.data.message) {
-          console.error(error)
-          // this.alertError(error.response.data.message)
+          useAlert().error(error.response.data.message)
        }
        this.loading = false
        onFailure()
--- a/client/components/open/forms/components/CopyContent.vue
+++ b/client/components/open/forms/components/CopyContent.vue
@@ -56,9 +56,9 @@ export default {
      document.execCommand('copy')
      document.body.removeChild(el)
      if(this.isDraft){
-        this.alertWarning('Copied! But other people won\'t be able to see the form since it\'s currently in draft mode')
+        useAlert().warning('Copied! But other people won\'t be able to see the form since it\'s currently in draft mode')
      } else {
-        this.alertSuccess('Copied!')
+        useAlert().success('Copied!')
      }

    }
--- a/client/components/open/forms/components/FormEditor.vue
+++ b/client/components/open/forms/components/FormEditor.vue
@@ -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)
+        useAlert().warning(responseData.message)
      } else {
-        // this.alertSuccess(responseData.message)
+        useAlert().success(responseData.message)
      }
    },
    openCrisp () {
--- a/client/components/open/forms/components/form-components/FormCustomization.vue
+++ b/client/components/open/forms/components/form-components/FormCustomization.vue
@@ -19,7 +19,7 @@
    />
    <div class="-mt-3 mb-3 text-gray-400 dark:text-gray-500">
      <small>
-        Need another theme? <a href="#" @click.prevent="openChat">Send us some suggestions!</a>
+        Need another theme? <a href="#" @click.prevent="crisp.openAndShowChat">Send us some suggestions!</a>
      </small>
    </div>

@@ -80,56 +80,25 @@
  </editor-options-panel>
 </template>

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

-export default {
-  components: { EditorOptionsPanel, ProTag },
-  props: {
-  },
-  setup () {
-    const workingFormStore = useWorkingFormStore()
-    return {
-      workingFormStore
-    }
-  },
-  data () {
-    return {
-      isMounted: false
-    }
-  },
+const workingFormStore = useWorkingFormStore()
+const form = storeToRefs(workingFormStore).content
+const isMounted =  ref(false)
+const crisp = useCrisp()
+const confetti = useConfetti()

-  computed: {
-    form: {
-      get () {
-        return this.workingFormStore.content
-      },
-      /* We add a setter */
-      set (value) {
-        this.workingFormStore.set(value)
-      }
-    }
-  },
+onMounted(() => {
+  isMounted.value = true
+})

-  watch: {},
-
-  mounted () {
-    this.isMounted = true
-  },
-
-  methods: {
-    onChangeConfettiOnSubmission (val) {
-      this.form.confetti_on_submission = val
-      if (this.isMounted && val) {
-        this.playConfetti()
-      }
-    },
-    openChat () {
-      window.$crisp.push(['do', 'chat:show'])
-      window.$crisp.push(['do', 'chat:open'])
-    }
+const onChangeConfettiOnSubmission = (val) => {
+  form.confetti_on_submission = val
+  if (isMounted.value && val) {
+    confetti.play()
  }
 }
 </script>
--- a/client/components/open/forms/components/form-logic-components/ColumnCondition.vue
+++ b/client/components/open/forms/components/form-logic-components/ColumnCondition.vue
@@ -6,20 +6,20 @@
    </div>
    <SelectInput v-model="content.operator" class="w-full" :options="operators"
                 :name="'operator_'+property.id" placeholder="Comparison operator"
-                 @update:modelValue="operatorChanged()"
+                 @update:model-value="operatorChanged()"
    />

    <template v-if="hasInput">
      <component v-bind="inputComponentData" :is="inputComponentData.component" v-model="content.value" class="w-full"
                 :name="'value_'+property.id" placeholder="Filter Value"
-                 @update:modelValue="emitInput()"
+                 @update:model-value="emitInput()"
      />
    </template>
  </div>
 </template>

 <script>
-import OpenFilters from '../../../../../../data/open_filters.json'
+import OpenFilters from '../../../../../data/open_filters.json'

 export default {
  components: { },
--- a/client/components/open/forms/components/form-logic-components/ConditionEditor.vue
+++ b/client/components/open/forms/components/form-logic-components/ConditionEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <query-builder v-model="query" :rules="rules" :config="config" @update:modelValue="onChange">
+  <query-builder v-model="query" :rules="rules" :config="config" @update:model-value="onChange">
    <template #groupOperator="props">
      <div class="query-builder-group-slot__group-selection flex items-center px-5 border-b py-1 mb-1 flex">
        <p class="mr-2 font-semibold">
@@ -13,7 +13,7 @@
          option-key="identifier"
          name="operator-input"
          margin-bottom=""
-          @update:modelValue="props.updateCurrentOperator($event)"
+          @update:model-value="props.updateCurrentOperator($event)"
        />
      </div>
    </template>
@@ -24,7 +24,7 @@
      <component
        :is="ruleCtrl.ruleComponent"
        :model-value="ruleCtrl.ruleData"
-        @update:modelValue="ruleCtrl.updateRuleData"
+        @update:model-value="ruleCtrl.updateRuleData"
      />
    </template>
  </query-builder>
--- a/client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
+++ b/client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
@@ -69,12 +69,11 @@
 <script>
 import ConditionEditor from './ConditionEditor.vue'
 import Modal from '../../../../global/Modal.vue'
-import SelectInput from '../../../../forms/SelectInput.vue'
 import clonedeep from 'clone-deep'

 export default {
  name: 'FormBlockLogicEditor',
-  components: { SelectInput, Modal, ConditionEditor },
+  components: { Modal, ConditionEditor },
  props: {
    field: {
      type: Object,
--- a/client/components/open/forms/components/templates/FormTemplateModal.vue
+++ b/client/components/open/forms/components/templates/FormTemplateModal.vue
@@ -93,7 +93,8 @@ export default {
      user : computed(() => authStore.user),
      templates : computed(() => templatesStore.content),
      industries : computed(() => templatesStore.industries),
-      types : computed(() => templatesStore.types)
+      types : computed(() => templatesStore.types),
+      useAlert: useAlert()
    }
  },

@@ -156,7 +157,7 @@ export default {
      this.templateForm.form = this.form
      await this.templateForm.post('/api/templates').then((response) => {
        if (response.data.message) {
-          this.alertSuccess(response.data.message)
+          this.useAlert.success(response.data.message)
        }
        this.templatesStore.save(response.data.data)
        this.$emit('close')
@@ -166,7 +167,7 @@ export default {
      this.templateForm.form = this.form
      await this.templateForm.put('/api/templates/' + this.template.id).then((response) => {
        if (response.data.message) {
-          this.alertSuccess(response.data.message)
+          this.useAlert.success(response.data.message)
        }
        this.templatesStore.save(response.data.data)
        this.$emit('close')
@@ -176,7 +177,7 @@ export default {
      if (!this.template) return
      axios.delete('/api/templates/' + this.template.id).then((response) => {
        if (response.data.message) {
-          this.alertSuccess(response.data.message)
+          this.useAlert.success(response.data.message)
        }
        this.$router.push({ name: 'templates' })
        this.templatesStore.remove(this.template)
--- a/client/components/open/forms/fields/FormFieldEdit.vue
+++ b/client/components/open/forms/fields/FormFieldEdit.vue
@@ -109,7 +109,7 @@ export default {
      return this.field && this.field.type.startsWith('nf')
    },
    typeCanBeChanged () {
-      return ['text', 'email', 'phone', 'number', 'select', 'multi_select'].includes(this.field.type)
+      return ['text', 'email', 'phone_number', 'number', 'select', 'multi_select'].includes(this.field.type)
    }
  },

--- a/client/components/open/forms/fields/components/BlockOptions.vue
+++ b/client/components/open/forms/fields/components/BlockOptions.vue
@@ -86,14 +86,16 @@
    </div>

    <!--  Logic Block -->
-    <!--    <form-block-logic-editor class="py-2 px-4 border-b" :form="form" :field="field" />-->
+    <form-block-logic-editor class="py-2 px-4 border-b" :form="form" :field="field" />
  </div>
 </template>

 <script>
+import FormBlockLogicEditor from '../../components/form-logic-components/FormBlockLogicEditor.vue'
+
 export default {
  name: 'BlockOptions',
-  components: { },
+  components: {FormBlockLogicEditor},
  props: {
    field: {
      type: Object,
--- a/client/components/open/forms/fields/components/ChangeFieldType.vue
+++ b/client/components/open/forms/fields/components/ChangeFieldType.vue
@@ -41,11 +41,11 @@ export default {
  computed: {
    changeTypeOptions () {
      let newTypes = []
-      if (['text', 'email', 'phone', 'number'].includes(this.field.type)) {
+      if (['text', 'email', 'phone_number', 'number'].includes(this.field.type)) {
        newTypes = [
          { name: 'Text Input', value: 'text' },
          { name: 'Email Input', value: 'email' },
-          { name: 'Phone Input', value: 'phone' },
+          { name: 'Phone Input', value: 'phone_number' },
          { name: 'Number Input', value: 'number' }
        ]
      }
--- a/client/components/open/forms/fields/components/FieldOptions.vue
+++ b/client/components/open/forms/fields/components/FieldOptions.vue
@@ -82,7 +82,7 @@
      />

      <v-checkbox v-model="field.is_scale" class="mt-4"
-                  :name="field.id+'_is_scale'" @input="initScale"
+                  :name="field.id+'_is_scale'" @update:model-value="initScale"
      >
        Scale
      </v-checkbox>
@@ -337,7 +337,7 @@
                      {name:'Above input',value:'above_input'},
                    ]"
                    :form="field" label="Field Help Position"
-                    @input="onFieldHelpPositionChange"
+                    @update:model-value="onFieldHelpPositionChange"
      />

      <template v-if="['text','number','url','email'].includes(field.type)">
@@ -382,7 +382,7 @@
    </div>

    <!--  Logic Block -->
-    <!--    <form-block-logic-editor class="py-2 px-4 border-b" :form="form" :field="field" />-->
+    <form-block-logic-editor class="py-2 px-4 border-b" :form="form" :field="field" />
  </div>
 </template>

@@ -390,10 +390,11 @@
 import timezones from '~/data/timezones.json'
 import countryCodes from '~/data/country_codes.json'
 import CountryFlag from 'vue-country-flag-next'
+import FormBlockLogicEditor from '../../components/form-logic-components/FormBlockLogicEditor.vue'

 export default {
  name: 'FieldOptions',
-  components: { CountryFlag },
+  components: { CountryFlag, FormBlockLogicEditor },
  props: {
    field: {
      type: Object,
@@ -533,23 +534,23 @@ export default {
    },
    initRating () {
      if (this.field.is_rating) {
-        this.$set(this.field, 'is_scale', false)
+        this.field.is_scale = false
        if (!this.field.rating_max_value) {
-          this.$set(this.field, 'rating_max_value', 5)
+          this.field.rating_max_value = 5
        }
      }
    },
    initScale () {
      if (this.field.is_scale) {
-        this.$set(this.field, 'is_rating', false)
+        this.field.is_rating = false
        if (!this.field.scale_min_value) {
-          this.$set(this.field, 'scale_min_value', 1)
+          this.field.scale_min_value = 1
        }
        if (!this.field.scale_max_value) {
-          this.$set(this.field, 'scale_max_value', 5)
+          this.field.scale_max_value = 5
        }
        if (!this.field.scale_step_value) {
-          this.$set(this.field, 'scale_step_value', 1)
+          this.field.scale_step_value = 1
        }
      }
    },