pcpuma_unam_operador/components/tablaBuscador/TablaBuscadorModulo.vue

<template>
  <div>
    <h3 class="is-size-4 mb-3">Todos los módulos</h3>

    <div class="columns 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"
      />

      <BotonBuscar
        columnSize="is-3"
        :buscar="obtenerModulos"
        :disabled="!idInstitucion"
        v-if="admin.tipoUsuario.id_tipo_usuario === 2"
      />

      <div>
        <BotonDescargarCatalogo
          campo="reporte"
          :nombreArchivo="`reporte_actividad_especial`"
          :obtener="obtenerActividadEspecialReporte"
        />
      </div>
    </div>

    <TablaModulos
      :modulos="modulos"
      :isLoadingTable="isLoadingTable"
      :obtenerModulos="obtenerModulos"
      :operador="admin"
    />
  </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment'
import BotonBuscar from '@/components/botones/BotonBuscar'
import BotonDescargarCatalogo from '@/components/botones/BotonDescargarCatalogo'
import SelectInstitucion from '@/components/selects/SelectInstitucion'
import TablaModulos from '@/components/tablas/TablaModulos'

export default {
  components: {
    BotonBuscar,
    BotonDescargarCatalogo,
    SelectInstitucion,
    TablaModulos,
  },
  props: {
    actualizarTabla: { type: Boolean, required: true, default: false },
    updateActualizarTabla: {
      type: Function,
      required: true,
      default: () => {},
    },
    admin: { type: Object, required: true, default: () => ({}) },
  },
  data() {
    return { modulos: [], isLoadingTable: false, idInstitucion: 0 }
  },
  methods: {
    obtenerModulos() {
      this.isLoadingTable = true
      return this.chooseEndpoint()
        .then((res) => {
          this.modulos = res.data
          this.isLoadingTable = false
        })
        .catch((err) => {
          this.isLoadingTable = false
          this.$alertsGenericos.imprimirError(
            this.$buefy,
            this.$router,
            err.response.data
          )
        })
    },
    obtenerActividadEspecialReporte() {
      let query = ''

      if (this.idInstitucion) query = `?id_institucion=${this.idInstitucion}`
      return axios
        .get(
          `${process.env.api}/modulo-motivo/reporte-actividad-especial${query}`,
          this.$getToken.token()
        )
        .then((res) => {
          const data = []
          let resultado = 0

          for (let i = 0; i < res.data.length; i++) {
            resultado += res.data[i].numero_alumnos
            data.push({
              id_motivo: res.data[i].id_motivo,
              fecha_creacion: moment(res.data[i].fecha_creacion).format(
                'DD/MM/YYYY'
              ),
              motivo: res.data[i].motivo,
              numero_alumnos: res.data[i].numero_alumnos,
              id_modulo: res.data[i].modulo.id_modulo,
              modulo: res.data[i].modulo.modulo,
              institucion: res.data[i].modulo.institucion.institucion,
              operador: res.data[i].operador.operador,
            })
          }
          data.push({
            id_motivo: '',
            fecha_creacion: '',
            motivo: res.data.length,
            numero_alumnos: resultado,
            id_modulo: '',
            modulo: '',
            institucion: '',
            operador: '',
          })
          return data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(
            this.$buefy,
            this.$router,
            err.response.data
          )
        })
    },
    chooseEndpoint() {
      let data = ''

      if (this.idInstitucion) data += `?id_institucion=${this.idInstitucion}`
      if (this.admin.tipoUsuario.id_tipo_usuario === 2)
        return axios.get(
          `${process.env.api}/modulo/modulos${data}`,
          this.$getToken.token()
        )
      else
        return axios.get(
          `${process.env.api}/modulo/modulos-operador`,
          this.$getToken.token()
        )
    },
  },
  watch: {
    actualizarTabla() {
      if (this.actualizarTabla) {
        this.obtenerModulos()
        this.updateActualizarTabla(false)
      }
    },
  },
  created() {
    this.obtenerModulos()
  },
}
</script>