chore: Migrate all instances of old vuelidate to new v2 syntax [CW-3274] (#9623)
Removes all the old vuelidate syntax and replaced it with the new `useValidate` composable and the `v$` helper. | Component | Path | Migrated | Tested | |------------------------------------|--------------------------------------------------------------|-----------------------------------------------|--------| | Login page | app/javascript/v3/views/login/Index.vue | ✅ | ✅ | | Custom Attributes settings page | app/javascript/dashboard/components/CustomAttribute.vue | ✅ | ✅ | | Account settings page | app/javascript/dashboard/routes/dashboard/settings/account/Index.vue | ✅ | ✅ | | Add Account Modal | app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue | ✅ | ✅ | | AICTA Modal | app/javascript/dashboard/components/widgets/AICTAModal.vue | ✅ | ✅ | | Conversation Advanced Filters | app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue | deprecated `$each` prop in validations object | | | Email Transript Modal | app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue | ✅ | ✅ | | Linear Create Issue | app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue | ✅ | ✅ | | Template Parser | app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue | ✅ | | | Delete Confirmation Modal | app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue | ✅ | ✅ | | Add Custom Attribute | app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue | ✅ | ✅ | | Merge Contacts | app/javascript/dashboard/modules/contact/components/MergeContact.vue | ✅ | ✅ | | Contacts Advanced Filters | app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue | deprecated `$each` prop in validations object | | | Contact Form | app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue | ✅ | ✅ | | Conversation Form | app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue | ✅ | ✅ | | Add Custom Views | app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue | ✅ | ✅ | | Add Locale | app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue | ✅ | ✅ | | Portal Settings Basic Form | /app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue | ✅ | ✅ | | Portal Settings Customization Form | /app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue | ✅ | ✅ | | Add Category | app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue | ✅ | ✅ | | Edit Category | app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue | ✅ | ✅ | | CSML Bot Editor | app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue | ✅ | ✅ | | Add Agent | app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue | ✅ | ✅ | | Edit Agent | app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue | ✅ | ✅ | | Add Attribute | app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue | ✅ | ✅ | | Edit Attribute | app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue | ✅ | ✅ | | Add Campaign | app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue | ✅ | ✅ | | Edit Campaign | app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue | ✅ | ✅ | | Add Canned | app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue | ✅ | ✅ | | Edit Canned | app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue | ✅ | ✅ | | IMAP Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue | ✅ | ✅ | | SMTP Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue | ✅ | ✅ | | Widget Builder | app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue | ✅ | ✅ | | 360 Dialog Whatsapp | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue | ✅ | ✅ | | Inbox API settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue | ✅ | ✅ | | SMS Bandwidth settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue | ✅ | ✅ | | Cloud Whatsapp Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue | ✅ | ✅ | | Facebook Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue | ✅ | ✅ | | Line Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue | ✅ | ✅ | | Telegram Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue | ✅ | ✅ | | Twillio Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue | ✅ | ✅ | | Forward To option settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue | ✅ | ✅ | | Microsoft settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue | ✅ | ✅ | | Collaborators page | app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue | ✅ | ✅ | | Configuration Page | app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue | ✅ | ✅ | | Dashboard App Modal Settings | app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue | ✅ | ✅ | | Settings - Webhook Form | app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue | ✅ | ✅ | | Macro Form | app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue | deprecated `$each` prop in validations object | | | Change Password | app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue | ✅ | ✅ | | settings - User Basic Details | app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue | ✅ | ✅ | | Password Edit | app/javascript/v3/views/auth/password/Edit.vue | ✅ | ✅ | | Password Reset form | app/javascript/v3/views/auth/reset/password/Index.vue | ✅ | ✅ | | Signup form | app/javascript/v3/views/auth/signup/components/Signup/Form.vue | ✅ | ✅ | | Login form | app/javascript/v3/views/login/Index.vue | ✅ | ✅ | | Custom Attributes | app/javascript/dashboard/components/CustomAttribute.vue | ✅ | ✅ | | Reply Email Head | app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue | ✅ | ✅ | | Methods Mixin | app/javascript/dashboard/mixins/automations/methodsMixin.js | ✅ | ✅ | | Validations mixin | app/javascript/dashboard/routes/dashboard/settings/labels/validationMixin.js | ✅ | ✅ | | SLA Form | app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue | ✅ | ✅ | | SLA Time Input | app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue | ✅ | ✅ | | SLA Validation Mixin | app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js | ✅ | ✅ | | Team Form | app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue | ✅ | ✅ | | Add Agents | app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue | ✅ | ✅ | | Edit Agents | app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue | ✅ | ✅ | --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Shivam Mishra <scm.mymail@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: Pranav <pranav@chatwoot.com>
This commit is contained in:
@@ -8,12 +8,12 @@
|
||||
<form class="w-full" @submit.prevent="addCustomAttribute">
|
||||
<woot-input
|
||||
v-model.trim="attributeName"
|
||||
:class="{ error: $v.attributeName.$error }"
|
||||
:class="{ error: v$.attributeName.$error }"
|
||||
class="w-full"
|
||||
:error="attributeNameError"
|
||||
:label="$t('CUSTOM_ATTRIBUTES.FORM.NAME.LABEL')"
|
||||
:placeholder="$t('CUSTOM_ATTRIBUTES.FORM.NAME.PLACEHOLDER')"
|
||||
@input="$v.attributeName.$touch"
|
||||
@input="v$.attributeName.$touch"
|
||||
/>
|
||||
<woot-input
|
||||
v-model.trim="attributeValue"
|
||||
@@ -23,7 +23,7 @@
|
||||
/>
|
||||
<div class="flex items-center justify-end gap-2 px-0 py-2">
|
||||
<woot-button
|
||||
:is-disabled="$v.attributeName.$invalid || isCreating"
|
||||
:is-disabled="v$.attributeName.$invalid || isCreating"
|
||||
:is-loading="isCreating"
|
||||
>
|
||||
{{ $t('CUSTOM_ATTRIBUTES.FORM.CREATE') }}
|
||||
@@ -38,7 +38,8 @@
|
||||
|
||||
<script>
|
||||
import Modal from 'dashboard/components/Modal.vue';
|
||||
import { required, minLength } from 'vuelidate/lib/validators';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required, minLength } from '@vuelidate/validators';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -54,6 +55,9 @@ export default {
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
return { v$: useVuelidate() };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
attributeValue: '',
|
||||
@@ -68,7 +72,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
attributeNameError() {
|
||||
if (this.$v.attributeName.$error) {
|
||||
if (this.v$.attributeName.$error) {
|
||||
return this.$t('CUSTOM_ATTRIBUTES.FORM.NAME.ERROR');
|
||||
}
|
||||
return '';
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div>
|
||||
<div
|
||||
class="mt-1 multiselect-wrap--medium"
|
||||
:class="{ error: $v.parentContact.$error }"
|
||||
:class="{ error: v$.parentContact.$error }"
|
||||
>
|
||||
<label class="multiselect__label">
|
||||
{{ $t('MERGE_CONTACTS.PARENT.TITLE') }}
|
||||
@@ -52,7 +52,7 @@
|
||||
{{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}
|
||||
</span>
|
||||
</multiselect>
|
||||
<span v-if="$v.parentContact.$error" class="message">
|
||||
<span v-if="v$.parentContact.$error" class="message">
|
||||
{{ $t('MERGE_CONTACTS.FORM.CHILD_CONTACT.ERROR') }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -114,7 +114,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { required } from 'vuelidate/lib/validators';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required } from '@vuelidate/validators';
|
||||
|
||||
import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary.vue';
|
||||
import ContactDropdownItem from './ContactDropdownItem.vue';
|
||||
@@ -139,6 +140,9 @@ export default {
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
return { v$: useVuelidate() };
|
||||
},
|
||||
validations: {
|
||||
primaryContact: {
|
||||
required,
|
||||
@@ -163,8 +167,8 @@ export default {
|
||||
this.$emit('search', query);
|
||||
},
|
||||
onSubmit() {
|
||||
this.$v.$touch();
|
||||
if (this.$v.$invalid) {
|
||||
this.v$.$touch();
|
||||
if (this.v$.$invalid) {
|
||||
return;
|
||||
}
|
||||
this.$emit('submit', this.parentContact.id);
|
||||
|
||||
Reference in New Issue
Block a user