akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Upgrade @vuelidate to 2.x

Browse Source
This commit is contained in:
Pranav Raj S
2024-01-25 12:15:21 -08:00
parent c33c844039
commit 1fe3960285
81 changed files with 866 additions and 601 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components/widgets/AICTAModal.vue
+8 -4
View File
@@ -12,11 +12,11 @@
<woot-input
v-model="value"
type="text"
:class="{ error: $v.value.$error }"
:class="{ error: v$.value.$error }"
:placeholder="
$t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.KEY_PLACEHOLDER')
"
@blur="$v.value.$touch"
@blur="v$.value.$touch"
/>
</div>
<div class="flex flex-row justify-between gap-2 py-2 px-0 w-full">
@@ -27,7 +27,7 @@
<woot-button variant="clear" @click.prevent="onDismiss">
{{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.DISMISS') }}
</woot-button>
<woot-button :is-disabled="$v.value.$invalid">
<woot-button :is-disabled="v$.value.$invalid">
{{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.FINISH') }}
</woot-button>
</div>
@@ -37,15 +37,19 @@
</template>
<script>
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import { mapGetters } from 'vuex';
import aiMixin from 'dashboard/mixins/aiMixin';
import alertMixin from 'shared/mixins/alertMixin';
import uiSettingsMixin from 'dashboard/mixins/uiSettings';
import { OPEN_AI_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [aiMixin, alertMixin, uiSettingsMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return {
value: '',
app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+8 -4
View File
@@ -41,7 +41,7 @@
:show-query-operator="i !== appliedFilters.length - 1"
:show-user-input="showUserInput(appliedFilters[i].filter_operator)"
:grouped-filters="true"
:v="$v.appliedFilters.$each[i]"
:v="v$.appliedFilters.$each[i]"
@resetFilter="resetFilter(i, appliedFilters[i])"
@removeFilter="removeFilter(i)"
/>
@@ -80,7 +80,7 @@
<script>
import alertMixin from 'shared/mixins/alertMixin';
import { required, requiredIf } from 'vuelidate/lib/validators';
import { required, requiredIf } from '@vuelidate/validators';
import FilterInputBox from '../FilterInput/Index.vue';
import languages from './advancedFilterItems/languages';
import countries from 'shared/constants/countries.js';
@@ -89,6 +89,7 @@ import { filterAttributeGroups } from './advancedFilterItems';
import filterMixin from 'shared/mixins/filterMixin';
import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -117,6 +118,9 @@ export default {
default: false,
},
},
setup() {
return { v$: useVuelidate() };
},
validations: {
appliedFilters: {
required,
@@ -347,8 +351,8 @@ export default {
}
},
submitFilterQuery() {
this.$v.$touch();
if (this.$v.$invalid) return;
this.v$.$touch();
if (this.v$.$invalid) return;
this.$store.dispatch(
'setConversationFilters',
JSON.parse(JSON.stringify(this.appliedFilters))
app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
+10 -5
View File
@@ -45,14 +45,14 @@
}}</label>
</div>
<div v-if="sentToOtherEmailAddress" class="w-[50%] mt-1">
<label :class="{ error: $v.email.$error }">
<label :class="{ error: v$.email.$error }">
<input
v-model.trim="email"
type="text"
:placeholder="$t('EMAIL_TRANSCRIPT.FORM.EMAIL.PLACEHOLDER')"
@input="$v.email.$touch"
@input="v$.email.$touch"
/>
<span v-if="$v.email.$error" class="message">
<span v-if="v$.email.$error" class="message">
{{ $t('EMAIL_TRANSCRIPT.FORM.EMAIL.ERROR') }}
</span>
</label>
@@ -73,8 +73,10 @@
</template>
<script>
import { required, minLength, email } from 'vuelidate/lib/validators';
import { required, minLength, email } from '@vuelidate/validators';
import alertMixin from 'shared/mixins/alertMixin';
import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [alertMixin],
props: {
@@ -87,6 +89,9 @@ export default {
default: () => ({}),
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
email: '',
@@ -108,7 +113,7 @@ export default {
isFormValid() {
if (this.selectedType) {
if (this.sentToOtherEmailAddress) {
return !!this.email && !this.$v.email.$error;
return !!this.email && !this.v$.email.$error;
}
return true;
}
app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
+15 -12
View File
@@ -1,15 +1,15 @@
<template>
<div>
<div v-if="toEmails">
<div class="input-group small" :class="{ error: $v.toEmailsVal.$error }">
<div class="input-group small" :class="{ error: v$.toEmailsVal.$error }">
<label class="input-group-label">
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.TO') }}
</label>
<div class="input-group-field">
<woot-input
v-model.trim="$v.toEmailsVal.$model"
v-model.trim="v$.toEmailsVal.$model"
type="text"
:class="{ error: $v.toEmailsVal.$error }"
:class="{ error: v$.toEmailsVal.$error }"
:placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
@blur="onBlur"
/>
@@ -17,15 +17,15 @@
</div>
</div>
<div class="input-group-wrap">
<div class="input-group small" :class="{ error: $v.ccEmailsVal.$error }">
<div class="input-group small" :class="{ error: v$.ccEmailsVal.$error }">
<label class="input-group-label">
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.LABEL') }}
</label>
<div class="input-group-field">
<woot-input
v-model.trim="$v.ccEmailsVal.$model"
v-model.trim="v$.ccEmailsVal.$model"
type="text"
:class="{ error: $v.ccEmailsVal.$error }"
:class="{ error: v$.ccEmailsVal.$error }"
:placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
@blur="onBlur"
/>
@@ -39,20 +39,20 @@
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.ADD_BCC') }}
</woot-button>
</div>
<span v-if="$v.ccEmailsVal.$error" class="message">
<span v-if="v$.ccEmailsVal.$error" class="message">
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.ERROR') }}
</span>
</div>
<div v-if="showBcc" class="input-group-wrap">
<div class="input-group small" :class="{ error: $v.bccEmailsVal.$error }">
<div class="input-group small" :class="{ error: v$.bccEmailsVal.$error }">
<label class="input-group-label">
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.LABEL') }}
</label>
<div class="input-group-field">
<woot-input
v-model.trim="$v.bccEmailsVal.$model"
v-model.trim="v$.bccEmailsVal.$model"
type="text"
:class="{ error: $v.bccEmailsVal.$error }"
:class="{ error: v$.bccEmailsVal.$error }"
:placeholder="
$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')
"
@@ -60,7 +60,7 @@
/>
</div>
</div>
<span v-if="$v.bccEmailsVal.$error" class="message">
<span v-if="v$.bccEmailsVal.$error" class="message">
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.ERROR') }}
</span>
</div>
@@ -137,7 +137,7 @@ export default {
this.showBcc = true;
},
onBlur() {
this.$v.$touch();
this.v$.$touch();
this.$emit('update:bccEmails', this.bccEmailsVal);
this.$emit('update:ccEmails', this.ccEmailsVal);
this.$emit('update:toEmails', this.toEmailsVal);
@@ -149,12 +149,14 @@ export default {
.input-group-wrap .message {
@apply text-sm text-red-500 dark:text-red-500;
}
.input-group {
@apply border-b border-solid border-slate-75 dark:border-slate-700 my-1;
.input-group-label {
@apply border-transparent bg-transparent text-xs font-semibold pl-0;
}
.input-group-field::v-deep input {
@apply mb-0 border-transparent;
}
@@ -162,6 +164,7 @@ export default {
.input-group.error {
@apply border-b-red-500 dark:border-b-red-500;
.input-group-label {
@apply text-red-500 dark:text-red-500;
}
app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
+8 -1
View File
@@ -45,7 +45,9 @@ const allKeysRequired = value => {
const keys = Object.keys(value);
return keys.every(key => value[key]);
};
import { requiredIf } from 'vuelidate/lib/validators';
import { useVuelidate } from '@vuelidate/core';
import { requiredIf } from '@vuelidate/validators';
export default {
props: {
template: {
@@ -53,6 +55,9 @@ export default {
default: () => {},
},
},
setup() {
return { v$: useVuelidate() };
},
validations: {
processedParams: {
requiredIfKeysPresent: requiredIf('variables'),
@@ -149,9 +154,11 @@ footer {
@apply ml-2.5;
}
}
.error {
@apply bg-red-100 dark:bg-red-100 rounded-md text-red-800 dark:text-red-800 p-2.5 text-center;
}
.template-input {
@apply bg-slate-25 dark:bg-slate-900 text-slate-700 dark:text-slate-100;
}
app/javascript/dashboard/components/widgets/conversation/helpers/emailHeadHelper.js
+1 -1
View File
@@ -1,4 +1,4 @@
import emailValidator from 'vuelidate/lib/validators/email';
import emailValidator from '@vuelidate/validators/email';
export const validEmailsByComma = value => {
if (!value.length) return true;
app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
+8 -5
View File
@@ -6,12 +6,12 @@
<woot-input
v-model="value"
type="text"
:class="{ error: $v.value.$error }"
:class="{ error: v$.value.$error }"
:placeholder="confirmPlaceHolderText"
@blur="$v.value.$touch"
@blur="v$.value.$touch"
/>
<div class="button-wrapper">
<woot-button color-scheme="alert" :is-disabled="$v.value.$invalid">
<woot-button color-scheme="alert" :is-disabled="v$.value.$invalid">
{{ confirmText }}
</woot-button>
<woot-button class="clear" @click.prevent="closeModal">
@@ -23,14 +23,14 @@
</template>
<script>
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import Modal from '../../Modal.vue';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
Modal,
},
props: {
show: {
type: Boolean,
@@ -61,6 +61,9 @@ export default {
default: '',
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
value: '',