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/CustomAttribute.vue
+19 -9
View File
@@ -13,7 +13,7 @@
<div class="flex items-center justify-between w-full">
<span
class="attribute-name"
:class="{ error: $v.editedValue.$error }"
:class="{ error: v$.editedValue.$error }"
>
{{ label }}
</span>
@@ -39,8 +39,8 @@
:type="inputType"
class="input-group-field"
autofocus="true"
:class="{ error: $v.editedValue.$error }"
@blur="$v.editedValue.$touch"
:class="{ error: v$.editedValue.$error }"
@blur="v$.editedValue.$touch"
@keyup.enter="onUpdate"
/>
<div class="input-group-button">
@@ -122,12 +122,13 @@
<script>
import { format, parseISO } from 'date-fns';
import { required, url } from 'vuelidate/lib/validators';
import { required, url } from '@vuelidate/validators';
import { BUS_EVENTS } from 'shared/constants/busEvents';
import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
import { isValidURL } from '../helper/URLHelper';
import customAttributeMixin from '../mixins/customAttributeMixin';
const DATE_FORMAT = 'yyyy-MM-dd';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -149,6 +150,9 @@ export default {
attributeKey: { type: String, required: true },
contactId: { type: Number, default: null },
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
isEditing: false,
@@ -206,13 +210,13 @@ export default {
return this.isAttributeTypeLink ? 'url' : this.attributeType;
},
shouldShowErrorMessage() {
return this.$v.editedValue.$error;
return this.v$.editedValue.$error;
},
errorMessage() {
if (this.$v.editedValue.url) {
if (this.v$.editedValue.url) {
return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_URL');
}
if (!this.$v.editedValue.regexValidation) {
if (!this.v$.editedValue.regexValidation) {
return this.regexCue
? this.regexCue
: this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_INPUT');
@@ -280,8 +284,8 @@ export default {
this.attributeType === 'date'
? parseISO(this.editedValue)
: this.editedValue;
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
this.isEditing = false;
@@ -302,11 +306,14 @@ export default {
.checkbox-wrap {
@apply flex items-center;
}
.checkbox {
@apply my-0 mr-2 ml-0;
}
.attribute-name {
@apply w-full text-slate-800 dark:text-slate-100;
&.error {
@apply text-red-400 dark:text-red-500;
}
@@ -323,6 +330,7 @@ export default {
.value {
@apply bg-slate-50 dark:bg-slate-700 mb-0;
}
.edit-button {
@apply block;
}
@@ -332,10 +340,12 @@ export default {
::v-deep {
.selector-wrap {
@apply m-0 top-1;
.selector-name {
@apply ml-0;
}
}
.name {
@apply ml-0;
}
app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
+9 -5
View File
@@ -19,13 +19,13 @@
<form class="flex flex-col w-full" @submit.prevent="addAccount">
<div class="w-full">
<label :class="{ error: $v.accountName.$error }">
<label :class="{ error: v$.accountName.$error }">
{{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
<input
v-model.trim="accountName"
type="text"
:placeholder="$t('CREATE_ACCOUNT.FORM.NAME.PLACEHOLDER')"
@input="$v.accountName.$touch"
@input="v$.accountName.$touch"
/>
</label>
</div>
@@ -33,8 +33,8 @@
<div class="w-full">
<woot-submit-button
:disabled="
$v.accountName.$invalid ||
$v.accountName.$invalid ||
v$.accountName.$invalid ||
v$.accountName.$invalid ||
uiFlags.isCreating
"
:button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
@@ -49,9 +49,10 @@
</template>
<script>
import { required, minLength } from 'vuelidate/lib/validators';
import { required, minLength } from '@vuelidate/validators';
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [alertMixin],
@@ -65,6 +66,9 @@ export default {
default: true,
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
accountName: '',
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: '',