pcpuma_unam_operador/components/operador/usuarios/TablaUsuarios.vue

<template>
  <b-table
    :data="usuarios"
    :loading="isLoadingTable"
    :selected.sync="selectedUsuario"
    :row-class="(row, index) => 'pointer'"
    class="mb-6"
    :per-page="25"
    @page-change="onPageChange"
    show-detail-icon
    paginated
    detailed
  >
    <b-table-column
      field="usuario"
      label="Número de cuenta"
      v-slot="props"
      centered
    >
      <span>{{ props.row.usuario }}</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="tipo" label="Tipo" v-slot="props" centered>
      <span>{{ props.row.tipoUsuario.tipo_usuario }}</span>
    </b-table-column>

    <template #detail="props">
      <div class="columns">
        <div class="column is-1"></div>
        <div class="column has-text-centered is-size-5 detail-item">
          <b>Institución(es):</b>
        </div>
        <div class="column has-text-centered is-size-5 detail-item">
          <b>Carrera(s):</b>
        </div>
        <div class="column has-text-centered is-size-5 detail-item">
          <b>Activo:</b>
        </div>
      </div>
      <div
        v-for="institucion in props.row.instituciones"
        :key="institucion.institucionCarrera.id_institucion_carrera"
        class="container columns"
      >
        <div class="column is-1"></div>
        <div class="column has-text-centered is-size-6 detail-item">
          {{ institucion.institucionCarrera.institucion.institucion }}
        </div>
        <div class="column has-text-centered is-size-6 detail-item">
          {{ institucion.institucionCarrera.carrera.carrera }}
        </div>
        <div class="column has-text-centered is-size-6 detail-item">
          <b-field>
            <b-tag
              class="is-size-6 tag"
              :class="choooseTag(institucion.activo)"
              >{{ institucion.activo ? 'Activo' : 'Inactivo' }}</b-tag
            >
          </b-field>
        </div>
      </div>
    </template>
    <template #empty>
      <div class="has-text-centered">
        <p class="is-size-6">No hay usuarios</p>
      </div>
    </template>
  </b-table>
</template>

<script>
// import TablaEquiCarritos from '@/components/operador/TablaEquiCarritos'

export default {
  // components: { TablaEquiCarritos },
  props: {
    operador: { type: Object, required: true },
    usuarios: { type: Array, require: true },
    isLoadingTable: { type: Boolean, require: true },
    page: { type: Number, required: true },
    onPageChange: { type: Function, require: true },
    total: { type: Number, required: true },
  },
  data() {
    return {
      selectedUsuario: {},
    }
  },
  methods: {
    choooseTag(activo) {
      const style = {
        false: 'is-danger',
        true: 'is-success',
      }
      return style[activo]
    },
  },
  watch: {
    selectedUsuario() {
      this.$router.push({
        path:
          '/usuarios/buscar_usuario/' + this.selectedUsuario.usuario,
      })
    },
  },
}
</script>

<style>
.pointer {
  cursor: pointer;
}

.detail-item {
  padding: 0;
}
</style>