servicio_social_front/components/alumno/preTermino.vue

<template>
  <div>
    <h3 class="label">
      Cuestionario de evaluación del programa de servicio social.
    </h3>

    <b-field
      class="mb-6"
      v-if="!servicio.idCuestionarioAlumno && !servicio.idCuestionarioAlumno2"
    >
      <b-button
        type="is-info is-light"
        tag="router-link"
        to="/alumno/cuestionario"
        icon-left="book-open"
      >
        Cuestionario
      </b-button>
    </b-field>

    <div class="mb-6" v-else>
      <p class="block is-size-6">
        Cuestionario contestado
        <b-icon type="is-success" icon="check-bold" />
      </p>
    </div>

    <h3 class="label">
      Informe global de actividades
      <span v-if="!servicio.informeGlobal">
        (en formato .PDF. No se aceptan fotos)
      </span>
      .
    </h3>

    <div v-if="!servicio.informeGlobal">
      <b-field>
        <b-upload accept="application/pdf" v-model="file" drag-drop expanded>
          <div class="section has-text-centered">
            <b-icon icon="upload" size="is-large" class="mb-2" />

            <p class="is-size-5">
              {{
                file.name ||
                'Arrastra aquí tu archivo o da click aquí para buscarlo.'
              }}
            </p>

            <p class="is-size-6">Tamaño máximo 20MB</p>
          </div>
        </b-upload>
      </b-field>

      <b-field class="has-text-centered my-5">
        <b-button
          type="is-success"
          :disabled="!file.name"
          @click="
            imprimirWarning(
              `¿Estas seguro(a) de querer subir este informe global?`,
              enviarInformeGlobal
            )
          "
        >
          Enviar
        </b-button>
      </b-field>
    </div>

    <div v-else>
      <p class="block is-size-6">
        Informe Global enviado.
        <b-icon type="is-success" icon="check-bold" />
      </p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    alumno: { type: Object, required: true },
    servicio: { type: Object, required: true },
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirError: { type: Function, required: true },
    obtenerServicio: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      file: {},
    }
  },
  methods: {
    enviarInformeGlobal() {
      const formData = new FormData()
      const data = {
        idServicio: this.servicio.idServicio,
      }

      this.updateIsLoading(true)
      formData.append('data', JSON.stringify(data))
      formData.append('informeGlobal', this.file)
      axios
        .put(
          `${process.env.api}/servicio/informe_global`,
          formData,
          this.alumno.tokenArchivo
        )
        .then((res) => {
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
          this.obtenerServicio()
        })
        .catch((error) => {
          this.updateIsLoading(false)
          this.imprimirError(error.response.data)
        })
    },
  },
  watch: {
    file() {
      if (this.file.size >= 20000000) {
        this.imprimirError({ message: 'El tamaño del archivo exede los 20MB' })
        this.file = {}
      }
    },
  },
}
</script>