servicio_social_front/components/admin/inputTableA.vue

<template>
  <div>
    <h3 class="title">Servicios Sociales</h3>

    <div class="columns">
      <b-field class="column" label="Número de Cuenta">
        <b-input
          type="text"
          placeholder="No.Cuenta"
          icon="school"
          maxlength="9"
          v-model="busqueda.numeroCuenta"
          @keyup.enter.native="obtenerServicios()"
          rounded
        ></b-input>
      </b-field>

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

      <b-field class="column" label="Status">
        <b-select icon="information" v-model="busqueda.idStatus" rounded>
          <option value="">Status</option>
          <option
            v-for="(s, i) in status"
            :key="i"
            :value="s.idStatus"
            v-show="i < 10"
          >
            {{ s.status }}
          </option>
        </b-select>
      </b-field>

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

    <b-table
      :data="data"
      :total="total"
      :current-page="page"
      :per-page="perPage"
      :selected.sync="servicioSeleccionado"
      :loading="isLoading"
      :row-class="(row, index) => 'pointer'"
      @page-change="onPageChange"
      hoverable
      striped
      paginated
      backend-pagination
    >
      <b-table-column
        field="numeroCuenta"
        label="Número de Cuenta"
        v-slot="props"
        centered
      >
        <span>{{ props.row.Usuario.usuario }}</span>
      </b-table-column>

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

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

      <b-table-column
        field="fechaInicio"
        label="Fecha Inicio"
        v-slot="props"
        centered
      >
        <span>{{ fecha(props.row.fechaInicio) }}</span>
      </b-table-column>

      <b-table-column
        field="fechaFin"
        label="Fecha Fin"
        v-slot="props"
        centered
      >
        <span>{{ fecha(props.row.fechaFin) }}</span>
      </b-table-column>

      <b-table-column
        field="fechaCreado"
        label="Día de Creación"
        v-slot="props"
        centered
      >
        <span>{{ fecha(props.row.createdAt) }}</span>
      </b-table-column>

      <b-table-column field="status" label="Status" v-slot="props" centered>
        <span :class="types(props.row.Status.idStatus)">{{
          props.row.Status.status
        }}</span>
      </b-table-column>
    </b-table>
  </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment'

export default {
  data() {
    return {
      admin: {},
      servicioSeleccionado: {},
      status: [],
      data: [],
      page: 1,
      perPage: 25,
      total: 0,
      isLoading: false,
      busqueda: {
        idStatus: '',
      },
      busquedaAnterior: {},
      token: {},
    }
  },
  methods: {
    types(idStatus) {
      let style = 'tag'

      if (idStatus === 1) style += ' is-dark'
      if (idStatus === 2) style += ' is-info'
      if (idStatus === 3) style += ' is-warning'
      if (idStatus === 4) style += ' is-link'
      if (idStatus === 5) style += ' is-success'
      if (idStatus === 6) style += ' is-success is-light'
      if (idStatus >= 7 && idStatus <= 9) style += ' is-danger'
      return style
    },
    fecha(date) {
      const fecha = moment(date.substr(0, 10))

      return `${fecha.date()}/${fecha.month() + 1}/${fecha.year()}`
    },
    onPageChange(page) {
      this.page = page
      this.obtenerServicios()
    },
    getLocalhostInfo() {
      this.admin.idUsuario = localStorage.getItem('idUsuario')
      this.admin.idTipoUsuario = Number(localStorage.getItem('idTipoUsuario'))
      this.admin.tipoUsuario = localStorage.getItem('tipoUsuario')
      this.token = {
        headers: {
          token: localStorage.getItem('token'),
        },
      }
    },
    obtenerServicios() {
      let data = ''

      this.isLoading = true
      if (
        this.busqueda.numeroCuenta != this.busquedaAnterior.numeroCuenta ||
        this.busqueda.nombre != this.busquedaAnterior.nombre ||
        this.busqueda.idStatus != this.busquedaAnterior.idStatus
      ) {
        this.page = 1
        this.busquedaAnterior.numeroCuenta = this.busqueda.numeroCuenta
        this.busquedaAnterior.nombre = this.busqueda.nombre
        this.busquedaAnterior.idStatus = this.busqueda.idStatus
      }
      if (this.busqueda.idStatus) data += `&idStatus=${this.busqueda.idStatus}`
      if (this.busqueda.nombre) data += `&nombre=${this.busqueda.nombre}`
      if (this.busqueda.numeroCuenta)
        data += `&numeroCuenta=${this.busqueda.numeroCuenta}`
      axios
        .get(
          `${process.env.api}/servicio/servicios_admin?&pagina=${this.page}${data}`,
          this.token
        )
        .then((res) => {
          this.data = res.data.serviciosAdmin
          this.total = res.data.count
          this.isLoading = false
        })
        .catch((err) => {
          this.isLoading = false
          this.imprimirError(err.response.data)
        })
    },
    obtenerCatalogoStatus() {
      axios
        .get(`${process.env.api}/status`, this.token)
        .then((res) => {
          this.status = res.data
        })
        .catch((err) => {
          this.imprimirError(err.response.data)
        })
    },
    imprimirError(err) {
      this.$buefy.dialog.alert({
        title: 'Error',
        message: err.message,
        type: 'is-danger',
        hasIcon: true,
        icon: 'alert-circle',
        ariaRole: 'alertdialog',
        ariaModal: true,
      })
      if (err.err === 'token error') {
        localStorage.clear()
        this.$router.push('/')
      }
    },
  },
  watch: {
    servicioSeleccionado() {
      localStorage.setItem('idServicio', this.servicioSeleccionado.idServicio)
      this.$router.push(`/admin/servicio`)
    },
  },
  created() {
    this.getLocalhostInfo()
    if (this.admin.idTipoUsuario === 1) {
      this.obtenerCatalogoStatus()
      this.obtenerServicios()
    }
  },
}
</script>

<style>
.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;
}

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