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>
This commit is contained in:
Shivam Mishra
2024-10-03 19:59:07 +05:30
committed by GitHub
parent 701135df92
commit b3262597c1
17 changed files with 204 additions and 136 deletions

View File

@@ -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"
>

View File

@@ -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"
>

View File

@@ -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')"

View File

@@ -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')"

View File

@@ -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')"

View File

@@ -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')"

View File

@@ -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')"

View File

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