inscripciones_front/components/registro/CapturaDatos.vue

<template>
  <div>
    <p class="subtitle is-4">
      <b
        >Captura la siguiente información tal cual se muestra en tu ticket de
        CEDETEC que se te entrego en cajas.</b
      >
    </p>

    <p class="subtitle is-5">
      Recuerda que la aportación es voluntaria y el área destinada debe ser
      CEDETEC.
    </p>

    <div class="block">
      <b-radio v-model="idArea" v-if="area1" native-value="1"
        ><b-icon icon="microsoft-windows" size="is-small"></b-icon>
        Windows</b-radio
      >
      <b-radio v-model="idArea" v-if="areaMac && area2" native-value="2"
        ><b-icon icon="apple" size="is-small"></b-icon> Mac</b-radio
      >
      <b-radio v-model="idArea" v-if="area3" native-value="3"
        ><b-icon icon="linux" size="is-small"></b-icon> Linux</b-radio
      >
    </div>

    <p class="pb-5">
      Por favor captura los siguientes datos que se encuentran en tu ticket que
      se te entregó en cajas.
    </p>

    <div class="columns">
      <b-image
        class="column mx-2"
        :src="require('@/assets/ticket.jpeg')"
        alt="Ticket Acatlán"
        ratio="16by10"
      ></b-image>

      <div class="column pr-5">
        <b-field label="Monto">
          <b-input v-model="monto" type="number" step="0.01"></b-input>
        </b-field>

        <b-field label="Fecha de Ticket">
          <b-datepicker
            v-model="fechaTicket"
            placeholder="Selecciona la fecha"
            icon="calendar-today"
            :min-date="minDate"
            :max-date="maxDate"
          >
          </b-datepicker>
        </b-field>

        <b-field label="Ticket">
          <b-input maxlength="6" v-model="folio"></b-input>
        </b-field>

        <b-field>
          <b-upload
            v-model="dropFiles"
            accept=".png,.jpeg,.jpg"
            multiple
            drag-drop
            expanded
          >
            <section class="section">
              <div class="content has-text-centered">
                <p>
                  <b-icon icon="upload" size="is-large"> </b-icon>
                </p>
                <p>Adjunta foto de tu ticket</p>
              </div>
            </section>
          </b-upload>
        </b-field>

        <div class="tags">
          <span
            v-for="(file, index) in dropFiles"
            :key="index"
            class="tag is-primary"
          >
            {{ file.name }}
            <button
              class="delete is-small"
              type="button"
              @click="deleteDropFile(index)"
            ></button>
          </span>
        </div>
      </div>
    </div>

    <b-field>
      <b-checkbox v-model="terminos">
        Acepto que todos los datos ingresados en esta aplicación son verdaderos,
        de no ser así mi inscripción será cancelada.
      </b-checkbox>
    </b-field>

    <div class="has-text-centered pb-5">
      <b-button
        :disabled="!(idArea !== '' && terminos) || disabledError"
        @click="
          imprimirWarning(
            '¿Los datos para la inscripción a CEDETEC son correctos?',
            inscribir
          )
        "
        type="is-success"
        >Inscribir</b-button
      >
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirError: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
    inscripcionesUsuario: { type: Array, required: true },
    idUsuario: { type: Number, required: true },
  },

  data() {
    const today = new Date()
    return {
      idArea: '',
      areaMac: false,
      area1: true,
      area2: true,
      area3: true,

      error: false,
      disabledError: false,

      folio: '',
      monto: '',
      fechaTicket: null,
      dropFiles: [],
      terminos: false,

      idCarrera: '',
      usuario: '',
      generacion: 0,

      token: '',
      minDate: this.diaMin(today),
      maxDate: new Date(),
    }
  },
  methods: {
    async inscribir() {
      if (this.dropFiles.length > 0 && !this.folio) {
        if (!this.fechaTicket) {
          return this.imprimirError({
            message: 'Por favor ingresa la fecha del ticket.',
          })
        } else {
          return this.imprimirError({
            message: 'Por favor ingresa el campo de monto.',
          })
        }
      }

      if (this.monto && this.monto < 20 && this.inscripcionesUsuario.length > 0)
        this.error = true
      else this.error = false

      let formData = new FormData()
      if (this.error === false) {
        formData.append('idUsuario', this.idUsuario)
        formData.append('numeroCuenta', this.usuario)
        formData.append('folio', this.folio)
        if (this.monto === '') this.monto = 0
        formData.append('monto', this.monto)
        formData.append('idArea', this.idArea)
        formData.append('fechaTicket', this.fechaTicket)
        formData.append('imagen', this.dropFiles[0])

        this.updateIsLoading(true)
        await axios
          .post(
            `${process.env.api}/usuario/inscripcionUsuario`,
            formData,
            this.token
          )
          .then((res) => {
            this.updateIsLoading(false)
            this.$emit('pedirInscripciones')
            this.imprimirMensaje(res.data.message)
            this.clear()
          })
          .catch((err) => {
            this.updateIsLoading(false)
            this.imprimirError(err.response.data)
          })
      } else {
        this.imprimirError({
          message: 'El monto mínimo para esta inscripción es de $20 pesos.',
        })
      }
    },
    areaPermitida() {
      if (
        (this.idCarrera === 20425 || this.idCarrera === 20226) &&
        this.generacion < 2022
      )
        this.areaMac = true

      for (let i = 0; i < this.inscripcionesUsuario.length; i++) {
        if (this.inscripcionesUsuario[i].idArea === 1) this.area1 = false
        if (this.inscripcionesUsuario[i].idArea === 2) this.area2 = false
        if (this.inscripcionesUsuario[i].idArea === 3) this.area3 = false
      }
    },
    diaMin(today) {
      return new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate() - today.getDate() + 1
      )
    },
    clear() {
      this.idArea = ''
      this.folio = ''
      this.monto = ''
      ;(this.fechaTicket = null), (this.terminos = false)
      this.dropFiles = []
    },
    deleteDropFile(index) {
      this.dropFiles.splice(index, 1)
    },
    getLocalhostInfo() {
      this.idCarrera = Number(localStorage.getItem('idCarrera'))
      this.token = {
        headers: {
          token: localStorage.getItem('token'),
        },
      }
    },
  },
  watch: {
    inscripcionesUsuario(value) {
      if (value.length > 0) this.idArea = ''
      this.areaPermitida()
    },

    dropFiles(value) {
      if (value.length > 1) this.deleteDropFile(0)
    },

    fechaTicket(fechaT) {
      if (fechaT > this.maxDate) this.disabledError = true
      else this.disabledError = false
    },
  },
  created() {
    this.usuario = localStorage.getItem('usuario')
    this.generacion = localStorage.getItem('generacion')
    this.getLocalhostInfo()
    this.areaPermitida()
  },
}
</script>

<style></style>