pcpuma_unam_operador/components/admin/TablaModulos.vue

<template>
  <b-table
    :data="data"
    :loading="isLoadingTable"
    :selected.sync="selectedModulo"
    :row-class="(row, index) => 'pointer'"
    @details-open="(row, index) => obtenerCarritos(row.id_modulo)"
    show-detail-icon
    paginated
    detailed
  >
    <b-table-column field="modulo" label="Módulo" v-slot="props" centered>
      <span>{{ props.row.modulo }}</span>
    </b-table-column>

    <b-table-column field="activo" label="Activo" v-slot="props" centered>
      <BotonDesactivar
        :admin="admin"
        :data="props.row"
        tipo="módulo"
        :cambiarStatus="cambiarStatus"
        :imprimirWarning="imprimirWarning"
      />
    </b-table-column>

    <template #detail>
      <TablaCarritos
        :operador="admin"
        :carritos="carritos"
        :imprimirError="imprimirError"
        :imprimirMensaje="imprimirMensaje"
        :imprimirWarning="imprimirWarning"
        :isLoadingTable="isLoadingTable"
      />
    </template>
  </b-table>
</template>

<script>
import axios from 'axios'
import BotonDesactivar from '@/components/operador/BotonDesactivar'
import TablaCarritos from '@/components/operador/TablaCarritos'
export default {
  components: {
    BotonDesactivar,
    TablaCarritos,
  },
  props: {
    admin: { typeof: Object, require: true },
    data: { type: Array, required: true },
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirError: { type: Function, required: true },
    updateIsLoading: { type: Function, require: true },
    obtenerCatalogoModulo: { type: Function, required: true },
    updateActualizarTabla: { type: Function, required: true },
    actualizarTabla: { type: Boolean, required: true },
  },
  data() {
    return {
      selectedModulo: {},
      isLoadingTable: false,
      carritos: [],
    }
  },
  methods: {
    cambiarStatus(dataSelect, status) {
      const data = { id_modulo: dataSelect.id_modulo, activo: status }
      this.updateIsLoading(true)

      axios
        .put(`${process.env.api}/modulo`, data)
        .then((res) => {
          this.obtenerCatalogoModulo(this.data[0].institucion.id_institucion)
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
    obtenerCarritos(id_modulo) {
      this.isLoadingTable = true
      axios
        .get(
          `${process.env.api}/carrito/carritos?pagina=1&id_institucion=${this.admin.institucion.id_institucion}&id_modulo=${id_modulo}`
        )
        .then(async (res) => {
          this.carritos = res.data[0]
          this.isLoadingTable = false
        })
        .catch((err) => {
          this.isLoadingTable = false
          this.imprimirError(err.response.data)
        })
    },
  },
  watch: {
    selectedModulo() {
      this.$router.push({
        path: 'buscar_modulo/' + this.selectedModulo.id_modulo,
      })
    },
  },
}
</script>

<style>
.pointer {
  cursor: pointer;
}
</style>