inscripciones_front/components/admin/tableTickets.vue

<template>
  <div>
    <div class="block columns">
      <b-field class="column" label="Status del ticket">
        <b-radio v-model="validacion" native-value="1"
          ><b-tag type="is-success" size="is-medium">Validados</b-tag></b-radio
        >
        <b-radio v-model="validacion" native-value="0">
          <b-tag type="is-danger" size="is-medium">Declinados</b-tag></b-radio
        >
        <b-radio v-model="validacion" native-value="2">
          <b-tag size="is-medium">Sin validar</b-tag></b-radio
        >
      </b-field>

      <b-field class="column" label="Número de cuenta">
        <b-input v-model="numeroCuenta" expanded></b-input>
        <p class="control">
          <b-button @click="todasInscripciones" type="is-link">Buscar</b-button>
        </p>
      </b-field>
    </div>

    <b-table
      class="box"
      :data="inscripciones"
      :striped="true"
      :hoverable="true"
      :paginated="isPaginated"
      :per-page="perPage"
      :current-page.sync="currentPage"
    >
      <b-table-column
        field="numeroCuenta"
        label="Número de cuenta"
        centered
        v-slot="props"
      >
        {{ props.row.Usuario.numeroCuenta }}
      </b-table-column>

      <b-table-column field="ticket" label="Ticket" centered v-slot="props"
        >{{ props.row.folio }}
      </b-table-column>

      <b-table-column field="cantidad" label="Cantidad" centered v-slot="props">
        {{ props.row.monto }}
      </b-table-column>

      <b-table-column
        field="inscripcion"
        label="Inscripción"
        centered
        v-slot="props"
      >
        <b-button
          type="is-success"
          v-if="!props.row.folio && !props.row.monto && !props.row.fechaTicket"
          @click="
            usuario(
              props.row.Usuario.numeroCuenta,
              props.row.Usuario.idUsuario
            ),
              imprimirWarning(
                '¿Estas seguro de querer validar esta inscripción ?',
                validarSinTicket
              )
          "
          >Validar</b-button
        >
      </b-table-column>

      <b-table-column centered v-slot="props">
        <b-button
          type="is-danger"
          @click="
            inscripcion(props.row.idInscripcion),
              imprimirWarning(
                '¿Estas seguro de querer cancelar esta inscripción ?',
                cancelarInscripcion
              )
          "
          >Cancelar</b-button
        >
      </b-table-column>

      <b-table-column centered v-slot="props">
        <b-button
          type="is-info"
          v-if="props.row.folio"
          @click="verTicket(props.row)"
          >Ver ticket</b-button
        >
      </b-table-column>
    </b-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    updateIsLoading: { type: Function, require: true },
  },
  data() {
    return {
      token: '',

      inscripciones: [],
      isPaginated: true,
      currentPage: 1,
      perPage: 5,

      data: {},
      dataIns: {},
      validacion: '2',
      numeroCuenta: '',
    }
  },
  methods: {
    todasInscripciones() {
      this.updateIsLoading(true)
      axios
        .get(
          `${process.env.api}/admin/todas_inscripciones?validacion=${this.validacion}&numeroCuenta=${this.numeroCuenta}`,
          this.token
        )
        .then((res) => {
          this.updateIsLoading(false)
          this.inscripciones = res.data
        })
        .catch((err) => {
          this.updateIsLoading(false)
        })
    },
    verTicket(value) {
      this.$router.push('/admin/ticket')
      localStorage.setItem('monto', value.monto)
      localStorage.setItem('folio', value.folio)
      localStorage.setItem('fechaTicket', value.fechaTicket)
      localStorage.setItem('noCuenta', value.Usuario.numeroCuenta)
      localStorage.setItem('inscripcion', value.idInscripcion)
    },
    usuario(noCuenta, usuario) {
      this.data.numeroCuenta = noCuenta
      this.data.idUsuario = usuario
    },
    validarSinTicket() {
      this.updateIsLoading(true)
      axios
        .put(
          `${process.env.api}/admin/validar_sin_ticket`,
          this.data,
          this.token
        )
        .then((res) => {
          this.imprimirMensaje(res.data.message)
          this.updateIsLoading(false)
        })
        .catch((err) => {
          this.imprimirError(err.response.data)
          this.updateIsLoading(false)
        })
    },
    inscripcion(inscripcion) {
      this.dataIns.idInscripcion = inscripcion
    },
    cancelarInscripcion() {
      this.updateIsLoading(true)
      axios
        .put(
          `${process.env.api}/admin/cancelar_inscripcion`,
          this.dataIns,
          this.token
        )
        .then((res) => {
          this.imprimirMensaje(res.data.message)
          this.updateIsLoading(false)
        })
        .catch((err) => {
          this.imprimirError(err.response.data)
          this.updateIsLoading(false)
        })
    },
    imprimirError(err = {}, title = '¡Hubo un error!', onConfirm = () => {}) {
      this.$buefy.dialog.alert({
        ariaRole: 'alertdialog',
        ariaModal: true,
        type: 'is-danger',
        title,
        message: err.message,
        confirmText: 'Entendido',
        hasIcon: true,
        iconPack: 'mdi',
        icon: 'alert-octagon',
        onConfirm: () => onConfirm(),
      })
      if (err.err && err.err === 'token error') {
        localStorage.clear()
        this.$router.push('/')
      }
    },
    imprimirMensaje(message, title = '¡Felicidades!', onConfirm = () => {}) {
      this.$buefy.dialog.alert({
        ariaRole: 'alertdialog',
        ariaModal: true,
        type: 'is-success',
        title,
        message,
        confirmText: 'Ok',
        hasIcon: true,
        iconPack: 'mdi',
        icon: 'check-circle',
        onConfirm: () => onConfirm(),
      })
    },
    imprimirWarning(
      message,
      onConfirm = () => {},
      title = '¡Espera un minuto!',
      onCancel = () => {}
    ) {
      this.$buefy.dialog.alert({
        ariaRole: 'alertdialog',
        ariaModal: true,
        type: 'is-warning',
        title,
        message,
        confirmText: 'Confirmar',
        canCancel: true,
        cancelText: 'Cancelar',
        hasIcon: true,
        iconPack: 'mdi',
        icon: 'help-circle',
        onConfirm: () => onConfirm(),
        onCancel: () => onCancel(),
      })
    },
  },
  watch: {
    validacion() {
      this.todasInscripciones()
    },
  },
  created() {
    this.token = {
      headers: { token: localStorage.getItem('token') },
    }
    this.todasInscripciones()
  },
}
</script>

<style scoped></style>