fix: vue 3 followup fixes (#10213)

Fixes: CW-3602,  CW-3606, CW-3605, CW-3601, CW-3603, CW-3600, CW-3598

-
[CW-3602](https://linear.app/chatwoot/issue/CW-3602/chat-list-infinite-loader-fetching-only-odd-numbered-pages)
Chat list pagination broken
-
[CW-3606](https://linear.app/chatwoot/issue/CW-3606/saving-greeting-message-is-not-working-in-inbox-settings)
Greetings message not getting saved
-
[CW-3605](https://linear.app/chatwoot/issue/CW-3605/copy-and-paste-image-attachment-not-working-in-widget)
Paste not working on widget
-
[CW-3601](https://linear.app/chatwoot/issue/CW-3601/edit-category-is-not-working-properly)
Edit category not updating
-
[CW-3603](https://linear.app/chatwoot/issue/CW-3603/delete-filter-is-not-working)
Delete filter modal not toggling
-
[CW-3600](https://linear.app/chatwoot/issue/CW-3600/portal-editor-is-not-working-properly)
Portal editor events were flaky
-
[CW-3598](https://linear.app/chatwoot/issue/CW-3598/rearrange-of-pre-chat-form-fields-throws-an-error)
Prechat form re-order bug

---------

Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>

app/javascript/dashboard/components/ChatList.vue

@@ -537,12 +537,6 @@ function loadMoreConversations() {
     return;
   }
 
-  // Increment the current page
-  store.dispatch('conversationPage/setCurrentPage', {
-    filter: currentPageFilterKey.value,
-    page: currentFiltersPage.value + 1,
-  });
-
   if (!hasAppliedFiltersOrActiveFolders.value) {
     fetchConversations();
   } else if (hasActiveFolders.value) {

app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue

@@ -61,17 +61,9 @@ export default {
       plugins: [imagePastePlugin(this.handleImageUpload)],
     };
   },
-  computed: {
-    contentFromEditor() {
-      if (editorView) {
-        return ArticleMarkdownSerializer.serialize(editorView.state.doc);
-      }
-      return '';
-    },
-  },
   watch: {
     modelValue(newValue = '') {
-      if (newValue !== this.contentFromEditor) {
+      if (newValue !== this.contentFromEditor()) {
         this.reloadState();
       }
     },
@@ -96,6 +88,12 @@ export default {
     this.focusEditorInputField();
   },
   methods: {
+    contentFromEditor() {
+      if (editorView) {
+        return ArticleMarkdownSerializer.serialize(editorView.state.doc);
+      }
+      return '';
+    },
     openFileBrowser() {
       this.$refs.imageUploadInput.click();
     },
@@ -213,8 +211,8 @@ export default {
       editorView.focus();
     },
     emitOnChange() {
-      this.$emit('update:modelValue', this.contentFromEditor);
-      this.$emit('input', this.contentFromEditor);
+      this.$emit('update:modelValue', this.contentFromEditor());
+      this.$emit('input', this.contentFromEditor());
     },
     onKeyup() {
       this.$emit('keyup');

app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue

@@ -1,20 +1,22 @@
 <script>
-import { defineModel } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, email } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 
 export default {
   props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
     currentChat: {
       type: Object,
       default: () => ({}),
     },
   },
-  emits: ['cancel'],
+  emits: ['cancel', 'update:show'],
   setup() {
-    const show = defineModel('show', { type: Boolean, default: false });
-    return { v$: useVuelidate(), show };
+    return { v$: useVuelidate() };
   },
   data() {
     return {
@@ -31,6 +33,14 @@ export default {
     },
   },
   computed: {
+    localShow: {
+      get() {
+        return this.show;
+      },
+      set(value) {
+        this.$emit('update:show', value);
+      },
+    },
     sentToOtherEmailAddress() {
       return this.selectedType === 'other_email_address';
     },
@@ -81,7 +91,7 @@ export default {
 </script>
 
 <template>
-  <woot-modal v-model:show="show" :on-close="onCancel">
+  <woot-modal v-model:show="localShow" :on-close="onCancel">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header
         :header-title="$t('EMAIL_TRANSCRIPT.TITLE')"

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue

@@ -1,5 +1,4 @@
 <script>
-import { defineModel } from 'vue';
 import TemplatesPicker from './TemplatesPicker.vue';
 import TemplateParser from './TemplateParser.vue';
 export default {
@@ -8,23 +7,30 @@ export default {
     TemplateParser,
   },
   props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
     inboxId: {
       type: Number,
       default: undefined,
     },
   },
-  emits: ['onSend', 'cancel'],
-  setup() {
-    const show = defineModel('show', { type: Boolean, default: false });
-
-    return { show };
-  },
+  emits: ['onSend', 'cancel', 'update:show'],
   data() {
     return {
       selectedWaTemplate: null,
     };
   },
   computed: {
+    localShow: {
+      get() {
+        return this.show;
+      },
+      set(value) {
+        this.$emit('update:show', value);
+      },
+    },
     modalHeaderContent() {
       return this.selectedWaTemplate
         ? this.$t('WHATSAPP_TEMPLATES.MODAL.TEMPLATE_SELECTED_SUBTITLE', {
@@ -51,7 +57,7 @@ export default {
 </script>
 
 <template>
-  <woot-modal v-model:show="show" :on-close="onClose" size="modal-big">
+  <woot-modal v-model:show="localShow" :on-close="onClose" size="modal-big">
     <woot-modal-header
       :header-title="$t('WHATSAPP_TEMPLATES.MODAL.TITLE')"
       :header-content="modalHeaderContent"

app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue

@@ -1,5 +1,4 @@
 <script>
-import { defineModel } from 'vue';
 import { required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import Modal from '../../Modal.vue';
@@ -9,6 +8,7 @@ export default {
     Modal,
   },
   props: {
+    show: { type: Boolean, default: false },
     title: { type: String, default: '' },
     message: { type: String, default: '' },
     confirmText: { type: String, default: '' },
@@ -16,10 +16,9 @@ export default {
     confirmValue: { type: String, default: '' },
     confirmPlaceHolderText: { type: String, default: '' },
   },
-  emits: ['onClose', 'onConfirm'],
+  emits: ['onClose', 'onConfirm', 'update:show'],
   setup() {
-    const show = defineModel('show', { type: Boolean, default: false });
-    return { v$: useVuelidate(), show };
+    return { v$: useVuelidate() };
   },
   data() {
     return {
@@ -34,6 +33,16 @@ export default {
       },
     },
   },
+  computed: {
+    localShow: {
+      get() {
+        return this.show;
+      },
+      set(value) {
+        this.$emit('update:show', value);
+      },
+    },
+  },
   methods: {
     closeModal() {
       this.value = '';
@@ -47,7 +56,7 @@ export default {
 </script>
 
 <template>
-  <Modal v-model:show="show" :on-close="closeModal">
+  <Modal v-model:show="localShow" :on-close="closeModal">
     <woot-modal-header :header-title="title" :header-content="message" />
     <form @submit.prevent="onConfirm">
       <woot-input

app/javascript/dashboard/modules/contact/ContactMergeModal.vue

@@ -1,5 +1,4 @@
 <script>
-import { defineModel } from 'vue';
 import { useAlert, useTrack } from 'dashboard/composables';
 import MergeContact from 'dashboard/modules/contact/components/MergeContact.vue';
 
@@ -11,17 +10,16 @@ import { CONTACTS_EVENTS } from '../../helper/AnalyticsHelper/events';
 export default {
   components: { MergeContact },
   props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
     primaryContact: {
       type: Object,
       required: true,
     },
   },
-  emits: ['close'],
-  setup() {
-    const show = defineModel('show', { type: Boolean, default: false });
-
-    return { show };
-  },
+  emits: ['close', 'update:show'],
   data() {
     return {
       isSearching: false,
@@ -32,6 +30,14 @@ export default {
     ...mapGetters({
       uiFlags: 'contacts/getUIFlags',
     }),
+    localShow: {
+      get() {
+        return this.show;
+      },
+      set(value) {
+        this.$emit('update:show', value);
+      },
+    },
   },
 
   methods: {
@@ -73,7 +79,7 @@ export default {
 </script>
 
 <template>
-  <woot-modal v-model:show="show" :on-close="onClose">
+  <woot-modal v-model:show="localShow" :on-close="onClose">
     <woot-modal-header
       :header-title="$t('MERGE_CONTACTS.TITLE')"
       :header-content="$t('MERGE_CONTACTS.DESCRIPTION')"

app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue

@@ -1,5 +1,4 @@
 <script>
-import { defineModel } from 'vue';
 import Modal from 'dashboard/components/Modal.vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
@@ -9,15 +8,18 @@ export default {
     Modal,
   },
   props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
     isCreating: {
       type: Boolean,
       default: false,
     },
   },
-  emits: ['create', 'cancel'],
+  emits: ['create', 'cancel', 'update:show'],
   setup() {
-    const show = defineModel('show', { type: Boolean, default: false });
-    return { v$: useVuelidate(), show };
+    return { v$: useVuelidate() };
   },
   data() {
     return {
@@ -32,6 +34,14 @@ export default {
     },
   },
   computed: {
+    localShow: {
+      get() {
+        return this.show;
+      },
+      set(value) {
+        this.$emit('update:show', value);
+      },
+    },
     attributeNameError() {
       if (this.v$.attributeName.$error) {
         return this.$t('CUSTOM_ATTRIBUTES.FORM.NAME.ERROR');
@@ -61,7 +71,7 @@ export default {
 </script>
 
 <template>
-  <Modal v-model:show="show" :on-close="onClose">
+  <Modal v-model:show="localShow" :on-close="onClose">
     <woot-modal-header
       :header-title="$t('CUSTOM_ATTRIBUTES.ADD.TITLE')"
       :header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')"

app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue

@@ -1,5 +1,4 @@
 <script>
-import { defineModel } from 'vue';
 import { mapGetters } from 'vuex';
 import ContactForm from './ContactForm.vue';
 
@@ -7,18 +6,26 @@ export default {
   components: {
     ContactForm,
   },
-  emits: ['cancel'],
-  setup() {
-    const show = defineModel('show', { type: Boolean, default: false });
-
-    return { show };
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
     },
+  },
+  emits: ['cancel', 'update:show'],
   computed: {
     ...mapGetters({
       uiFlags: 'contacts/getUIFlags',
     }),
+    localShow: {
+      get() {
+        return this.show;
+      },
+      set(value) {
+        this.$emit('update:show', value);
+      },
+    },
   },
-
   methods: {
     onCancel() {
       this.$emit('cancel');
@@ -35,7 +42,7 @@ export default {
 
 <template>
   <woot-modal
-    v-model:show="show"
+    v-model:show="localShow"
     :on-close="onCancel"
     modal-type="right-aligned"
   >

app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue

@@ -1,5 +1,4 @@
 <script>
-import { defineModel } from 'vue';
 import { mapGetters } from 'vuex';
 import ContactForm from './ContactForm.vue';
 
@@ -8,20 +7,28 @@ export default {
     ContactForm,
   },
   props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
     contact: {
       type: Object,
       default: () => ({}),
     },
   },
-  emits: ['cancel'],
-  setup() {
-    const show = defineModel('show', { type: Boolean, default: false });
-    return { show };
-  },
+  emits: ['cancel', 'update:show'],
   computed: {
     ...mapGetters({
       uiFlags: 'contacts/getUIFlags',
     }),
+    localShow: {
+      get() {
+        return this.show;
+      },
+      set(value) {
+        this.$emit('update:show', value);
+      },
+    },
   },
 
   methods: {
@@ -44,7 +51,7 @@ export default {
 
 <template>
   <woot-modal
-    v-model:show="show"
+    v-model:show="localShow"
     :on-close="onCancel"
     modal-type="right-aligned"
   >

app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue

@@ -1,5 +1,4 @@
 <script>
-import { defineModel } from 'vue';
 import ConversationForm from './ConversationForm.vue';
 
 export default {
@@ -7,15 +6,25 @@ export default {
     ConversationForm,
   },
   props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
     contact: {
       type: Object,
       default: () => ({}),
     },
   },
-  emits: ['cancel'],
-  setup() {
-    const show = defineModel('show', { type: Boolean, default: false });
-    return { show };
+  emits: ['cancel', 'update:show'],
+  computed: {
+    localShow: {
+      get() {
+        return this.show;
+      },
+      set(value) {
+        this.$emit('update:show', value);
+      },
+    },
   },
   watch: {
     'contact.id'(id) {
@@ -45,7 +54,7 @@ export default {
 </script>
 
 <template>
-  <woot-modal v-model:show="show" :on-close="onCancel">
+  <woot-modal v-model:show="localShow" :on-close="onCancel">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header
         :header-title="$t('NEW_CONVERSATION.TITLE')"

app/javascript/dashboard/routes/dashboard/customviews/DeleteCustomViews.vue

@@ -1,11 +1,14 @@
 <script>
-import { defineModel } from 'vue';
 import { useAlert } from 'dashboard/composables';
 import { CONTACTS_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import { useTrack } from 'dashboard/composables';
 
 export default {
   props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
     activeCustomView: {
       type: Object,
       default: () => {},
@@ -23,12 +26,16 @@ export default {
       default: () => {},
     },
   },
-  emits: ['close'],
-  setup() {
-    const show = defineModel('show', { type: Boolean, default: false });
-    return { show };
-  },
+  emits: ['close', 'update:show'],
   computed: {
+    localShow: {
+      get() {
+        return this.show;
+      },
+      set(value) {
+        this.$emit('update:show', value);
+      },
+    },
     activeCustomViews() {
       if (this.activeFilterType === 0) {
         return 'conversation';
@@ -93,8 +100,8 @@ export default {
 <template>
   <div>
     <woot-delete-modal
-      v-if="show"
-      v-model:show="show"
+      v-if="localShow"
+      v-model:show="localShow"
       :on-close="closeDeletePopup"
       :on-confirm="deleteSavedCustomViews"
       :title="$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.TITLE')"

app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue

@@ -1,5 +1,4 @@
 <script>
-import { defineModel } from 'vue';
 import Modal from 'dashboard/components/Modal.vue';
 import { required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
@@ -13,15 +12,18 @@ export default {
     Modal,
   },
   props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
     portal: {
       type: Object,
       default: () => ({}),
     },
   },
-  emits: ['cancel'],
+  emits: ['cancel', 'update:show'],
   setup() {
-    const show = defineModel('show', { type: Boolean, default: false });
-    return { v$: useVuelidate(), show };
+    return { v$: useVuelidate() };
   },
   data() {
     return {
@@ -30,6 +32,14 @@ export default {
     };
   },
   computed: {
+    localShow: {
+      get() {
+        return this.show;
+      },
+      set(value) {
+        this.$emit('update:show', value);
+      },
+    },
     addedLocales() {
       const { allowed_locales: allowedLocales } = this.portal.config;
       return allowedLocales.map(locale => locale.code);
@@ -96,7 +106,7 @@ export default {
 </script>
 
 <template>
-  <Modal v-model:show="show" :on-close="onClose">
+  <Modal v-model:show="localShow" :on-close="onClose">
     <woot-modal-header
       :header-title="$t('HELP_CENTER.PORTAL.ADD_LOCALE.TITLE')"
       :header-content="$t('HELP_CENTER.PORTAL.ADD_LOCALE.SUB_TITLE')"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue

@@ -1,5 +1,4 @@
 <script>
-import { defineModel } from 'vue';
 import { required, minLength } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useAlert, useTrack } from 'dashboard/composables';
@@ -10,6 +9,10 @@ import NameEmojiInput from './NameEmojiInput.vue';
 export default {
   components: { NameEmojiInput },
   props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
     portalName: {
       type: String,
       default: '',
@@ -23,10 +26,9 @@ export default {
       default: '',
     },
   },
-  emits: ['create', 'cancel'],
+  emits: ['create', 'cancel', 'update:show'],
   setup() {
-    const show = defineModel('show', { type: Boolean, default: false });
-    return { v$: useVuelidate(), show };
+    return { v$: useVuelidate() };
   },
   data() {
     return {
@@ -46,6 +48,14 @@ export default {
     },
   },
   computed: {
+    localShow: {
+      get() {
+        return this.show;
+      },
+      set(value) {
+        this.$emit('update:show', value);
+      },
+    },
     selectedPortalSlug() {
       return this.$route.params.portalSlug
         ? this.$route.params.portalSlug
@@ -111,7 +121,7 @@ export default {
 </script>
 
 <template>
-  <woot-modal v-model:show="show" :on-close="onClose">
+  <woot-modal v-model:show="localShow" :on-close="onClose">
     <woot-modal-header
       :header-title="$t('HELP_CENTER.CATEGORY.ADD.TITLE')"
       :header-content="$t('HELP_CENTER.CATEGORY.ADD.SUB_TITLE')"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue

@@ -1,5 +1,4 @@
 <script>
-import { defineModel } from 'vue';
 import { required, minLength } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useAlert, useTrack } from 'dashboard/composables';
@@ -10,6 +9,10 @@ import CategoryNameIconInput from './NameEmojiInput.vue';
 export default {
   components: { CategoryNameIconInput },
   props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
     portalName: {
       type: String,
       default: '',
@@ -27,10 +30,9 @@ export default {
       default: '',
     },
   },
-  emits: ['update', 'cancel'],
+  emits: ['update', 'cancel', 'update:show'],
   setup() {
-    const show = defineModel('show', { type: Boolean, default: false });
-    return { v$: useVuelidate(), show };
+    return { v$: useVuelidate() };
   },
   data() {
     return {
@@ -51,6 +53,14 @@ export default {
     },
   },
   computed: {
+    localShow: {
+      get() {
+        return this.show;
+      },
+      set(value) {
+        this.$emit('update:show', value);
+      },
+    },
     slugError() {
       if (this.v$.slug.$error) {
         return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
@@ -120,7 +130,7 @@ export default {
 </script>
 
 <template>
-  <woot-modal v-model:show="show" :on-close="onClose">
+  <woot-modal v-model:show="localShow" :on-close="onClose">
     <woot-modal-header
       :header-title="$t('HELP_CENTER.CATEGORY.EDIT.TITLE')"
       :header-content="$t('HELP_CENTER.CATEGORY.EDIT.SUB_TITLE')"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue

@@ -106,7 +106,7 @@ export default {
       :label="label"
       :placeholder="placeholder"
       :help-text="helpText"
-      @input="onNameChange"
+      @update:model-value="onNameChange"
     />
     <EmojiInput
       v-if="showEmojiPicker"

app/javascript/shared/components/GreetingsEditor.vue

@@ -1,47 +1,21 @@
-<script>
+<script setup>
+import { computed } from 'vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
 
-export default {
-  components: {
-    WootMessageEditor,
-    ResizableTextArea,
-  },
-  props: {
-    value: {
-      type: String,
-      default: '',
-    },
-    richtext: {
-      type: Boolean,
-      default: false,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['input'],
-  data() {
-    return {
-      greetingsMessage: this.value,
-    };
-  },
-  watch: {
-    value(newValue) {
-      this.greetingsMessage = newValue;
-    },
-  },
-  methods: {
-    handleInput() {
-      this.$emit('input', this.greetingsMessage);
-    },
-  },
-};
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  richtext: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const greetingsMessage = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value),
+});
 </script>
 
 <template>
@@ -57,7 +31,6 @@ export default {
         class="bg-white input dark:bg-slate-900"
         :placeholder="placeholder"
         :min-height="4"
-        @input="handleInput"
       />
     </div>
     <ResizableTextArea

app/javascript/widget/components/ChatAttachment.vue

@@ -41,7 +41,9 @@ export default {
   methods: {
     handleClipboardPaste(e) {
       const items = (e.clipboardData || e.originalEvent.clipboardData).items;
-      items.forEach(item => {
+      // items is a DataTransferItemList object which does not have forEach method
+      const itemsArray = Array.from(items);
+      itemsArray.forEach(item => {
         if (item.kind === 'file') {
           e.preventDefault();
           const file = item.getAsFile();