pcpuma_unam_operador/components/operador/TablaCarritosTodos.vue

<template>
  <div>
    <div class="columns is-align-items-flex-end pl-0 pb-4">
      <b-field class="column mb-0 pb-0" field="carrito" label="Carrito">
        <b-input
          placeholder="Carrito"
          v-model="carrito"
          rounded
          @keyup.enter.native="obtenerCarritos"
        />
      </b-field>

      <b-field
        class="column mb-0 pb-0"
        field="tipoCarrito"
        label="Tipo Carrito"
      >
        <b-select v-model="idTipoCarrito" rounded expanded>
          <option disabled>Tipo carrito</option>
          <option
            v-for="tipo_carrito in tipoCarrito"
            :value="tipo_carrito.id_tipo_carrito"
            :key="tipo_carrito.id_tipo_carrito"
          >
            {{ tipo_carrito.tipo_carrito }}
          </option>
        </b-select>
      </b-field>

      <b-button
        class="column mb-0"
        type="is-info"
        @click="obtenerCarritos"
        rounded
        expanded
        >Buscar</b-button
      >
    </div>

    <b-table
      :data="data"
      :loading="isLoadingTable"
      :selected.sync="selectedCarrito"
      :row-class="(row, index) => 'pointer'"
      class="mb-6"
      show-detail-icon
      paginated
      detailed
    >
      <b-table-column field="carrito" label="Carrito" v-slot="props" centered>
        <span>{{ props.row.carrito }}</span>
      </b-table-column>

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

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

      <b-table-column field="tipo" label="Tipo" v-slot="props" centered>
        <span class="is-size-6 tag" :class="choooseTag(props.row.activo)">{{
          props.row.activo ? 'Activo' : 'Inactivo'
        }}</span>
      </b-table-column>

      <template #detail="props">
        <TablaEquiCarritos :equipo="props.row" />
      </template>
    </b-table>
  </div>
</template>

<script>
import axios from 'axios'
import TablaEquiCarritos from '@/components/operador/TablaEquiCarritos'

export default {
  components: { TablaEquiCarritos },
  props: {
    operador: { type: Object, required: true },
    imprimirError: { type: Function, required: true },
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
  },
  data() {
    return {
      tipoCarrito: [
        { id_tipo_carrito: 1, tipo_carrito: 'Chromebook' },
        { id_tipo_carrito: 2, tipo_carrito: 'iPad' },
        { id_tipo_carrito: 3, tipo_carrito: 'Laptop' },
      ],
      carrito: '',
      idTipoCarrito: 0,
      isLoadingTable: false,
      selectedCarrito: {},
      data: [],
    }
  },
  methods: {
    choooseTag(activo) {
      const style = {
        false: 'is-danger',
        true: 'is-success',
      }
      return style[activo]
    },
    obtenerCarritos() {
      let id_tipo_carrito = ''
      if (this.idTipoCarrito != 0)
        id_tipo_carrito = '&id_tipo_carrito=' + this.idTipoCarrito

      this.isLoadingTable = true
      axios
        .get(
          `${process.env.api}/carrito/carritos?pagina=1&id_institucion=${this.operador.institucion.id_institucion}&carrito=${this.carrito}${id_tipo_carrito}`
        )
        .then(async (res) => {
          this.data = res.data[0]
          this.isLoadingTable = false
        })
        .catch((err) => {
          this.isLoadingTable = false
          this.imprimirError(err.response.data)
        })
    },
  },
  watch: {
    selectedCarrito() {
      localStorage.setItem('carrito', this.selectedCarrito.id_carrito)
      this.$router.push({
        path: 'buscar_carrito/' + this.selectedCarrito.id_carrito,
      })
    },
  },
  created() {
    this.obtenerCarritos()
  },
}
</script>

<style>
.pointer {
  cursor: pointer;
}
</style>