Fixed: timeZone does not gets updated for user login, removed confirm…

… alert, and added loading state

src/locales/en.json

@@ -6,7 +6,6 @@
   "App": "App",
   "Authenticating": "Authenticating",
   "Are you sure you have received the purchase order for the selected items? Once closed, the shipments for the selected items wont be available for receiving later.": "Are you sure you have received the purchase order for the selected items? { space } Once closed, the shipments for the selected items won't be available for receiving later.",
-  "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to {timeZoneId}?",
   "Arrival date": "Arrival date",
   "Cancel": "Cancel",
   "Change": "Change",
@@ -16,13 +15,13 @@
   "Completed": "Completed",
   "COMPLETED: ITEM": "COMPLETED: {itemsCount} ITEM",
   "COMPLETED: ITEMS": "COMPLETED: {itemsCount} ITEMS",
-  "Confirm": "Confirm",
   "Copied": "Copied { value }",
   "Close purchase order items": "Close purchase order items",
   "eCom Store": "eCom Store",
   "Enter a custom date time format that you want to use when uploading documents to HotWax Commerce.": "Enter a custom date time format that you want to use when uploading documents to HotWax Commerce.",
   "External ID": "External ID",
   "Facility": "Facility",
+  "Fetching TimeZones": "Fetching TimeZones",
   "Location": "Location",
   "Failed to receive some of the items": "Failed to receive some of the items",
   "Failed to update product identifier preference": "Failed to update product identifier preference",
@@ -122,7 +121,6 @@
   "Time zone updated successfully": "Time zone updated successfully",
   "To close the purchase order, select all.": "To close the purchase order, select all.",
   "Unable to update product identifier preference": "Unable to update product identifier preference",
-  "Update time zone": "Update time zone",
   "Username": "Username",
   "You do not have permission to access this page": "You do not have permission to access this page",
   "ZeroQuantity": "ZeroQuantity"

src/store/modules/user/actions.ts

@@ -186,14 +186,16 @@ const actions: ActionTree<UserState, RootState> = {
   /**
    * Update user timeZone
    */
-  async setUserTimeZone ( { state, commit }, payload) {
-    const resp = await UserService.setUserTimeZone(payload)
-    if (resp.status === 200 && !hasError(resp)) {
-      const current: any = state.current;
-      current.userTimeZone = payload.timeZoneId;
-      commit(types.USER_INFO_UPDATED, current);
-      Settings.defaultZone = current.userTimeZone;
-      showToast(translate("Time zone updated successfully"));
+  async setUserTimeZone( { state, commit }, payload) {
+    const current: any = state.current;
+    if(current.userTimeZone !== payload.tzId) {
+      const resp = await UserService.setUserTimeZone(payload)
+      if(resp.status === 200 && !hasError(resp)) {
+        current.userTimeZone = payload.tzId;
+        commit(types.USER_INFO_UPDATED, current);
+        Settings.defaultZone = current.userTimeZone;
+        showToast(translate("Time zone updated successfully"));
+      }
     }
   },
 

src/views/TimezoneModal.vue

@@ -14,25 +14,33 @@
   </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>
+    <form @keyup.enter="setUserTimeZone">
+      <div class="empty-state" v-if="isLoading">
+        <ion-spinner name="crescent" />
+        <p>{{ $t("Fetching TimeZones")}}</p>
+      </div>
 
-    <!-- Timezones -->
-    <div v-else>
-      <ion-list>
-        <ion-radio-group value="rd" v-model="timeZoneId">
-          <ion-item :key="timeZone.id" v-for="timeZone in filteredTimeZones">
-            <ion-label>{{ timeZone.label }} ({{ timeZone.id }})</ion-label>
-            <ion-radio :value="timeZone.id" slot="start" />
-          </ion-item>
-        </ion-radio-group>
-      </ion-list>
-    </div>
-
+      <!-- Empty state -->
+      <div class="empty-state" v-else-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 :key="timeZone.id" v-for="timeZone in filteredTimeZones">
+              <ion-label>{{ timeZone.label }} ({{ timeZone.id }})</ion-label>
+              <ion-radio :value="timeZone.id" slot="start" />
+            </ion-item>
+          </ion-radio-group>
+        </ion-list>
+      </div>
+    </form>
+
+    <!-- Defined ion-fab outside of form element as the fab button losoe its styling when wrapped inside form -->
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-      <ion-fab-button :disabled="!timeZoneId" @click="saveAlert">
+      <ion-fab-button :disabled="!timeZoneId" @click="setUserTimeZone">
         <ion-icon :icon="save" />
       </ion-fab-button>
     </ion-fab>
@@ -54,10 +62,11 @@ import {
   IonRadioGroup,
   IonRadio,
   IonSearchbar,
+  IonSpinner,
   IonTitle,
   IonToolbar,
-  modalController,
-  alertController } from "@ionic/vue";
+  modalController
+} from "@ionic/vue";
 import { defineComponent } from "vue";
 import { close, save } from "ionicons/icons";
 import { useStore } from "@/store";
@@ -81,6 +90,7 @@ export default defineComponent({
     IonRadioGroup,
     IonRadio,
     IonSearchbar,
+    IonSpinner,
     IonTitle,
     IonToolbar 
   },
@@ -89,32 +99,14 @@ export default defineComponent({
       queryString: '',
       filteredTimeZones: [],
       timeZones: [],
-      timeZoneId: ''
+      timeZoneId: '',
+      isLoading: false
     }
   },
   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();
-    },
     preventSpecialCharacters($event: any) {
       // Searching special characters fails the API, hence, they must be omitted
       if(/[`!@#$%^&*()_+\-=\\|,.<>?~]/.test($event.key)) $event.preventDefault();
@@ -126,22 +118,28 @@ export default defineComponent({
       });
     },
     async getAvailableTimeZones() {
-      const resp = await UserService.getAvailableTimeZones()
-      if(resp.status === 200 && !hasError(resp)) {
-        // We are filtering valid the timeZones coming with response here
-        this.timeZones = resp.data.filter((timeZone: any) => {
-          return DateTime.local().setZone(timeZone.id).isValid;
-        });
-        this.findTimeZone();
+      this.isLoading = true;
+      try {
+        const resp = await UserService.getAvailableTimeZones()
+        if(resp.status === 200 && !hasError(resp)) {
+          // We are filtering valid the timeZones coming with response here
+          this.timeZones = resp.data.filter((timeZone: any) => {
+            return DateTime.local().setZone(timeZone.id).isValid;
+          });
+          this.findTimeZone();
+        }
+      } catch(err) {
+        console.error(err)
       }
+      this.isLoading = false;
     },
     async selectSearchBarText(event: any) {
       const element = await event.target.getInputElement()
       element.select();
     },
     async setUserTimeZone() {
       await this.store.dispatch("user/setUserTimeZone", {
-        "timeZoneId": this.timeZoneId
+        "tzId": this.timeZoneId
       })
       this.closeModal()
     }