pcpuma_unam_operador/components/tablas/TablaOperadores.vue
2022-07-29 01:55:24 -05:00

100 lines
2.9 KiB
Vue

<template>
<b-table
class="pb-6"
:current-page="page"
:data="operadores"
:loading="isLoadingTable"
:per-page="25"
:total="total"
@page-change="onPageChange"
backend-pagination
hoverable
paginated
striped
>
<b-table-column field="operador" label="Operador" v-slot="props" centered>
<p>{{ props.row.operador }}</p>
</b-table-column>
<b-table-column field="operador" label="Nombre" v-slot="props" centered>
<p>{{ props.row.nombre }}</p>
</b-table-column>
<b-table-column field="operador" label="Correo" v-slot="props" centered>
<p>{{ props.row.correo }}</p>
</b-table-column>
<b-table-column
field="activo"
label="Status"
v-slot="props"
v-if="columnaActivo"
centered
>
<BotonDesactivar
:activarDesactivar="activarDesactivar"
:msjWarning="`¿Estás segur@ de querer ${
props.row.activo ? 'desactivar' : 'activar'
} esta cuenta de operador?`"
:row="props.row"
/>
</b-table-column>
<b-table-column
field="password"
label="Cambiar contraseña"
v-slot="props"
v-if="columnaActivo"
centered
>
<BotonUpdatePassword
:operador="props.row"
:updateIsLoading="updateIsLoading"
/>
</b-table-column>
</b-table>
</template>
<script>
import axios from 'axios'
import BotonDesactivar from '@/components/botones/BotonDesactivar'
import BotonUpdatePassword from '@/components/botones/BotonUpdatePassword'
export default {
components: { BotonDesactivar, BotonUpdatePassword },
props: {
operadores: { type: Array, required: true, default: () => [] },
columnaActivo: { type: Boolean, required: false, default: false },
columnaInstitucion: { type: Boolean, required: false, default: false },
columnaPasswordChange: { type: Boolean, required: false, default: false },
isLoadingTable: { type: Boolean, required: true, default: false },
obtenerOperadores: { type: Function, required: false, default: () => {} },
onPageChange: { type: Function, required: true, default: () => {} },
updateIsLoading: { type: Function, required: false, default: () => {} },
total: { type: Number, required: true, default: 0 },
page: { type: Number, required: true, default: 0 },
},
methods: {
activarDesactivar(operador) {
const data = {
id_operador: operador.id_operador,
activo: operador.activo ? false : true,
}
this.updateIsLoading(true)
axios
.put(`${process.env.api}/operador`, data, this.$getToken.token())
.then((res) => {
this.obtenerOperadores()
this.updateIsLoading(false)
this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
})
.catch((err) => {
this.updateIsLoading(false)
this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
})
},
},
}
</script>