commit 4626aec43da32b56b7c1e87e5dc831398e39416c
author Surya Venkatesan <suryav@ami.com> Thu Sep 19 15:06:49 2024 +0530
committer Ed Tanous <ed@tanous.net> Thu Oct 03 11:34:06 2024 -0700
tree 34e5a9c66e9d07bcd5b298ddf2c2cfaaca194c23
parent 00355b6511b2a5bb2928b5a1f9298be991a2ab70

Network page validation and i18n issue fix

In network page invalid if condition changed, added validations and i18n
function changed based on the vue 3 support.

Change-Id: If5b9c00f6da722984f1c568cfbcb6b34537c3df1
Signed-off-by: Surya Venkatesan <suryav@ami.com>

src/views/Settings/Network/ModalIpv6.vue

diff --git a/src/views/Settings/Network/ModalIpv6.vue b/src/views/Settings/Network/ModalIpv6.vue
index 5b2e1c2..78f803a 100644
--- a/src/views/Settings/Network/ModalIpv6.vue
+++ b/src/views/Settings/Network/ModalIpv6.vue
@@ -16,14 +16,14 @@
               id="ipAddress"
               v-model="form.ipAddress"
               type="text"
-              :state="getValidationState($v.form.ipAddress)"
-              @input="$v.form.ipAddress.$touch()"
+              :state="getValidationState(v$.form.ipAddress)"
+              @input="v$.form.ipAddress.$touch()"
             />
             <b-form-invalid-feedback role="alert">
-              <template v-if="!$v.form.ipAddress.required">
+              <template v-if="v$.form.ipAddress.required.$invalid">
                 {{ $t('global.form.fieldRequired') }}
               </template>
-              <template v-if="!$v.form.ipAddress.validateIpv6">
+              <template v-if="v$.form.ipAddress.validateIpv6.$invalid">
                 {{ $t('global.form.invalidFormat') }}
               </template>
             </b-form-invalid-feedback>
@@ -38,14 +38,16 @@
               id="prefixLength"
               v-model="form.prefixLength"
               type="text"
-              :state="getValidationState($v.form.prefixLength)"
-              @input="$v.form.prefixLength.$touch()"
+              :state="getValidationState(v$.form.prefixLength)"
+              @input="v$.form.prefixLength.$touch()"
             />
             <b-form-invalid-feedback role="alert">
-              <template v-if="!$v.form.prefixLength.required">
+              <template v-if="v$.form.prefixLength.required.$invalid">
                 {{ $t('global.form.fieldRequired') }}
               </template>
-              <template v-if="!$v.form.prefixLength.validatePrefixLength">
+              <template
+                v-if="v$.form.prefixLength.validatePrefixLength.$invalid"
+              >
                 {{ $t('global.form.invalidFormat') }}
               </template>
             </b-form-invalid-feedback>
@@ -66,7 +68,10 @@
 
 <script>
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { required, helpers } from '@vuelidate/validators';
+import { required } from '@vuelidate/validators';
+import { helpers } from 'vuelidate/lib/validators';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
 
 const validateIpv6 = helpers.regex(
   'validateIpv6',
@@ -80,8 +85,14 @@
 
 export default {
   mixins: [VuelidateMixin],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
+      $t: useI18n().t,
       form: {
         ipAddress: '',
         prefixLength: '',
@@ -104,8 +115,8 @@
   },
   methods: {
     handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
+      this.v$.$touch();
+      if (this.v$.$invalid) return;
       this.$emit('ok', {
         Address: this.form.ipAddress,
         PrefixLength: parseInt(this.form.prefixLength),
@@ -120,7 +131,7 @@
     resetForm() {
       this.form.ipAddress = null;
       this.form.prefixLength = null;
-      this.$v.$reset();
+      this.v$.$reset();
       this.$emit('hidden');
     },
     onOk(bvModalEvt) {