servicio_social_front/components/admin/programa/tablaResponsables.vue

<template>
  <div class="container mt-5">
    <p class="is-size-2 mb-5">Lista de responsables</p>
    <div class="columns">
      <div class="column is-3 mb-4 pb-4">
        <b-field>
          <b-input
            type="name"
            placeholder="Nombre"
            icon="account"
            rounded
            v-model="nombre"
          ></b-input>
        </b-field>
      </div>
      <div class="column is-3 mb-0">
        <b-field>
          <b-input
            placeholder="Correo electrónico"
            icon="school"
            rounded
            v-model="correo"
          >
          </b-input>
        </b-field>
      </div>
      <div class="buttons section pt-3 pl-5">
        <b-button type="is-info" @click="obtenerDatos(idStatus)">
          Buscar
        </b-button>
      </div>
    </div>
    <div class="columns mb-5">
      <section class="column is-12">
        <b-table
          :data="data"
          :loading="loading"
          hoverable
          striped
          paginated
          backend-pagination
          :total="total"
          :per-page="perPage"
          @page-change="onPageChange"
        >
          <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
            <span @click="verRegistro(props.row)">{{ props.row.nombre }}</span>
          </b-table-column>
          <b-table-column
            field="correo"
            label="Correo electrónico"
            v-slot="props"
            centered
          >
            <span @click="verRegistro(props.row)">{{ props.row.usuario }}</span>
          </b-table-column>
        </b-table>
      </section>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      idUsuario: '',
      data: [],
      total: '',
      loading: false,
      page: 1,
      perPage: 25,
      correo: '',
      nombre: '',
      idStatus: 1,
      token: {
        headers: {
          token: window.localStorage.getItem('token'),
        },
      },
    }
  },
  methods: {
    onPageChange(page) {
      this.page = page
      this.obtenerDatos()
    },
    obtenerDatos(idStatus) {
      this.loading = true
      this.data = []
      axios
        .get(
          `${process.env.api}/usuario/responsable?pagina=${this.page}&nombre=${this.nombre}&correo=${this.correo}`,
          this.token
        )
        .then((res) => {
          const servicios = res.data.servicios
          if (servicios.length !== 0) {
            for (let i = 0; i < servicios.length; i++) {
              this.data.push({
                nombre: servicios[i].nombre,
                usuario: servicios[i].usuario,
                idUsuario: servicios[i].idUsuario,
              })
            }
          }
          let currentTotal = servicios.length
          let contador
          for (let i = 0; i < res.data.registros / this.perPage + 1; i++) {
            contador = i
          }
          currentTotal = this.perPage * contador
          this.total = currentTotal
          this.loading = false
        })
        .catch((err) => {
          this.loading = false
          this.error(err.response.data.message)
        })
    },
    error(msj) {
      let salir = false
      switch (msj) {
        case 'invalid signature':
          msj = 'Tu token no es valido, inicia sesión de nuevo.'
          salir = true
          break
        case 'jwt expired':
          msj = 'Tu sesión ha expirado, inicia sesión de nuevo.'
          salir = true
          break
        case 'jwt malformed':
          msj = 'No se encontro tu token, inicia sesión de nuevo.'
          salir = true
          break
        case 'No hay token':
          msj = 'Ocurrio un error al enviar tu token, inicia sesión de nuevo.'
          salir = true
          break
      }

      this.$buefy.dialog.alert({
        title: 'Error',
        message: msj,
        type: 'is-danger',
        hasIcon: true,
        icon: 'alert-circle',
        iconPack: 'mdi',
        ariaRole: 'alertdialog',
        ariaModal: true,
      })
      if (salir == true) {
        localStorage.clear()
        this.$router.push(`/`)
      }
    },
    insertIdLocal() {
      this.idUsuario = localStorage.getItem('idUsuario')
    },
    verRegistro(responsable) {
      localStorage.setItem('correo', responsable.usuario)
      localStorage.setItem('idResponsable', responsable.idUsuario)
      localStorage.setItem('nombre', responsable.nombre)
      this.$router.push('/admin/programa/infoResponsable')
    },
  },
  computed: {
    busquedaNombreResponsable() {
      return this.responsables.filter((responsables) =>
        responsables.nombreResp.includes(this.buscarNombreResponsable)
      )
    },
  },
  async created() {
    await this.obtenerDatos()
    this.insertIdLocal()
  },
}
</script>

<style scoped>
.b-table {
  cursor: pointer;
}
.input:focus {
  border: #1b3d70;
  box-shadow: 0 0 8px 0 #1b3d70;
}
.select select:focus {
  border-color: #1b3d70;
  box-shadow: 0 0 8px 0 #1b3d70;
}
.select:not(.is-multiple):not(.is-loading)::after {
  border-color: #1b3d70;
}
.pagination-link.is-current {
  background-color: #1b3d70;
  border-color: #1b3d70;
}
</style>