pcpuma_unam_operador/components/tablas/TablaPrestamos.vue

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

    <b-table-column
      field="institucion"
      label="Institución"
      v-slot="props"
      v-if="operador.tipoUsuario.id_tipo_usuario === 2"
      centered
    >
      <p>{{ props.row.equipo.carrito.modulo.institucion.institucion }}</p>
    </b-table-column>

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

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

    <b-table-column
      field="nombre"
      label="Nombre"
      v-slot="props"
      v-if="columnaNombre && operador.tipoUsuario.id_tipo_usuario > 2"
      centered
    >
      <p>{{ props.row.institucionUsuario.usuario.nombre }}</p>
    </b-table-column>

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

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

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

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

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

    <b-table-column
      field="modulo"
      label="Módulo"
      v-slot="props"
      v-if="columnaModulo"
      centered
    >
      <p>{{ props.row.equipo.carrito.modulo.modulo }}</p>
    </b-table-column>

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

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

    <b-table-column
      field="numero_inventario"
      label="Número de Inventario"
      v-slot="props"
      v-if="columnaNumeroInventario"
      centered
    >
      <p>{{ props.row.equipo.numero_inventario }}</p>
    </b-table-column>

    <b-table-column
      field="tipo_carrito"
      label="Tipo"
      v-slot="props"
      v-if="columnaTipo"
      centered
    >
      <p>{{ props.row.equipo.carrito.tipoCarrito.tipo_carrito }}</p>
    </b-table-column>

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

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

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

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

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

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

    <b-table-column
      field="cancelar"
      label="Cancelar"
      v-slot="props"
      v-if="columnaBotonCancelar && operador.tipoUsuario.id_tipo_usuario === 4"
      centered
    >
      <ColumnaCancelarPrestamo
        :prestamo="props.row"
        :updateIsLoadingPage="updateIsLoadingPage"
        v-if="props.row.equipo.status.id_status === 3"
      />
    </b-table-column>

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

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

<script>
import moment from 'moment'
import ColumnaCancelarPrestamo from '@/components/tablas/ColumnaCancelarPrestamo'

export default {
  components: { ColumnaCancelarPrestamo },
  props: {
    prestamos: { type: Array, required: true, default: () => [] },
    columnaBotonCancelar: { type: Boolean, required: false, default: false },
    columnaCarrera: { type: Boolean, required: false, default: false },
    columnaCarrito: { type: Boolean, required: false, default: false },
    columnaCanceladoOperador: {
      type: Boolean,
      required: false,
      default: false,
    },
    columnaCanceladoUsuario: { type: Boolean, required: false, default: false },
    columnaEquipo: { type: Boolean, required: false, default: false },
    columnaHoraFin: { type: Boolean, required: false, default: false },
    columnaHoraRegreso: { type: Boolean, required: false, default: false },
    columnaIdPrestamo: { type: Boolean, required: false, default: false },
    columnaModulo: { type: Boolean, required: false, default: false },
    columnaNombre: { type: Boolean, required: false, default: false },
    columnaNumeroCuenta: { type: Boolean, required: false, default: false },
    columnaNumeroInventario: { type: Boolean, required: false, default: false },
    columnaOperadores: { type: Boolean, required: false, default: false },
    columnaTipo: { type: Boolean, required: false, default: false },
    filaActivo: { type: Boolean, required: false, default: false },
    filaRetraso: { type: Boolean, required: false, default: false },
    isLoadingTable: { type: Boolean, required: true, default: false },
    onPageChange: { type: Function, required: true, default: () => {} },
    updateIsLoadingPage: { type: Function, required: false, default: () => {} },
    page: { type: Number, required: true, default: 0 },
    total: { type: Number, required: true, default: 0 },
    operador: { type: Object, required: true, default: () => ({}) },
  },
  methods: {
    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.hora_fin)
      const quinceMin = moment(row.hora_fin).add(15, 'm')

      if (now > horaFin) {
        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>