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/main.js b/src/main.js
index 23bfb69..92c5c90 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,7 @@
import router from './router';
-//import { format } from 'date-fns-tz';
+import { format } from 'date-fns-tz';
//Do not change store import.
//Exact match alias set to support
@@ -52,49 +52,6 @@
TooltipPlugin,
} from 'bootstrap-vue';
-// Filters
-/*
-Vue.filter('shortTimeZone', function (value) {
- const longTZ = value
- .toString()
- .match(/\((.*)\)/)
- .pop();
- const regexNotUpper = /[*a-z ]/g;
- return longTZ.replace(regexNotUpper, '');
-});
-
-Vue.filter('formatDate', function (value) {
- const isUtcDisplay = store.getters['global/isUtcDisplay'];
-
- if (value instanceof Date) {
- if (isUtcDisplay) {
- return value.toISOString().substring(0, 10);
- }
- const pattern = `yyyy-MM-dd`;
- const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
- return format(value, pattern, { timezone });
- }
-});
-
-Vue.filter('formatTime', function (value) {
- const isUtcDisplay = store.getters['global/isUtcDisplay'];
-
- if (value instanceof Date) {
- if (isUtcDisplay) {
- let timeOptions = {
- timeZone: 'UTC',
- hourCycle: 'h23',
- };
- return `${value.toLocaleTimeString('default', timeOptions)} UTC`;
- }
- const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
- const shortTz = Vue.filter('shortTimeZone')(value);
- const pattern = `HH:mm:ss ('${shortTz}' O)`;
- return format(value, pattern, { timezone }).replace('GMT', 'UTC');
- }
-});
-*/
-
const app = createApp({
router,
store,
@@ -154,3 +111,44 @@
app.mount('#app');
app.prototype.$eventBus = eventBus;
+//Filters
+const filter = {
+ formatDate(value) {
+ const isUtcDisplay = store.getters['global/isUtcDisplay'];
+
+ if (value instanceof Date) {
+ if (isUtcDisplay) {
+ return value.toISOString().substring(0, 10);
+ }
+ const pattern = `yyyy-MM-dd`;
+ const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+ return format(value, pattern, { timezone });
+ }
+ },
+ formatTime(value) {
+ const isUtcDisplay = store.getters['global/isUtcDisplay'];
+
+ if (value instanceof Date) {
+ if (isUtcDisplay) {
+ let timeOptions = {
+ timeZone: 'UTC',
+ hourCycle: 'h23',
+ };
+ return `${value.toLocaleTimeString('default', timeOptions)} UTC`;
+ }
+ const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+ const shortTz = this.shortTimeZone(value);
+ const pattern = `HH:mm:ss ('${shortTz}' O)`;
+ return format(value, pattern, { timezone }).replace('GMT', 'UTC');
+ }
+ },
+ shortTimeZone(value) {
+ const longTZ = value
+ .toString()
+ .match(/\((.*)\)/)
+ .pop();
+ const regexNotUpper = /[*a-z ]/g;
+ return longTZ.replace(regexNotUpper, '');
+ },
+};
+app.config.globalProperties.$filters = filter;