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/ModalDefaultGateway.vue

diff --git a/src/views/Settings/Network/ModalDefaultGateway.vue b/src/views/Settings/Network/ModalDefaultGateway.vue
index 968b559..d54ddc2 100644
--- a/src/views/Settings/Network/ModalDefaultGateway.vue
+++ b/src/views/Settings/Network/ModalDefaultGateway.vue
@@ -17,14 +17,14 @@
               v-model.trim="form.defaultGateway"
               data-test-id="network-input-gateway"
               type="text"
-              :state="getValidationState($v.form.defaultGateway)"
-              @change="$v.form.defaultGateway.$touch()"
+              :state="getValidationState(v$.form.defaultGateway)"
+              @change="v$.form.defaultGateway.$touch()"
             />
             <b-form-invalid-feedback role="alert">
-              <div v-if="!$v.form.defaultGateway.required">
+              <div v-if="v$.form.defaultGateway.required.$invalid">
                 {{ $t('global.form.fieldRequired') }}
               </div>
-              <div v-if="!$v.form.defaultGateway.validateGateway">
+              <div v-if="v$.form.defaultGateway.validateGateway.$invalid">
                 {{ $t('global.form.invalidFormat') }}
               </div>
             </b-form-invalid-feedback>
@@ -50,7 +50,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 { useVuelidate } from '@vuelidate/core';
+import { useI18n } from 'vue-i18n';
 
 const validateGateway = helpers.regex(
   'validateGateway',
@@ -65,8 +68,14 @@
       default: '',
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
+      $t: useI18n().t,
       form: {
         defaultGateway: '',
       },
@@ -89,8 +98,8 @@
   },
   methods: {
     handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
+      this.v$.$touch();
+      if (this.v$.$invalid) return;
       this.$emit('ok', { IPv6DefaultGateway: this.form.defaultGateway });
       this.closeModal();
     },
@@ -101,7 +110,7 @@
     },
     resetForm() {
       this.form.defaultGateway = this.defaultGateway;
-      this.$v.$reset();
+      this.v$.$reset();
       this.$emit('hidden');
     },
     onOk(bvModalEvt) {