Merge pull request #632 from ymaheshwari1/fix/timeZone

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

Author: ravilodhi

src/locales/en.json

@@ -17,7 +17,6 @@
   "App": "App",
   "Approve orders": "Approve orders",
   "Archived": "Archived",
-  "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to {timeZoneId}?",
   "Are you sure you want to save these changes?": "Are you sure you want to save these changes?",
   "Are you sure you want to schedule these jobs?": "Are you sure you want to schedule these jobs?",
   "Authenticating": "Authenticating",
@@ -58,7 +57,6 @@
   "Close": "Close",
   "Completed orders": "Completed orders",
   "Configuration missing": "Configuration missing",
-  "Confirm": "Confirm",
   "Copied job details to clipboard": "Copied job details to clipboard",
   "Copy details": "Copy details",
   "Custom": "Custom",
@@ -88,6 +86,7 @@
   "Every day": "Every day",
   "Failed": "Failed",
   "Failed to schedule service(s)": "Failed to schedule {count} service(s)",
+  "Fetching TimeZones": "Fetching TimeZones",
   "File upload status": "File upload status",
   "Filters": "Filters",
   "Finished": "Finished",
@@ -290,7 +289,6 @@
   "Update orders": "Update orders",
   "Update promise date": "Update promise date",
   "Update shipping dates in Shopify": "Update shipping dates in Shopify",
-  "Update time zone": "Update time zone",
   "Upload": "Upload",
   "Upload Pending Process": "Upload Pending Process",
   "Use POs to manage catalog": "Use POs to manage catalog",

src/store/modules/user/actions.ts

@@ -165,13 +165,13 @@ const actions: ActionTree<UserState, RootState> = {
   /**
    * Update user timeZone
    */
-  async setUserTimeZone ( { state, commit }, payload) {
+  async setUserTimeZone({ state, commit }, payload) {
     const current: any = state.current;
     // if set the same timezone again, no API call should happen
-    if(current.userTimeZone !== payload.timeZoneId) {
+    if(current.userTimeZone !== payload.tzId) {
       const resp = await UserService.setUserTimeZone(payload)
       if (resp.status === 200 && !hasError(resp)) {
-        current.userTimeZone = payload.timeZoneId;
+        current.userTimeZone = payload.tzId;
         commit(types.USER_INFO_UPDATED, current);
         Settings.defaultZone = current.userTimeZone;
         showToast(translate("Time zone updated successfully"));

src/theme/variables.css

@@ -275,6 +275,23 @@ aside {
   --border-radius: 8px;
 }
 
+.empty-state {
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+}
+
+.empty-state > img {
+  object-fit: contain;
+}
+
+.empty-state > p {
+  text-align: center;
+}
+
 @media (min-width: 991px) {
   main {
     display: flex;

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="saveOutline" />
       </ion-fab-button>
     </ion-fab>
@@ -54,16 +62,18 @@ import {
   IonRadioGroup,
   IonRadio,
   IonSearchbar,
+  IonSpinner,
   IonTitle,
   IonToolbar,
   modalController,
-  alertController } from "@ionic/vue";
+} from "@ionic/vue";
 import { defineComponent } from "vue";
 import { closeOutline, saveOutline } from "ionicons/icons";
 import { useStore } from "@/store";
 import { UserService } from "@/services/UserService";
 import { hasError } from '@/utils'
 import { DateTime } from 'luxon';
+import logger from "@/logger";
 
 export default defineComponent({
   name: "TimeZoneModal",
@@ -81,6 +91,7 @@ export default defineComponent({
     IonRadioGroup,
     IonRadio,
     IonSearchbar,
+    IonSpinner,
     IonTitle,
     IonToolbar 
   },
@@ -89,32 +100,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 +119,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) {
+        logger.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()
     }