pcpuma_unam_operador/components/operador/CrearCarrito.vue

<template>
  <div class="box">
    <dir class="columns is-align-items-flex-end pl-0 pb-4">
      <b-field class="column mb-0 pb-0" field="modulo" label="Módulo">
        <b-select v-model="idModulo" icon="storefront-outline" rounded expanded>
          <option disabled :value="null">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 mb-0 pb-0"
        field="tipoCarrito"
        label="Tipo Carrito"
      >
        <b-select v-model="idTipoCarrito" icon="monitor-share" rounded expanded>
          <option disabled :value="null">Tipo carrito</option>
          <option
            v-for="tipo_carrito in tiposCarritos"
            :value="tipo_carrito.id_tipo_carrito"
            :key="tipo_carrito.id_tipo_carrito"
          >
            {{ tipo_carrito.tipo_carrito }}
          </option>
        </b-select>
      </b-field>

      <b-field class="column mb-0 pb-0" field="modelo" label="Modelo">
        <b-select v-model="modelo" icon="monitor-share" rounded expanded>
          <option disabled :value="null">Modelo</option>
          <option
            v-for="(modelo, index) in modelos"
            :value="modelo.modelo"
            :key="index"
          >
            {{ modelo.modelo }}
          </option>
        </b-select>
      </b-field>

      <b-field class="column mb-0 pb-0" field="modelo" label="Modelo">
        <b-select v-model="modelo" icon="monitor-share" rounded expanded>
          <option disabled :value="null">Marca</option>
          <option
            v-for="(marca, index) in marcas"
            :value="marca.marca"
            :key="index"
          >
            {{ marca.marca }}
          </option>
        </b-select>
      </b-field>

      <b-button
        class="column"
        label="Crear"
        type="is-info"
        @click="
          $alertsGenericos.imprimirWarning(
            $buefy,
            '¿Esta segur@ de querer crear este módulo?',
            crearCarrito
          )
        "
        :disabled="!(idModulo && idTipoCarrito && modelo && marca)"
        expanded
        rounded
      />
    </dir>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    institucion: { type: Object, required: true },
    updateActualizarTabla: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      modulos: [],
      idModulo: null,
      tiposCarritos: [],
      idTipoCarrito: null,
      modelos: [],
      modelo: null,
      marcas: [],
      marca: null,
    }
  },
  methods: {
    crearCarrito() {
      let data = {
        id_modulo: this.idModulo,
        id_tipo_carrito: this.idTipoCarrito,
        marca: this.marca,
        modelo: this.modelo,
      }

      this.updateIsLoading(true)
      axios
        .post(`${process.env.api}/carrito`, data, this.$getToken.token())
        .then((res) => {
          this.idModulo = null
          this.idTipoCarrito = null
          this.modelo = ''
          this.marca = ''
          this.updateIsLoading(false)
          this.updateActualizarTabla(true)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerCatalogoModulo() {
      axios
        .get(
          `${process.env.api}/modulo/modulos?id_institucion=${this.institucion.id_institucion}`,
          this.$getToken.token()
        )
        .then((res) => {
          this.modulos = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerCatalogoTiposCarritos() {
      axios
        .get(
          `${process.env.api}/institucion-tipo-carrito/`,
          this.$getToken.token()
        )
        .then((res) => {
          this.tiposCarritos = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerCatalogoModelo() {
      axios
        .get(`${process.env.api}/modelo?tipo=c`, this.$getToken.token())
        .then((res) => {
          this.modelos = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerCatalogoMarca() {
      axios
        .get(`${process.env.api}/marca?tipo=c`, this.$getToken.token())
        .then((res) => {
          this.marcas = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
  created() {
    this.obtenerCatalogoModulo()
    this.obtenerCatalogoTiposCarritos()
    this.obtenerCatalogoModelo()
    this.obtenerCatalogoMarca()
  },
}
</script>