Commit 1827faee authored by rene's avatar rene
Browse files

refrescar asincronicamente/eficientemente en varias partes

parent 54d184f4
Pipeline #37697 passed with stages
in 1 minute and 41 seconds
......@@ -11,10 +11,7 @@
</div>
</header>
<template v-if="barca.abordada">
<div class="loading-container" v-if="loading">
<LoadingIcono class="loading-anim" />
</div>
<ul v-else-if="consensosMostrados">
<ul v-if="consensosMostrados" :class="{ 'is-loading': loading }">
<li v-for="consenso in consensosMostrados">
<p>
<a :href="`#/barcas/${barca.id}/consensos/${consenso.id}`">{{
......@@ -42,7 +39,7 @@ export default {
props: ['barca', 'borderColor', 'updateKey'],
components: { InIcono, LoadingIcono },
data() {
return { loading: true }
return { loading: false }
},
computed: {
...mapState(['consensos']),
......@@ -73,6 +70,9 @@ export default {
.catch(error => this.$emit('error', error))
},
},
mounted() {
this.refrescar()
},
watch: {
updateKey() {
this.refrescar()
......@@ -103,6 +103,8 @@ export default {
padding: 0
margin: 0
list-style: none
&.is-loading
opacity: .5
li
padding-left: .5em
border-left: 4px solid var(--border-color)
......@@ -116,10 +118,4 @@ export default {
text-decoration: none
&:hover
text-decoration: underline
.loading-container
width: 100%
svg
margin: .5em auto
max-width: 3em
display: block
</style>
......@@ -10,7 +10,7 @@
tag="button"
class="primary circle"
:to="`/barcas/${barcaId}/consensos/crear`"
v-if="barca.abordada"
v-if="barca && barca.abordada"
>
<InIcono />
</router-link>
......@@ -27,8 +27,7 @@
</router-link>
</div>
</nav>
<h1 v-if="loading">Cargando...</h1>
<div v-else-if="error">
<div v-if="error">
<template v-if="error === 'forbidden'">
<h2>No tenés permiso para acceder a esta barca.</h2>
<p>
......@@ -38,7 +37,7 @@
</template>
<h1 v-else>Error: {{ error }}</h1>
</div>
<template v-else-if="consensos.length > 0">
<template v-if="consensos.length > 0">
<template v-for="consenso in consensosNuevos">
<consenso :consenso="consenso" :barcaId="barcaId" :key="consenso.id" />
<hr />
......@@ -60,12 +59,12 @@
class="red btn-abandonar"
tag="button"
:to="`/barcas/${barcaId}/abandonar`"
v-if="barca.abordada"
v-if="barca && barca.abordada"
>
Abandonar barca
</router-link>
</template>
<template v-else>
<template v-else-if="!loading">
<h3>No hay ningun consenso creado.</h3>
</template>
</div>
......
......@@ -104,12 +104,12 @@ export default {
refrescar() {
this.error = null
this.loading = true
this.updateKey = ++this.updateKey
return this.$store
.dispatch('conseguirTodasLasBarcas')
.catch(error => (this.error = error))
.finally(() => {
this.loading = false
this.updateKey = ++this.updateKey
})
},
},
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment