inscripciones_front/components/admin/reporte.vue

<template>
  <div>
    <div class="columns">
      <b-field class="column" label="Fecha inicio">
        <b-datepicker
          v-model="inicio"
          :min-date="minDate"
          :max-date="maxDate"
          icon="calendar-today"
          rounded
        >
        </b-datepicker>
      </b-field>

      <b-field class="column" label="Fecha fin">
        <b-datepicker
          v-model="fin"
          :min-date="inicio"
          :max-date="maxDate"
          icon="calendar-today"
          rounded
        >
        </b-datepicker>
      </b-field>
    </div>

    <div class="has-text-centered">
      <b-button type="is-link" @click="pedirReporte()">Descargar</b-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import fileDownload from 'js-file-download'

export default {
  props: {
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      token: '',

      minDate: new Date('2022-01-01'),
      maxDate: new Date(),

      inicio: new Date(),
      fin: new Date(),
    }
  },
  methods: {
    pedirReporte() {
      console.log(this.inicio)
      this.updateIsLoading(true)
      axios
        .get(
          `${process.env.api}/admin/reporte?inicio=${this.inicio}&fin=${this.fin}`,
          this.token
        )
        .then((res) => {
          fileDownload(res.data, `inscripcionesCEDETEC.csv`)
          this.updateIsLoading(false)
        })
        .catch((err) => {
          this.updateIsLoading(false)
        })
    },
  },
  created() {
    this.token = {
      headers: { token: localStorage.getItem('token') },
    }
  },
}
</script>

<style scoped></style>