Fixed: timeZone does not gets updated for user login, removed confirm alert, and added loading state

src/locales/en.json

@@ -5,7 +5,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",
@@ -23,6 +22,7 @@
   "Enter a SKU, or product name to search a product": "Enter a SKU, or product name to search a product",
   "External ID": "External ID",
   "Facility": "Facility",
+  "Fetching TimeZones": "Fetching TimeZones",
   "Location": "Location",
   "Failed to receive shipment": "Failed to receive shipment",
   "Failed to receive some of the items": "Failed to receive some of the items",
@@ -123,7 +123,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

@@ -177,14 +177,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

@@ -9,36 +9,39 @@
       <ion-title>{{ translate("Select time zone") }}</ion-title>
     </ion-toolbar>
     <ion-toolbar>
-      <ion-searchbar @ionFocus="selectSearchBarText($event)" :placeholder="translate('Search time zones')"  v-model="queryString" @keyup.enter="queryString = $event.target.value; findTimeZone()" @keydown="preventSpecialCharacters($event)" />
+      <ion-searchbar @ionFocus="selectSearchBarText($event)" :placeholder="translate('Search time zones')"  v-model="queryString" @ionChange="findTimeZone()" @keydown="preventSpecialCharacters($event)" />
     </ion-toolbar>
   </ion-header>
 
   <ion-content class="ion-padding">
-    <!-- Empty state -->
-    <div class="empty-state" v-if="isLoading">
-      <ion-item lines="none">
-        <ion-spinner color="secondary" name="crescent" slot="start" />
-          {{ translate("Fetching time zones") }}
-      </ion-item>
-    </div>
-    <div class="empty-state" v-else-if="filteredTimeZones.length === 0">
-      <p>{{ translate("No time zone found") }}</p>
-    </div>
+    <form @keyup.enter="setUserTimeZone">
+      <!-- Empty state -->
+      <div class="empty-state" v-if="isLoading">
+        <ion-item lines="none">
+          <ion-spinner color="secondary" name="crescent" slot="start" />
+            {{ translate("Fetching time zones") }}
+        </ion-item>
+      </div>
+      <div class="empty-state" v-else-if="filteredTimeZones.length === 0">
+        <p>{{ translate("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>
-
+      <!-- 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>
@@ -63,8 +66,8 @@ import {
   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";
@@ -106,25 +109,6 @@ export default defineComponent({
     closeModal() {
       modalController.dismiss({ dismissed: true });
     },
-    async saveAlert() {
-      const message = translate("Are you sure you want to change the time zone to?", { timeZoneId: this.timeZoneId });
-      const alert = await alertController.create({
-        header: translate("Update time zone"),
-        message,
-        buttons: [
-          {
-            text: translate("Cancel"),
-          },
-          {
-            text: translate("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();
@@ -137,13 +121,17 @@ export default defineComponent({
     },
     async getAvailableTimeZones() {
       this.isLoading = true;
-      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();
+      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;
     },
@@ -153,7 +141,7 @@ export default defineComponent({
     },
     async setUserTimeZone() {
       await this.store.dispatch("user/setUserTimeZone", {
-        "timeZoneId": this.timeZoneId
+        "tzId": this.timeZoneId
       })
       this.closeModal()
     }