pcpuma_unam_operador/components/tablaBuscador/TablaBuscadorAdmin.vue
2022-07-29 00:08:49 -05:00

122 lines
3.1 KiB
Vue

<template>
<div>
<h3 class="is-size-4 mb-3">Todos los administradores</h3>
<div class="columns mb-5 is-align-items-flex-end">
<SelectInstitucion
columnSize="is-3"
:deshabilitarOptVacia="false"
:institucionPadre="institucion"
@institucion-seleccionada="
(nuevaInstitucion) => (institucion = nuevaInstitucion)
"
/>
<b-field class="column is-3 mb-0 pb-0" label="Usuario administrador">
<b-input
icon="account"
placeholder="Usuario administrador"
type="text"
@keyup.enter.native="obtenerAdmins()"
v-model="operador"
rounded
/>
</b-field>
<BotonBuscar
columnSize="is-3"
:buscar="obtenerAdmins"
:disabled="institucion.id_institucion || operador ? false : true"
/>
</div>
<TablaAdmins
:admins="admins"
:isLoadingTable="isLoadingTable"
:obtenerAdmins="obtenerAdmins"
:onPageChange="onPageChange"
:total="total"
:page="page"
columnaActivo
columnaInstitucion
/>
</div>
</template>
<script>
import axios from 'axios'
import BotonBuscar from '@/components/botones/BotonBuscar'
import SelectInstitucion from '@/components/selects/SelectInstitucion'
import TablaAdmins from '@/components/tablas/TablaAdmins'
export default {
components: { BotonBuscar, SelectInstitucion, TablaAdmins },
props: {
actualizarTabla: { type: Boolean, required: true },
updateIsLoading: { type: Function, required: true },
updateActualizarTabla: { type: Function, required: true },
},
data() {
return {
admins: [],
isLoadingTable: false,
page: 1,
total: 0,
institucion: {},
lastSearch: {},
operador: '',
}
},
methods: {
obtenerAdmins() {
let data = ''
this.isLoadingTable = true
if (
this.institucion.id_institucion != this.lastSearch.idInstitucion ||
this.operador != this.lastSearch.operador
) {
this.page = 1
this.lastSearch.idInstitucion = this.institucion.id_institucion
this.lastSearch.operador = this.operador
}
if (this.institucion.id_institucion)
data += `&id_institucion=${this.institucion.id_institucion}`
if (this.operador) data += `&operador=${this.operador}`
axios
.get(
`${process.env.api}/operador/operadores?pagina=${this.page}&id_tipo_usuario=3${data}`,
this.$getToken.token()
)
.then((res) => {
this.admins = res.data[0]
this.total = res.data[1]
this.isLoadingTable = false
})
.catch((err) => {
this.isLoadingTable = false
this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
})
},
onPageChange(page) {
this.page = page
this.obtenerAdmins()
},
updateInstitucion(institucion) {
this.institucion = institucion
},
},
watch: {
actualizarTabla() {
if (this.actualizarTabla) {
this.obtenerAdmins()
this.updateActualizarTabla(false)
}
},
},
created() {
this.obtenerAdmins()
},
}
</script>