pcpuma_unam_operador/components/operador/usuarios/MultaModalAdmin.vue

<template>
  <form class="modal-card">
    <header class="modal-card-head">
      <h5 class="modal-card-title">Multas</h5>
    </header>

    <section class="modal-card-body">
      <b-field label="Número de Préstamo:">
        <b-input type="input" v-model="idPrestamo" expanded />
      </b-field>

      <b-field label="Infracción cometida por el usuario:">
        <b-select placeholder="Seleccionar" v-model="idInfraccion" expanded>
          <option value="" disabled>Selecciona una opción</option>
          <option
            v-for="(i, index) in infracciones"
            :key="index"
            :value="i.id_institucion_infraccion"
          >
            {{ i.infraccion.infraccion }}
          </option>
        </b-select>
      </b-field>

      <b-field label="Motivos por los que desea multar al usuario:">
        <b-input
          type="textarea"
          maxlength="500"
          v-model="descripcion"
          expanded
        />
      </b-field>
    </section>

    <footer
      class="modal-card-foot"
      style="display: flex; justify-content: space-between"
    >
      <b-button type="is-danger" @click="$emit('close')"> Cancelar </b-button>

      <b-button
        type="is-success"
        @click="
          multaPrestamo()
          $emit('close')
        "
        :disabled="!idInfraccion || !descripcion || !idPrestamo"
      >
        Enviar
      </b-button>
    </footer>
  </form>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    operador: { type: Object, required: true },
    usuario: { type: Object, required: true },
    updateIsLoading: { type: Function, required: true },
    buscar: { type: Function, required: true },
  },
  data() {
    return {
      idPrestamo: '',
      idInfraccion: '',
      descripcion: '',
      infracciones: [],
    }
  },
  methods: {
    multaPrestamo() {
      const data = {
        id_institucion_infraccion: this.idInfraccion,
        id_operador: this.operador.id_operador,
        id_prestamo: Number(this.idPrestamo),
        descripcion: this.descripcion,
      }

      this.updateIsLoading(true)
      return axios
        .post(`${process.env.api}/multa`, data, this.$getToken.token())
        .then((res) => {
          this.buscar()
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerInfracciones() {
      axios
        .get(
          `${process.env.api}/institucion-infraccion/infracciones?id_institucion=${this.operador.institucion.id_institucion}`,
          this.$getToken.token()
        )
        .then((res) => {
          this.infracciones = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
  created() {
    this.obtenerInfracciones()
  },
}
</script>