pcpuma_unam_operador/components/crear/CrearCarrito.vue

<template>
  <section class="mb-6">
    <h3 class="is-size-4 mb-3">Crear carrito</h3>

    <div class="box">
      <div class="columns is-align-items-flex-end pl-0 pb-4">
        <SelectModulo
          columnSize="is-2"
          :idInstitucion="idInstitucion"
          :idModuloPadre="idModulo"
          @modulo-seleccionado="(nuevoModulo) => (idModulo = nuevoModulo)"
        />

        <SelectTipoCarrito
          tipo="c"
          :idTipoCarritoPadre="idTipoCarrito"
          @tipo-carrito-seleccionado="
            (nuevoTipoCarrito) => (idTipoCarrito = nuevoTipoCarrito)
          "
        />

        <SelectMarca
          tipo="c"
          :idMarcaPadre="idMarca"
          @marca-seleccionada="(nuevaMarca) => (idMarca = nuevaMarca)"
        />

        <SelectModelo
          tipo="c"
          :idModeloPadre="idModelo"
          @modelo-seleccionado="(nuevoModelo) => (idModelo = nuevoModelo)"
        />

        <BotonCrear
          columnSize="is-3"
          :disabled="!idMarca || !idModelo || !idModulo || !idTipoCarrito"
          :crear="warning"
        />
      </div>
    </div>
  </section>
</template>

<script>
import axios from 'axios'
import BotonCrear from '@/components/botones/BotonCrear'
import SelectMarca from '@/components/selects/SelectMarca'
import SelectModelo from '@/components/selects/SelectModelo'
import SelectModulo from '@/components/selects/SelectModulo'
import SelectTipoCarrito from '@/components/selects/SelectTipoCarrito'

export default {
  components: {
    BotonCrear,
    SelectMarca,
    SelectModelo,
    SelectModulo,
    SelectTipoCarrito,
  },
  props: {
    updateActualizarTabla: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
    idInstitucion: { type: Number, required: true, default: 0 },
  },
  data() {
    return {
      idMarca: 0,
      idModelo: 0,
      idModulo: 0,
      idTipoCarrito: 0,
    }
  },
  methods: {
    crearCarrito() {
      const data = {
        id_marca: this.idMarca,
        id_modelo: this.idModelo,
        id_modulo: this.idModulo,
        id_tipo_carrito: this.idTipoCarrito,
      }

      this.updateIsLoading(true)
      axios
        .post(`${process.env.api}/carrito`, data, this.$getToken.token())
        .then((res) => {
          this.idMarca = 0
          this.idModelo = 0
          this.idModulo = 0
          this.idTipoCarrito = 0
          this.updateActualizarTabla(true)
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(
            this.$buefy,
            this.$router,
            err.response.data
          )
        })
    },
    warning() {
      if (this.idMarca || this.idModelo || this.idModulo || this.idTipoCarrito)
        this.$alertsGenericos.imprimirWarning(
          this.$buefy,
          '¿Esta segur@ de querer crear este carrito?',
          this.crearCarrito
        )
    },
  },
}
</script>