SHow "Loading…" message when loading data from the API

This commit is contained in:
Lucas Verney 2017-05-12 16:27:31 +02:00
parent e4768de086
commit adb520b54d
6 changed files with 42 additions and 29 deletions

View File

@ -5,7 +5,7 @@ export default {
flat: (state, getters) => id => state.flats.find(flat => flat.id === id), flat: (state, getters) => id => state.flats.find(flat => flat.id === id),
isLoading: state => state.loading, isLoading: state => state.loading > 0,
postalCodesFlatsBuckets: (state, getters) => filter => { postalCodesFlatsBuckets: (state, getters) => filter => {
const postalCodeBuckets = {} const postalCodeBuckets = {}

View File

@ -5,16 +5,15 @@ import * as types from './mutations-types'
export const state = { export const state = {
flats: [], flats: [],
timeToPlaces: [], timeToPlaces: [],
loading: false loading: 0
} }
export const mutations = { export const mutations = {
[types.REPLACE_FLATS] (state, { flats }) { [types.REPLACE_FLATS] (state, { flats }) {
state.loading = false
state.flats = flats state.flats = flats
state.loading -= 1
}, },
[types.MERGE_FLATS] (state, { flats }) { [types.MERGE_FLATS] (state, { flats }) {
state.loading = false
flats.forEach(flat => { flats.forEach(flat => {
const flatIndex = state.flats.findIndex(storedFlat => storedFlat.id === flat.id) const flatIndex = state.flats.findIndex(storedFlat => storedFlat.id === flat.id)
@ -24,33 +23,35 @@ export const mutations = {
state.flats.push(flat) state.flats.push(flat)
} }
}) })
state.loading = false
state.loading -= 1
}, },
[types.UPDATE_FLAT_STATUS] (state, { flatId, newStatus }) { [types.UPDATE_FLAT_STATUS] (state, { flatId, newStatus }) {
state.loading = false
const index = state.flats.findIndex(flat => flat.id === flatId) const index = state.flats.findIndex(flat => flat.id === flatId)
if (index > -1) { if (index > -1) {
Vue.set(state.flats[index], 'status', newStatus) Vue.set(state.flats[index], 'status', newStatus)
} }
state.loading -= 1
}, },
[types.UPDATE_FLAT_NOTES] (state, { flatId, newNotes }) { [types.UPDATE_FLAT_NOTES] (state, { flatId, newNotes }) {
state.loading = false
const index = state.flats.findIndex(flat => flat.id === flatId) const index = state.flats.findIndex(flat => flat.id === flatId)
if (index > -1) { if (index > -1) {
Vue.set(state.flats[index], 'notes', newNotes) Vue.set(state.flats[index], 'notes', newNotes)
} }
state.loading -= 1
}, },
[types.UPDATE_FLAT_NOTATION] (state, { flatId, newNotation }) { [types.UPDATE_FLAT_NOTATION] (state, { flatId, newNotation }) {
state.loading = false
const index = state.flats.findIndex(flat => flat.id === flatId) const index = state.flats.findIndex(flat => flat.id === flatId)
if (index > -1) { if (index > -1) {
Vue.set(state.flats[index], 'notation', newNotation) Vue.set(state.flats[index], 'notation', newNotation)
} }
state.loading -= 1
}, },
[types.RECEIVE_TIME_TO_PLACES] (state, { timeToPlaces }) { [types.RECEIVE_TIME_TO_PLACES] (state, { timeToPlaces }) {
state.loading = false
state.timeToPlaces = timeToPlaces state.timeToPlaces = timeToPlaces
state.loading -= 1
}, },
[types.IS_LOADING] (state) { [types.IS_LOADING] (state) {
state.loading = true state.loading += 1
} }
} }

View File

@ -1,6 +1,9 @@
<template> <template>
<div> <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"> <div class="left-panel">
<h2> <h2>
(<!-- (<!--
@ -168,9 +171,6 @@
</nav> </nav>
</div> </div>
</div> </div>
<template v-else>
<p>{{ $t("common.loading") }}</p>
</template>
</div> </div>
</template> </template>
@ -213,6 +213,9 @@ export default {
}, },
computed: { computed: {
isLoading () {
return this.$store.getters.isLoading
},
title () { title () {
return 'Flatisfy - ' + this.$route.params.id return 'Flatisfy - ' + this.$route.params.id
}, },

View File

@ -1,22 +1,21 @@
<template> <template>
<div> <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> <h2>{{ $t("home.new_available_flats") }}</h2>
<template v-if="Object.keys(postalCodesFlatsBuckets).length > 0"> <template v-if="Object.keys(postalCodesFlatsBuckets).length > 0">
<template v-for="(postal_code_data, postal_code) in postalCodesFlatsBuckets"> <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> <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> <FlatsTable :flats="postal_code_data.flats"></FlatsTable>
</template> </template>
</template> </template>
<template v-else-if="isLoading">
<p>{{ $t("common.loading") }}</p>
</template>
<template v-else> <template v-else>
<p>{{ $t("flatListing.no_available_flats") }}</p> <p>{{ $t("flatListing.no_available_flats") }}</p>
</template> </template>
</template>
<template v-else>
<p>{{ $t("common.loading") }}</p>
</template>
</div> </div>
</template> </template>
@ -48,6 +47,9 @@ export default {
}, },
timeToPlaces () { timeToPlaces () {
return this.$store.getters.allTimeToPlaces return this.$store.getters.allTimeToPlaces
},
isLoading () {
return this.$store.getters.isLoading
} }
} }
} }

View File

@ -9,8 +9,8 @@
</form> </form>
<h2>Results</h2> <h2>Results</h2>
<template v-if="loading"> <template v-if="isLoading">
{{ $t("common.loading") }} <p>{{ $t("common.loading") }}</p>
</template> </template>
<template v-else-if="Object.keys(postalCodesFlatsBuckets).length > 0"> <template v-else-if="Object.keys(postalCodesFlatsBuckets).length > 0">
<template v-for="(postal_code_data, postal_code) in postalCodesFlatsBuckets"> <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' flat => flat.status !== 'duplicate' && flat.status !== 'ignored' && flat.status !== 'user_deleted'
) )
}, },
loading () { isLoading () {
return this.$store.getters.isLoading return this.$store.getters.isLoading
} }
}, },

View File

@ -13,7 +13,11 @@
</li> </li>
</ul> </ul>
</h2> </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"> <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> <h3>{{ postal_code_data.name }} ({{ postal_code }}) - {{ postal_code_data.flats.length }} {{ $tc("common.flats", postal_code_data.flats.length) }}</h3>
<FlatsTable <FlatsTable
@ -82,6 +86,9 @@ export default {
}, },
title () { title () {
return 'Flatisfy - ' + capitalize(this.$t('status.' + this.$route.params.status)) return 'Flatisfy - ' + capitalize(this.$t('status.' + this.$route.params.status))
},
isLoading () {
return this.$store.getters.isLoading
} }
}, },