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/DateTime/DateTime.vue b/src/views/Settings/DateTime/DateTime.vue
index 00d7b45..b86ebd2 100644
--- a/src/views/Settings/DateTime/DateTime.vue
+++ b/src/views/Settings/DateTime/DateTime.vue
@@ -18,14 +18,14 @@
<b-col lg="3">
<dl>
<dt>{{ $t('pageDateTime.form.date') }}</dt>
- <dd v-if="bmcTime">{{ bmcTime }}</dd>
+ <dd v-if="bmcTime">{{ $filters.formatDate(bmcTime) }}</dd>
<dd v-else>--</dd>
</dl>
</b-col>
<b-col lg="3">
<dl>
<dt>{{ $t('pageDateTime.form.time.label') }}</dt>
- <dd v-if="bmcTime">{{ bmcTime }}</dd>
+ <dd v-if="bmcTime">{{ $filters.formatTime(bmcTime) }}</dd>
<dd v-else>--</dd>
</dl>
</b-col>
@@ -56,17 +56,17 @@
<b-form-input
id="input-manual-date"
v-model="form.manual.date"
- :state="getValidationState($v.form.manual.date)"
+ :state="getValidationState(v$.form.manual.date)"
:disabled="ntpOptionSelected"
data-test-id="dateTime-input-manualDate"
class="form-control-with-button"
- @blur="$v.form.manual.date.$touch()"
+ @blur="v$.form.manual.date.$touch()"
/>
<b-form-invalid-feedback role="alert">
- <div v-if="!$v.form.manual.date.pattern">
+ <div v-if="!v$.form.manual.date.pattern">
{{ $t('global.form.invalidFormat') }}
</div>
- <div v-if="!$v.form.manual.date.required">
+ <div v-if="!v$.form.manual.date.required">
{{ $t('global.form.fieldRequired') }}
</div>
</b-form-invalid-feedback>
@@ -105,16 +105,16 @@
<b-form-input
id="input-manual-time"
v-model="form.manual.time"
- :state="getValidationState($v.form.manual.time)"
+ :state="getValidationState(v$.form.manual.time)"
:disabled="ntpOptionSelected"
data-test-id="dateTime-input-manualTime"
- @blur="$v.form.manual.time.$touch()"
+ @blur="v$.form.manual.time.$touch()"
/>
<b-form-invalid-feedback role="alert">
- <div v-if="!$v.form.manual.time.pattern">
+ <div v-if="!v$.form.manual.time.pattern">
{{ $t('global.form.invalidFormat') }}
</div>
- <div v-if="!$v.form.manual.time.required">
+ <div v-if="!v$.form.manual.time.required">
{{ $t('global.form.fieldRequired') }}
</div>
</b-form-invalid-feedback>
@@ -139,13 +139,13 @@
<b-form-input
id="input-ntp-1"
v-model="form.ntp.firstAddress"
- :state="getValidationState($v.form.ntp.firstAddress)"
+ :state="getValidationState(v$.form.ntp.firstAddress)"
:disabled="manualOptionSelected"
data-test-id="dateTime-input-ntpServer1"
- @blur="$v.form.ntp.firstAddress.$touch()"
+ @blur="v$.form.ntp.firstAddress.$touch()"
/>
<b-form-invalid-feedback role="alert">
- <div v-if="!$v.form.ntp.firstAddress.required">
+ <div v-if="!v$.form.ntp.firstAddress.required">
{{ $t('global.form.fieldRequired') }}
</div>
</b-form-invalid-feedback>
@@ -210,6 +210,7 @@
import { mapState } from 'vuex';
import { requiredIf, helpers } from '@vuelidate/validators';
+import { useI18n } from 'vue-i18n';
const isoDateRegex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/;
const isoTimeRegex = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;
@@ -234,6 +235,7 @@
},
data() {
return {
+ $t: useI18n().t,
locale: this.$store.getters['global/languagePreference'],
form: {
configurationSelected: 'manual',
@@ -302,10 +304,10 @@
this.emitChange();
},
bmcTime() {
- this.form.manual.date = this.$options.filters.formatDate(
+ this.form.manual.date = this.$filters.formatDate(
this.$store.getters['global/bmcTime'],
);
- this.form.manual.time = this.$options.filters
+ this.form.manual.time = this.$filters
.formatTime(this.$store.getters['global/bmcTime'])
.slice(0, 5);
},
@@ -320,8 +322,8 @@
},
methods: {
emitChange() {
- if (this.$v.$invalid) return;
- this.$v.$reset(); //reset to re-validate on blur
+ if (this.v$.$invalid) return;
+ this.v$.$reset(); //reset to re-validate on blur
this.$emit('change', {
manualDate: this.manualDate ? new Date(this.manualDate) : null,
});
@@ -337,8 +339,8 @@
] = [this.ntpServers[0], this.ntpServers[1], this.ntpServers[2]];
},
submitForm() {
- this.$v.$touch();
- if (this.$v.$invalid) return;
+ this.v$.$touch();
+ if (this.v$.$invalid) return;
this.startLoader();
let dateTimeForm = {};
@@ -398,7 +400,7 @@
})
.catch(({ message }) => this.errorToast(message))
.finally(() => {
- this.$v.form.$reset();
+ this.v$.form.$reset();
this.endLoader();
});
},
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',
},
)
diff --git a/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue b/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
index dfa4865..348540a 100644
--- a/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
+++ b/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
@@ -28,6 +28,8 @@
import { useVuelidate } from '@vuelidate/core';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
export default {
name: 'PowerRestorePolicy',
@@ -44,6 +46,7 @@
},
data() {
return {
+ $t: useI18n().t,
policyValue: null,
options: [],
};
@@ -74,7 +77,9 @@
this.options.length = 0;
this.powerRestorePolicies.map((item) => {
this.options.push({
- text: this.$t(`pagePowerRestorePolicy.policiesDesc.${item.state}`),
+ text: i18n.global.t(
+ `pagePowerRestorePolicy.policiesDesc.${item.state}`,
+ ),
value: `${item.state}`,
});
});
diff --git a/src/views/Settings/SnmpAlerts/ModalAddDestination.vue b/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
index f52acd7..91ef34f 100644
--- a/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
+++ b/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
@@ -15,17 +15,17 @@
<b-form-input
id="ip-Address"
v-model="form.ipAddress"
- :state="getValidationState($v.form.ipAddress)"
+ :state="getValidationState(v$.form.ipAddress)"
data-test-id="snmpAlerts-input-ipAddress"
type="text"
- @blur="$v.form.ipAddress.$touch()"
+ @blur="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>
@@ -43,13 +43,13 @@
id="port"
v-model="form.port"
type="text"
- :state="getValidationState($v.form.port)"
+ :state="getValidationState(v$.form.port)"
data-test-id="snmpAlerts-input-port"
- @blur="$v.form.port.$touch()"
+ @blur="v$.form.port.$touch()"
/>
<b-form-invalid-feedback role="alert">
<template
- v-if="!$v.form.port.minLength || !$v.form.port.maxLength"
+ v-if="!v$.form.port.minLength || !v$.form.port.maxLength"
>
{{
$t('global.form.valueMustBeBetween', {
@@ -85,6 +85,7 @@
import { required, ipAddress, minValue, maxValue } from '@vuelidate/validators';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
import { useVuelidate } from '@vuelidate/core';
+import { useI18n } from 'vue-i18n';
export default {
mixins: [VuelidateMixin],
@@ -95,6 +96,7 @@
},
data() {
return {
+ $t: useI18n().t,
form: {
ipaddress: null,
port: null,
@@ -117,8 +119,8 @@
},
methods: {
handleSubmit() {
- this.$v.$touch();
- if (this.$v.$invalid) return;
+ this.v$.$touch();
+ if (this.v$.$invalid) return;
this.$emit('ok', {
ipAddress: this.form.ipAddress,
port: this.form.port,
@@ -133,7 +135,7 @@
resetForm() {
this.form.ipAddress = '';
this.form.port = '';
- this.$v.$reset();
+ this.v$.$reset();
this.$emit('hidden');
},
onOk(bvModalEvt) {
diff --git a/src/views/Settings/SnmpAlerts/SnmpAlerts.vue b/src/views/Settings/SnmpAlerts/SnmpAlerts.vue
index dba181f..d18ea75 100644
--- a/src/views/Settings/SnmpAlerts/SnmpAlerts.vue
+++ b/src/views/Settings/SnmpAlerts/SnmpAlerts.vue
@@ -90,6 +90,9 @@
tableHeaderCheckboxModel,
tableHeaderCheckboxIndeterminate,
} from '@/components/Mixins/BVTableSelectableMixin';
+import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
+
export default {
name: 'SnmpAlerts',
components: {
@@ -107,17 +110,18 @@
},
data() {
return {
+ $t: useI18n().t,
fields: [
{
key: 'checkbox',
},
{
key: 'IP',
- label: this.$t('pageSnmpAlerts.table.ipaddress'),
+ label: i18n.global.t('pageSnmpAlerts.table.ipaddress'),
},
{
key: 'Port',
- label: this.$t('pageSnmpAlerts.table.port'),
+ label: i18n.global.t('pageSnmpAlerts.table.port'),
},
{
key: 'actions',
@@ -128,7 +132,7 @@
tableToolbarActions: [
{
value: 'delete',
- label: this.$t('global.action.delete'),
+ label: i18n.global.t('global.action.delete'),
},
],
selectedRows: selectedRows,
@@ -164,7 +168,7 @@
{
value: 'delete',
enabled: true,
- title: this.$tc('pageSnmpAlerts.deleteDestination'),
+ title: i18n.global.t('pageSnmpAlerts.deleteDestination'),
},
],
...subscriptions,
@@ -202,13 +206,15 @@
initModalDeleteDestination(destination) {
this.$bvModal
.msgBoxConfirm(
- this.$t('pageSnmpAlerts.modal.deleteConfirmMessage', {
+ i18n.global.t('pageSnmpAlerts.modal.deleteConfirmMessage', {
destination: destination.id,
}),
{
- title: this.$tc('pageSnmpAlerts.modal.deleteSnmpDestinationTitle'),
- okTitle: this.$tc('pageSnmpAlerts.deleteDestination'),
- cancelTitle: this.$t('global.action.cancel'),
+ title: i18n.global.t(
+ 'pageSnmpAlerts.modal.deleteSnmpDestinationTitle',
+ ),
+ okTitle: i18n.global.t('pageSnmpAlerts.deleteDestination'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
autoFocusButton: 'ok',
},
)
@@ -230,20 +236,20 @@
if (action === 'delete') {
this.$bvModal
.msgBoxConfirm(
- this.$tc(
+ i18n.global.t(
'pageSnmpAlerts.modal.batchDeleteConfirmMessage',
this.selectedRows.length,
),
{
- title: this.$tc(
+ title: i18n.global.t(
'pageSnmpAlerts.modal.deleteSnmpDestinationTitle',
this.selectedRows.length,
),
- okTitle: this.$tc(
+ okTitle: i18n.global.t(
'pageSnmpAlerts.deleteDestination',
this.selectedRows.length,
),
- cancelTitle: this.$t('global.action.cancel'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
autoFocusButton: 'ok',
},
)