servicio_social_front/components/responsable/NuevoServicio.vue

<template>
  <div>
    <b-field label="Número de Cuenta">
      <b-input
        type="text"
        placeholder="Número de Cuenta"
        icon="school"
        maxlength="9"
        @keyup.enter.native="buscarAlumno()"
        v-model="numeroCuenta"
        expanded
      />

      <b-button type="is-info" @click="buscarAlumno()"> Buscar </b-button>
    </b-field>

    <b-field label="Nombre">
      <p class="input">{{ alumno.nombre }}</p>
    </b-field>

    <b-field label="Carrera">
      <p class="input">{{ alumno.carrera }}</p>
    </b-field>

    <b-field label="Créditos">
      <p class="input">
        {{ alumno.creditos ? parseInt(alumno.creditos) : '' }}
        <span v-if="alumno.creditos">%</span>
      </p>
    </b-field>

    <b-field label="Seleccione programa">
      <b-select placeholder="Seleccionar" v-model="programa" expanded>
        <option :value="{}" disabled>Seleccionar</option>

        <option v-for="(p, i) in programas" :key="i" :value="p">
          {{ p.programa }}
        </option>
      </b-select>
    </b-field>

    <b-field label="Institución">
      <p class="input">{{ programa.institucion }}</p>
    </b-field>

    <b-field label="Dependencia">
      <p class="input">{{ programa.dependencia }}</p>
    </b-field>

    <b-field label="Clave del programa">
      <p class="input">{{ programa.clavePrograma }}</p>
    </b-field>

    <div v-if="programa.acatlan">
      <b-field label="Programa interno">
        <b-input placeholder="Programa interno" v-model="programaInterno" />
      </b-field>

      <b-field class="mb-3" label="Profesor/Responsable de Programa">
        <b-input
          placeholder="Profesor/Responsable de Programa"
          v-model="profesor"
        />
      </b-field>
    </div>

    <b-field label="Fecha de inicio">
      <b-datepicker
        icon="calendar-today"
        :min-date="minDate"
        v-model="fechaInicio"
      />
    </b-field>

    <b-field label="Fecha de fin" v-if="fechaInicio">
      <b-datepicker
        icon="calendar-today"
        :min-date="minDate2"
        v-model="fechaFin"
      />
    </b-field>

    <b-field label="Correo electrónico del Alumno">
      <b-input type="email" placeholder="Email" v-model="correo" />
    </b-field>

    <b-field
      label="Carta de aceptación (en formato .PDF. No se aceptan fotos)."
    >
      <b-upload accept="application/pdf" v-model="file" drag-drop expanded>
        <div class="section has-text-centered">
          <b-icon icon="upload" size="is-large" class="mb-2" />

          <p class="is-size-5">
            {{
              file.name ||
              'Arrastra aquí tu archivo o da click aquí para buscar'
            }}
          </p>

          <p class="is-size-6">Tamaño máximo 20MB</p>

          <p class="is-size-7">
            Si al momento de elegir un archivo este no se selecciona, haga click
            en cancelar en la ventana emergente e intente de nuevo.
          </p>
        </div>
      </b-upload>
    </b-field>

    <b-field class="has-text-centered mt-4">
      <b-button
        type="is-success"
        :disabled="mostrarBoton()"
        @click="
          imprimirWarning(
            '¿Esta seguro(a) de querer Pre-Registrar a este alumno?',
            preRegistrar
          )
        "
      >
        Enviar
      </b-button>
    </b-field>
  </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment'

export default {
  props: {
    responsable: { type: Object, required: true },
    imprimirError: { type: Function, required: true },
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      correo: '',
      numeroCuenta: '',
      profesor: '',
      programaInterno: '',
      programas: [],
      alumno: {},
      fechaFin: new Date(),
      fechaInicio: new Date(),
      file: {},
      minDate: new Date(),
      minDate2: new Date(),
      programa: {},
    }
  },
  methods: {
    resetar() {
      this.correo = ''
      this.profesor = ''
      this.programaInterno = ''
      this.fechaFin = new Date()
      this.fechaInicio = new Date()
      this.file = {}
      this.alumno = {}
      this.programa = {}
    },
    mostrarBoton() {
      if (
        !this.alumno.idUsuario ||
        !this.correo ||
        !this.programa.idPrograma ||
        (this.programa.acatlan && (!this.profesor || !this.programaInterno)) ||
        !this.file.name
      )
        return true
      return false
    },
    buscarAlumno() {
      this.updateIsLoading(true)
      axios
        .get(
          `${process.env.api}/usuario/escolares?numeroCuenta=${this.numeroCuenta}`,
          this.responsable.token
        )
        .then((res) => {
          this.resetar()
          this.alumno = res.data
          this.updateIsLoading(false)
        })
        .catch((err) => {
          this.numeroCuenta = ''
          this.resetar()
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
    preRegistrar() {
      const formData = new FormData()
      const data = {
        idUsuario: this.alumno.idUsuario,
        idPrograma: this.programa.idPrograma,
        idCarrera: this.alumno.idCarrera,
        numeroCuenta: this.numeroCuenta,
        creditos: this.alumno.creditos.toString(),
        correo: this.correo,
        programaInterno: this.programaInterno,
        profesor: this.profesor,
        fechaInicio: moment(this.fechaInicio),
        fechaFin: moment(this.fechaFin),
      }

      this.updateIsLoading(true)
      formData.append('alumno', JSON.stringify(data))
      formData.append('cartaAceptacion', this.file)
      axios
        .post(
          `${process.env.api}/servicio/nuevo`,
          formData,
          this.responsable.tokenArchivo
        )
        .then((res) => {
          this.numeroCuenta = ''
          this.resetar()
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
    obtenerProgramas() {
      axios
        .get(
          `${process.env.api}/programa/programas_responsable?idUsuario=${this.responsable.idUsuario}`,
          this.responsable.token
        )
        .then((res) => {
          this.programas = res.data
        })
        .catch((err) => {
          this.imprimirError(err.response.data)
        })
    },
    updateFechas() {
      this.fechaFin = new Date(
        this.fechaInicio.getFullYear(),
        this.fechaInicio.getMonth() + 6,
        this.fechaInicio.getDate()
      )
      this.minDate2 = new Date(
        this.fechaInicio.getFullYear(),
        this.fechaInicio.getMonth() + 6,
        this.fechaInicio.getDate()
      )
    },
  },
  watch: {
    file() {
      if (this.file.size >= 20000000) {
        this.imprimirError({ message: 'El tamaño del archivo exede los 20MB' })
        this.file = {}
      }
    },
    fechaInicio() {
      this.updateFechas()
    },
  },
  created() {
    if (this.responsable.idTipoUsuario === 2) {
      this.minDate.setDate(this.minDate.getDate() - 16)
      this.updateFechas()
      this.obtenerProgramas()
    }
  },
}
</script>

<style scoped></style>