inscripciones_front/components/admin/ticket.vue

<template>
  <div class="columns px-2">
    <div class="column is-one-third py-5">
      <figure class="containerImg">
        <b-image class="zoom" :src="urlTicket" alt="Imagen del ticket">
          <b-loading :is-full-page="isFullPage" v-model="isLoading">
          </b-loading>
        </b-image>
      </figure>
    </div>

    <div class="column is-1"></div>

    <div class="column mt-6">
      <p>
        Administrador por favor revisa que todos los datos sean correctos, en
        caso de ser así valida el ticket.
      </p>
      <p>
        Recuerda que al validar el ticket también se confirma la inscripción del
        alumno.
      </p>

      <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="$route.query.folio"
            :disabled="switchFolio"
          ></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="$route.query.monto"
            :disabled="switchMonto"
          ></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="fechaTicket" :disabled="switchFecha">
          </b-datepicker>
          <p class="control">
            <b-button
              type="is-primary"
              icon-left="pencil"
              @click="habilitar('fecha')"
            >
            </b-button>
          </p>
        </b-field>
      </div>
      <div class="has-text-centered pb-5">
        <b-button
          type="is-success"
          @click="
            validacion(1),
              imprimirWarning(
                '¿ Estas seguro que los datos son correctos y quieres validar este ticket ?',
                validar
              )
          "
          >Validar</b-button
        >
        <b-button
          type="is-danger"
          @click="
            validacion(0),
              imprimirWarning(
                '¿ Estas seguro que los datos son incorrectos y quieres declinar el ticket ?',
                validar
              )
          "
          >Denegar</b-button
        >
        <b-button type="is-info" @click="regresar()">Regresar</b-button>
      </div>
    </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 },
  },
  data() {
    return {
      token: '',

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

      fechaTicket: new Date(this.$route.query.fecha),
      numeroCuenta: localStorage.getItem('noCuenta'),

      isLoading: true,
      isFullPage: true,
      urlTicket: '',

      validado: null,
    }
  },
  methods: {
    traerTicket() {
      axios
        .get(`${process.env.api}/admin/ticket?folio=${this.$route.query.folio}`)
        .then((res) => {
          this.isLoading = false
          this.urlTicket = res.config.url
        })
        .catch((err) => {
          this.isLoading = false
          this.imprimirError(err.response.data)
        })
    },
    validacion(value) {
      this.validado = value
    },
    validar() {
      const data = {
        folio: this.$route.query.folio,
        validacion: this.validado,
      }

      this.updateIsLoading(true)
      axios
        .put(`${process.env.api}/admin/validar`, data, this.token)
        .then((res) => {
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
        .finally(() => {
          this.$router.go(-1)
        })
    },
    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)
    },
    regresar() {
      this.$router.go(-1)
    },
  },
  created() {
    this.token = {
      headers: { token: localStorage.getItem('token') },
    }
    this.traerTicket()
  },
}
</script>
<style scoped>
.img {
  height: 350px;
  width: 350px;
  padding-bottom: 470px;
}

.zoom {
  transition: transform 0.2s;
}

.zoom:hover {
  transform: scale(1.6);
  position: relative;
  display: flex;
  height: 350px;
  margin-top: 35%;
  margin-bottom: 35%;
}
</style>