inscripciones_front/components/admin/ticket.vue

<template>
  <div class="columns">
    <div class="column is-one-third py-5">
      <figure class="containerImg">
        <b-image class="img" :src="urlTicket" alt="Imagen del ticket">
          <b-loading :is-full-page="isFullPage" v-model="isLoading">
          </b-loading>
        </b-image>
        <div class="overlay" @click="isImageModalActive = true">
          <b-icon
            class="icon"
            icon="magnify-plus"
            size="is-small"
            type="is-black"
          />
        </div>
      </figure>
    </div>

    <b-modal v-model="isImageModalActive">
      <p class="image">
        <img :src="urlTicket" />
      </p>
    </b-modal>

    <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><b>Folio:</b> {{ $route.query.folio }}</p>
        <p><b>Cantidad: </b> {{ $route.query.monto }}</p>
        <p><b>Fecha del ticket:</b> {{ fecha($route.query.fecha) }}</p>
      </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'
import moment from 'moment'

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: '',

      isImageModalActive: false,
      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)
        })
    },
    fecha(fecha) {
      return moment(fecha).format('L')
    },
    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;
}

.overlay {
  position: absolute;
  top: 4%;
  bottom: 0;
  left: 0;
  right: 40%;
  height: 470px;
  width: 350px;
  opacity: 0;
  transition: 0.5s ease;
  background-color: white;
}

/* When you mouse over the container, fade in the overlay icon*/
.containerImg:hover .overlay {
  opacity: 0.3;
}

/* The icon inside the overlay is positioned in the middle vertically and horizontally */
.icon {
  color: black;
  font-size: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}
</style>