servicio_social_front/components/TablaServiciosSociales.vue

<template>
  <div>
    <b-table
      :data="data"
      :total="total"
      :current-page="page"
      :per-page="perPage"
      :loading="isLoading"
      :selected.sync="servicioSelected"
      :row-class="(row, index) => addPointer()"
      @page-change="onPageChange"
      hoverable
      striped
      paginated
      backend-pagination
    >
      <b-table-column
        field="fechaCreado"
        label="Fecha Registro"
        v-slot="props"
        v-if="columnaFechaCreado"
        centered
      >
        <span>{{ fecha(props.row.createdAt) }}</span>
      </b-table-column>

      <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="status" label="Status" v-slot="props" centered>
        <b-button
          type="is-danger"
          size="is-small"
          class="tag"
          @click="responsableUpdate(props.row, 'carta_aceptacion')"
          v-if="columnasResponsable && props.row.Status.idStatus === 7"
        >
          Carta Aceptación Rechazada
        </b-button>

        <span class="tag" :class="types(props.row.Status.idStatus)" v-else>
          {{ props.row.Status.status }}
        </span>
      </b-table-column>

      <b-table-column
        field="cartaTermino"
        label="Carta Término"
        v-slot="props"
        v-if="columnasResponsable"
        centered
      >
        <div
          v-if="
            props.row.Status.idStatus >= 4 &&
            props.row.Status.idStatus != 7 &&
            props.row.Status.idStatus != 10
          "
        >
          <b-icon
            class="tag is-success"
            icon="check"
            v-if="props.row.cartaTermino"
          />

          <b-button
            type="is-link is-light"
            class="tag"
            @click="responsableUpdate(props.row, 'carta_termino')"
            v-else
          >
            Carta Término
          </b-button>
        </div>
      </b-table-column>

      <b-table-column
        field="cuestionarioP"
        label="Cuestionario"
        v-slot="props"
        v-if="columnasResponsable"
        centered
      >
        <div
          v-if="
            props.row.Status.idStatus >= 4 &&
            props.row.Status.idStatus != 7 &&
            props.row.Status.idStatus != 10
          "
        >
          <b-icon
            class="tag is-success"
            icon="check"
            v-if="props.row.idCuestionarioPrograma || props.row.idCuestionarioPrograma2"
          />

          <b-button
            type="is-link is-light"
            class="tag"
            @click="responsableUpdate(props.row, 'cuestionario')"
            v-else
          >
            Cuestionario
          </b-button>
        </div>
      </b-table-column>
    </b-table>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  props: {
    columnaFechaCreado: {
      type: Boolean,
      required: false,
      default: true,
    },
    columnaFechaFin: {
      type: Boolean,
      required: false,
      default: true,
    },
    columnaFechaInicio: {
      type: Boolean,
      required: false,
      default: true,
    },
    columnasResponsable: {
      type: Boolean,
      required: false,
      default: false,
    },
    isLoading: {
      type: Boolean,
      required: true,
    },
    path: {
      type: String,
      required: false,
    },
    idTipoUsuario: {
      type: Number,
      required: true,
    },
    page: {
      type: Number,
      required: true,
    },
    total: {
      type: Number,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    },
    onPageChange: {
      type: Function,
      require: true,
    },
  },
  data() {
    return {
      servicioSelected: {},
      perPage: 25,
    }
  },
  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) {
      switch (idStatus) {
        case 1:
          return 'is-dark'
        case 2:
          return 'is-info'
        case 3:
          return 'is-warning'
        case 4:
          return 'is-link'
        case 5:
          return 'is-success'
        case 6:
          return 'is-success is-light'
        case 7:
        case 8:
        case 9:
        case 10:
          return 'is-danger'
        case 11:
          return 'is-link is-light'
        case 12:
          return 'is-info is-light'
        case 13:
        case 14:
          return 'is-success is-light'
      }
    },
    addPointer() {
      return this.idTipoUsuario === 1 ? 'pointer' : ''
    },
    responsableUpdate(servicio, path) {
      localStorage.setItem('idServicio', servicio.idServicio)
      this.$router.push(`/responsable/${path}`)
    },
  },
  watch: {
    servicioSelected() {
      if (this.idTipoUsuario === 1) {
        if (this.servicioSelected.idServicio)
          localStorage.setItem('idServicio', this.servicioSelected.idServicio)
        if (this.servicioSelected.idCasoEspecial)
          localStorage.setItem(
            'idCasoEspecial',
            this.servicioSelected.idCasoEspecial
          )
        this.$router.push(this.path)
      } else if (
        this.servicioSelected.idServicio ||
        this.servicioSelected.idCasoEspecial
      )
        this.servicioSelected = {}
    },
  },
}
</script>

<style scoped></style>