servicio_social_front/components/responsable/cartaTermino.vue

<template>
  <div
    v-if="idServicio != null && cartaTermino != null"
    class="container footter"
  >
    <b-button
      class="border-info mt-5"
      type="is-info is-light"
      icon-left="arrow-left-box"
      tag="router-link"
      to="/responsable"
      >Regresar</b-button
    >
    <h3 class="title is-4 mt-4">
      Carta de termino (en formato .PDF. No se aceptan fotos).
    </h3>

    <b-field>
      <b-upload
        v-model="file"
        drag-drop
        type="is-black"
        expanded
        accept="application/pdf"
      >
        <section class="section">
          <div class="content has-text-centered">
            <p>
              <b-icon icon="upload" size="is-large"></b-icon>
            </p>
            <p>
              {{
                file.name || 'Arrastra aquí tu archivo o da click para buscar'
              }}
            </p>
            <p>Tamaño máximo para el archivo: 20MB</p>
          </div>
        </section>
      </b-upload>
    </b-field>

    <b-field class="centro">
      <b-button
        :disabled="file == ''"
        class="border-success my-5 is-medium"
        type="is-success"
        @click="Enviar()"
      >
        Enviar
      </b-button>
    </b-field>
    <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="true">
    </b-loading>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      isFullPage: true,
      file: [],
      idServicio: '',
      cartaTermino: '',
      isLoading: false,
      token: {
        headers: {
          token: window.localStorage.getItem('token'),
        },
      },
    }
  },
  methods: {
    validarTamaño() {
      const TamMax = 20000000
      const archivo = this.file

      if (archivo.size > TamMax) {
        this.toast()
        this.file = ''
      }
    },
    toast() {
      this.$buefy.toast.open({
        message: 'El archivo excede el tamaño permitido',
        type: 'is-danger',
      })
    },
    Enviar() {
      const data = { idServicio: this.idServicio }
      const formData = new FormData()

      formData.append('data', JSON.stringify(data))
      formData.append('cartaTermino', this.file)
      this.isLoading = true
      axios
        .put(`${process.env.api}/servicio/carta_termino`, formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
            token: this.token.headers.token,
          },
        })
        .then((res) => {
          this.$buefy.dialog.alert({
            title: 'Success',
            message: 'Se enviaron los datos correctamente',
            type: 'is-success',
            hasIcon: true,
            icon: 'checkbox-marked-circle',
            iconPack: 'mdi',
            ariaRole: 'alertdialog',
            ariaModal: true,
          })
        })
        .catch((error) => {
          this.error(error.response.data.message)
        })
        .finally(() => {
          this.isLoading = false
          localStorage.removeItem('idServicio')
          localStorage.removeItem('cartaTermino')
          this.$router.push('/responsable')
        })
    },
    getIdLocal() {
      this.idServicio = localStorage.getItem('idServicio')
      this.cartaTermino = localStorage.getItem('cartaTermino')

      if (this.idServicio === null || this.cartaTermino === null) {
        this.$router.push('/responsable')
      }
    },
    error(msj) {
      let salir = false
      switch (msj) {
        case 'invalid signature':
          msj = 'Tu token no es valido, inicia sesión de nuevo.'
          salir = true
          break
        case 'jwt expired':
          msj = 'Tu sesión ha expirado, inicia sesión de nuevo.'
          salir = true
          break
        case 'jwt malformed':
          msj = 'No se encontro tu token, inicia sesión de nuevo.'
          salir = true
          break
        case 'No hay token':
          msj = 'Ocurrio un error al enviar tu token, inicia sesión de nuevo.'
          salir = true
          break
      }

      this.$buefy.dialog.alert({
        title: 'Error',
        message: msj,
        type: 'is-danger',
        hasIcon: true,
        icon: 'alert-circle',
        iconPack: 'mdi',
        ariaRole: 'alertdialog',
        ariaModal: true,
      })
      if (salir == true) {
        localStorage.clear()
        this.$router.push(`/`)
      }
    },
  },
  watch: {
    file: function (newFile, oldFile) {
      this.validarTamaño()
    },
  },
  created() {
    this.getIdLocal()
  },
}
</script>

<style>
.centro {
  text-align: center;
}
.footter {
  margin-bottom: 10rem;
}
</style>