pcpuma_unam_operador/components/tablas/TablaPrestamos.vue

<template>
  <b-table
    class="mb-6"
    :current-page="page"
    :data="data"
    :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
    >
      {{ props.row.id_prestamo }}
    </b-table-column>

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

    <b-table-column
      field="numeroCuenta"
      label="Número de Cuenta/Trabajador"
      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 v-for="(i, index) in props.row.usuario.instituciones" :key="index">
        {{ i.institucionCarrera.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.numero_inventario }}</span>
    </b-table-column>

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

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

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

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

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

    <b-table-column
      field="fecha_entrega"
      label="Fecha Regreso"
      v-slot="props"
      v-if="columnaHoraRegreso"
      centered
    >
      <span v-if="props.row.fecha_entrega">
        {{ fechaHora(props.row.fecha_entrega) }}
      </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.id_status === 3">
        <b-icon icon="check" class="tag is-success" />
      </span>
    </b-table-column>

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

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

    <b-table-column
      field="cancelado_usuario"
      label="Cancelación Usuario"
      v-slot="props"
      v-if="columnaCanceladoUsuario"
      centered
    >
      <span v-if="props.row.cancelado_usuario">
        <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'

export default {
  components: { ColumnaCancelarPrestamo },
  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,
      required: true,
    },
    total: {
      type: Number,
      required: true,
    },
    columnaNumeroCuenta: {
      type: Boolean,
      required: false,
      default: false,
    },
    columnaNombre: {
      type: Boolean,
      required: false,
      default: false,
    },
    columnaCarrera: {
      type: Boolean,
      required: false,
      default: false,
    },
    columnaOperadores: {
      type: Boolean,
      required: false,
      default: false,
    },
    columnaNumeroInventario: {
      type: Boolean,
      required: false,
      default: false,
    },
    columnaTipo: {
      type: Boolean,
      required: false,
      default: false,
    },
    columnaCarrito: {
      type: Boolean,
      required: false,
      default: false,
    },
    columnaEquipo: {
      type: Boolean,
      required: false,
      default: false,
    },
    columnaModulo: {
      type: Boolean,
      required: false,
      default: false,
    },
    columnaHoraRegreso: {
      type: Boolean,
      required: false,
      default: false,
    },
    columnaHoraFin: {
      type: Boolean,
      required: false,
      default: false,
    },
    columnaIdPrestamo: {
      type: Boolean,
      required: false,
      default: false,
    },
    columnaEnUso: {
      type: Boolean,
      required: false,
      default: false,
    },
    columnaBotonCancelar: {
      type: Boolean,
      required: false,
      default: false,
    },
    columnaCanceladoOperador: {
      type: Boolean,
      required: false,
      default: false,
    },
    columnaCanceladoUsuario: {
      type: Boolean,
      required: false,
      default: false,
    },
    filaRetraso: {
      type: Boolean,
      required: false,
      default: false,
    },
    filaActivo: {
      type: Boolean,
      required: false,
      default: false,
    },
    updateIsLoadingPage: {
      type: Function,
      required: false,
      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.horaFin)
      const quinceMin = moment(row.horaFin).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>