servicio_social_front/components/admin/EditarServicio.vue

<template>
  <div>
    <h3 class="title">Editar información del alumno</h3>

    <div>
      <b-field label="Correo eletrónico del alumno">
        <b-input type="email" :placeholder="servicio.correo" v-model="correo" />
      </b-field>

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

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

      <b-field label="Dirección" v-if="servicio.direccion">
        <b-input
          type="text"
          :placeholder="servicio.direccion"
          v-model="direccion"
        />
      </b-field>

      <b-field label="Teléfono" v-if="servicio.telefono">
        <b-input
          type="tel"
          maxlength="10"
          :has-counter="false"
          :placeholder="servicio.telefono"
          v-model="telefono"
        />
      </b-field>

      <b-field label="Fecha de nacimiento" v-if="servicio.fechaNacimiento">
        <b-datepicker
          icon="calendar-today"
          :placeholder="fecha(servicio.fechaNacimiento)"
          :max-date="new Date()"
          v-model="fechaNacimiento"
        />
      </b-field>

      <b-field label="Carta de aceptación">
        <b-upload
          accept="application/pdf"
          v-model="cartaAceptacion"
          drag-drop
          expanded
        >
          <div class="section has-text-centered">
            <b-icon icon="upload" size="is-large" class="mb-2" />

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

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

      <b-field
        label="Carta de término"
        v-if="servicio.Status.idStatus > 4 && servicio.Status.idStatus != 7"
      >
        <b-upload
          accept="application/pdf"
          v-model="cartaTermino"
          drag-drop
          expanded
        >
          <div class="section has-text-centered">
            <b-icon icon="upload" size="is-large" class="mb-2" />

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

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

      <b-field
        label="Informe global"
        v-if="servicio.Status.idStatus > 4 && servicio.Status.idStatus != 7"
      >
        <b-upload
          accept="application/pdf"
          v-model="informeGlobal"
          drag-drop
          expanded
        >
          <div class="section has-text-centered">
            <b-icon icon="upload" size="is-large" class="mb-2" />

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

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

    <div class="mt-4">
      <b-button
        class="is-info"
        :disabled="mostrar()"
        @click="
          imprimirWarning(
            '¿Seguro(a) que quiere actualizar estos datos?',
            actualizar
          )
        "
      >
        Actualizar Datos
      </b-button>

      <b-button
        class="is-info"
        @click="
          imprimirWarning(
            '¿Seguro(a) que quieres cambiar/reenviar la contraseña de este alumno?',
            password
          )
        "
        :disabled="
          servicio.Status.idStatus === 1 || servicio.Status.idStatus === 7
        "
      >
        Cambiar/Reenviar contraseña
      </b-button>
    </div>
  </div>
</template>

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

