Barcas.vue 3.24 KB
Newer Older
void's avatar
void committed
1
<template>
void's avatar
void committed
2
  <div class="barcas">
void's avatar
void committed
3
4
    <header>
      <h2>Barcas</h2>
void's avatar
void committed
5
6
      <div class="buttons">
        <button class="circle" :class="{ loading }" @click="refrescar">
void's avatar
stuff    
void committed
7
8
          <LoadingIcono />
        </button>
void's avatar
void committed
9
10
11
        <router-link tag="button" class="circle primary" to="/barcas/crear"
          ><InIcono
        /></router-link>
void's avatar
void committed
12
13
      </div>
    </header>
void's avatar
void committed
14
    <!-- TODO: poner en <header> -->
15
    <nav class="inline-nav" v-if="!sinBarcas">
void's avatar
void committed
16
17
18
19
20
21
22
23
24
25
26
27
      <a
        href="#"
        :class="{ active: filtro === Filtros.ABORDADAS }"
        @click.prevent="e => (prefFiltro = Filtros.ABORDADAS)"
        >Abordadas</a
      >
      <a
        href="#"
        :class="{ active: filtro === Filtros.A_ABORDAR }"
        @click.prevent="e => (prefFiltro = Filtros.A_ABORDAR)"
        >A abordar</a
      >
void's avatar
void committed
28
    </nav>
29
30
31
32
    <div
      class="lista-barcas"
      v-if="barcasFiltradas && barcasFiltradas.length > 0"
    >
void's avatar
stuff    
void committed
33
      <barca
void's avatar
void committed
34
35
36
37
38
39
        :barca="barca"
        :key="barca.id"
        :borderColor="colors[index % colors.length]"
        :updateKey="updateKey"
        v-for="(barca, index) in barcasFiltradas"
      />
void's avatar
void committed
40
    </div>
void's avatar
void committed
41
42
    <div class="lista-barcas" v-else-if="barcasFiltradas">
      <template v-if="filtro === Filtros.ABORDADAS">
gahen's avatar
gahen committed
43
44
45
46
47
48
        No abordaste ninguna barca.
      </template>
      <template v-else>
        Ya estas en todas las barcas :)
      </template>
    </div>
void's avatar
void committed
49
50
    <template v-else-if="error"> Error: {{ error }} </template>
    <template v-else-if="loading">
void's avatar
void committed
51
52
53
54
55
56
57
58
      Cargando...
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex'

void's avatar
void committed
59
import InIcono from '@/assets/iconos/in.svg?inline'
void's avatar
stuff    
void committed
60
61
import LoadingIcono from '@/assets/iconos/loading.svg?inline'
import Barca from '@/components/Barca'
void's avatar
void committed
62

void's avatar
void committed
63
64
const Filtros = { ABORDADAS: 1, A_ABORDAR: 2 }

void's avatar
void committed
65
66
export default {
  name: 'BarcasView',
void's avatar
stuff    
void committed
67
  components: { InIcono, LoadingIcono, Barca },
void's avatar
void committed
68
  data() {
void's avatar
void committed
69
70
71
    return {
      error: null,
      loading: true,
void's avatar
stuff    
void committed
72
      updateKey: 0,
void's avatar
void committed
73
      Filtros,
74
      prefFiltro: Filtros.ABORDADAS,
void's avatar
void committed
75
      colors: [
rene's avatar
rene committed
76
77
78
        '#ab4642',
        '#dc9656',
        '#f7ca88',
void's avatar
void committed
79
80
81
82
        '#61EF94',
        '#6FBEFB',
        '#9063E9',
      ],
void's avatar
void committed
83
84
85
86
    }
  },
  computed: {
    ...mapState(['barcas']),
void's avatar
void committed
87
    barcasFiltradas() {
88
89
      return (
        this.barcas.length > 0 &&
90
91
92
93
94
        this.barcas
          .filter(({ abordada }) =>
            this.filtro === Filtros.ABORDADAS ? abordada : !abordada,
          )
          .sort((a, b) => new Date(a.created_at) - new Date(b.created_at))
void's avatar
void committed
95
      )
void's avatar
void committed
96
    },
void's avatar
void committed
97
    filtro() {
void's avatar
void committed
98
      return this.sinBarcas ? Filtros.A_ABORDAR : this.prefFiltro
gahen's avatar
gahen committed
99
    },
void's avatar
void committed
100
    sinBarcas() {
gahen's avatar
gahen committed
101
      const barcasAbordadas = this.barcas.filter(({ abordada }) => abordada)
void's avatar
void committed
102
      return barcasAbordadas.length < 1
gahen's avatar
gahen committed
103
    },
void's avatar
void committed
104
105
106
107
108
  },
  methods: {
    refrescar() {
      this.error = null
      this.loading = true
109
      this.updateKey = ++this.updateKey
void's avatar
void committed
110
111
112
      return this.$store
        .dispatch('conseguirTodasLasBarcas')
        .catch(error => (this.error = error))
void's avatar
stuff    
void committed
113
114
115
        .finally(() => {
          this.loading = false
        })
void's avatar
void committed
116
117
    },
  },
118
  watch: {
void's avatar
void committed
119
    filtro() {
gahen's avatar
gahen committed
120
121
      this.refrescar()
    },
122
  },
void's avatar
void committed
123
124
125
126
127
128
129
  mounted() {
    // fetch data
    this.refrescar()
  },
}
</script>

void's avatar
void committed
130
<style lang="sass" scoped>
void's avatar
void committed
131
132
.barcas
  margin: 0 20px
void's avatar
void committed
133
.lista-barcas
134
135
136
  margin-bottom: 20px
.inline-nav
  margin-bottom: 20px
void's avatar
void committed
137
</style>