servicio_social_front/components/admin/TablaResponsables.vue

<template>
  <div>
    <h3 class="title">Tabla de responsables</h3>

    <div class="columns">
      <b-field class="column" label="Correo Electrónico">
        <b-input
          type="text"
          placeholder="Correo"
          icon="mail"
          @keyup.enter.native="obtenerResponsables()"
          v-model="search.correo"
          rounded
        />
      </b-field>

      <b-field class="column" label="Nombre">
        <b-input
          type="name"
          placeholder="Nombre"
          icon="account"
          @keyup.enter.native="obtenerResponsables()"
          v-model="search.nombre"
          rounded
        />
      </b-field>

      <b-field class="column is-align-self-center">
        <b-button
          type="is-info"
          @click="obtenerResponsables()"
          expanded
          rounded
        >
          Buscar
        </b-button>
      </b-field>
    </div>

    <b-table
      :data="data"
      :total="total"
      :current-page="page"
      :per-page="perPage"
      :loading="isLoading"
      :selected.sync="responsableSelected"
      :row-class="(row, index) => 'pointer'"
      @page-change="onPageChange"
      hoverable
      striped
      paginated
      backend-pagination
    >
      <b-table-column
        field="correo"
        label="Correo Electrónico"
        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="estado" label="Estado" v-slot="props" centered>
        <span class="tag" :class="style(props.row.activo)">
          {{ props.row.activo ? 'Activo' : 'Desactivado' }}
        </span>
      </b-table-column>
    </b-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    admin: { type: Object, required: true },
    imprimirError: { type: Function, required: true },
  },
  data() {
    return {
      isLoading: false,
      page: 1,
      perPage: 25,
      total: 0,
      data: [],
      responsableSelected: {},
      search: {},
      searchAnterior: {},
    }
  },
  methods: {
    style(activo) {
      if (activo) return 'is-success'
      else return 'is-danger'
    },
    onPageChange(page) {
      this.page = page
      this.obtenerResponsables()
    },
    obtenerResponsables() {
      let data = ''

      this.isLoading = true
      if (
        this.search.correo != this.searchAnterior.correo ||
        this.search.nombre != this.searchAnterior.nombre
      ) {
        this.page = 1
        this.searchAnterior.correo = this.search.correo
        this.searchAnterior.nombre = this.search.nombre
      }
      if (this.search.nombre) data += `&nombre=${this.search.nombre}`
      if (this.search.correo) data = `&correo=${this.search.correo}`
      axios
        .get(
          `${process.env.api}/usuario/responsables?pagina=${this.page}${data}`,
          this.admin.token
        )
        .then((res) => {
          this.data = res.data.responsables
          this.total = res.data.count
          this.isLoading = false
        })
        .catch((err) => {
          this.isLoading = false
          this.imprimirError(err.response.data)
        })
    },
  },
  watch: {
    responsableSelected() {
      localStorage.setItem('idResponsable', this.responsableSelected.idUsuario)
      this.$router.push(`/admin/responsables/responsable`)
    },
  },
  created() {
    if (this.admin.idTipoUsuario === 1) this.obtenerResponsables()
  },
}
</script>

<style scoped></style>