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

src/locales/en.json

@@ -3,7 +3,6 @@
   "App": "App",
   "Apply": "Apply",
   "Any edits made on this page will be lost.": "Any edits made on this page made will be lost.",
-  "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to?",
   "Are you sure you want to change the date time format?": "Are you sure you want to change the date time format?",
   "Are you sure you want to delete this CSV mapping? This action cannot be undone.": "Are you sure you want to delete this CSV mapping? This action cannot be undone.",
   "Are you sure you want to update this CSV mapping? This action cannot be undone.": "Are you sure you want to update this CSV mapping? This action cannot be undone.",
@@ -48,6 +47,7 @@
   "Failed to save CSV mapping.": "Failed to save CSV mapping.",
   "Failed to delete CSV mapping.": "Failed to delete CSV mapping.",
   "Failed to update CSV mapping.": "Failed to update CSV mapping.",
+  "Fetching TimeZones": "Fetching TimeZones",
   "Field mapping name": "Field mapping name",
   "This CSV mapping has been saved.": "This CSV mapping has been saved.",
   "This CSV mapping has been deleted.": "This CSV mapping has been deleted.",
@@ -164,7 +164,6 @@
   "UI Components": "UI Components",
   "Update": "Update",
   "Update mapping": "Update mapping",
-  "Update time zone": "Update time zone",
   "Update date time format": "Update date time format",
   "Upload": "Upload",
   "Upload a file": "Upload a file",

src/store/modules/user/actions.ts

@@ -150,13 +150,15 @@ 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);
-      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);
+        showToast(translate("Time zone updated successfully"));
+      }
     }
   },
 

src/views/TimezoneModal.vue

@@ -9,36 +9,40 @@
       <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" @keyup.enter="queryString = $event.target.value; findTimeZone()" @keydown="preventSpecialCharacters($event)" />
+      <ion-searchbar @ionFocus="selectSearchBarText($event)" :placeholder="$t('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" />
-        {{ $t("Fetching time zones") }}
-      </ion-item>
-    </div>
-    <div class="empty-state" v-else-if="filteredTimeZones.length === 0">
-      <p>{{ $t("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" />
+          {{ $t("Fetching time zones") }}
+        </ion-item>
+      </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>
-
+      <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>
@@ -63,8 +67,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";
@@ -105,25 +109,6 @@ export default defineComponent({
     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();
@@ -136,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;
     },
@@ -152,7 +141,7 @@ export default defineComponent({
     },
     async setUserTimeZone() {
       await this.store.dispatch("user/setUserTimeZone", {
-        "timeZoneId": this.timeZoneId
+        "tzId": this.timeZoneId
       })
       this.closeModal()
     }