servicio_social_front/components/admin/programa/cargaMasiva.vue

<template>
  <div>
    <p class="is-size-2 mb-5">Carga Masiva</p>
    <b-field v-if="true">
      <b-upload
        v-model="csv"
        type="is-black"
        v-on:input="validarExt()"
        drag-drop
        expanded
      >
        <section class="section">
          <div class="content has-text-centered">
            <p>
              <b-icon icon="upload" size="is-large"></b-icon>
            </p>
            <p>
              {{
                csv.name || "Arrastra aquí tu archivo o da click para buscar"
              }}
            </p>
          </div>
        </section>
      </b-upload>
    </b-field>
    <b-button v-if="csv.name" @click="dialog()" class="is-info"
      >Enviar archivo</b-button
    >
    <b-button v-else disabled class="is-info">Enviar archivo</b-button>
    <b-loading
      :is-full-page="true"
      v-model="isLoading"
      :can-cancel="false"
    ></b-loading>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      csv: {},
      token: {
        headers: {
          token: window.localStorage.getItem("token"),
        },
      },
      isLoading: false,
      toastType: null,
      toastMessage: null,
    };
  },
  methods: {
    validarExt() {
      const extPermitidas = /(.csv)$/i;
      if (!extPermitidas.exec(this.csv.name)) {
        this.toastType = "is-danger";
        this.toastMessage = "Asegurate de ingresar un archivo .CSV";
        this.toast();
        this.csv = {};
      }
    },
    toast() {
      this.$buefy.toast.open({
        message: this.toastMessage,
        type: this.toastType,
      });
    },
    dialog() {
      this.$buefy.dialog.confirm({
        title: "Carga masiva",
        message: "¿Seguro(a) que quiere enviar este archivo?",
        confirmText: "Confirmar",
        cancelText: "Cancelar",
        type: "is-success",
        hasIcon: true,
        onConfirm: () => this.enviarCargaMasiva(),
      });
    },
    enviarCargaMasiva() {
      const formData = new FormData();

      this.isLoading = true;
      formData.append("csv", this.csv);
      axios
        .post(`${process.env.api}/programa/carga_masiva`, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
            token: this.token.headers.token,
          },
        })
        .then((res) => {
          this.isLoading = false;
          this.toastType = "is-success";
          this.toastMessage = "Se ha enviado la carga masiva con éxito";
          this.toast();
          this.$router.push("/admin");
        })
        .catch((err) => {
          this.isLoading = false;
          this.error(err.response.data.message);
        });
    },
    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(`/`);
      }
    },
  },
};
</script>