pcpuma_unam_operador/components/admin/Institucion.vue

<template>
  <div>
    <div class="box">
      <div
        class="columns is-align-items-flex-end"
        v-if="admin.tipoUsuario.id_tipo_usuario === 2"
      >
        <InstitucionSelect
          :updateIdInstitucion="updateIdInstitucion"
          :idInstitucion="
            typeof idInstitucion === 'undefined' ? 0 : idInstitucion
          "
        />

        <b-field class="column">
          <b-button
            type="is-success"
            :disabled="!idInstitucion"
            @click="buscar()"
            rounded
            expanded
          >
            Buscar
          </b-button>
        </b-field>
      </div>

      <div class="columns">
        <AdminInstitucion
          :buscar="buscar"
          :updateIsLoading="updateIsLoading"
          :admin="admin"
          :institucion="institucion"
          v-if="admin.tipoUsuario.id_tipo_usuario === 2"
        />

        <InfoInstitucion
          :admin="admin"
          :institucion="institucion"
          :updateIsLoading="updateIsLoading"
          :buscar="buscar"
        />

        <AdminInstitucion
          :buscar="buscar"
          :updateIsLoading="updateIsLoading"
          :admin="admin"
          :institucion="institucion"
          v-if="admin.tipoUsuario.id_tipo_usuario === 3"
        />
      </div>
    </div>

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

      <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
        <span>{{ props.row.nombre }}</span>
      </b-table-column>

      <b-table-column field="correo" label="Correo" v-slot="props" centered>
        <span>{{ props.row.correo }}</span>
      </b-table-column>
    </b-table>
  </div>
</template>

<script>
import axios from 'axios'
import AdminInstitucion from '@/components/admin/AdminInstitucion'
import InstitucionSelect from '@/components/admin/InstitucionSelect'
import InfoInstitucion from '@/components/admin/InfoInstitucion'

export default {
  components: { AdminInstitucion, InstitucionSelect, InfoInstitucion },
  props: {
    admin: { type: Object, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      institucion: {},
      idInstitucion: 0,
      data: [],
      isLoadingTable: false,
      page: 1,
      total: 0,
      lastSearch: {},
    }
  },
  methods: {
    updateIdInstitucion(idInstitucion) {
      this.idInstitucion = idInstitucion
    },
    onPageChange(page) {
      this.page = page
      this.obtenerAdmins()
    },
    buscar() {
      this.updateIsLoading(true)
      axios
        .get(
          `${process.env.api}/institucion/institucion?id_institucion=${this.idInstitucion}`,
          this.$getToken.token()
        )
        .then((res) => {
          this.institucion = res.data
          this.updateIsLoading(false)
          if (this.admin.tipoUsuario.id_tipo_usuario === 2)
            this.$router.push(
              `/admin/configuracion/instituciones/${this.idInstitucion}`
            )
          return this.obtenerAdmins()
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerAdmins() {
      if (this.idInstitucion) {
        this.isLoadingTable = true
        if (this.idInstitucion != this.lastSearch.idInstitucion) {
          this.page = 1
          this.lastSearch.idInstitucion = this.idInstitucion
        }
        return axios
          .get(
            `${process.env.api}/operador/operadores?pagina=${this.page}&id_tipo_usuario=3&id_institucion=${this.idInstitucion}`,
            this.$getToken.token()
          )
          .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)
          })
      }
    },
  },
  created() {
    if (this.$route.params.institucion)
      this.idInstitucion = parseInt(this.$route.params.institucion)
    else if (this.admin.institucion)
      this.idInstitucion = this.admin.institucion.id_institucion
    if (this.idInstitucion) this.buscar()
  },
}
</script>