Vuelidate, I18n, and filter are upgraded to vue3
While navigating to the pages i18n, vuelidate, and filters errors
occurred. i18n, and vuelidate code changes in each page adapted to
vue3. Filter global function for date and time format implemented
in the main.js file and those files which as called the filter
functions.
Change-Id: If1a2ee22d47750faef1c35ef2c263299067d9a20
Signed-off-by: Surya Venkatesan <suryav@ami.com>
diff --git a/src/views/Settings/Network/ModalDns.vue b/src/views/Settings/Network/ModalDns.vue
index 8fe371e..0e1bd88 100644
--- a/src/views/Settings/Network/ModalDns.vue
+++ b/src/views/Settings/Network/ModalDns.vue
@@ -16,14 +16,14 @@
id="staticDns"
v-model="form.staticDns"
type="text"
- :state="getValidationState($v.form.staticDns)"
- @input="$v.form.staticDns.$touch()"
+ :state="getValidationState(v$.form.staticDns)"
+ @input="v$.form.staticDns.$touch()"
/>
<b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.staticDns.required">
+ <template v-if="!v$.form.staticDns.required">
{{ $t('global.form.fieldRequired') }}
</template>
- <template v-if="!$v.form.staticDns.ipAddress">
+ <template v-if="!v$.form.staticDns.ipAddress">
{{ $t('global.form.invalidFormat') }}
</template>
</b-form-invalid-feedback>
@@ -47,6 +47,7 @@
import { useVuelidate } from '@vuelidate/core';
import { ipAddress, required } from '@vuelidate/validators';
+import { useI18n } from 'vue-i18n';
export default {
mixins: [VuelidateMixin],
@@ -57,6 +58,7 @@
},
data() {
return {
+ $t: useI18n().t,
form: {
staticDns: null,
},
@@ -74,8 +76,8 @@
},
methods: {
handleSubmit() {
- this.$v.$touch();
- if (this.$v.$invalid) return;
+ this.v$.$touch();
+ if (this.v$.$invalid) return;
this.$emit('ok', [this.form.staticDns]);
this.closeModal();
},
@@ -86,7 +88,7 @@
},
resetForm() {
this.form.staticDns = null;
- this.$v.$reset();
+ this.v$.$reset();
this.$emit('hidden');
},
onOk(bvModalEvt) {
diff --git a/src/views/Settings/Network/ModalHostname.vue b/src/views/Settings/Network/ModalHostname.vue
index 1b3bab1..b2155b7 100644
--- a/src/views/Settings/Network/ModalHostname.vue
+++ b/src/views/Settings/Network/ModalHostname.vue
@@ -16,14 +16,14 @@
id="hostname"
v-model="form.hostname"
type="text"
- :state="getValidationState($v.form.hostname)"
- @input="$v.form.hostname.$touch()"
+ :state="getValidationState(v$.form.hostname)"
+ @input="v$.form.hostname.$touch()"
/>
<b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.hostname.required">
+ <template v-if="!v$.form.hostname.required">
{{ $t('global.form.fieldRequired') }}
</template>
- <template v-if="!$v.form.hostname.validateHostname">
+ <template v-if="!v$.form.hostname.validateHostname">
{{ $t('global.form.lengthMustBeBetween', { min: 1, max: 64 }) }}
</template>
</b-form-invalid-feedback>
@@ -52,6 +52,7 @@
import { useVuelidate } from '@vuelidate/core';
import { required, helpers } from '@vuelidate/validators';
+import { useI18n } from 'vue-i18n';
const validateHostname = helpers.regex('validateHostname', /^\S{0,64}$/);
@@ -70,6 +71,7 @@
},
data() {
return {
+ $t: useI18n().t,
form: {
hostname: '',
},
@@ -92,8 +94,8 @@
},
methods: {
handleSubmit() {
- this.$v.$touch();
- if (this.$v.$invalid) return;
+ this.v$.$touch();
+ if (this.v$.$invalid) return;
this.$emit('ok', { HostName: this.form.hostname });
this.closeModal();
},
@@ -104,7 +106,7 @@
},
resetForm() {
this.form.hostname = this.hostname;
- this.$v.$reset();
+ this.v$.$reset();
this.$emit('hidden');
},
onOk(bvModalEvt) {
diff --git a/src/views/Settings/Network/ModalIpv4.vue b/src/views/Settings/Network/ModalIpv4.vue
index 2c3d9e8..a3b5482 100644
--- a/src/views/Settings/Network/ModalIpv4.vue
+++ b/src/views/Settings/Network/ModalIpv4.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">
{{ $t('global.form.fieldRequired') }}
</template>
- <template v-if="!$v.form.ipAddress.ipAddress">
+ <template v-if="!v$.form.ipAddress.ipAddress">
{{ $t('global.form.invalidFormat') }}
</template>
</b-form-invalid-feedback>
@@ -38,14 +38,14 @@
id="gateway"
v-model="form.gateway"
type="text"
- :state="getValidationState($v.form.gateway)"
- @input="$v.form.gateway.$touch()"
+ :state="getValidationState(v$.form.gateway)"
+ @input="v$.form.gateway.$touch()"
/>
<b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.gateway.required">
+ <template v-if="!v$.form.gateway.required">
{{ $t('global.form.fieldRequired') }}
</template>
- <template v-if="!$v.form.gateway.ipAddress">
+ <template v-if="!v$.form.gateway.ipAddress">
{{ $t('global.form.invalidFormat') }}
</template>
</b-form-invalid-feedback>
@@ -62,14 +62,14 @@
id="subnetMask"
v-model="form.subnetMask"
type="text"
- :state="getValidationState($v.form.subnetMask)"
- @input="$v.form.subnetMask.$touch()"
+ :state="getValidationState(v$.form.subnetMask)"
+ @input="v$.form.subnetMask.$touch()"
/>
<b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.subnetMask.required">
+ <template v-if="!v$.form.subnetMask.required">
{{ $t('global.form.fieldRequired') }}
</template>
- <template v-if="!$v.form.subnetMask.ipAddress">
+ <template v-if="!v$.form.subnetMask.ipAddress">
{{ $t('global.form.invalidFormat') }}
</template>
</b-form-invalid-feedback>
@@ -93,6 +93,7 @@
import { useVuelidate } from '@vuelidate/core';
import { ipAddress, required } from '@vuelidate/validators';
+import { useI18n } from 'vue-i18n';
export default {
mixins: [VuelidateMixin],
@@ -109,6 +110,7 @@
},
data() {
return {
+ $t: useI18n().t,
form: {
ipAddress: '',
gateway: '',
@@ -141,8 +143,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,
Gateway: this.form.gateway,
@@ -159,7 +161,7 @@
this.form.ipAddress = null;
this.form.gateway = this.defaultGateway;
this.form.subnetMask = null;
- this.$v.$reset();
+ this.v$.$reset();
this.$emit('hidden');
},
onOk(bvModalEvt) {
diff --git a/src/views/Settings/Network/ModalMacAddress.vue b/src/views/Settings/Network/ModalMacAddress.vue
index 307eb8d..f3fcc02 100644
--- a/src/views/Settings/Network/ModalMacAddress.vue
+++ b/src/views/Settings/Network/ModalMacAddress.vue
@@ -17,14 +17,14 @@
v-model.trim="form.macAddress"
data-test-id="network-input-macAddress"
type="text"
- :state="getValidationState($v.form.macAddress)"
- @change="$v.form.macAddress.$touch()"
+ :state="getValidationState(v$.form.macAddress)"
+ @change="v$.form.macAddress.$touch()"
/>
<b-form-invalid-feedback role="alert">
- <div v-if="!$v.form.macAddress.required">
+ <div v-if="!v$.form.macAddress.required">
{{ $t('global.form.fieldRequired') }}
</div>
- <div v-if="!$v.form.macAddress.macAddress">
+ <div v-if="!v$.form.macAddress.macAddress">
{{ $t('global.form.invalidFormat') }}
</div>
</b-form-invalid-feedback>
@@ -53,6 +53,7 @@
import { useVuelidate } from '@vuelidate/core';
import { macAddress, required } from '@vuelidate/validators';
+import { useI18n } from 'vue-i18n';
export default {
mixins: [VuelidateMixin],
@@ -69,6 +70,7 @@
},
data() {
return {
+ $t: useI18n().t,
form: {
macAddress: '',
},
@@ -91,8 +93,8 @@
},
methods: {
handleSubmit() {
- this.$v.$touch();
- if (this.$v.$invalid) return;
+ this.v$.$touch();
+ if (this.v$.$invalid) return;
this.$emit('ok', { MACAddress: this.form.macAddress });
this.closeModal();
},
@@ -103,7 +105,7 @@
},
resetForm() {
this.form.macAddress = this.macAddress;
- this.$v.$reset();
+ this.v$.$reset();
this.$emit('hidden');
},
onOk(bvModalEvt) {
diff --git a/src/views/Settings/Network/Network.vue b/src/views/Settings/Network/Network.vue
index 0279cbe..7a2e014 100644
--- a/src/views/Settings/Network/Network.vue
+++ b/src/views/Settings/Network/Network.vue
@@ -64,6 +64,7 @@
import TableIpv6 from './TableIpv6.vue';
import TableDns from './TableDns.vue';
import { mapState } from 'vuex';
+import { useI18n } from 'vue-i18n';
export default {
name: 'Network',
@@ -89,6 +90,7 @@
},
data() {
return {
+ $t: useI18n().t,
currentHostname: '',
currentMacAddress: '',
defaultGateway: '',
diff --git a/src/views/Settings/Network/NetworkGlobalSettings.vue b/src/views/Settings/Network/NetworkGlobalSettings.vue
index 0c062ea..23ce6ca 100644
--- a/src/views/Settings/Network/NetworkGlobalSettings.vue
+++ b/src/views/Settings/Network/NetworkGlobalSettings.vue
@@ -133,6 +133,7 @@
import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
import PageSection from '@/components/Global/PageSection';
import { mapState } from 'vuex';
+import { useI18n } from 'vue-i18n';
export default {
name: 'GlobalNetworkSettings',
@@ -141,6 +142,7 @@
data() {
return {
+ $t: useI18n().t,
hostname: '',
};
},
diff --git a/src/views/Settings/Network/NetworkInterfaceSettings.vue b/src/views/Settings/Network/NetworkInterfaceSettings.vue
index 023d29b..ea83757 100644
--- a/src/views/Settings/Network/NetworkInterfaceSettings.vue
+++ b/src/views/Settings/Network/NetworkInterfaceSettings.vue
@@ -62,6 +62,7 @@
import PageSection from '@/components/Global/PageSection';
import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
import { mapState } from 'vuex';
+import { useI18n } from 'vue-i18n';
export default {
name: 'Ipv4Table',
@@ -78,6 +79,7 @@
},
data() {
return {
+ $t: useI18n().t,
selectedInterface: '',
linkStatus: '',
linkSpeed: '',
diff --git a/src/views/Settings/Network/TableDns.vue b/src/views/Settings/Network/TableDns.vue
index 569109f..0de1dca 100644
--- a/src/views/Settings/Network/TableDns.vue
+++ b/src/views/Settings/Network/TableDns.vue
@@ -46,6 +46,7 @@
import PageSection from '@/components/Global/PageSection';
import TableRowAction from '@/components/Global/TableRowAction';
import { mapState } from 'vuex';
+import { useI18n } from 'vue-i18n';
export default {
name: 'DNSTable',
@@ -65,23 +66,24 @@
},
data() {
return {
+ $t: useI18n().t,
form: {
dnsStaticTableItems: [],
},
actions: [
{
value: 'edit',
- title: this.$t('global.action.edit'),
+ title: 'global.action.edit',
},
{
value: 'delete',
- title: this.$t('global.action.delete'),
+ title: 'global.action.delete',
},
],
dnsTableFields: [
{
key: 'address',
- label: this.$t('pageNetwork.table.ipAddress'),
+ label: 'pageNetwork.table.ipAddress',
},
{ key: 'actions', label: '', tdClass: 'text-right' },
],
@@ -116,7 +118,7 @@
actions: [
{
value: 'delete',
- title: this.$t('pageNetwork.table.deleteDns'),
+ title: 'pageNetwork.table.deleteDns',
},
],
};
diff --git a/src/views/Settings/Network/TableIpv4.vue b/src/views/Settings/Network/TableIpv4.vue
index 0a06e0e..b95e7d3 100644
--- a/src/views/Settings/Network/TableIpv4.vue
+++ b/src/views/Settings/Network/TableIpv4.vue
@@ -71,6 +71,8 @@
import PageSection from '@/components/Global/PageSection';
import TableRowAction from '@/components/Global/TableRowAction';
import { mapState } from 'vuex';
+import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
export default {
name: 'Ipv4Table',
@@ -90,35 +92,36 @@
},
data() {
return {
+ $t: useI18n().t,
form: {
ipv4TableItems: [],
},
actions: [
{
value: 'edit',
- title: this.$t('global.action.edit'),
+ title: i18n.global.t('global.action.edit'),
},
{
value: 'delete',
- title: this.$t('global.action.delete'),
+ title: i18n.global.t('global.action.delete'),
},
],
ipv4TableFields: [
{
key: 'Address',
- label: this.$t('pageNetwork.table.ipAddress'),
+ label: i18n.global.t('pageNetwork.table.ipAddress'),
},
{
key: 'Gateway',
- label: this.$t('pageNetwork.table.gateway'),
+ label: i18n.global.t('pageNetwork.table.gateway'),
},
{
key: 'SubnetMask',
- label: this.$t('pageNetwork.table.subnet'),
+ label: i18n.global.t('pageNetwork.table.subnet'),
},
{
key: 'AddressOrigin',
- label: this.$t('pageNetwork.table.addressOrigin'),
+ label: i18n.global.t('pageNetwork.table.addressOrigin'),
},
{ key: 'actions', label: '', tdClass: 'text-right' },
],
@@ -178,7 +181,7 @@
actions: [
{
value: 'delete',
- title: this.$t('pageNetwork.table.deleteIpv4'),
+ title: i18n.global.t('pageNetwork.table.deleteIpv4'),
},
],
};
@@ -211,19 +214,19 @@
this.$bvModal
.msgBoxConfirm(
state
- ? this.$t('pageNetwork.modal.confirmEnableDhcp')
- : this.$t('pageNetwork.modal.confirmDisableDhcp'),
+ ? i18n.global.t('pageNetwork.modal.confirmEnableDhcp')
+ : i18n.global.t('pageNetwork.modal.confirmDisableDhcp'),
{
- title: this.$t('pageNetwork.modal.dhcpConfirmTitle', {
+ title: i18n.global.t('pageNetwork.modal.dhcpConfirmTitle', {
dhcpState: state
- ? this.$t('global.action.enable')
- : this.$t('global.action.disable'),
+ ? i18n.global.t('global.action.enable')
+ : i18n.global.t('global.action.disable'),
}),
okTitle: state
- ? this.$t('global.action.enable')
- : this.$t('global.action.disable'),
+ ? i18n.global.t('global.action.enable')
+ : i18n.global.t('global.action.disable'),
okVariant: 'danger',
- cancelTitle: this.$t('global.action.cancel'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
autoFocusButton: 'cancel',
},
)