pcpuma_unam_operador/components/operador/TablaPrestamos.vue

<template>
  <b-table
    :data="data"
    :total="total"
    :current-page="page"
    :per-page="25"
    :loading="isLoadingTable"
    :row-class="(row, index) => pintarFila(row)"
    @page-change="onPageChange"
    class="mb-6"
    hoverable
    striped
    paginated
    backend-pagination
  >
    <b-table-column
      v-if="columnaIdPrestamo"
      field="idPrestamo"
      label="Número de Préstamo"
      v-slot="props"
      centered
    >
      {{ props.row.idPrestamo }}
    </b-table-column>

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

    <b-table-column
      field="numeroCuenta"
      label="Número de Cuenta"
      v-slot="props"
      v-if="columnaNumeroCuenta"
      centered
    >
      <span>{{ props.row.Usuario.usuario }}</span>
    </b-table-column>

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

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

    <b-table-column
      field="operadorEntrega"
      label="Operador Entrega"
      v-slot="props"
      v-if="columnaOperadores"
      centered
    >
      <span v-if="props.row.OperadorEntrega">
        {{ props.row.OperadorEntrega.operador }}
      </span>

      <span v-else>-</span>
    </b-table-column>

    <b-table-column
      field="operadorRegreso"
      label="Operador Regreso"
      v-slot="props"
      v-if="columnaOperadores"
      centered
    >
      <span v-if="props.row.OperadorRegreso">
        {{ props.row.OperadorRegreso.operador }}
      </span>

      <span v-else>-</span>
    </b-table-column>

    <b-table-column
      field="modulo"
      label="Módulo"
      v-slot="props"
      v-if="columnaModulo"
      centered
    >
      <span>{{ props.row.Equipo.Carrito.Modulo.modulo }}</span>
    </b-table-column>

    <b-table-column
      field="carrito"
      label="Carrito"
      v-slot="props"
      v-if="columnaCarrito"
      centered
    >
      <span>{{ props.row.Equipo.Carrito.carrito }}</span>
    </b-table-column>

    <b-table-column
      field="equipo"
      label="Equipo"
      v-slot="props"
      v-if="columnaEquipo"
      centered
    >
      <span>{{ props.row.Equipo.equipo }}</span>
    </b-table-column>

    <b-table-column
      field="numero Inventario"
      label="Número de Inventario"
      v-slot="props"
      v-if="columnaNumeroInventario"
      centered
    >
      <span>{{ props.row.Equipo.numeroInventario }}</span>
    </b-table-column>

    <b-table-column
      field="tipo"
      label="Tipo"
      v-slot="props"
      v-if="columnaTipo"
      centered
    >
      <span>{{ props.row.Equipo.Carrito.TipoCarrito.tipoCarrito }}</span>
    </b-table-column>

    <b-table-column
      field="horaInicio"
      label="Hora Inicio"
      v-slot="props"
      centered
    >
      <span v-if="props.row.horaInicio">{{ hora(props.row.horaInicio) }}</span>
      <span v-else>-</span>
    </b-table-column>

    <b-table-column
      field="horaFin"
      label="Hora Fin"
      v-slot="props"
      v-if="columnaHoraFin"
      centered
    >
      <span v-if="props.row.horaFin">
        {{ hora(props.row.horaFin) }}
      </span>

      <span v-else>-</span>
    </b-table-column>

    <b-table-column
      field="fechaFin"
      label="Fecha Regreso"
      v-slot="props"
      v-if="columnaHoraRegreso"
      centered
    >
      <span v-if="props.row.horaEntrega">
        {{ fechaHora(props.row.horaEntrega) }}
      </span>

      <span v-else>-</span>
    </b-table-column>

    <b-table-column
      field="enUso"
      label="En Uso"
      v-slot="props"
      v-if="columnaEnUso"
      centered
    >
      <span v-if="props.row.Equipo.Status.idStatus === 2">
        <b-icon icon="check" class="tag is-success" />
      </span>
    </b-table-column>

    <b-table-column
      field="regresoInmediato"
      label="Regreso Inmediato"
      v-slot="props"
      v-if="columnaregresoInmediato"
      centered
    >
      <span v-if="!columnaLiberar && props.row.regresoInmediato">
        <b-icon icon="check" class="tag is-success" />
      </span>

      <ColumnaLiberar
        :operador="operador"
        :prestamo="props.row"
        :imprimirError="imprimirError"
        :imprimirWarning="imprimirWarning"
        :imprimirMensaje="imprimirMensaje"
        :updateIsLoadingPage="updateIsLoadingPage"
        v-if="columnaLiberar && props.row.regresoInmediato === true"
      />
    </b-table-column>

    <b-table-column
      field="cancelar"
      label="Cancelar"
      v-slot="props"
      v-if="columnaBotonCancelar"
      centered
    >
      <ColumnaCancelarPrestamo
        :operador="operador"
        :prestamo="props.row"
        :imprimirError="imprimirError"
        :imprimirMensaje="imprimirMensaje"
        :updateIsLoadingPage="updateIsLoadingPage"
        v-if="!props.row.regresoInmediato"
      />
    </b-table-column>

    <b-table-column
      field="canceladoOperador"
      label="Cancelación Operador"
      v-slot="props"
      v-if="columnaCanceladoOperador"
      centered
    >
      <span v-if="props.row.canceladoOperador">
        <b-icon icon="check" class="tag is-danger" />
      </span>
    </b-table-column>

    <b-table-column
      field="canceladoUsuario"
      label="Cancelación Usuario"
      v-slot="props"
      v-if="columnaCanceladoUsuario"
      centered
    >
      <span v-if="props.row.canceladoUsuario">
        <b-icon icon="check" class="tag is-danger" />
      </span>
    </b-table-column>
  </b-table>