export default {
  props: {
    admin: { 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 {
      actualizarFechaFin: false,
      idServicio: null,
      correo: '',
      telefono: '',
      direccion: '',
      fechaFin: new Date(),
      fechaInicio: new Date(),
      fechaNacimiento: new Date(),
      cartaAceptacion: {},
      cartaTermino: {},
      informeGlobal: {},
      minDate1: new Date('2020-01-01'),
      minDate2: new Date(),
      servicio: {
        Status: {},
        fechaFin: new Date(),
        fechaInicio: new Date(),
        fechaNacimiento: new Date(),
      },
    }
  },
  methods: {
    fecha(date) {
      if (date) {
        const fecha = moment(date)

        return `${fecha.date() < 10 ? '0' + fecha.date() : fecha.date()}/${
          fecha.month() < 9 ? '0' + (fecha.month() + 1) : fecha.month() + 1
        }/${fecha.year()}`
      }
      return ''
    },
    mostrar() {
      if (
        this.fechaInicio.toString().substr(0, 15) !==
          this.servicio.fechaInicio.toString().substr(0, 15) ||
        this.fechaFin.toString().substr(0, 15) !==
          this.servicio.fechaFin.toString().substr(0, 15) ||
        (this.servicio.fechaNacimiento &&
          this.fechaNacimiento.toString().substr(0, 15) !==
            this.servicio.fechaNacimiento.toString().substr(0, 15)) ||
        (this.correo && validator.isEmail(this.correo)) ||
        this.telefono ||
        this.direccion ||
        this.cartaTermino.name ||
        this.cartaAceptacion.name ||
        this.informeGlobal.name
      )
        return false
      return true
    },
    sizeFileValido(file) {
      if (file.size >= 20000000) {
        this.imprimirError({ message: 'El tamaño del archivo exede los 20MB' })
        return false
      }
      return true
    },
    updateFechas() {
      if (this.actualizarFechaFin) {
        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()
      )
      this.actualizarFechaFin = true
    },
    obtenerRegistro() {
      this.updateIsLoading(true)
      axios
        .get(
          `${process.env.api}/servicio/admin?idServicio=${this.idServicio}`,
          this.admin.token
        )
        .then((res) => {
          this.servicio = res.data
          if (
            this.servicio.Status.idStatus === 6 ||
            this.servicio.Status.idStatus === 10
          )
            this.$router.push('/admin/servicio')
          this.fechaInicio = new Date(this.servicio.fechaInicio)
          this.servicio.fechaInicio = new Date(this.servicio.fechaInicio)
          this.fechaFin = new Date(this.servicio.fechaFin)
          this.servicio.fechaFin = new Date(this.servicio.fechaFin)
          if (this.servicio.fechaNacimiento) {
            this.fechaNacimiento = new Date(this.servicio.fechaNacimiento)
            this.servicio.fechaNacimiento = new Date(
              this.servicio.fechaNacimiento
            )
          }
          this.updateIsLoading(false)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
    actualizar() {
      const formData = new FormData()
      const data = { idServicio: this.idServicio }

      this.updateIsLoading(true)
      if (this.cartaAceptacion)
        formData.append('cartaAceptacion', this.cartaAceptacion)
      if (this.cartaTermino) formData.append('cartaTermino', this.cartaTermino)
      if (this.informeGlobal)
        formData.append('informeGlobal', this.informeGlobal)
      if (this.direccion) data.direccion = this.direccion
      if (this.correo) data.correo = this.correo
      if (this.telefono) data.telefono = this.telefono
      if (this.fechaInicio) data.fechaInicio = this.fechaInicio
      if (this.fechaFin) data.fechaFin = this.fechaFin
      if (this.fechaNacimiento) data.fechaNacimiento = this.fechaNacimiento
      formData.append('data', JSON.stringify(data))
      axios
        .put(
          `${process.env.api}/servicio/update`,
          formData,
          this.admin.tokenArchivo
        )
        .then((res) => {
          this.imprimirMensaje(res.data.message)
          this.updateIsLoading(false)
          this.$router.push('/admin/servicio')
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
    password() {
      const data = { idServicio: this.idServicio }

      this.updateIsLoading(true)
      axios
        .put(
          `${process.env.api}/usuario/new_password_alumno`,
          data,
          this.admin.token
        )
        .then((res) => {
          this.imprimirMensaje(res.data.message)
          this.updateIsLoading(false)
          this.$router.push('/admin')
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
  },
  watch: {
    fechaInicio() {
      this.updateFechas()
    },
    cartaAceptacion() {
      if (!this.sizeFileValido(this.cartaAceptacion)) this.cartaAceptacion = {}
    },
    cartaTermino() {
      if (!this.sizeFileValido(this.cartaTermino)) this.cartaAceptacion = {}
    },
    informeGlobal() {
      if (!this.sizeFileValido(this.informeGlobal)) this.informeGlobal = {}
    },
  },
  created() {
    this.idServicio = Number(localStorage.getItem('idServicio'))
    if (!this.idServicio) this.$router.push('/admin')
    else this.obtenerRegistro()
  },
}
</script>

<style scoped></style>