bachir/enfrancais-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add loading overlay on query

Browse Source
This commit is contained in:
axolotle
2021-03-01 15:40:16 +01:00
parent 0fe388bf7f
commit 24903f986a
2 changed files with 52 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+2 -2
View File
@@ -10,9 +10,9 @@
<router-view /> <router-view />
</main> </main>
<footer> <!-- <footer>
<p>footer</p> <p>footer</p>
</footer> </footer> -->
</div> </div>
</template> </template>
src/pages/Map.vue
+50 -44
View File
@@ -1,52 +1,54 @@
<template> <template>
<div class="d-flex flex-column h-100 px-4 py-3"> <b-overlay :show="loading" rounded="sm" class="h-100">
<div id="maps"> <div class="d-flex flex-column h-100 px-4 py-3">
<div> <div id="maps">
<h4>Carte avec duplication</h4> <div>
<div class="node-map"> <h4>Carte avec duplication</h4>
<node-map <div class="node-map">
v-if="data" <node-map
v-bind="mapSingle" v-if="data"
:show-id="showId" v-bind="mapSingle"
/> :show-id="showId"
</div>
</div>
<div>
<h4>Carte avec liens multiples</h4>
<div class="node-map">
<node-map
v-if="data"
v-bind="mapMany"
:show-id="showId"
id="map-2"
/> />
</div>
</div>
<div>
<h4>Carte avec liens multiples</h4>
<div class="node-map">
<node-map
v-if="data"
v-bind="mapMany"
:show-id="showId"
id="map-2"
/>
</div>
</div> </div>
</div> </div>
<b-form class="mt-4">
<b-form-group label="Texte de départ :" label-cols="2" class="mb-2">
<b-form-select
v-model="textId"
@input="query"
:options="textsDepartOptions"
/>
</b-form-group>
<b-form-group label="Profondeur :" label-cols="2" class="mb-2">
<b-form-spinbutton
v-model="depth"
@input="query"
min="0" max="6"
inline
/>
</b-form-group>
<b-form-checkbox v-model="showId" name="check-button" switch>
Afficher les numéros
</b-form-checkbox>
</b-form>
</div> </div>
</b-overlay>
<b-form class="mt-4">
<b-form-group label="Texte de départ :" label-cols="2" class="mb-2">
<b-form-select
v-model="textId"
@input="query"
:options="textsDepartOptions"
/>
</b-form-group>
<b-form-group label="Profondeur :" label-cols="2" class="mb-2">
<b-form-spinbutton
v-model="depth"
@input="query"
min="0" max="6"
inline
/>
</b-form-group>
<b-form-checkbox v-model="showId" name="check-button" switch>
Afficher les numéros
</b-form-checkbox>
</b-form>
</div>
</template> </template>
<script> <script>
@@ -65,6 +67,7 @@ export default {
data () { data () {
return { return {
loading: false,
textId: undefined, textId: undefined,
showId: true, showId: true,
depth: 3, depth: 3,
@@ -82,15 +85,18 @@ export default {
query () { query () {
const { textId: id, depth } = this const { textId: id, depth } = this
this.data = null this.data = null
this.loading = true
this.$store.dispatch('GET_TREE_WITH_DEPTH', { id, depth }).then((data) => { this.$store.dispatch('GET_TREE_WITH_DEPTH', { id, depth }).then((data) => {
this.mapSingle = toSingleManyData(data) this.mapSingle = toSingleManyData(data)
this.mapMany = toManyManyData(data) this.mapMany = toManyManyData(data)
this.data = data this.data = data
this.loading = false
}) })
} }
}, },
created () { created () {
this.loading = true
this.$store.dispatch('GET_TEXTS_DEPART').then(textsDepart => { this.$store.dispatch('GET_TEXTS_DEPART').then(textsDepart => {
this.textId = textsDepart[0].id this.textId = textsDepart[0].id
}) })