Add timezone to profile settings page

 - Users will have two options to select a timezone.
 - UTC and browser offset timezone are the two options for the application.
 - date-fns and date-fns-tz is used for date and time manipulations because:-
   - The package size of library is smaller.
   - It allows for importing functions to work with the native date object
     rather than having to create a moment instance that carries a larger payload.

Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I581803f230f501c0d34d0b53e7c2d89e8466ee60

1 files changed, 31 insertions, 8 deletions

diff --git a/src/main.js b/src/main.js
index 0c6d5b07..8336cb3d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -33,23 +33,46 @@ import {
 } from 'bootstrap-vue';
 import Vuelidate from 'vuelidate';
 import i18n from './i18n';
+import { format } from 'date-fns-tz';
 
 // 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) {
-    return value.toISOString().substring(0, 10);
+    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 timeOptions = {
-    hour: 'numeric',
-    minute: 'numeric',
-    second: 'numeric',
-    timeZoneName: 'short'
-  };
+  const isUtcDisplay = store.getters['global/isUtcDisplay'];
+
   if (value instanceof Date) {
-    return value.toLocaleTimeString('default', timeOptions);
+    if (isUtcDisplay) {
+      let timeOptions = {
+        timeZone: 'UTC',
+        hour12: false
+      };
+      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');
   }
 });