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="folio" label="Folio" 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="confirmacion"
        label="Confirmación"
        centered
        v-slot="props"
      >
        <b-tag :type="types(props.row.confirmacion)">
          {{ props.row.confirmacion }}
        </b-tag>
      </b-table-column>

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

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

<script>
import axios from 'axios'

export default {
  data() {
    return {
      inscripciones: [],
      isPaginated: true,
      currentPage: 1,
      perPage: 5,

      validacion: '2',
      numeroCuenta: '',
    }
  },
  methods: {
    types(value) {
      return value === true ? 'is-success' : 'is-danger'
    },
    todasInscripciones() {
      axios
        .get(
          `${process.env.api}/admin/todas_inscripciones?validacion=${this.validacion}&numeroCuenta=${this.numeroCuenta}`
        )
        .then((res) => {
          this.inscripciones = res.data
        })
        .catch((err) => {
          console.log(err)
          // this.imprimirError(err.response.data)
        })
    },
    verTicket(value) {
      console.log(value)
      this.$router.push({
        path: '/admin/ticket/',
        query: {
          folio: value.folio,
          monto: value.monto,
          fecha: value.fechaTicket,
        },
      })
    },
  },
  watch: {
    validacion() {
      this.todasInscripciones()
    },
  },
  created() {
    this.todasInscripciones()
  },
}
</script>

<style scoped></style>