pcpuma_unam_operador/components/admin/TablaResponsables.vue

<template>
  <section>
    <b-table
      :data="data"
      :loading="isLoadingTable"
      :row-class="(row, index) => 'pointer'"
      :selected.sync="selectedInstitucion"
      class="mb-6"
      hoverable
      striped
    >
      <b-table-column
        field="operador"
        label="Institución"
        v-slot="props"
        centered
      >
        <span>{{ props.row.institucion }}</span>
      </b-table-column>

      <b-table-column
        field="operador"
        label="Responsable"
        v-slot="props"
        centered
      >
        <span>{{ props.row.responsable }}</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-column field="dominio" label="Dominio" v-slot="props" centered>
        <span>{{ props.row.dominio }}</span>
      </b-table-column>
    </b-table>
  </section>
</template>

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

export default {
  components: { InstitucionSelect },
  props: {
    updateIsLoading: { type: Function, required: true },
    admin: { type: Object, required: true },
  },
  data() {
    return {
      data: [],
      isLoadingTable: false,
      selectedInstitucion: {},
    }
  },
  methods: {
    obtenerResponsables() {
      this.isLoadingTable = true
      axios
        .get(
          `${process.env.api}/institucion/instituciones`,
          this.$getToken.token()
        )
        .then((res) => {
          this.data = []
          for (let i = 0; i < res.data.length; i++)
            if (res.data[i].responsable) this.data.push(res.data[i])
          this.isLoadingTable = false
        })
        .catch((err) => {
          this.isLoadingTable = false
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
  watch: {
    selectedInstitucion() {
      this.$router.push(
        `/admin/configuracion/instituciones/${this.selectedInstitucion.id_institucion}`
      )
    },
  },
  created() {
    this.obtenerResponsables()
  },
}
</script>

<style>
.pointer {
  cursor: pointer;
}
</style>