</template>

<script>
import moment from 'moment'
import ColumnaCancelarPrestamo from '@/components/operador/ColumnaCancelarPrestamo'
import ColumnaLiberar from '@/components/operador/ColumnaLiberar'

export default {
  components: { ColumnaCancelarPrestamo, ColumnaLiberar },
  props: {
    operador: {
      type: Object,
      required: false,
      default: () => ({}),
    },
    isLoadingTable: {
      type: Boolean,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    },
    page: {
      type: Number,
      required: true,
    },
    onPageChange: {
      type: Function,
      require: true,
    },
    total: {
      type: Number,
      required: true,
    },
    columnaNumeroCuenta: {
      type: Boolean,
      require: false,
      default: false,
    },
    columnaNombre: {
      type: Boolean,
      require: false,
      default: false,
    },
    columnaCarrera: {
      type: Boolean,
      require: false,
      default: false,
    },
    columnaOperadores: {
      type: Boolean,
      require: false,
      default: false,
    },
    columnaNumeroInventario: {
      type: Boolean,
      require: false,
      default: false,
    },
    columnaTipo: {
      type: Boolean,
      require: false,
      default: false,
    },
    columnaCarrito: {
      type: Boolean,
      require: false,
      default: false,
    },
    columnaEquipo: {
      type: Boolean,
      require: false,
      default: false,
    },
    columnaModulo: {
      type: Boolean,
      require: false,
      default: false,
    },
    columnaHoraRegreso: {
      type: Boolean,
      require: false,
      default: false,
    },
    columnaHoraFin: {
      type: Boolean,
      require: false,
      default: false,
    },
    columnaIdPrestamo: {
      type: Boolean,
      require: false,
      default: false,
    },
    columnaEnUso: {
      type: Boolean,
      require: false,
      default: false,
    },
    columnaBotonCancelar: {
      type: Boolean,
      require: false,
      default: false,
    },
    columnaCanceladoOperador: {
      type: Boolean,
      require: false,
      default: false,
    },
    columnaCanceladoUsuario: {
      type: Boolean,
      require: false,
      default: false,
    },
    columnaregresoInmediato: {
      type: Boolean,
      require: false,
      default: false,
    },
    columnaLiberar: {
      type: Boolean,
      require: false,
      default: false,
    },
    filaRetraso: {
      type: Boolean,
      require: false,
      default: false,
    },
    filaActivo: {
      type: Boolean,
      require: false,
      default: false,
    },
    imprimirError: {
      type: Function,
      required: false,
      default: () => {},
    },
    imprimirWarning: {
      type: Function,
      required: false,
      default: () => {},
    },
    imprimirMensaje: {
      type: Function,
      required: false,
      default: () => {},
    },
    updateIsLoadingPage: {
      type: Function,
      required: false,
      default: () => {},
    },
  },
  methods: {
    fecha(date) {
      const fecha = moment(date)

      return fecha.isValid() ? fecha.format('YYYY-MM-DD') : ''
    },
    hora(date) {
      const fecha = moment(date)

      return fecha.isValid() ? fecha.format('HH:mm') : ''
    },
    fechaHora(date) {
      const fecha = moment(date)

      return fecha.isValid() ? fecha.format('YYYY-MM-DD HH:mm') : ''
    },
    pintarFila(row) {
      if (this.filaRetraso) return this.retraso(row)
      else if (this.filaActivo) return this.activo(row)
      return ''
    },
    retraso(row) {
      const now = moment()
      const horaFin = moment(row.horaFin)
      const quinceMin = moment(row.horaFin).add(15, 'm')

      if (now > horaFin && !row.regresoInmediato) {
        if (now < quinceMin) return 'posible-multa'
        return 'retraso'
      }
      return ''
    },
    activo(row) {
      if (row.activo) return 'activo'
      return ''
    },
  },
}
</script>

<style>
.retraso {
  background: #ff7373 !important;
}

.retraso:hover {
  background: #e06464 !important;
}

.posible-multa {
  background: #ffe08a !important;
}

.posible-multa:hover {
  background: #fbdb7d !important;
}

.activo {
  background-color: #3fc36d !important;
}

.activo:hover {
  background-color: #35a058 !important;
}
</style>