add the spinner to the CoachesList
This commit is contained in:
parent
0f04ac7a3e
commit
0317b58706
|
@ -6,11 +6,14 @@
|
||||||
<section>
|
<section>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<base-button mode="outline" @click="loadCoaches">Refresh</base-button>
|
<base-button mode="outline" @click="loadCoaches">Refresh</base-button>
|
||||||
<base-button v-if="!isCoach" link to="/register"
|
<base-button v-if="!isCoach && !isLoading" link to="/register"
|
||||||
>Register as Coach</base-button
|
>Register as Coach</base-button
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<ul v-if="hasCoaches">
|
<div v-if="isLoading">
|
||||||
|
<base-spinner></base-spinner>
|
||||||
|
</div>
|
||||||
|
<ul v-else-if="hasCoaches">
|
||||||
<coach-item
|
<coach-item
|
||||||
v-for="coach in filteredCoaches"
|
v-for="coach in filteredCoaches"
|
||||||
:key="coach.id"
|
:key="coach.id"
|
||||||
|
@ -34,6 +37,7 @@ export default {
|
||||||
components: { CoachItem, CoachFilter },
|
components: { CoachItem, CoachFilter },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
isLoading: false,
|
||||||
activeFilters: {
|
activeFilters: {
|
||||||
backend: true,
|
backend: true,
|
||||||
frontend: true,
|
frontend: true,
|
||||||
|
@ -61,7 +65,7 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
hasCoaches() {
|
hasCoaches() {
|
||||||
return this.$store.getters['coaches/hasCoaches'];
|
return !this.isLoading && this.$store.getters['coaches/hasCoaches'];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
@ -71,8 +75,10 @@ export default {
|
||||||
setFilter(updatedFilters) {
|
setFilter(updatedFilters) {
|
||||||
this.activeFilters = updatedFilters;
|
this.activeFilters = updatedFilters;
|
||||||
},
|
},
|
||||||
loadCoaches() {
|
async loadCoaches() {
|
||||||
this.$store.dispatch('coaches/loadCoaches');
|
this.isLoading = true;
|
||||||
|
await this.$store.dispatch('coaches/loadCoaches');
|
||||||
|
this.isLoading = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Reference in New Issue