pcpuma_unam_operador/components/admin/GraficasPrestamo.vue

<template>
  <div>
    <div class="columns is-multiline mb-5 is-align-items-flex-end">
      <SelectInstitucion
        columnSize="is-3"
        :deshabilitarOptVacia="false"
        :idInstitucionPadre="idInstitucion"
        @institucion-seleccionada="
          (nuevaInstitucion) => (idInstitucion = nuevaInstitucion)
        "
        v-if="admin.tipoUsuario.id_tipo_usuario === 2"
      />

      <InputFecha
        columnSize="is-3"
        label="Fecha inicio"
        :fechaPadre="fechaInicio"
        :fechaMaxima="fechaMax"
        :fechaMinima="fechaMinInicio"
        @fecha="(fechaNueva) => (fechaInicio = fechaNueva)"
      />

      <InputFecha
        columnSize="is-3"
        label="Fecha fin"
        :fechaPadre="fechaFin"
        :fechaMaxima="fechaMax"
        :fechaMinima="fechaMinFin"
        @fecha="(fechaNueva) => (fechaFin = fechaNueva)"
      />

      <BotonBuscar
        columnSize="is-3"
        :buscar="obtenerPrestamos"
        :disabled="false"
      />
    </div>

    <BarraPrestamos :data="data" :labels="instituciones" />

    <PiePrestamos :data="data" />
  </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment'
import BarraPrestamos from '@/components/admin/graficas/BarraPrestamos'
import BotonBuscar from '@/components/botones/BotonBuscar'
import PiePrestamos from '@/components/admin/graficas/PiePrestamos'
import SelectInstitucion from '@/components/selects/SelectInstitucion'
import InputFecha from '@/components/inputs/InputFecha'

export default {
  components: {
    BarraPrestamos,
    BotonBuscar,
    InputFecha,
    PiePrestamos,
    SelectInstitucion,
  },
  props: {
    updateIsLoading: { type: Function, required: false, default: () => {} },
    admin: { type: Object, required: true, default: () => ({}) },
  },
  data() {
    return {
      data: [],
      instituciones: [],
      idInstitucion: 0,
      fechaFin: moment().toDate(),
      fechaInicio: null,
      hoy: moment(),
    }
  },
  methods: {
    obtenerPrestamos() {
      let query = '?cancelado_operador=false&cancelado_usuario=false'

      this.updateIsLoading(true)
      this.data = []
      if (this.admin.institucion)
        query += `&id_institucion=${this.admin.institucion.id_institucion}`
      else if (this.idInstitucion)
        query += `&id_institucion=${this.idInstitucion}`
      if (this.fechaInicio)
        query += `&fechaInicio=${moment(this.fechaInicio).format('YYYY-MM-DD')}`
      if (this.fechaFin)
        query += `&fechaFin=${moment(this.fechaFin).format('YYYY-MM-DD')}`
      return axios
        .get(
          `${process.env.api}/prestamo/reporte${query}`,
          this.$getToken.token()
        )
        .then((res) => {
          const prestamos = []
          const ins = res.data.map((value) => value.institucion)

          this.instituciones = ins.filter((value, index, self) => {
            if (self.indexOf(value) === index) {
              prestamos.push([res.data[index]])
              return true
            }
            prestamos[prestamos.length - 1].push(res.data[index])
            return false
          })
          for (let i = 0; i < this.instituciones.length; i++)
            this.data.push({
              institucion: this.instituciones[i],
              labMovil: { prestamos: 0, motivos: [] },
              motivosModulos: { prestamos: 0, motivos: [] },
              prestamos: prestamos[i],
            })
          return this.obtenerMotivosModulos()
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(
            this.$buefy,
            this.$router,
            err.response.data
          )
        })
    },
    obtenerMotivosModulos() {
      let query = '?'

      if (this.admin.institucion)
        query += `&id_institucion=${this.admin.institucion.id_institucion}`
      else if (this.idInstitucion)
        query += `&id_institucion=${this.idInstitucion}`
      if (this.fechaInicio)
        query += `&fechaInicio=${moment(this.fechaInicio).format('YYYY-MM-DD')}`
      if (this.fechaFin)
        query += `&fechaFin=${moment(this.fechaFin).format('YYYY-MM-DD')}`
      return axios
        .get(
          `${process.env.api}/modulo-motivo/reporte-actividad-especial${query}`,
          this.$getToken.token()
        )
        .then((res) => {
          const ins = res.data
            .map((value) => value.modulo.institucion.institucion)
            .filter((value, index, self) => self.indexOf(value) === index)

          for (let i = 0; i < ins.length; i++)
            if (!this.instituciones.find((element) => ins[i] === element)) {
              this.instituciones.push(ins[i])
              this.data.push({
                institucion: ins[i],
                labMovil: { prestamos: 0, motivos: [] },
                motivosModulos: { prestamos: 0, motivos: [] },
                prestamos: [],
              })
            }
          for (let i = 0; i < res.data.length; i++)
            for (let j = 0; j < this.instituciones.length; j++)
              if (
                res.data[i].modulo.institucion.institucion ===
                this.instituciones[j]
              ) {
                this.data[j].motivosModulos.motivos.push(res.data[i])
                this.data[j].motivosModulos.prestamos +=
                  res.data[i].numero_alumnos
              }
          return this.obtenerLabMovil()
        })
    },
    obtenerLabMovil() {
      let query = '?'

      if (this.admin.institucion)
        query += `&id_institucion=${this.admin.institucion.id_institucion}`
      else if (this.idInstitucion)
        query += `&id_institucion=${this.idInstitucion}`
      if (this.fechaInicio)
        query += `&fechaInicio=${moment(this.fechaInicio).format('YYYY-MM-DD')}`
      if (this.fechaFin)
        query += `&fechaFin=${moment(this.fechaFin).format('YYYY-MM-DD')}`
      return axios
        .get(
          `${process.env.api}/carrito-motivo/laboratorio-movil${query}`,
          this.$getToken.token()
        )
        .then((res) => {
          const ins = res.data
            .map((value) => value.operador.institucion.institucion)
            .filter((value, index, self) => self.indexOf(value) === index)

          for (let i = 0; i < ins.length; i++)
            if (!this.instituciones.find((element) => ins[i] === element)) {
              this.instituciones.push(ins[i])
              this.data.push({
                institucion: ins[i],
                labMovil: { prestamos: 0, motivos: [] },
                motivosModulos: { prestamos: 0, motivos: [] },
                prestamos: [],
              })
            }
          for (let i = 0; i < res.data.length; i++)
            for (let j = 0; j < this.instituciones.length; j++)
              if (
                res.data[i].operador.institucion.institucion ===
                this.instituciones[j]
              ) {
                this.data[j].labMovil.motivos.push(res.data[i])
                this.data[j].labMovil.prestamos += res.data[i].numero_equipos
              }
          this.updateIsLoading(false)
        })
    },
  },
  computed: {
    fechaMax() {
      return moment().toDate()
    },
    fechaMinInicio() {
      return moment('2022-08-15').toDate()
    },
    fechaMinFin() {
      let fechaMinFin = moment(this.fechaInicio)

      return fechaMinFin.isValid() ? fechaMinFin.toDate() : moment().toDate()
    },
  },
  created() {
    if (this.hoy < moment(`${this.hoy.year()}-07-01`))
      this.fechaInicio = moment(`${this.hoy.year()}-01-01`).toDate()
    else this.fechaInicio = moment(`${this.hoy.year()}-07-01`).toDate()
    this.obtenerPrestamos()
  },
}
</script>