servicio_social_front/components/TablaServiciosSociales.vue

<template>
  <div>
    <b-table
      :data="data"
      :total="total"
      :current-page="page"
      :per-page="perPage"
      :selected.sync="servicioSelected"
      :loading="isLoading"
      :row-class="(row, index) => addPointer()"
      @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"
        v-if="columnaFechaInicio"
        centered
      >
        <span>{{ fecha(props.row.fechaInicio) }}</span>
      </b-table-column>

      <b-table-column
        field="fechaFin"
        label="Fecha Fin"
        v-slot="props"
        v-if="columnaFechaFin"
        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 moment from 'moment'

export default {
  data() {
    return {
      servicioSelected: {},
      perPage: 25,
    }
  },
  props: {
    idTipoUsuario: {
      type: Number,
      required: true,
    },
    isLoading: {
      type: Boolean,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    },
    page: {
      type: Number,
      required: true,
    },
    onPageChange: {
      type: Function,
      require: true,
    },
    total: {
      type: Number,
      required: true,
    },
    columnaFechaInicio: {
      type: Boolean,
      required: false,
      default: true,
    },
    columnaFechaFin: {
      type: Boolean,
      required: false,
      default: true,
    },
    path: {
      type: String,
      required: true,
    },
  },
  methods: {
    fecha(date) {
      if (date) {
        const fecha = moment(date)

        return `${fecha.date() < 10 ? '0' + fecha.date() : fecha.date()}/${
          fecha.month() < 9 ? '0' + (fecha.month() + 1) : fecha.month() + 1
        }/${fecha.year()}`
      }
      return ''
    },
    types(idStatus) {
      let style = 'tag'

      switch (idStatus) {
        case 1:
          style += ' is-dark'
          break
        case 2:
          style += ' is-info'
          break
        case 3:
          style += ' is-warning'
          break
        case 4:
          style += ' is-link'
          break
        case 5:
          style += ' is-success'
          break
        case 6:
          style += ' is-success is-light'
          break
        case 7:
        case 8:
        case 9:
        case 10:
          style += ' is-danger'
          break
        case 11:
          style += ' is-link is-light'
          break
        case 12:
          style += ' is-info is-light'
          break
        case 13:
        case 14:
          style += ' is-success is-light'
          break
      }
      return style
    },
    addPointer() {
      if (this.idTipoUsuario === 1) return 'pointer'
      return ''
    },
  },
  watch: {
    servicioSelected() {
      if (this.idTipoUsuario === 1) {
        if (this.path === '/admin/servicio')
          localStorage.setItem('idServicio', this.servicioSelected.idServicio)
        if (this.path === '/admin/casos_especiales/caso_especial')
          localStorage.setItem(
            'idCasoEspecial',
            this.servicioSelected.idCasoEspecial
          )
        this.$router.push(this.path)
      } else if (this.servicioSelected.idServicio) this.servicioSelected = {}
    },
  },
}
</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>