pcpuma_unam_operador/components/operador/BuscarCarrito.vue

<template>
  <div class="box">
    <div class="columns is-align-items-flex-end">
      <b-field class="column pb-0" field="modulo" label="Módulo">
        <b-select v-model="idModulo" icon="storefront-outline" rounded expanded>
          <option disabled>Módulo</option>
          <option
            v-for="(modulo, index) in modulos"
            :value="modulo.id_modulo"
            :key="index"
          >
            {{ modulo.modulo }}
          </option>
        </b-select>
      </b-field>

      <b-field class="column pb-0" field="carrito" label="Carrito">
        <b-select
          v-model="idCarrito"
          icon="storefront-outline"
          rounded
          expanded
        >
          <optgroup label="Carritos de Crome">
            <option
              :disabled="!idModulo"
              v-for="(carrito, index) in carritosC"
              :value="carrito.id_carrito"
              :key="index"
            >
              {{ carrito.carrito }}
            </option>
          </optgroup>

          <optgroup label="Carritos de Laptop">
            <option
              :disabled="!idModulo"
              v-for="(carrito, index) in carritosL"
              :value="carrito.id_carrito"
              :key="index"
            >
              {{ carrito.carrito }}
            </option>
          </optgroup>

          <optgroup label="Carritos de Ipad">
            <option
              :disabled="!idModulo"
              v-for="(carrito, index) in carritosI"
              :value="carrito.id_carrito"
              :key="index"
            >
              {{ carrito.carrito }}
            </option>
          </optgroup>
        </b-select>
      </b-field>

      <div class="column">
        <b-button
          type="is-success"
          :disabled="!idCarrito"
          @click="buscar()"
          rounded
          expanded
        >
          Buscar
        </b-button>
      </div>
    </div>

    <div class="columns">
      <InfoCarrito :carrito="carrito" />

      <AdminCarrito
        :operador="operador"
        :carrito="carrito"
        :updateIsLoading="updateIsLoading"
        :buscar="buscar"
      />
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import AdminCarrito from '@/components/operador/AdminCarrito'
import InfoCarrito from '@/components/operador/InfoCarrito'

export default {
  components: { AdminCarrito, InfoCarrito },
  data() {
    return {
      modulos: [],
      idModulo: '',
      carritosC: [],
      carritosL: [],
      carritosI: [],
      idCarrito: '',
    }
  },
  props: {
    operador: { type: Object, required: true },
    carrito: { type: Object, required: true },
    updateIsLoading: { type: Function, required: true },
    updateCarrito: { type: Function, required: true },
  },
  methods: {
    buscar() {
      if (this.idCarrito || this.carrito.id_carrito) {
        this.updateIsLoading(true)
        axios
          .get(
            `${process.env.api}/carrito/carrito?id_carrito=${
              this.idCarrito || this.carrito.id_carrito
            }`
          )
          .then((res) => {
            this.updateCarrito(res.data)
            this.updateIsLoading(false)
            this.$router.push({
              path: '../buscar_carrito/' + this.idCarrito,
            })
          })
          .catch((err) => {
            this.updateIsLoading(false)
            this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
          })
      }
    },
    obtenerModulosInstitucion() {
      axios
        .get(
          `${process.env.api}/modulo/modulos?id_institucion=${this.operador.institucion.id_institucion}`,
          this.token
        )
        .then((res) => {
          this.modulos = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerCarritos() {
      for (let i = 0; i < 3; i++) {
        axios
          .get(
            `${process.env.api}/carrito/carritos?pagina=1&id_institucion=${
              this.operador.institucion.id_institucion
            }&id_modulo=${this.idModulo}&id_tipo_carrito=${i + 1}`,
            this.token
          )
          .then((res) => {
            if (i + 1 === 1) this.carritosC = res.data[0]
            if (i + 2 === 2) this.carritosL = res.data[0]
            else this.carritosI = res.data[0]
          })
          .catch((err) => {
            this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
          })
      }
    },
  },
  watch: {
    idModulo() {
      this.obtenerCarritos()
    },
  },
  created() {
    this.obtenerModulosInstitucion()
    this.idCarrito = this.$route.params.carrito
    if (this.idCarrito) this.buscar()
  },
}
</script>

<style></style>