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" v-model="isLoading" :can-cancel="false" />
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      token: {
        headers: {
          token: window.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",
          iconPack: "mdi",
          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",
        iconPack: "mdi",
        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",
            iconPack: "mdi",
            ariaRole: "alertdialog",
            ariaModal: true,
          });

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