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();
},
},
};