i18n, vue-router and vuex upgrade
1. Configuration of i18n legacy as false.
2. Translation function t is called using the useI18n.
3. Used the i18n.global.t() function from i18n instead of this.$t()
4. Event bus error that occurred during logout.
5. Implemented vue-router 4.4.0 and vuex upgrade to 4.1.0
Change-Id: I9464d82c76dcc1445ce271983ea3ab9d7b03d265
Signed-off-by: Surya Venkatesan <suryav@ami.com>
diff --git a/src/components/Global/ButtonBackToTop.vue b/src/components/Global/ButtonBackToTop.vue
index 3ceb691..f8d8b88 100644
--- a/src/components/Global/ButtonBackToTop.vue
+++ b/src/components/Global/ButtonBackToTop.vue
@@ -16,12 +16,14 @@
import UpToTop24 from '@carbon/icons-vue/es/up-to-top/24';
import { debounce } from 'lodash';
+import { useI18n } from 'vue-i18n';
export default {
name: 'BackToTop',
components: { IconUpToTop: UpToTop24 },
data() {
return {
+ $t: useI18n().t,
showButton: false,
};
},
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index cd86920..fadb99a 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -18,6 +18,7 @@
<script>
import IconView from '@carbon/icons-vue/es/view/20';
import IconViewOff from '@carbon/icons-vue/es/view--off/20';
+import i18n from '@/i18n';
export default {
name: 'InputPasswordToggle',
@@ -25,7 +26,7 @@
data() {
return {
isVisible: false,
- togglePasswordLabel: this.$t('global.ariaLabel.showPassword'),
+ togglePasswordLabel: i18n.global.t('global.ariaLabel.showPassword'),
};
},
methods: {
@@ -40,8 +41,12 @@
}
this.isVisible
- ? (this.togglePasswordLabel = this.$t('global.ariaLabel.hidePassword'))
- : (this.togglePasswordLabel = this.$t('global.ariaLabel.showPassword'));
+ ? (this.togglePasswordLabel = i18n.global.t(
+ 'global.ariaLabel.hidePassword',
+ ))
+ : (this.togglePasswordLabel = i18n.global.t(
+ 'global.ariaLabel.showPassword',
+ ));
},
},
};
diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue
index 337aaf0..49f2611 100644
--- a/src/components/Global/LoadingBar.vue
+++ b/src/components/Global/LoadingBar.vue
@@ -12,9 +12,11 @@
</template>
<script>
+import { useI18n } from 'vue-i18n';
export default {
data() {
return {
+ $t: useI18n().t,
loadingIndicatorValue: 0,
isLoadingComplete: false,
loadingIntervalId: null,
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index d53315b..5c51678 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -39,6 +39,8 @@
<script>
import IconSearch from '@carbon/icons-vue/es/search/16';
import IconClose from '@carbon/icons-vue/es/close/20';
+import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
export default {
name: 'Search',
@@ -47,12 +49,13 @@
placeholder: {
type: String,
default: function () {
- return this.$t('global.form.search');
+ return i18n.global.t('global.form.search');
},
},
},
data() {
return {
+ $t: useI18n().t,
filter: null,
};
},
diff --git a/src/components/Global/TableCellCount.vue b/src/components/Global/TableCellCount.vue
index acb4d44..25730a3 100644
--- a/src/components/Global/TableCellCount.vue
+++ b/src/components/Global/TableCellCount.vue
@@ -15,6 +15,7 @@
</template>
<script>
+import { useI18n } from 'vue-i18n';
export default {
props: {
filteredItemsCount: {
@@ -26,6 +27,11 @@
required: true,
},
},
+ data() {
+ return {
+ $t: useI18n().t,
+ };
+ },
computed: {
filterActive() {
return this.filteredItemsCount !== this.totalNumberOfCells;
diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue
index 4e8c5b9..921268c 100644
--- a/src/components/Global/TableDateFilter.vue
+++ b/src/components/Global/TableDateFilter.vue
@@ -11,15 +11,15 @@
id="input-from-date"
v-model="fromDate"
placeholder="YYYY-MM-DD"
- :state="getValidationState($v.fromDate)"
+ :state="getValidationState(v$.fromDate)"
class="form-control-with-button mb-3 mb-md-0"
- @blur="$v.fromDate.$touch()"
+ @blur="v$.fromDate.$touch()"
/>
<b-form-invalid-feedback role="alert">
- <template v-if="!$v.fromDate.pattern">
+ <template v-if="!v$.fromDate.pattern">
{{ $t('global.form.invalidFormat') }}
</template>
- <template v-if="!$v.fromDate.maxDate">
+ <template v-if="!v$.fromDate.maxDate">
{{ $t('global.form.dateMustBeBefore', { date: toDate }) }}
</template>
</b-form-invalid-feedback>
@@ -57,15 +57,15 @@
id="input-to-date"
v-model="toDate"
placeholder="YYYY-MM-DD"
- :state="getValidationState($v.toDate)"
+ :state="getValidationState(v$.toDate)"
class="form-control-with-button"
- @blur="$v.toDate.$touch()"
+ @blur="v$.toDate.$touch()"
/>
<b-form-invalid-feedback role="alert">
- <template v-if="!$v.toDate.pattern">
+ <template v-if="!v$.toDate.pattern">
{{ $t('global.form.invalidFormat') }}
</template>
- <template v-if="!$v.toDate.minDate">
+ <template v-if="!v$.toDate.minDate">
{{ $t('global.form.dateMustBeAfter', { date: fromDate }) }}
</template>
</b-form-invalid-feedback>
@@ -102,6 +102,7 @@
import { helpers } from '@vuelidate/validators';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
import { useVuelidate } from '@vuelidate/core';
+import { useI18n } from 'vue-i18n';
const isoDateRegex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/;
@@ -115,6 +116,7 @@
},
data() {
return {
+ $t: useI18n().t,
fromDate: '',
toDate: '',
offsetToDate: '',
@@ -158,8 +160,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', {
fromDate: this.fromDate ? new Date(this.fromDate) : null,
toDate: this.toDate ? new Date(this.offsetToDate) : null,
diff --git a/src/components/Global/TableFilter.vue b/src/components/Global/TableFilter.vue
index 8c4f509..2ed88bf 100644
--- a/src/components/Global/TableFilter.vue
+++ b/src/components/Global/TableFilter.vue
@@ -55,6 +55,7 @@
<script>
import IconFilter from '@carbon/icons-vue/es/settings--adjust/20';
+import { useI18n } from 'vue-i18n';
export default {
name: 'TableFilter',
@@ -73,6 +74,7 @@
},
data() {
return {
+ $t: useI18n().t,
dropdownVisible: false,
tags: [],
};
diff --git a/src/components/Global/TableRowAction.vue b/src/components/Global/TableRowAction.vue
index 549f1b5..2129713 100644
--- a/src/components/Global/TableRowAction.vue
+++ b/src/components/Global/TableRowAction.vue
@@ -56,6 +56,7 @@
<script>
import { omit } from 'lodash';
+import { useI18n } from 'vue-i18n';
export default {
name: 'TableRowAction',
@@ -97,6 +98,11 @@
default: true,
},
},
+ data() {
+ return {
+ $t: useI18n().t,
+ };
+ },
computed: {
dataForExport() {
return JSON.stringify(omit(this.rowData, 'actions'));
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 7c0f490..85d7c9c 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -31,6 +31,7 @@
</template>
<script>
+import { useI18n } from 'vue-i18n';
export default {
name: 'TableToolbar',
props: {
@@ -53,6 +54,7 @@
},
data() {
return {
+ $t: useI18n().t,
isToolbarActive: false,
};
},
diff --git a/src/components/Global/TableToolbarExport.vue b/src/components/Global/TableToolbarExport.vue
index 69646ea..c678555 100644
--- a/src/components/Global/TableToolbarExport.vue
+++ b/src/components/Global/TableToolbarExport.vue
@@ -10,6 +10,7 @@
</template>
<script>
+import { useI18n } from 'vue-i18n';
export default {
props: {
data: {
@@ -21,6 +22,11 @@
default: 'data',
},
},
+ data() {
+ return {
+ $t: useI18n().t,
+ };
+ },
computed: {
dataForExport() {
return JSON.stringify(this.data);