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/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 6b19ac0..25c0f2b 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -118,6 +118,7 @@
import LoadingBar from '@/components/Global/LoadingBar';
import { useI18n } from 'vue-i18n';
import { mapState } from 'vuex';
+import i18n from '@/i18n';
export default {
name: 'AppHeader',
@@ -204,8 +205,8 @@
},
isAuthorized(value) {
if (value === false) {
- this.errorToast(this.$t('global.toast.unAuthDescription'), {
- title: this.$t('global.toast.unAuthTitle'),
+ this.errorToast(i18n.global.t('global.toast.unAuthDescription'), {
+ title: i18n.global.t('global.toast.unAuthTitle'),
});
}
},
diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue
index 1eafa25..ccdc038 100644
--- a/src/components/Global/FormFile.vue
+++ b/src/components/Global/FormFile.vue
@@ -42,6 +42,7 @@
<script>
import { BFormFile } from 'bootstrap-vue';
import IconClose from '@carbon/icons-vue/es/close/20';
+import { useI18n } from 'vue-i18n';
export default {
name: 'FormFile',
@@ -70,6 +71,7 @@
},
data() {
return {
+ $t: useI18n().t,
file: null,
};
},
diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue
index 0e5c3b5..f5063e9 100644
--- a/src/components/Global/InfoTooltip.vue
+++ b/src/components/Global/InfoTooltip.vue
@@ -12,6 +12,7 @@
<script>
import IconTooltip from '@carbon/icons-vue/es/information/16';
+import { useI18n } from 'vue-i18n';
export default {
components: { IconTooltip },
@@ -21,6 +22,11 @@
default: '',
},
},
+ data() {
+ return {
+ $t: useI18n().t,
+ };
+ },
};
</script>
diff --git a/src/components/Mixins/BVPaginationMixin.js b/src/components/Mixins/BVPaginationMixin.js
index 0bdf368..1aa20a5 100644
--- a/src/components/Mixins/BVPaginationMixin.js
+++ b/src/components/Mixins/BVPaginationMixin.js
@@ -1,4 +1,4 @@
-//import i18n from '@/i18n';
+import i18n from '@/i18n';
export const currentPage = 1;
export const perPage = 20;
export const itemsPerPageOptions = [
@@ -20,8 +20,7 @@
},
{
value: 0,
- //text: i18n.$t('global.table.viewAll'),
- text: 'global.table.viewAll',
+ text: i18n.global.t('global.table.viewAll'),
},
];
const BVPaginationMixin = {
diff --git a/src/components/Mixins/BVToastMixin.js b/src/components/Mixins/BVToastMixin.js
index 4ee757f..c8b58da 100644
--- a/src/components/Mixins/BVToastMixin.js
+++ b/src/components/Mixins/BVToastMixin.js
@@ -1,4 +1,5 @@
import StatusIcon from '../Global/StatusIcon';
+import i18n from '@/i18n';
const BVToastMixin = {
components: {
@@ -26,7 +27,7 @@
}
},
$_BVToastMixin_createTimestamp() {
- const timestamp = this.$options.filters.formatTime(new Date());
+ const timestamp = this.$filters.formatTime(new Date());
return this.$createElement('p', { class: 'mt-3 mb-0' }, timestamp);
},
$_BVToastMixin_createRefreshAction() {
@@ -40,7 +41,7 @@
},
},
},
- this.$t('global.action.refresh'),
+ i18n.global.t('global.action.refresh'),
);
},
$_BVToastMixin_initToast(body, title, variant) {
@@ -56,7 +57,7 @@
successToast(
message,
{
- title: t = this.$t('global.status.success'),
+ title: t = i18n.global.t('global.status.success'),
timestamp,
refreshAction,
} = {},
@@ -70,7 +71,7 @@
errorToast(
message,
{
- title: t = this.$t('global.status.error'),
+ title: t = i18n.global.t('global.status.error'),
timestamp,
refreshAction,
} = {},
@@ -84,7 +85,7 @@
warningToast(
message,
{
- title: t = this.$t('global.status.warning'),
+ title: t = i18n.global.t('global.status.warning'),
timestamp,
refreshAction,
} = {},
@@ -98,7 +99,7 @@
infoToast(
message,
{
- title: t = this.$t('global.status.informational'),
+ title: t = i18n.global.t('global.status.informational'),
timestamp,
refreshAction,
} = {},
diff --git a/src/components/Mixins/LocalTimezoneLabelMixin.js b/src/components/Mixins/LocalTimezoneLabelMixin.js
index 6b4141c..7bbd705 100644
--- a/src/components/Mixins/LocalTimezoneLabelMixin.js
+++ b/src/components/Mixins/LocalTimezoneLabelMixin.js
@@ -4,7 +4,7 @@
methods: {
localOffset() {
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
- const shortTz = this.$options.filters.shortTimeZone(new Date());
+ const shortTz = this.$filters.shortTimeZone(new Date());
const pattern = `'${shortTz}' O`;
return format(new Date(), pattern, { timezone }).replace('GMT', 'UTC');
},
diff --git a/src/components/Mixins/TableRowExpandMixin.js b/src/components/Mixins/TableRowExpandMixin.js
index 92b2448..0450877 100644
--- a/src/components/Mixins/TableRowExpandMixin.js
+++ b/src/components/Mixins/TableRowExpandMixin.js
@@ -1,15 +1,15 @@
-//import i18n from '@/i18n';
-//export const expandRowLabel = i18n.$t('global.table.expandTableRow');
-
-export const expandRowLabel = 'expand row label TODO';
+import i18n from '@/i18n';
+export const expandRowLabel = i18n.global.t('global.table.expandTableRow');
const TableRowExpandMixin = {
methods: {
toggleRowDetails(row) {
row.toggleDetails();
row.detailsShowing
- ? (this.expandRowLabel = this.$t('global.table.expandTableRow'))
- : (this.expandRowLabel = this.$t('global.table.collapseTableRow'));
+ ? (this.expandRowLabel = i18n.global.t('global.table.expandTableRow'))
+ : (this.expandRowLabel = i18n.global.t(
+ 'global.table.collapseTableRow',
+ ));
},
},
};