servicio_social_front/components/admin/responsables/cargaMasiva.vue

<template>
  <div class="pb-6">
    <h3 class="title">Carga Masiva</h3>

    <b-field>
      <b-upload
        type="is-black"
        @input="validarExt()"
        v-model="csv"
        drag-drop
        expanded
      >
        <section
          class="section is-flex is-align-items-center is-justify-content-center drag-drop"
        >
          <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>

    <div>
      <b-button :disabled="!csv.name" @click="dialog()" class="is-info"
        >Enviar archivo</b-button
      >

      <b-button type="is-link" tag="a" target="_blank" :href="link"
        >Descargar plantilla</b-button
      >
    </div>

    <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 {
      admin: {},
      csv: {},
      link: `${process.env.api}/plantilla.csv`,
      token: {},
      isLoading: false,
      toastType: '',
      toastMessage: '',
    }
  },
  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(),
      })
    },
    getLocalhostInfo() {
      this.admin.idUsuario = localStorage.getItem('idUsuario')
      this.admin.idTipoUsuario = Number(localStorage.getItem('idTipoUsuario'))
      this.admin.tipoUsuario = localStorage.getItem('tipoUsuario')
      this.token = {
        headers: {
          'Content-Type': 'multipart/form-data',
          token: localStorage.getItem('token'),
        },
      }
    },
    enviarCargaMasiva() {
      const formData = new FormData()

      this.isLoading = true
      formData.append('csv', this.csv)
      axios
        .post(`${process.env.api}/programa/carga_masiva`, formData, this.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.imprimirError(err.response.data)
        })
    },
    imprimirError(err) {
      this.$buefy.dialog.alert({
        title: 'Error',
        message: err.message,
        type: 'is-danger',
        hasIcon: true,
        icon: 'alert-circle',
        ariaRole: 'alertdialog',
        ariaModal: true,
      })
      if (err.err === 'token error') {
        localStorage.clear()
        this.$router.push('/')
      }
    },
  },
  created() {
    this.getLocalhostInfo()
  },
}
</script>