phyks/flatisfy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
flatisfy/web/js_src/store/getters.js
View File

@ -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 = {}

17
flatisfy/web/js_src/store/mutations.js
View File

@ -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
}
}

11
flatisfy/web/js_src/views/details.vue
View File

@ -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
},

26
flatisfy/web/js_src/views/home.vue
View File

@ -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
}
}
}

6
flatisfy/web/js_src/views/search.vue
View File

@ -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
}
},

9
flatisfy/web/js_src/views/status.vue
View File

@ -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
}
},