reposicionar el boton de abandonar barca y ocultarlo (junto al botón de crear...

reposicionar el boton de abandonar barca y ocultarlo (junto al botón de crear consenso) si no estas en la barca

README.md

@@ -3,30 +3,34 @@
 ## instalar dependencias
 
 primero instalá [pnpm](https://pnpm.js.org/en/installation)
+
 ```
 pnpm i
 ```
 
 ## configurar entorno
+
 ```
 cp .env.example .env
 # editar .env con la url de la API, por defecto está en produccion
 ```
 
 ## modo de desarrollo
+
 ```
 pnpm run serve
 # anda a localhost:8080
 ```
 
 ## hacer que quede bien el código
+
 ```
 pnpm run prettify
 ```
 
 ## compilar para produccion
+
 ```
 pnpm build
 # el resultado esta en dist/
 ```
-

src/App.vue

@@ -51,6 +51,7 @@ html
   --gray: #c7c7c7
   --darkgray: #8f8f8f
   --verydarkgray: #555
+  --darkred: #F51818
   --red: red
 
   color: var(--foreground)
@@ -112,6 +113,8 @@ button
   &.primary
     --foreground: var(--background)
     background: var(--accent)
+  &.red
+    --accent: var(--darkred)
   &.small
     font-size: 0.7em
     padding: 6px 8px

src/router.js

@@ -14,6 +14,7 @@ import CrearBarca from './views/CrearBarca.vue'
 import Consenso from './views/Consenso.vue'
 import CrearConsenso from './views/CrearConsenso.vue'
 import EliminarPropuesta from './views/EliminarPropuesta.vue'
+import AbandonarBarca from './views/AbandonarBarca.vue'
 import NotFound from './views/NotFound.vue'
 
 Vue.use(Router)
@@ -110,6 +111,16 @@ const router = new Router({
           router.push(`/barcas/${route.params.id}`),
       },
     },
+    {
+      path: '/barcas/:id(\\d+)/abandonar',
+      name: 'abandonar barca',
+      component: AbandonarBarca,
+      meta: {
+        requiresAuth: true,
+        backCallback: (router, route) =>
+          router.push(`/barcas/${route.params.id}`),
+      },
+    },
     {
       path: '*',
       name: 'not found',

src/store.js

@@ -46,12 +46,18 @@ export const request = async (path, settings = {}) => {
     if (response.status === 404) {
       throw 'not_found'
     }
+    if (response.status >= 500) {
+      throw 'internal_server_error'
+    }
     if (response.status === 422) {
       let error
       try {
         const json = await response.json()
-        if (json.errors) error = json.errors
-        else throw null
+        if (json.errors) {
+          if (json.errors[0]) error = json.errors[0]
+          // si es un array
+          else error = json.errors
+        } else throw null
       } catch (error) {
         error = 'unprocessable_entity'
       }
@@ -115,6 +121,9 @@ const store = new Vuex.Store({
         ]
       }
     },
+    abandonadaBarca: (state, barcaId) => {
+      state.barcas = state.barcas.filter(barca => barca.id !== barcaId)
+    },
 
     gotConsensos: (state, { barcaId, consensos }) => {
       state.consensos = [
@@ -209,6 +218,13 @@ const store = new Vuex.Store({
       })
       commit('abordadaBarca', barcaId)
     },
+    async abandonarBarca({ commit }, { barcaId }) {
+      const res = await request(`/barcas/${barcaId}/abandonar`, {
+        method: 'DELETE',
+        parseJson: false,
+      })
+      commit('abandonadaBarca', barcaId)
+    },
     async crearBarca({ commit }, body) {
       const json = await request(`/barcas`, {
         method: 'POST',

src/views/AbandonarBarca.vue

+<template>
+  <div class="abandonar-barca">
+    <div v-if="error" class="error">
+      <template v-if="error === 'unprocessable_entity'">
+        ¡Ya te fuiste de esta barca!
+        <router-link to="/barcas">Volver a las barcas</router-link>
+      </template>
+      <template v-if="error === 'not_found'">
+        Esta barca no existe.
+        <router-link to="/barcas">Volver a las barcas</router-link>
+      </template>
+      <template v-else>
+        {{ error }}
+      </template>
+    </div>
+    <h1>
+      Abandonar barca
+      <template v-if="barca">
+        {{ barca.nombre }}
+      </template>
+    </h1>
+    <p>¿Estás segurx de que querés abandonar esta barca?</p>
+    <custom-button @click="abandonar" :loading="abandonando">
+      Abandonar barca
+    </custom-button>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Consenso from '@/components/Consenso'
+import CustomButton from '@/components/Button.vue'
+
+export default {
+  name: 'AbandonarBarca',
+  components: { Consenso, CustomButton },
+  data() {
+    return { abandonando: false, error: null }
+  },
+  methods: {
+    abandonar() {
+      this.abandonando = true
+      return this.$store
+        .dispatch('abandonarBarca', { barcaId: this.id })
+        .then(() => this.$router.push(`/barcas`))
+        .catch(err => (this.error = err))
+        .finally(() => (this.abandonando = false))
+    },
+    refrescar() {
+      return this.$store.dispatch('conseguirBarca', {
+        barcaId: this.id,
+      })
+    },
+  },
+  mounted() {
+    this.refrescar()
+  },
+  computed: {
+    id() {
+      return this.$route.params.id
+    },
+    ...mapState({
+      barca(state) {
+        return state.barcas.find(barca => barca.id === Number(this.id))
+      },
+    }),
+  },
+}
+</script>
+
+<style lang="sass" scoped>
+.abandonar-barca
+  margin: 10px 20px
+</style>

src/views/Barca.vue

@@ -10,6 +10,7 @@
           tag="button"
           class="primary circle"
           :to="`/barcas/${barcaId}/consensos/crear`"
+          v-if="barca.abordada"
         >
           <InIcono />
         </router-link>
@@ -37,9 +38,20 @@
       </template>
       <h1 v-else>Error: {{ error }}</h1>
     </div>
-    <template v-else-if="consensos.length > 0" v-for="consenso in consensos">
-      <consenso :consenso="consenso" :barcaId="barcaId" :key="consenso.id" />
-      <hr />
+    <template v-else-if="consensos.length > 0">
+      <template v-for="consenso in consensos">
+        <consenso :consenso="consenso" :barcaId="barcaId" :key="consenso.id" />
+        <hr />
+      </template>
+
+      <router-link
+        class="red btn-abandonar"
+        tag="button"
+        :to="`/barcas/${barcaId}/abandonar`"
+        v-if="barca.abordada"
+      >
+        Abandonar barca
+      </router-link>
     </template>
     <template v-else>
       <h3>No hay ningun consenso creado.</h3>
@@ -141,4 +153,8 @@ nav
 hr
   margin: 0 3em
   color: var(--gray)
+
+.btn-abandonar
+  display: block
+  margin: 10px auto
 </style>