pcpuma_unam_operador/components/crear/CrearInfraccion.vue

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

    <div class="box">
      <div class="columns is-align-items-flex-end pl-0 pb-4">
        <b-field class="column mb-0 pb-0" label="Infracción">
          <b-input
            placeholder="Nombre de la infracción"
            type="text"
            @keyup.enter.native="warning()"
            v-model="infraccion"
            rounded
          />
        </b-field>

        <BotonCrear :disabled="!infraccion" :crear="warning" />
      </div>

      <b-collapse
        animation="slide"
        aria-id="contentIdForA11y3"
        class="card"
        v-model="activo"
      >
        <template #trigger>
          <div
            aria-controls="contentIdForA11y3"
            class="card-header"
            role="button"
            :aria-expanded="activo"
          >
            <p class="card-header-title">Tabla de infracciones</p>

            <a class="card-header-icon">
              <b-icon :icon="activo ? 'menu-down' : 'menu-up'" />
            </a>
          </div>
        </template>

        <TablaOpcionesCreadas
          v-if="activo"
          :data="infracciones"
          :columnaInfraccion="true"
        />
      </b-collapse>
    </div>
  </section>
</template>

<script>
import axios from 'axios'
import BotonCrear from '@/components/botones/BotonCrear'
import TablaOpcionesCreadas from '@/components/admin/TablaOpcionesCreadas'

export default {
  components: { BotonCrear, TablaOpcionesCreadas },
  props: {
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      infracciones: [],
      activo: false,
      infraccion: '',
    }
  },
  methods: {
    obtenerCatalogoInfracciones() {
      axios
        .get(
          `${process.env.api}/institucion-infraccion/`,
          this.$getToken.token()
        )
        .then((res) => {
          this.infracciones = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    crearInfraccion() {
      const data = {
        infraccion: this.infraccion,
      }

      this.updateIsLoading(true)
      axios
        .post(
          `${process.env.api}/institucion-infraccion/`,
          data,
          this.$getToken.token()
        )
        .then((res) => {
          this.infraccion = ''
          this.obtenerCatalogoInfracciones()
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    warning() {
      if (this.infraccion)
        this.$alertsGenericos.imprimirWarning(
          this.$buefy,
          '¿Esta segur@ de querer crear esta infracción?',
          this.crearInfraccion
        )
    },
  },
  created() {
    this.obtenerCatalogoInfracciones()
  },
}
</script>