pcpuma_unam_operador/components/tablas/TablaModulos.vue
2022-07-29 00:08:49 -05:00

59 lines
1.3 KiB
Vue

<template>
<b-table
class="pb-6"
:data="modulos"
:loading="isLoadingTable"
:row-class="(row, index) => 'pointer'"
:selected.sync="moduloSeleccionado"
detailed
hoverable
show-detail-icon
striped
>
<b-table-column field="modulo" label="Módulo" v-slot="props" centered>
<p>{{ props.row.modulo }}</p>
</b-table-column>
<b-table-column field="activo" label="Status" v-slot="props" centered>
<p
class="is-size-6 tag"
:class="props.row.activo ? 'is-success' : 'is-danger'"
>
{{ props.row.activo ? 'Activo' : 'Inactivo' }}
</p>
</b-table-column>
<template #detail="props">
<CarritosModulo :modulo="props.row" />
</template>
</b-table>
</template>
<script>
import CarritosModulo from '@/components/tablas/CarritosModulo'
export default {
components: { CarritosModulo },
props: {
modulos: { type: Array, required: true, default: () => [] },
isLoadingTable: { type: Boolean, required: true, default: false },
},
data() {
return { moduloSeleccionado: {} }
},
watch: {
moduloSeleccionado() {
this.$router.push(
`/admin/administrador/modulos/buscar_modulo/${this.moduloSeleccionado.id_modulo}`
)
},
},
}
</script>
<style>
.pointer {
cursor: pointer;
}
</style>