Consenso.vue 3.52 KB
Newer Older
1
2
<template>
  <div class="consenso-detalle">
void's avatar
void committed
3
    <template v-if="consenso">
4
5
      <div class="title">
        <h1>{{ consenso.titulo }}</h1>
void's avatar
void committed
6
7
8
        <button class="circle" @click="refrescar" :class="{ loading }">
          <LoadingIcono />
        </button>
9
      </div>
10
11
12
13
14
15
16
17
18
      <p v-if="barca && !barca.abordada">
        de la barca
        <router-link class="link-barca" :to="`/barcas/${barcaId}`">
          {{ barca.nombre }}</router-link
        >.
        <router-link :to="`/barcas/${barcaId}/abordar`">
          abordar esta barca
        </router-link>
      </p>
19
      <div class="texto">
void's avatar
void committed
20
        <Markdown :markdown="consenso.texto" />
21
      </div>
22
      <barra-de-estado :posiciones="consenso.posiciones" />
void's avatar
void committed
23
      <p>
void's avatar
void committed
24
25
        {{ date.getDate() }}/{{ date.getMonth() }}/{{ date.getFullYear() }} |
        {{ date.getHours() }}:{{ date.getMinutes() }}hs
void's avatar
void committed
26
      </p>
27
28
29
      <router-link
        v-if="consenso.posiciones.length < 1"
        tag="button"
void's avatar
void committed
30
        :to="`/barcas/${barcaId}/consensos/${id}/eliminar`"
31
32
33
      >
        Eliminar propuesta
      </router-link>
34
      <posiciones :posiciones="consenso.posiciones" />
void's avatar
void committed
35
36
      <tomar-posicion-form
        :consensoId="consenso.id"
void's avatar
void committed
37
        :barcaId="barcaId"
38
39
        :posicionPrevia="posicionPrevia"
      />
40
    </template>
41
42
43
44
45
46
47
    <h1 v-else-if="loading">Cargando...</h1>
    <div v-else-if="error">
      <h1>Error: {{ error }}</h1>
      <custom-button @click="refrescar" :loading="loading">
        Reintentar
      </custom-button>
    </div>
48
49
50
51
52
53
54
55
56
  </div>
</template>

<script>
import { mapState } from 'vuex'

import CustomButton from '@/components/Button.vue'
import BarraDeEstado from '@/components/BarraDeEstado.vue'
import Posiciones from '@/components/Posiciones.vue'
void's avatar
void committed
57
import TomarPosicionForm from '@/components/TomarPosicionForm.vue'
void's avatar
void committed
58
import Markdown from '@/components/Markdown.vue'
void's avatar
void committed
59
import LoadingIcono from '@/assets/iconos/loading.svg?inline'
60
61
62

export default {
  name: 'ConsensoView',
63
64
65
66
67
  components: {
    CustomButton,
    BarraDeEstado,
    Posiciones,
    TomarPosicionForm,
void's avatar
void committed
68
    Markdown,
void's avatar
void committed
69
    LoadingIcono,
70
  },
71
  data() {
72
73
74
75
76
77
    return {
      error: null,
      loading: true,
    }
  },
  computed: {
78
    id() {
void's avatar
void committed
79
      return parseInt(this.$route.params.id)
80
    },
void's avatar
void committed
81
82
83
    barcaId() {
      return parseInt(this.$route.params.barcaId)
    },
84
85
86
    barca() {
      return this.barcas.find(barca => barca.id == this.barcaId)
    },
void's avatar
void committed
87
    consenso() {
void's avatar
stuff    
void committed
88
      return this.consensos.find(consenso => consenso.id == this.id)
void's avatar
void committed
89
    },
void's avatar
void committed
90
91
92
    date() {
      return new Date(this.consenso.created_at)
    },
93
    ...mapState(['barcas', 'consensos']),
94
    ...mapState({
95
      posicionPrevia(state) {
void's avatar
void committed
96
97
98
99
100
        if (this.consenso) {
          return [...this.consenso.posiciones]
            .reverse()
            .find(posicion => posicion.pirata.id === state.profile.id)
        }
void's avatar
void committed
101
102
      },
    }),
103
104
  },
  methods: {
105
    refrescar() {
106
107
      this.error = null
      this.loading = true
108
109
110
      return Promise.all([
        this.$store.dispatch('conseguirBarca', { barcaId: this.barcaId }),
        this.$store.dispatch('conseguirConsenso', {
void's avatar
void committed
111
112
          consensoId: this.id,
          barcaId: this.barcaId,
113
114
        }),
      ])
115
116
        .catch(error => (this.error = error))
        .finally(() => (this.loading = false))
117
118
    },
  },
119
  mounted() {
120
121
122
123
    this.refrescar()
  },
}
</script>
124

125
<style lang="sass" scoped>
126
127
128
129
130
131
132
133
134
135
136
137
.consenso-detalle
  margin: 0 10px
.texto
  border-left: 5px solid var(--gray)
  padding-left: .5em
.title
  width: 100%
  margin-top: 1em
  h1
    display: inline
    margin: 0
    margin-right: .2em
138
139
.link-barca
  color: var(--foreground)
140
</style>