Added support to change the current time zone(#1y8m51y)

changelogs/unreleased/-1y8m51y.yml

@@ -0,0 +1,6 @@
+---
+title: Added support to change the current time zone
+ticket_id: "#1y8m51y"
+merge_request: 28
+author: Disha
+type: added

src/App.vue

@@ -7,7 +7,8 @@
 <script lang="ts">
 import { IonApp, IonRouterOutlet } from '@ionic/vue';
 import { defineComponent } from 'vue';
-import { loadingController } from '@ionic/vue';
+import { loadingController, alertController } from '@ionic/vue';
+import { useStore } from "./store";
 import emitter from "@/event-bus"
 
 
@@ -23,6 +24,28 @@ export default defineComponent({
     }
   },
   methods: {
+    async timeZoneDifferentAlert(payload: any) {
+      const alert = await alertController.create({
+        header: this.$t("Change time zone"),
+        message: this.$t('Would you like to update your time zone to . Your profile is currently set to . This setting can always be changed from the settings menu.', { localTimeZone: payload.localTimeZone, profileTimeZone: payload.profileTimeZone }),
+        buttons: [
+            {
+              text: this.$t("Dismiss"),
+              role: 'cancel',
+              cssClass: 'secondary'
+            },
+            {
+              text: this.$t("Update time zone"),
+              handler: () => {
+                this.store.dispatch("user/setUserTimeZone", {
+                    "tzId": payload.localTimeZone
+                });
+              },
+            },
+          ],
+      });
+      return alert.present();
+    },
     async presentLoader() {
       if (!this.loader) {
         this.loader = await loadingController
@@ -48,12 +71,20 @@ export default defineComponent({
         translucent: true,
         backdropDismiss: true
       });
+    emitter.on('timeZoneDifferent', this.timeZoneDifferentAlert);
     emitter.on('presentLoader', this.presentLoader);
     emitter.on('dismissLoader', this.dismissLoader);
   },
   unmounted() {
+    emitter.off('timeZoneDifferent', this.timeZoneDifferentAlert);
     emitter.off('presentLoader', this.presentLoader);
     emitter.off('dismissLoader', this.dismissLoader);
   },
+  setup(){
+    const store = useStore();
+    return {
+      store,
+    }
+  },
 });
 </script>

src/locales/en.json

@@ -1,12 +1,21 @@
 {
+  "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to?",
   "Blank": "Blank",
+  "Cancel": "Cancel",
+  "Change": "Change",
+  "Change time zone": "Change time zone",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
+  "Confirm": "Confirm",
+  "Dismiss": "Dismiss",
   "Instance Url": "Instance Url",
   "Login": "Login",
   "Logout": "Logout",
+  "No time zone found": "No time zone found",
   "OMS": "OMS",
   "Password":  "Password",
   "Ready to create an app?": "Ready to create an app?",
+  "Search time zones": "Search time zones",
+  "Select time zone": "Select time zone",
   "Something went wrong": "Something went wrong",
   "Sorry, your username or password is incorrect. Please try again.": "Sorry, your username or password is incorrect. Please try again.",
   "Settings": "Settings",
@@ -15,5 +24,7 @@
   "store name": "store name",
   "Time zone updated successfully": "Time zone updated successfully",
   "UI Components": "UI Components",
-  "Username": "Username"
+  "Update time zone": "Update time zone",
+  "Username": "Username",
+  "Would you like to update your time zone to . Your profile is currently set to . This setting can always be changed from the settings menu.": "Would you like to update your time zone to {localTimeZone}. Your profile is currently set to {profileTimeZone}. This setting can always be changed from the settings menu."
 }

src/views/Settings.vue

@@ -27,16 +27,21 @@
           <ion-select-option v-for="facility in ( userProfile && userProfile.facilities ? userProfile.facilities : [] )" :key="facility.facilityId" :value="facility.facilityId" >{{ facility.facilityId }}</ion-select-option>
         </ion-select>
       </ion-item>
+      <ion-item>
+        <ion-label> {{ userProfile && userProfile.userTimeZone ? userProfile.userTimeZone : '-' }} </ion-label>
+        <ion-button @click="changeTimeZone()" slot="end" fill="outline" color="dark">{{ $t("Change") }}</ion-button>
+      </ion-item>
     </ion-content>
   </ion-page>
 </template>
 
 <script lang="ts">
-import { alertController, IonButton, IonContent, IonHeader,IonIcon, IonItem, IonLabel, IonPage, IonSelect, IonSelectOption, IonTitle, IonToolbar, popoverController } from '@ionic/vue';
+import { alertController, IonButton, IonContent, IonHeader,IonIcon, IonItem, IonLabel, IonPage, IonSelect, IonSelectOption, IonTitle, IonToolbar, popoverController, modalController } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { codeWorkingOutline, ellipsisVertical, personCircleOutline, storefrontOutline} from 'ionicons/icons'
 import { mapGetters, useStore } from 'vuex';
 import { useRouter } from 'vue-router';
+import TimeZoneModal from '@/views/TimezoneModal.vue';
 
 export default defineComponent({
   name: 'Settings',
@@ -69,6 +74,12 @@ export default defineComponent({
         }
       })
     },
+    async changeTimeZone() {
+      const timeZoneModal = await modalController.create({
+        component: TimeZoneModal,
+      });
+      return timeZoneModal.present();
+    },
     logout () {
       this.store.dispatch('user/logout').then(() => {
         this.router.push('/login');

src/views/TimezoneModal.vue

@@ -0,0 +1,172 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal"> 
+          <ion-icon :icon="close" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ $t("Select time zone") }}</ion-title>
+    </ion-toolbar>
+    <ion-toolbar>
+      <ion-searchbar @ionFocus="selectSearchBarText($event)" :placeholder="$t('Search time zones')"  v-model="queryString" @ionInput="findTimeZone()"></ion-searchbar>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content class="ion-padding">
+    <!-- Empty state -->
+    <div class="empty-state" v-if="filteredTimeZones.length === 0">
+      <p>{{ $t("No time zone found")}}</p>
+    </div>
+
+    <!-- Timezones -->
+    <div v-else>
+      <ion-list>
+        <ion-radio-group value="rd" v-model="timeZoneId">
+          <ion-item  v-bind:key="timeZone.id" v-for="timeZone in filteredTimeZones">
+            <ion-label>{{ timeZone.label }} ({{ timeZone.id }})</ion-label>
+            <ion-radio :value="timeZone.id" slot="start"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      </ion-list>
+    </div>
+
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button :disabled="!timeZoneId" @click="saveAlert">
+        <ion-icon :icon="save" />
+      </ion-fab-button>
+    </ion-fab>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import { 
+  IonButtons,
+  IonButton,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonHeader,
+  IonItem,
+  IonIcon,
+  IonLabel,
+  IonRadioGroup,
+  IonRadio,
+  IonList,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+  modalController,
+  alertController } from "@ionic/vue";
+import { defineComponent } from "vue";
+import { close, save } from "ionicons/icons";
+import { useStore } from "@/store";
+import { UserService } from "@/services/UserService";
+import { hasError } from '@/utils'
+import moment from 'moment';
+import "moment-timezone";
+
+export default defineComponent({
+  name: "TimeZoneModal",
+  data() {
+    return {
+      queryString: '',
+      filteredTimeZones: [],
+      timeZones: [],
+      timeZoneId: ''
+    }
+  },
+  computed: {
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss({ dismissed: true });
+    },
+    async saveAlert() {
+      const message = this.$t("Are you sure you want to change the time zone to?", { timeZoneId: this.timeZoneId });
+      const alert = await alertController.create({
+        header: this.$t("Update time zone"),
+        message,
+        buttons: [
+            {
+              text: this.$t("Cancel"),
+            },
+            {
+              text: this.$t("Confirm"),
+              handler: () => {
+                this.setUserTimeZone();
+                }
+              }
+            ],
+      });
+      return alert.present();
+    },
+    escapeRegExp(text: string) {
+      //TODO Handle it in a better way
+      // Currently when the user types special character as it part of Regex expressions it breaks the code
+      // so removed the characters for now
+      return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+    },
+    findTimeZone() { 
+      const regularExp = new RegExp(`${this.escapeRegExp(this.queryString)}`, 'i');
+      this.filteredTimeZones = this.timeZones.filter((timeZone: any) => {
+        return regularExp.test(timeZone.id) || regularExp.test(timeZone.label);
+      });
+    },
+    async getAvailableTimeZones() {
+      UserService.getAvailableTimeZones().then((resp: any) => {
+        if (resp.status === 200 && !hasError(resp)) {
+          // TODO FIx this as fixed on backend
+          // Currently backend API returns some of the legacy timezones which are not found in moment list
+          // Due to which if we set them we get an error
+          // Filtered them out till it is fixed at backend
+          this.timeZones = resp.data.filter((timeZone: any) => {
+            return moment.tz.zone(timeZone.id);
+          });
+          this.findTimeZone();
+        }
+      })
+    },
+    selectSearchBarText(event: any) {
+      event.target.getInputElement().then((element: any) => {
+        element.select();
+      })
+    },
+    async setUserTimeZone() {
+      return this.store.dispatch("user/setUserTimeZone", {
+          "tzId": this.timeZoneId
+      }).then(() => {
+        this.closeModal()
+      })
+    }
+  },
+  beforeMount () {
+    this.getAvailableTimeZones();
+  },
+  setup() {
+    const store = useStore();
+    return {
+      close,
+      save,
+      store
+    };
+  },
+  components: { 
+    IonButtons,
+    IonButton,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonRadioGroup,
+    IonRadio,
+    IonSearchbar,
+    IonTitle,
+    IonToolbar 
+    },
+});
+</script>