premiaciones_front2/pages/Profesor/index.vue

<template>
  <div class="container full-h">
    <div class="my-3 has-text-centered">
      <p class="is-size-2 my-5">
        REGISTRO DE PROFESORES PARA LA OBTENCIÓN DE MEDALLA
      </p>
      <p class="is-size-5 block">
        A continuación, le pedimos el registro de sus invitados, recuerde que
        pueden ser hasta 3 personas. Por ser una ceremonia solemne, se solicita
        no asistir con niños menores de 12 años. A su correo PCPUMA, llegará la
        confirmación del registro y un código QR, por lo que le rogamos
        mantenerse pendiente de recibirlo, si no lo visualiza, revisar en SPAM.
      </p>
    </div>
    <div v-if="premiaciones.length !== 0" class="box">
      <div>
        <p class="is-size-4 block"><b>Nombre:</b> {{ `${Profesor.nombre}` }}</p>
        <p v-if="alreadyRegistred" class="is-size-3 block has-text-centered">
          Este profesor ya registró invitados en otro momento.
        </p>
        <p v-if="isSent" class="is-size-3 block has-text-centered">
          ¡Gracias por su registro!
        </p>

        <div v-if="!isSent && !alreadyRegistred" class="is-flex block">
          <p class="is-size-4 block mr-4"><b>Premiacion: </b></p>
          <b-select
            v-model="premiacion"
            placeholder="Seleccione"
            class="is-size-4 block mx-0"
          >
            <option
              v-for="(premiacion, index) in premiaciones"
              :key="index"
              :value="premiacion.idPremiacion"
            >
              {{ premiacion.premiacion }}
            </option>
          </b-select>
        </div>

        <div v-if="!isSent && !alreadyRegistred" class="is-flex">
          <p class="is-size-4 block mr-4"><b>Cantidad de invitados: </b></p>
          <b-select
            v-model="numeroInvitados"
            placeholder="Seleccione"
            class="is-size-4 block mx-0"
          >
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </b-select>
        </div>
      </div>
    </div>
    <div v-if="!isSent">
      <p v-if="flag" class="is-size-3 my-5">Información de los invitados:</p>
      <div
        v-for="(item, index) in invitados"
        v-bind:key="index"
        class="is-flex is-justify-content-center box"
      >
        <div>
          <p class="is-size-3 has-text-centered block">
            {{ `Invitado ${index + 1}` }}
          </p>
          <div class="columns">
            <div class="column">
              <p class="is-size-4 block has-text-weight-bold">Nombre(s):</p>
              <p class="is-size-4 block has-text-weight-bold">Apellidos:</p>
              <p class="is-size-4 block has-text-weight-bold">Edad:</p>
            </div>
            <div class="column">
              <b-input
                expanded
                class="block"
                type="text"
                v-model="invitados[index].nombre"
              ></b-input>
              <b-input
                expanded
                class="block"
                type="text"
                v-model="invitados[index].apellido"
              ></b-input>
              <b-input
                expanded
                class="block"
                type="number"
                min="0"
                v-model="invitados[index].edad"
              ></b-input>
            </div>
          </div>
        </div>
      </div>
      <div v-if="premiaciones.length !== 0" class="has-text-centered">
        <b-button
          v-if="!alreadyRegistred"
          :disabled="mostrarBoton()"
          class="is-success mb-5"
          @click="enviar()"
          >Enviar</b-button
        >
      </div>
    </div>
    <div v-if="premiaciones.length === 0" class="box">
      <p class="is-size-4 block"><b>Nombre:</b> {{ `${Profesor.nombre}` }}</p>
      <p class="is-size-4 block">
        <b>No hay premiaciones activas para este profesor.</b>
      </p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      isLoading: false,
      Profesor: {},
      numeroInvitados: null,
      premiacion: null,
      invitados: [],
      premiaciones: [],
      flag: false,
      isDisabled: false,
      isSent: false,
      alreadyRegistred: null,
    }
  },
  methods: {
    enviar() {
      this.isLoading = true
      this.invitados.forEach((item) => {
        item.nombreCompleto = `${item.nombre} ${item.apellido}`
      })
      const data = {
        idProfesor: this.Profesor.idProfesor,
        idPremiacion: this.premiacion,
        invitados: this.invitados,
      }
      axios
        .post(`${process.env.api}/invitado/infoInvitados`, data, {
          headers: {
            token: localStorage.getItem('token'),
          },
        })
        .then((res) => {
          this.isLoading = false
          this.invitados = []
          this.successToast()
          this.isSent = true
        })
        .catch((err) => {
          this.isLoading = false
          this.errorToast(err.response.data.message)
          console.log(err)
        })
    },
    successToast() {
      this.$buefy.toast.open({
        message: '¡Se han registrado sus invitados de forma correcta!',
        type: 'is-success',
      })
    },
    errorToast(err) {
      this.$buefy.toast.open({
        duration: 8000,
        message: err,
        type: 'is-danger',
      })
    },
    mostrarBoton() {
      if (this.numeroInvitados === null) return true
      if (this.numeroInvitados === 0) return false
      for (let i = 0; i < this.invitados.length; i++) {
        if (
          !this.invitados[i].nombre ||
          !this.invitados[i].apellido ||
          !this.invitados[i].edad
        )
          return true
      }
      return false
    },
    async fetchPremiaciones() {
      this.isLoading = true
      await axios
        .get(
          `${process.env.api}/profesor/premiaciones?idProfesor=${this.Profesor.idProfesor}`,
          {
            headers: {
              token: localStorage.getItem('token'),
            },
          }
        )
        .then((res) => {
          this.isLoading = false
          if (res) this.premiaciones = res.data
        })
        .catch((err) => {
          this.isLoading = false
          console.log(err)
        })
    },
    async yaRegistrado() {
      this.isLoading = true
      await axios
        .get(
          `${process.env.api}/profesor/yaRegistro?idProfesor=${this.Profesor.idProfesor}&idPremiacion=${this.premiaciones[0].idPremiacion}`,
          {
            headers: {
              token: localStorage.getItem('token'),
            },
          }
        )
        .then((res) => {
          this.isLoading = false
          if (res) this.alreadyRegistred = res.data
        })
        .catch((err) => {
          this.isLoading = false
          console.log(err)
        })
    },
  },
  async created() {
    this.Profesor.idProfesor = localStorage.getItem('idProfesor')
    this.Profesor.nombre = localStorage.getItem('nombre')
    this.Profesor.adscripcion = localStorage.getItem('adscripcion')
    this.Profesor.numeroTrabajador = localStorage.getItem('numeroTrabajador')
    await this.fetchPremiaciones()
    if (this.premiaciones.length === 1) {
      await this.yaRegistrado()
    }
  },
  watch: {
    numeroInvitados() {
      this.invitados = []
      if (this.numeroInvitados > 0) this.flag = true
      else this.flag = false
      for (let i = 0; i < this.numeroInvitados; i++) {
        this.invitados.push({ nombre: '', apellido: '', edad: null })
      }
    },
  },
  layout: 'profesor',
}
</script>

<style scoped>
.full-h {
  min-height: 75vh;
}
.cont {
  width: 80%;
}
</style>