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 y la inscripción.
      </p>

      <IsCancelacion :folio="folio" :token="token" />

      <DatosTicket
        :imprimirMensaje="imprimirMensaje"
        :imprimirError="imprimirError"
        :imprimirWarning="imprimirWarning"
        :updateIsLoading="updateIsLoading"
        :folio="folio"
        :monto="monto"
        :fechaTicket="fechaTicket"
        :token="token"
        @actualizarFolio="actualizarFolio"
      />

      <div class="has-text-centered pb-5">
        <b-button
          type="is-success"
          @click="
            imprimirWarning(
              '¿ Estas seguro que los datos son correctos y quieres validar este ticket ?',
              validar
            )
          "
          >Validar</b-button
        >
        <b-button label="Declinar" type="is-danger" @click="declinarTicket()" />

        <b-button type="is-info" @click="regresar()">Regresar</b-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import DatosTicket from './datosTicket.vue'
import ModalCancelar from './modalCancelar.vue'
import IsCancelacion from './isCancelacion.vue'

export default {
  components: {
    DatosTicket,
    ModalCancelar,
    IsCancelacion,
  },
  props: {
    imprimirMensaje: { type: Function, require: true },
    imprimirError: { type: Function, require: true },
    imprimirWarning: { type: Function, required: true },
    updateIsLoading: { type: Function, require: true },
  },
  data() {
    return {
      token: '',

      fechaTicket: new Date(localStorage.getItem('fechaTicket')),
      folio: localStorage.getItem('folio'),
      monto: localStorage.getItem('monto'),

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

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

      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)
        })
    },
    declinarTicket() {
      const modalProps = {
        token: this.token,
        folio: this.folio,
        imprimirError: this.imprimirError,
        imprimirMensaje: this.imprimirMensaje,
        updateIsLoading: this.updateIsLoading,
      }

      this.$buefy.modal.open({
        props: modalProps,
        parent: this,
        component: ModalCancelar,
        hasModalCard: true,
        customClass: 'custom-class custom-class-2',
        trapFocus: true,
      })
    },
    actualizarFolio() {
      this.folio = localStorage.getItem('folio')
    },
    regresar() {
      this.$router.push('/admin')
    },
  },
  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>