Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implemented: spinner in timezone modal for timezone configuration(#233) #254

Closed
wants to merge 9 commits into from
Closed

Implemented: spinner in timezone modal for timezone configuration(#233) #254

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7e93992
Implemented: Spinner in Timezone Modal for Timezone Configuration(#233)
shanmukhdutt Jan 4, 2024
4bbf152
Implemented the suggested changes
shanmukhdutt Jan 4, 2024
30c1e71
Improved the display of spinner
shanmukhdutt Jan 5, 2024
5a4161a
Updated spinner without using empty-state class
shanmukhdutt Jan 5, 2024
d002023
Improved empty-state
shanmukhdutt Jan 5, 2024
6724dc1
Improved spinner in time modal
shanmukhdutt Jan 5, 2024
b97747f
Improved timezone
shanmukhdutt Jan 10, 2024
0ebfc1b
Implemented suggested changes
shanmukhdutt Jan 12, 2024
4d3b96a
Implemented suggested changes in css
shanmukhdutt Jan 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,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 time zones": "Fetching time zones",
"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.",
Expand Down
17 changes: 16 additions & 1 deletion src/theme/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,4 +264,19 @@ http://ionicframework.com/docs/theming/ */
.mobile-only {
display: none;
}
}
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The styling needs to be added above the media-query styles

.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;
}
21 changes: 16 additions & 5 deletions src/views/TimezoneModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,18 @@
<ion-searchbar @ionFocus="selectSearchBarText($event)" :placeholder="$t('Search time zones')" v-model="queryString" @keyup.enter="queryString = $event.target.value; findTimeZone()" @keydown="preventSpecialCharacters($event)" />
</ion-toolbar>
</ion-header>

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unwanted change

<ion-content class="ion-padding">
<!-- Empty state -->
<div class="empty-state" v-if="filteredTimeZones.length === 0">
<p>{{ $t("No time zone found")}}</p>
<div class="empty-state" v-if="isLoading">
<ion-item lines="none">
<ion-spinner name="crescent" class="ion-margin-end"></ion-spinner>
<p>{{ $t("Fetching time zones")}}</p>
</ion-item>
</div>
<div class="empty-state" v-else-if="filteredTimeZones.length === 0">
<p>{{ $t("No time zone found") }}</p>
</div>

<!-- Timezones -->
<div v-else>
Expand Down Expand Up @@ -48,6 +54,7 @@ import {
IonFabButton,
IonHeader,
IonItem,
IonSpinner,
IonIcon,
IonLabel,
IonList,
Expand Down Expand Up @@ -76,6 +83,7 @@ export default defineComponent({
IonHeader,
IonIcon,
IonItem,
IonSpinner,
IonLabel,
IonList,
IonRadioGroup,
Expand All @@ -89,7 +97,8 @@ export default defineComponent({
queryString: '',
filteredTimeZones: [],
timeZones: [],
timeZoneId: ''
timeZoneId: '',
isLoading: false
}
},
methods: {
Expand Down Expand Up @@ -126,6 +135,7 @@ 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
Expand All @@ -134,6 +144,7 @@ export default defineComponent({
});
this.findTimeZone();
}
this.isLoading = false
},
async selectSearchBarText(event: any) {
const element = await event.target.getInputElement()
Expand All @@ -158,4 +169,4 @@ export default defineComponent({
};
}
});
</script>
</script>
Loading