apartado de reportes

components/admin/reporte.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <div class="columns">
+      <b-field class="column" label="Fecha inicio">
+        <b-datepicker
+          v-model="inicio"
+          :min-date="minDate1"
+          :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="minDate2"
+          :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, require: true },
+  },
+  data() {
+    return {
+      minDate1: new Date('2022-01-01'),
+      minDate2: new Date(),
+      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}`
+        )
+        .then((res) => {
+          fileDownload(res.data, `reporte.csv`)
+          this.updateIsLoading(false)
+        })
+        .catch((err) => {
+          console.log(err)
+          this.updateIsLoading(false)
+          //   this.imprimirError(err.response.data)
+        })
+    },
+  },
+}
+</script>
+
+<style scoped></style>

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@nuxtjs/axios": "^5.13.1",
         "core-js": "^3.9.1",
+        "js-file-download": "^0.4.12",
         "moment": "^2.29.1",
         "nuxt": "^2.15.3",
         "nuxt-buefy": "^0.4.4",
@@ -6670,6 +6671,11 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-file-download": {
+      "version": "0.4.12",
+      "resolved": "https://registry.npmjs.org/js-file-download/-/js-file-download-0.4.12.tgz",
+      "integrity": "sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -18260,6 +18266,11 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.9.1.tgz",
       "integrity": "sha512-AhYrAxJ/IW2257nHkJasUjtxHhmYIUEHEjsofJtGYsPWk8pTjqjbPFlJfOwfY+WX8YBiKHM1l0ViDC/mye2SWg=="
     },
+    "js-file-download": {
+      "version": "0.4.12",
+      "resolved": "https://registry.npmjs.org/js-file-download/-/js-file-download-0.4.12.tgz",
+      "integrity": "sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@nuxtjs/axios": "^5.13.1",
     "core-js": "^3.9.1",
+    "js-file-download": "^0.4.12",
     "moment": "^2.29.1",
     "nuxt": "^2.15.3",
     "nuxt-buefy": "^0.4.4",

pages/admin/index.vue

@@ -1,24 +1,43 @@
 <template>
   <div class="container">
-    <section class="box">
+    <!-- <section class="box">
       <p class="subtitle is-3">Asignar fechas de inscripción</p>
 
       <FechasInscripcion />
-    </section>
+    </section> -->
+    <b-tabs v-model="activeTab">
+      <b-tab-item label="Tabla de tickets">
+        <TableTickets />
+      </b-tab-item>
 
-    <TableTickets />
+      <b-tab-item label="Reportes">
+        <Reporte :updateIsLoading="updateIsLoading" />
+      </b-tab-item>
+    </b-tabs>
   </div>
 </template>
 
 <script>
 import TableTickets from '~/components/admin/tableTickets.vue'
+import Reporte from '~/components/admin/reporte.vue'
 import FechasInscripcion from '~/components/admin/fechasInscripcion.vue'
 
 export default {
   components: {
     TableTickets,
+    Reporte,
     FechasInscripcion,
   },
+  data() {
+    return {
+      activeTab: 0,
+    }
+  },
+  methods: {
+    updateIsLoading(booleanValue) {
+      this.isLoading = booleanValue
+    },
+  },
 }
 </script>