servicio_social_front/components/alumno/preTermino.vue

<template>
  <div>
    <h3 class="title is-4 mt-6">
      Cuestionario de evaluación del programa de servicio social
    </h3>
    <div class="my-6" v-if="idCuestionario == null">
      <b-button
        tag="router-link"
        to="/alumno/cuestionario"
        type="is-info is-light "
        icon-left="book-open"
        class="border-info"
        size="is-medium"
      >
        cuestionario
      </b-button>
    </div>
    <div class="is-flex" v-else>
      <p class="block is-size-5">Cuestionario contestado</p>
      <b-icon icon="check-bold" size="is-small" type="is-success"> </b-icon>
    </div>

    <h3 class="title is-4 mt-6">
      Informe global de actividades (en formato .PDF. No se aceptan fotos).
    </h3>
    <div v-if="!informeGlobal">
      <b-field type="black">
        <b-upload
          v-model="file"
          type="black"
          drag-drop
          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 20MB</p>
            </div>
          </section>
        </b-upload>
      </b-field>
      <b-field style="text-align: center">
        <button
          :disabled="file == ''"
          class="button is-success is-medium mb-4"
          @click="enviarInforme()"
        >
          Enviar
        </button>
      </b-field>
    </div>
    <div class="is-flex" v-else>
      <p class="block is-size-5">Informe Global enviado.</p>
      <b-icon icon="check-bold" size="is-small" type="is-success"> </b-icon>
    </div>

    <b-loading :is-full-page="true" :can-cancel="false" v-model="isLoading">
    </b-loading>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      token: {
        headers: {
          token: localStorage.getItem('token'),
        },
      },
      isLoading: false,
      file: [],
    }
  },
  props: ['idCuestionario', 'informeGlobal', 'idServicio'],
  watch: {
    file() {
      if (this.file.size >= 20000000) {
        this.$buefy.dialog.alert({
          title: 'Error',
          message: 'El tamaño del archivo exede los 20MB',
          type: 'is-danger',
          hasIcon: true,
          icon: 'alert-circle',
          ariaRole: 'alertdialog',
          ariaModal: true,
        })
        this.file = []
      }
    },
  },
  methods: {
    reset() {
      this.file = []
    },
    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',
        ariaRole: 'alertdialog',
        ariaModal: true,
      })
      if (salir == true) {
        localStorage.clear()
        this.$router.push(`/`)
      }
    },
    enviarInforme() {
      this.isLoading = true
      const data = {
        idServicio: this.idServicio,
      }
      const formData = new FormData()

      formData.append('data', JSON.stringify(data))
      formData.append('informeGlobal', this.file)

      axios
        .put(`${process.env.api}/servicio/informe_global`, 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',
            ariaRole: 'alertdialog',
            ariaModal: true,
          })

          this.reset()
          this.$parent.getData()
        })
        .catch((error) => {
          this.error(error.response.data.message)
        })
        .finally(() => {
          this.isLoading = false
        })
    },
  },
}
</script>