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="Fecha"
        label="Fecha y hora"
        centered
        v-slot="props"
        >{{ hora(props.row.fechaInscripcion) }}</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,
              props.row.idArea
            ),
              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'
import moment from 'moment'

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

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

      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)
          this.imprimirError(err.response.data)
        })
    },
    verTicket(value) {
      this.$router.push('/admin/ticket')
      localStorage.setItem('idArea', value.idArea)
      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)
      localStorage.setItem('validacion', this.validacion)
    },
    usuario(noCuenta, usuario, idArea) {
      this.data.numeroCuenta = noCuenta
      this.data.idUsuario = usuario
      this.data.idArea = idArea
    },
    validarSinTicket() {
      this.updateIsLoading(true)
      axios
        .put(
          `${process.env.api}/admin/validar_sin_ticket`,
          this.data,
          this.token
        )
        .then((res) => {
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
          this.todasInscripciones()
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
    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)
          this.todasInscripciones()
        })
        .catch((err) => {
          this.imprimirError(err.response.data)
          this.updateIsLoading(false)
        })
    },
    hora(value) {
      return moment(value).format('LLL')
    },
  },
  watch: {
    validacion() {
      this.todasInscripciones()
    },
  },
  created() {
    this.token = {
      headers: { token: localStorage.getItem('token') },
    }
    this.todasInscripciones()
  },
}
</script>

<style scoped></style>