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/Logs/Dumps/Dumps.vue b/src/views/Logs/Dumps/Dumps.vue
index 5a9869a..0446911 100644
--- a/src/views/Logs/Dumps/Dumps.vue
+++ b/src/views/Logs/Dumps/Dumps.vue
@@ -84,8 +84,8 @@
<!-- Date and Time column -->
<template #cell(dateTime)="{ value }">
- <p class="mb-0">{{ value }}</p>
- <p class="mb-0">{{ value }}</p>
+ <p class="mb-0">{{ $filters.formatDate(value) }}</p>
+ <p class="mb-0">{{ $filters.formatTime(value) }}</p>
</template>
<!-- Size column -->
@@ -171,6 +171,7 @@
} from '@/components/Mixins/SearchFilterMixin';
import TableFilter from '@/components/Global/TableFilter';
import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
+import i18n from '@/i18n';
export default {
components: {
@@ -210,22 +211,22 @@
},
{
key: 'dateTime',
- label: this.$t('pageDumps.table.dateAndTime'),
+ label: i18n.global.t('pageDumps.table.dateAndTime'),
sortable: true,
},
{
key: 'dumpType',
- label: this.$t('pageDumps.table.dumpType'),
+ label: i18n.global.t('pageDumps.table.dumpType'),
sortable: true,
},
{
key: 'id',
- label: this.$t('pageDumps.table.id'),
+ label: i18n.global.t('pageDumps.table.id'),
sortable: true,
},
{
key: 'size',
- label: this.$t('pageDumps.table.size'),
+ label: i18n.global.t('pageDumps.table.size'),
sortable: true,
},
{
@@ -238,13 +239,13 @@
batchActions: [
{
value: 'delete',
- label: this.$t('global.action.delete'),
+ label: i18n.global.t('global.action.delete'),
},
],
tableFilters: [
{
key: 'dumpType',
- label: this.$t('pageDumps.table.dumpType'),
+ label: i18n.global.t('pageDumps.table.dumpType'),
values: [
'BMC Dump Entry',
'Hostboot Dump Entry',
@@ -279,11 +280,11 @@
actions: [
{
value: 'download',
- title: this.$t('global.action.download'),
+ title: i18n.global.t('global.action.download'),
},
{
value: 'delete',
- title: this.$t('global.action.delete'),
+ title: i18n.global.t('global.action.delete'),
},
],
};
@@ -328,12 +329,15 @@
onTableRowAction(action, dump) {
if (action === 'delete') {
this.$bvModal
- .msgBoxConfirm(this.$tc('pageDumps.modal.deleteDumpConfirmation'), {
- title: this.$tc('pageDumps.modal.deleteDump'),
- okTitle: this.$tc('pageDumps.modal.deleteDump'),
- cancelTitle: this.$t('global.action.cancel'),
- autoFocusButton: 'ok',
- })
+ .msgBoxConfirm(
+ i18n.global.t('pageDumps.modal.deleteDumpConfirmation'),
+ {
+ title: i18n.global.t('pageDumps.modal.deleteDump'),
+ okTitle: i18n.global.t('pageDumps.modal.deleteDump'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
+ autoFocusButton: 'ok',
+ },
+ )
.then((deleteConfrimed) => {
if (deleteConfrimed) {
this.$store
@@ -355,20 +359,20 @@
if (action === 'delete') {
this.$bvModal
.msgBoxConfirm(
- this.$tc(
+ i18n.global.t(
'pageDumps.modal.deleteDumpConfirmation',
this.selectedRows.length,
),
{
- title: this.$tc(
+ title: i18n.global.t(
'pageDumps.modal.deleteDump',
this.selectedRows.length,
),
- okTitle: this.$tc(
+ okTitle: i18n.global.t(
'pageDumps.modal.deleteDump',
this.selectedRows.length,
),
- cancelTitle: this.$t('global.action.cancel'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
autoFocusButton: 'ok',
},
)
diff --git a/src/views/Logs/Dumps/DumpsForm.vue b/src/views/Logs/Dumps/DumpsForm.vue
index 40cea7e..7da3084 100644
--- a/src/views/Logs/Dumps/DumpsForm.vue
+++ b/src/views/Logs/Dumps/DumpsForm.vue
@@ -9,7 +9,7 @@
id="selectDumpType"
v-model="selectedDumpType"
:options="dumpTypeOptions"
- :state="getValidationState($v.selectedDumpType)"
+ :state="getValidationState(v$.selectedDumpType)"
>
<template #first>
<b-form-select-option :value="null" disabled>
@@ -39,6 +39,7 @@
import Alert from '@/components/Global/Alert';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import i18n from '@/i18n';
export default {
components: { Alert, ModalConfirmation },
@@ -52,8 +53,8 @@
return {
selectedDumpType: null,
dumpTypeOptions: [
- { value: 'bmc', text: this.$t('pageDumps.form.bmcDump') },
- { value: 'system', text: this.$t('pageDumps.form.systemDump') },
+ { value: 'bmc', text: i18n.global.t('pageDumps.form.bmcDump') },
+ { value: 'system', text: i18n.global.t('pageDumps.form.systemDump') },
],
};
},
@@ -64,8 +65,8 @@
},
methods: {
handleSubmit() {
- this.$v.$touch();
- if (this.$v.$invalid) return;
+ this.v$.$touch();
+ if (this.v$.$invalid) return;
// System dump initiation
if (this.selectedDumpType === 'system') {
@@ -76,10 +77,15 @@
this.$store
.dispatch('dumps/createBmcDump')
.then(() =>
- this.infoToast(this.$t('pageDumps.toast.successStartBmcDump'), {
- title: this.$t('pageDumps.toast.successStartBmcDumpTitle'),
- timestamp: true,
- }),
+ this.infoToast(
+ i18n.global.t('pageDumps.toast.successStartBmcDump'),
+ {
+ title: i18n.global.t(
+ 'pageDumps.toast.successStartBmcDumpTitle',
+ ),
+ timestamp: true,
+ },
+ ),
)
.catch(({ message }) => this.errorToast(message));
}
@@ -91,10 +97,15 @@
this.$store
.dispatch('dumps/createSystemDump')
.then(() =>
- this.infoToast(this.$t('pageDumps.toast.successStartSystemDump'), {
- title: this.$t('pageDumps.toast.successStartSystemDumpTitle'),
- timestamp: true,
- }),
+ this.infoToast(
+ i18n.global.t('pageDumps.toast.successStartSystemDump'),
+ {
+ title: i18n.global.t(
+ 'pageDumps.toast.successStartSystemDumpTitle',
+ ),
+ timestamp: true,
+ },
+ ),
)
.catch(({ message }) => this.errorToast(message));
},
diff --git a/src/views/Logs/Dumps/DumpsModalConfirmation.vue b/src/views/Logs/Dumps/DumpsModalConfirmation.vue
index 2a1e552..4b68681 100644
--- a/src/views/Logs/Dumps/DumpsModalConfirmation.vue
+++ b/src/views/Logs/Dumps/DumpsModalConfirmation.vue
@@ -17,11 +17,11 @@
<status-icon status="danger" />
{{ $t('pageDumps.modal.initiateSystemDumpMessage3') }}
</p>
- <b-form-checkbox v-model="confirmed" @input="$v.confirmed.$touch()">
+ <b-form-checkbox v-model="confirmed" @input="v$.confirmed.$touch()">
{{ $t('pageDumps.modal.initiateSystemDumpMessage4') }}
</b-form-checkbox>
<b-form-invalid-feedback
- :state="getValidationState($v.confirmed)"
+ :state="getValidationState(v$.confirmed)"
role="alert"
>
{{ $t('global.form.required') }}
@@ -67,14 +67,14 @@
});
},
handleSubmit() {
- this.$v.$touch();
- if (this.$v.$invalid) return;
+ this.v$.$touch();
+ if (this.v$.$invalid) return;
this.$emit('ok');
this.closeModal();
},
resetForm() {
this.confirmed = false;
- this.$v.$reset();
+ this.v$.$reset();
},
},
};
diff --git a/src/views/Logs/EventLogs/EventLogs.vue b/src/views/Logs/EventLogs/EventLogs.vue
index 7aa5b1f..392125c 100644
--- a/src/views/Logs/EventLogs/EventLogs.vue
+++ b/src/views/Logs/EventLogs/EventLogs.vue
@@ -144,8 +144,8 @@
<!-- Modified date -->
<dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt>
<dd v-if="item.modifiedDate">
- {{ item.modifiedDate }}
- {{ item.modifiedDate }}
+ {{ $filters.formatDate(item.modifiedDate) }}
+ {{ $filters.formatTime(item.modifiedDate) }}
</dd>
<dd v-else>--</dd>
</dl>
@@ -166,8 +166,8 @@
</template>
<!-- Date column -->
<template #cell(date)="{ value }">
- <p class="mb-0">{{ value }}</p>
- <p class="mb-0">{{ value }}</p>
+ <p class="mb-0">{{ $filters.formatDate(value) }}</p>
+ <p class="mb-0">{{ $filters.formatTime(value) }}</p>
</template>
<!-- Status column -->
@@ -545,8 +545,8 @@
onTableRowAction(action, { uri }) {
if (action === 'delete') {
this.$bvModal
- .msgBoxConfirm(this.$tc('pageEventLogs.modal.deleteMessage'), {
- title: this.$tc('pageEventLogs.modal.deleteTitle'),
+ .msgBoxConfirm(i18n.global.t('pageEventLogs.modal.deleteMessage'), {
+ title: i18n.global.t('pageEventLogs.modal.deleteTitle'),
okTitle: i18n.global.t('global.action.delete'),
cancelTitle: i18n.global.t('global.action.cancel'),
autoFocusButton: 'ok',
@@ -561,12 +561,12 @@
const uris = this.selectedRows.map((row) => row.uri);
this.$bvModal
.msgBoxConfirm(
- this.$tc(
+ i18n.global.t(
'pageEventLogs.modal.deleteMessage',
this.selectedRows.length,
),
{
- title: this.$tc(
+ title: i18n.global.t(
'pageEventLogs.modal.deleteTitle',
this.selectedRows.length,
),
@@ -585,7 +585,7 @@
)
.then(() => {
this.successToast(
- this.$tc(
+ i18n.global.t(
'pageEventLogs.toast.successDelete',
uris.length,
),
diff --git a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
index ad62afc..6d8ff90 100644
--- a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
+++ b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
@@ -97,8 +97,8 @@
</template>
<!-- Date column -->
<template #cell(date)="{ value }">
- <p class="mb-0">{{ value }}</p>
- <p class="mb-0">{{ value }}</p>
+ <p class="mb-0">{{ $filters.formatDate(value) }}</p>
+ <p class="mb-0">{{ $filters.formatTime(value) }}</p>
</template>
<!-- Actions column -->
@@ -186,6 +186,8 @@
import SearchFilterMixin, {
searchFilter,
} from '@/components/Mixins/SearchFilterMixin';
+import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
export default {
components: {
@@ -218,6 +220,7 @@
},
data() {
return {
+ $t: useI18n().t,
isBusy: true,
fields: [
{
@@ -226,20 +229,20 @@
},
{
key: 'date',
- label: this.$t('pagePostCodeLogs.table.created'),
+ label: i18n.global.t('pagePostCodeLogs.table.created'),
sortable: true,
},
{
key: 'timeStampOffset',
- label: this.$t('pagePostCodeLogs.table.timeStampOffset'),
+ label: i18n.global.t('pagePostCodeLogs.table.timeStampOffset'),
},
{
key: 'bootCount',
- label: this.$t('pagePostCodeLogs.table.bootCount'),
+ label: i18n.global.t('pagePostCodeLogs.table.bootCount'),
},
{
key: 'postCode',
- label: this.$t('pagePostCodeLogs.table.postCode'),
+ label: i18n.global.t('pagePostCodeLogs.table.postCode'),
},
{
key: 'actions',
@@ -278,11 +281,11 @@
actions: [
{
value: 'export',
- title: this.$t('pagePostCodeLogs.action.exportLogs'),
+ title: i18n.global.t('pagePostCodeLogs.action.exportLogs'),
},
{
value: 'download',
- title: this.$t('pagePostCodeLogs.action.downloadDetails'),
+ title: i18n.global.t('pagePostCodeLogs.action.downloadDetails'),
},
],
};
@@ -316,11 +319,11 @@
methods: {
deleteAllLogs() {
this.$bvModal
- .msgBoxConfirm(this.$t('pageEventLogs.modal.deleteAllMessage'), {
- title: this.$t('pageEventLogs.modal.deleteAllTitle'),
- okTitle: this.$t('global.action.delete'),
+ .msgBoxConfirm(i18n.global.t('pageEventLogs.modal.deleteAllMessage'), {
+ title: i18n.global.t('pageEventLogs.modal.deleteAllTitle'),
+ okTitle: i18n.global.t('global.action.delete'),
okVariant: 'danger',
- cancelTitle: this.$t('global.action.cancel'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
autoFocusButton: 'cancel',
})
.then((deleteConfirmed) => {
@@ -361,11 +364,11 @@
date.toString().split(':').join('-').split(' ')[4];
let fileName;
if (value === 'download') {
- fileName = this.$t('pagePostCodeLogs.downloadFilePrefix');
+ fileName = i18n.global.t('pagePostCodeLogs.downloadFilePrefix');
} else if (value === 'export') {
- fileName = this.$t('pagePostCodeLogs.exportFilePrefix');
+ fileName = i18n.global.t('pagePostCodeLogs.exportFilePrefix');
} else {
- fileName = this.$t('pagePostCodeLogs.allExportFilePrefix');
+ fileName = i18n.global.t('pagePostCodeLogs.allExportFilePrefix');
}
return fileName + date;
},