From 291dd5c5bf1fd5c4e7069cc16c9a976fca690a53 Mon Sep 17 00:00:00 2001 From: amansinghbais Date: Wed, 15 Nov 2023 10:28:03 +0530 Subject: [PATCH 1/3] Fixed: timeZone does not gets updated for user login, removed confirm alert, and added loading state --- src/locales/en.json | 3 +- src/store/modules/user/actions.ts | 16 +++--- src/theme/variables.css | 17 ++++++ src/views/TimezoneModal.vue | 92 +++++++++++++++---------------- 4 files changed, 72 insertions(+), 56 deletions(-) diff --git a/src/locales/en.json b/src/locales/en.json index a0cc2caa..049a9832 100644 --- a/src/locales/en.json +++ b/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.", @@ -47,6 +46,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.", @@ -157,7 +157,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", diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts index 4a2cc6b6..cdbf6be0 100644 --- a/src/store/modules/user/actions.ts +++ b/src/store/modules/user/actions.ts @@ -136,13 +136,15 @@ const actions: ActionTree = { /** * 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")); + } } }, diff --git a/src/theme/variables.css b/src/theme/variables.css index d55e9db0..85eeb208 100644 --- a/src/theme/variables.css +++ b/src/theme/variables.css @@ -256,6 +256,23 @@ http://ionicframework.com/docs/theming/ */ margin: var(--spacer-sm); } +.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) { .desktop-only { display: unset; diff --git a/src/views/TimezoneModal.vue b/src/views/TimezoneModal.vue index c801eb01..280432cd 100644 --- a/src/views/TimezoneModal.vue +++ b/src/views/TimezoneModal.vue @@ -14,25 +14,33 @@ - -
-

{{ $t("No time zone found")}}

-
+
+
+ +

{{ $t("Fetching TimeZones")}}

+
- -
- - - - {{ timeZone.label }} ({{ timeZone.id }}) - - - - -
- + +
+

{{ $t("No time zone found")}}

+
+ + +
+ + + + {{ timeZone.label }} ({{ timeZone.id }}) + + + + +
+
+ + - + @@ -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,14 +118,20 @@ 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() @@ -141,7 +139,7 @@ export default defineComponent({ }, async setUserTimeZone() { await this.store.dispatch("user/setUserTimeZone", { - "timeZoneId": this.timeZoneId + "tzId": this.timeZoneId }) this.closeModal() } From 25118af7e3b953d2c79f5ce7594edd058f56fa84 Mon Sep 17 00:00:00 2001 From: amansinghbais Date: Wed, 15 Nov 2023 10:37:11 +0530 Subject: [PATCH 2/3] Improved: syntax for if condition and p tag --- src/store/modules/user/actions.ts | 2 +- src/views/TimezoneModal.vue | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts index cdbf6be0..d2827f0d 100644 --- a/src/store/modules/user/actions.ts +++ b/src/store/modules/user/actions.ts @@ -138,7 +138,7 @@ const actions: ActionTree = { */ async setUserTimeZone({ state, commit }, payload) { const current: any = state.current; - if(current.userTimeZone !== payload.tzId){ + if(current.userTimeZone !== payload.tzId) { const resp = await UserService.setUserTimeZone(payload) if (resp.status === 200 && !hasError(resp)) { current.userTimeZone = payload.tzId; diff --git a/src/views/TimezoneModal.vue b/src/views/TimezoneModal.vue index 280432cd..099e3b42 100644 --- a/src/views/TimezoneModal.vue +++ b/src/views/TimezoneModal.vue @@ -17,12 +17,12 @@
-

{{ $t("Fetching TimeZones")}}

+

{{ $t("Fetching TimeZones") }}

-

{{ $t("No time zone found")}}

+

{{ $t("No time zone found") }}

From d3f5bcd33048898da653b76c7dfe816f0bf0a8d9 Mon Sep 17 00:00:00 2001 From: amansinghbais Date: Wed, 6 Dec 2023 14:45:55 +0530 Subject: [PATCH 3/3] Improved: code to fetch timezones as we enter in searchbar --- src/views/TimezoneModal.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/TimezoneModal.vue b/src/views/TimezoneModal.vue index 099e3b42..c7cb6572 100644 --- a/src/views/TimezoneModal.vue +++ b/src/views/TimezoneModal.vue @@ -9,7 +9,7 @@ {{ $t("Select time zone") }} - +