inscripciones_front/components/admin/datosTicket.vue

<template>
  <div class="box">
    <p class="pb-2"><b>Número de cuenta: </b> {{ numeroCuenta }}</p>

    <b-field label="Folio" horizontal grouped>
      <b-input v-model="folioA" :disabled="switchFolio" maxlength="7"></b-input>
      <p class="control">
        <b-button
          type="is-primary"
          icon-left="pencil"
          @click="habilitar('folio')"
        >
        </b-button>
      </p>
    </b-field>

    <b-field label="Cantidad" horizontal>
      <b-input v-model="montoA" :disabled="switchMonto" maxlength="5"></b-input>
      <p class="control">
        <b-button
          type="is-primary"
          icon-left="pencil"
          @click="habilitar('monto')"
        >
        </b-button>
      </p>
    </b-field>

    <b-field label="Fecha del ticket" horizontal>
      <b-datepicker
        v-model="fechaTicketA"
        :disabled="switchFecha"
        icon="calendar-today"
      >
      </b-datepicker>
      <p class="control">
        <b-button
          type="is-primary"
          icon-left="pencil"
          @click="habilitar('fecha')"
        >
        </b-button>
      </p>
    </b-field>

    <div class="has-text-centered pb-2">
      <b-button
        :disabled="!habilitarBoton"
        type="is-success"
        @click="
          imprimirWarning(
            '¿Estas seguro de querer actualizar esta información?',
            actualizarTicket
          )
        "
        >Actualizar datos</b-button
      >
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    imprimirMensaje: { type: Function, require: true },
    imprimirError: { type: Function, require: true },
    imprimirWarning: { type: Function, required: true },
    updateIsLoading: { type: Function, require: true },
    folio: { type: String, require: true },
    monto: { type: String, require: true },
    token: { type: Object, require: true },
    fechaTicket: { type: Date, require: true },
  },
  data() {
    return {
      numeroCuenta: localStorage.getItem('noCuenta'),

      switchFolio: true,
      switchMonto: true,
      switchFecha: true,

      folioA: '',
      montoA: '',
      fechaTicketA: null,

      habilitarBoton: false,
    }
  },
  methods: {
    habilitar(tipo) {
      tipo == 'folio' && this.switchFolio == true
        ? (this.switchFolio = false)
        : (this.switchFolio = true)

      tipo == 'monto' && this.switchMonto == true
        ? (this.switchMonto = false)
        : (this.switchMonto = true)

      tipo == 'fecha' && this.switchFecha == true
        ? (this.switchFecha = false)
        : (this.switchFecha = true)
    },
    actualizarTicket() {
      const data = {
        idInscripcion: Number(localStorage.getItem('inscripcion')),
        folio: this.folioA,
        monto: this.montoA,
        fechaTicket: this.fechaTicketA,
      }

      this.updateIsLoading(true)
      axios
        .put(`${process.env.api}/admin/actualizar_ticket`, data, this.token)
        .then((res) => {
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
          this.bloquearBotones()
          localStorage.setItem('monto', this.montoA)
          localStorage.setItem('folio', this.folioA)
          localStorage.setItem('fechaTicket', this.fechaTicketA)
          this.$emit('actualizarFolio')
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
    bloquearBotones() {
      this.habilitarBoton = false
      this.switchFolio = true
      this.switchMonto = true
      this.switchFecha = true
    },
  },
  watch: {
    folioA() {
      this.habilitarBoton = true
    },
    montoA() {
      this.habilitarBoton = true
    },
    fechaTicketA() {
      this.habilitarBoton = true
    },
  },
  created() {
    ;(this.folioA = this.folio),
      (this.montoA = this.monto),
      (this.fechaTicketA = this.fechaTicket)
  },
}
</script>