pcpuma_unam_operador/components/admin/TablaOperadores.vue

<template>
  <section>
    <h3 class="is-size-4 mb-3">Buscar Operador</h3>

    <div class="columns mb-5 is-align-items-flex-end">
      <b-field class="column is-3 mb-0 pb-0" label="Operador">
        <b-input
          type="text"
          placeholder="Operador"
          icon="account"
          @keyup.enter.native="obtenerOperadores()"
          v-model="search.operador"
          rounded
        />
      </b-field>

      <b-button
        type="is-success"
        class="column is-3"
        @click="obtenerOperadores()"
        expanded
        rounded
      >
        Buscar
      </b-button>
    </div>

    <b-table
      :data="data"
      :total="total"
      :current-page="page"
      :per-page="25"
      :loading="isLoadingTable"
      @page-change="onPageChange"
      class="mb-6"
      hoverable
      striped
      paginated
      backend-pagination
    >
      <b-table-column field="operador" label="Operador" v-slot="props" centered>
        <span>{{ props.row.operador }}</span>
      </b-table-column>

      <b-table-column field="activo" label="Status" v-slot="props" centered>
        <ActivarDesactivar
          :admin="admin"
          :operador="props.row"
          :updateActualizarTabla="updateActualizarTabla"
          :updateIsLoading="updateIsLoading"
        />
      </b-table-column>

      <b-table-column
        field="password"
        label="Cambiar Contraseña"
        v-slot="props"
        centered
      >
        <UpdatePassword
          :admin="admin"
          :operador="props.row"
          :updateIsLoading="updateIsLoading"
          v-if="props.row.activo"
        />
      </b-table-column>
    </b-table>
  </section>
</template>

<script>
import axios from 'axios'
import ActivarDesactivar from '@/components/admin/ActivarDesactivar'
import UpdatePassword from '@/components/admin/UpdatePassword'

export default {
  components: { UpdatePassword, ActivarDesactivar },
  data() {
    return {
      data: [],
      page: 1,
      total: 0,
      search: {},
      lastSearch: {},
      isLoadingTable: false,
    }
  },
  props: {
    admin: { type: Object, required: true },
    actualizarTabla: { type: Boolean, required: true },
    updateActualizarTabla: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  methods: {
    onPageChange(page) {
      this.page = page
      this.obtenerOperadores()
    },
    obtenerOperadores() {
      let data = ''

      this.isLoadingTable = true
      if (this.search.operador != this.lastSearch.operador) {
        this.page = 1
        this.lastSearch.operador = this.search.operador
      }
      if (this.search.operador)
        data = `&operador=${this.search.operador}&id_institucion=${this.admin.institucion.id_institucion}`
      axios
        .get(
          `${process.env.api}/operador/operadores?pagina=${this.page}&id_tipo_usuario=4${data}`
        )
        .then((res) => {
          this.data = res.data[0]
          this.total = res.data[1]
          this.isLoadingTable = false
        })
        .catch((err) => {
          this.isLoadingTable = false
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
  watch: {
    actualizarTabla() {
      if (this.actualizarTabla) {
        this.obtenerOperadores()
        this.updateActualizarTabla(false)
      }
    },
  },
  created() {
    if (this.admin.tipoUsuario.id_tipo_usuario === 3) {
      this.obtenerOperadores()
    }
  },
}
</script>

<style></style>