SHow "Loading…" message when loading data from the API
This commit is contained in:
parent
e4768de086
commit
adb520b54d
@ -5,7 +5,7 @@ export default {
|
||||
|
||||
flat: (state, getters) => id => state.flats.find(flat => flat.id === id),
|
||||
|
||||
isLoading: state => state.loading,
|
||||
isLoading: state => state.loading > 0,
|
||||
|
||||
postalCodesFlatsBuckets: (state, getters) => filter => {
|
||||
const postalCodeBuckets = {}
|
||||
|
@ -5,16 +5,15 @@ import * as types from './mutations-types'
|
||||
export const state = {
|
||||
flats: [],
|
||||
timeToPlaces: [],
|
||||
loading: false
|
||||
loading: 0
|
||||
}
|
||||
|
||||
export const mutations = {
|
||||
[types.REPLACE_FLATS] (state, { flats }) {
|
||||
state.loading = false
|
||||
state.flats = flats
|
||||
state.loading -= 1
|
||||
},
|
||||
[types.MERGE_FLATS] (state, { flats }) {
|
||||
state.loading = false
|
||||
flats.forEach(flat => {
|
||||
const flatIndex = state.flats.findIndex(storedFlat => storedFlat.id === flat.id)
|
||||
|
||||
@ -24,33 +23,35 @@ export const mutations = {
|
||||
state.flats.push(flat)
|
||||
}
|
||||
})
|
||||
state.loading = false
|
||||
state.loading -= 1
|
||||
},
|
||||
[types.UPDATE_FLAT_STATUS] (state, { flatId, newStatus }) {
|
||||
state.loading = false
|
||||
const index = state.flats.findIndex(flat => flat.id === flatId)
|
||||
if (index > -1) {
|
||||
Vue.set(state.flats[index], 'status', newStatus)
|
||||
}
|
||||
state.loading -= 1
|
||||
},
|
||||
[types.UPDATE_FLAT_NOTES] (state, { flatId, newNotes }) {
|
||||
state.loading = false
|
||||
const index = state.flats.findIndex(flat => flat.id === flatId)
|
||||
if (index > -1) {
|
||||
Vue.set(state.flats[index], 'notes', newNotes)
|
||||
}
|
||||
state.loading -= 1
|
||||
},
|
||||
[types.UPDATE_FLAT_NOTATION] (state, { flatId, newNotation }) {
|
||||
state.loading = false
|
||||
const index = state.flats.findIndex(flat => flat.id === flatId)
|
||||
if (index > -1) {
|
||||
Vue.set(state.flats[index], 'notation', newNotation)
|
||||
}
|
||||
state.loading -= 1
|
||||
},
|
||||
[types.RECEIVE_TIME_TO_PLACES] (state, { timeToPlaces }) {
|
||||
state.loading = false
|
||||
state.timeToPlaces = timeToPlaces
|
||||
state.loading -= 1
|
||||
},
|
||||
[types.IS_LOADING] (state) {
|
||||
state.loading = true
|
||||
state.loading += 1
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="grid" v-if="flat && timeToPlaces">
|
||||
<template v-if="isLoading">
|
||||
<p>{{ $t("common.loading") }}</p>
|
||||
</template>
|
||||
<div class="grid" v-else-if="flat && timeToPlaces">
|
||||
<div class="left-panel">
|
||||
<h2>
|
||||
(<!--
|
||||
@ -168,9 +171,6 @@
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<p>{{ $t("common.loading") }}</p>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -213,6 +213,9 @@ export default {
|
||||
},
|
||||
|
||||
computed: {
|
||||
isLoading () {
|
||||
return this.$store.getters.isLoading
|
||||
},
|
||||
title () {
|
||||
return 'Flatisfy - ' + this.$route.params.id
|
||||
},
|
||||
|
@ -1,22 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<template v-if="postalCodesFlatsBuckets && flatsMarkers">
|
||||
<FlatsMap :flats="flatsMarkers" :places="timeToPlaces"></FlatsMap>
|
||||
<FlatsMap :flats="flatsMarkers" :places="timeToPlaces"></FlatsMap>
|
||||
|
||||
<h2>{{ $t("home.new_available_flats") }}</h2>
|
||||
<template v-if="Object.keys(postalCodesFlatsBuckets).length > 0">
|
||||
<template v-for="(postal_code_data, postal_code) in postalCodesFlatsBuckets">
|
||||
<h3>{{ postal_code_data.name }} ({{ postal_code }}) - {{ postal_code_data.flats.length }} {{ $tc("common.flats", postal_code_data.flats.length) }}</h3>
|
||||
<FlatsTable :flats="postal_code_data.flats"></FlatsTable>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p>{{ $t("flatListing.no_available_flats") }}</p>
|
||||
<h2>{{ $t("home.new_available_flats") }}</h2>
|
||||
|
||||
<template v-if="Object.keys(postalCodesFlatsBuckets).length > 0">
|
||||
<template v-for="(postal_code_data, postal_code) in postalCodesFlatsBuckets">
|
||||
<h3>{{ postal_code_data.name }} ({{ postal_code }}) - {{ postal_code_data.flats.length }} {{ $tc("common.flats", postal_code_data.flats.length) }}</h3>
|
||||
<FlatsTable :flats="postal_code_data.flats"></FlatsTable>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-else-if="isLoading">
|
||||
<p>{{ $t("common.loading") }}</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p>{{ $t("flatListing.no_available_flats") }}</p>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -48,6 +47,9 @@ export default {
|
||||
},
|
||||
timeToPlaces () {
|
||||
return this.$store.getters.allTimeToPlaces
|
||||
},
|
||||
isLoading () {
|
||||
return this.$store.getters.isLoading
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -9,8 +9,8 @@
|
||||
</form>
|
||||
|
||||
<h2>Results</h2>
|
||||
<template v-if="loading">
|
||||
{{ $t("common.loading") }}
|
||||
<template v-if="isLoading">
|
||||
<p>{{ $t("common.loading") }}</p>
|
||||
</template>
|
||||
<template v-else-if="Object.keys(postalCodesFlatsBuckets).length > 0">
|
||||
<template v-for="(postal_code_data, postal_code) in postalCodesFlatsBuckets">
|
||||
@ -60,7 +60,7 @@ export default {
|
||||
flat => flat.status !== 'duplicate' && flat.status !== 'ignored' && flat.status !== 'user_deleted'
|
||||
)
|
||||
},
|
||||
loading () {
|
||||
isLoading () {
|
||||
return this.$store.getters.isLoading
|
||||
}
|
||||
},
|
||||
|
@ -13,7 +13,11 @@
|
||||
</li>
|
||||
</ul>
|
||||
</h2>
|
||||
<template v-if="Object.keys(postalCodesFlatsBuckets).length">
|
||||
|
||||
<template v-if="isLoading">
|
||||
<p>{{ $t("common.loading") }}</p>
|
||||
</template>
|
||||
<template v-else-if="Object.keys(postalCodesFlatsBuckets).length">
|
||||
<template v-for="(postal_code_data, postal_code) in postalCodesFlatsBuckets">
|
||||
<h3>{{ postal_code_data.name }} ({{ postal_code }}) - {{ postal_code_data.flats.length }} {{ $tc("common.flats", postal_code_data.flats.length) }}</h3>
|
||||
<FlatsTable
|
||||
@ -82,6 +86,9 @@ export default {
|
||||
},
|
||||
title () {
|
||||
return 'Flatisfy - ' + capitalize(this.$t('status.' + this.$route.params.status))
|
||||
},
|
||||
isLoading () {
|
||||
return this.$store.getters.isLoading
|
||||
}
|
||||
},
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user