premiaciones_front2/components/admin/Reportes.vue

<template>
  <section class="container full-h">
    <div class="my-3 has-text-centered">
      <p class="is-size-2">Reportes administrador</p>
    </div>
    <p class="is-size-4 my-3">Subir base de datos de los profesores:</p>
    <!-- <p class="is-size-5 my-3">Seleccione una premiacion:</p> -->
    <div class="boton has-text-centered">
      <b-select
        v-model="idPremiacionCSV"
        placeholder="Seleccione una premiación"
        class="is-size-4 block mx-0"
      >
        <option
          v-for="(premiacion, index) in premiaciones"
          :key="index"
          :value="premiacion.idPremiacion"
        >
          {{ premiacion.premiacion }}
        </option>
      </b-select>
      <b-field>
        <b-upload
          accept=".csv"
          @input="validarExt()"
          v-model="csv"
          drag-drop
          expanded
        >
          <div class="section has-text-centered m-3">
            <b-icon icon="upload" size="is-large" class="mb-2" />

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

            <p class="is-size-6">Tamaño máximo 20MB</p>
          </div>
        </b-upload>
      </b-field>
    </div>
    <div class="has-text-centered mb-4">
      <b-button
        class="mt-4"
        type="is-info"
        :disabled="!csv.name || !idPremiacionCSV"
        @click="confirmarEnviar()"
      >
        Enviar archivo
      </b-button>
    </div>
    <p class="is-size-4 my-3">Descargar base de datos invitados:</p>
    <!-- <p class="is-size-5 has-text-centered my-3">Seleccione una premiacion:</p>  -->
    <div class="boton has-text-centered">
      <b-select
        v-model="idPremiacion"
        placeholder="Seleccione una premiación"
        class="is-size-4 block mx-0"
      >
        <option
          v-for="(premiacion, index) in premiaciones"
          :key="index"
          :value="premiacion.idPremiacion"
        >
          {{ premiacion.premiacion }}
        </option>
      </b-select>
      <b-button :disabled="!idPremiacion || !dataExport.length" class="is-info">
        <JsonCSV
          class="btn btn-default"
          :data="dataExport"
          name="datosInvitados.csv"
        >
          Descargar base de datos invitados
        </JsonCSV>
      </b-button>
    </div>

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

<script>
import JsonCSV from 'vue-json-csv'
import axios from 'axios'

export default {
  components: {
    JsonCSV,
  },
  data() {
    return {
      isLoading: false,
      dataExport: [],
      premiaciones: [],
      csv: {},
      idPremiacion: null,
      idPremiacionCSV: null,
    }
  },
  methods: {
    confirmarEnviar() {
      this.$swal({
        title: '¿Estás seguro de querer enviar este archivo?',
        type: 'question',
        timer: 9000,
        showCancelButton: true,
        cancelButtonColor: '#d33',
        confirmButtonText: 'Aceptar',
        confirmButtonColor: '#1e3c70',
      }).then((res) => {
        if (res.value) {
          this.enviar()
        }
      })
    },
    enviar() {
      const formData = new FormData()

      this.isLoading = true
      formData.append('file', this.csv)

      axios
        .post(
          `${process.env.api}/profesor/cargarDatos?idPremiacion=${this.idPremiacionCSV}`,
          formData,
          {
            headers: {
              'Content-Type': 'multipart/form-data',
              token: localStorage.getItem('token'),
            },
          }
        )
        .then((res) => {
          this.isLoading = false
          this.csv = {}
          this.idPremiacionCSV = null
          this.successUpload()
        })
        .catch((err) => {
          this.isLoading = false
          this.csv = {}
          this.idPremiacionCSV = null
          console.log(err)
          this.errorMessage()
        })
    },
    successUpload() {
      this.$swal({
        title: 'Se ha subido el archivo con éxito.',
        type: 'success',
        timer: 5000,
        confirmButtonText: 'Aceptar',
        confirmButtonColor: '#1e3c70',
      })
    },
    errorMessage() {
      this.$swal({
        title: 'Ha ocurrido un error al subir el archivo.',
        type: 'error',
        timer: 5000,
        confirmButtonText: 'Aceptar',
        confirmButtonColor: '#1e3c70',
      })
    },
    errorMessageExt() {
      this.$swal({
        title: 'Asegurate de ingresar un archivo .CSV.',
        type: 'error',
        timer: 5000,
        confirmButtonText: 'Aceptar',
        confirmButtonColor: '#1e3c70',
      })
    },
    noDataErrorMessage() {
      this.$swal({
        title: 'No hay datos que descargar.',
        type: 'error',
        timer: 5000,
        confirmButtonText: 'Aceptar',
        confirmButtonColor: '#1e3c70',
      })
    },
    isDataExport() {
      if (this.dataExport.length > 0) return true
      return false
    },
    validarExt() {
      const extPermitidas = /(.csv)$/i

      if (!extPermitidas.exec(this.csv.name)) {
        this.errorMessageExt()
        this.csv = {}
      }
    },
  },
  watch: {
    idPremiacion() {
      this.dataExport = []
      this.isLoading = true
      axios
        .get(
          `${process.env.api}/invitado/get?idPremiacion=${this.idPremiacion}`,
          {
            headers: {
              token: localStorage.getItem('token'),
            },
          }
        )
        .then((res) => {
          this.isLoading = false
          if (res.data.length > 0) {
            res.data.forEach((item, index) => {
              this.dataExport[index] = {}
              this.dataExport[index].idInvitado = item.idInvitado
              this.dataExport[index].nombre = item.nombreCompleto
              this.dataExport[index].edad = item.edad
              this.dataExport[index].nombreProfesor = item.Profesor.nombre
              this.dataExport[index].adscripcion = item.Profesor.adscripcion
            })
          }
        })
        .catch((err) => {
          this.isLoading = false
          console.log(err.response.data.message)
        })
    },
  },
  async created() {
    this.isLoading = true
    await axios
      .get(`${process.env.api}/premiacion/get`, {
        headers: {
          token: localStorage.getItem('token'),
        },
      })
      .then((res) => {
        this.isLoading = false
        if (res) {
          this.premiaciones = res.data
        }
      })
      .catch((err) => {
        this.isLoading = false
        console.log(err.response.data.message)
      })
  },
  layout: 'default',
}
</script>