servicio_social_front/components/admin/EditarServicio.vue

<template>
  <div class="container" :class="{ pad: padding }">
    <BotonRegresar path="/admin/servicio" />

    <p class="is-size-2">Editar información del alumno</p>

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

      <div v-if="status6()">
        <b-field label="Fecha de inicio">
          <b-datepicker
            :placeholder="fecha(viejo.fechaInicio)"
            icon="calendar-today"
            v-model="fechaInicio[0]"
            :min-date="minDate1"
          />
        </b-field>

        <transition name="fade">
          <b-field label="Fecha de fin" v-if="fechaInicio[0]">
            <b-datepicker
              :placeholder="fecha(viejo.fechaInicio)"
              v-model="fechaFin[0]"
              :min-date="minDate2"
              icon="calendar-today"
            />
          </b-field>
        </transition>

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

        <b-field label="Teléfono">
          <b-input
            type="number"
            :placeholder="viejo.telefono"
            v-model="nuevo.telefono"
            maxlength="10"
          />
        </b-field>

        <b-field label="Fecha de nacimiento">
          <b-datepicker
            :placeholder="fecha(viejo.fechaNacimiento)"
            v-model="fechaNacimiento[0]"
            icon="calendar-today"
          />
        </b-field>

        <p class="is-size-5" v-if="viejo.cartaAceptacion">
          Carta de aceptación
        </p>

        <b-field v-if="viejo.cartaAceptacion">
          <b-upload
            v-model="nuevo.cartaAceptacion"
            type="is-black"
            v-on:input="validarExt(1)"
            accept="application/pdf"
            drag-drop
            expanded
          >
            <section class="section">
              <div class="content has-text-centered">
                <p>
                  <b-icon icon="upload" size="is-large"></b-icon>
                </p>
                <p>
                  {{
                    nuevo.cartaAceptacion.name ||
                    'Arrastra aquí tu archivo o da click para buscar'
                  }}
                </p>
              </div>
            </section>
          </b-upload>
        </b-field>

        <p class="is-size-5" v-if="viejo.cartaTermino">Carta de término</p>

        <b-field v-if="viejo.cartaTermino">
          <b-upload
            v-model="nuevo.cartaTermino"
            type="is-black"
            v-on:input="validarExt(2)"
            accept="application/pdf"
            drag-drop
            expanded
          >
            <section class="section">
              <div class="content has-text-centered">
                <p>
                  <b-icon icon="upload" size="is-large"></b-icon>
                </p>
                <p>
                  {{
                    nuevo.cartaTermino.name ||
                    'Arrastra aquí tu archivo o da click para buscar'
                  }}
                </p>
              </div>
            </section>
          </b-upload>
        </b-field>

        <p class="is-size-5" v-if="viejo.informeGlobal">Informe global</p>

        <b-field v-if="viejo.informeGlobal">
          <b-upload
            v-model="nuevo.informeGlobal"
            type="is-black"
            v-on:input="validarExt(3)"
            accept="application/pdf"
            drag-drop
            expanded
          >
            <section class="section">
              <div class="content has-text-centered">
                <p>
                  <b-icon icon="upload" size="is-large"></b-icon>
                </p>
                <p>
                  {{
                    nuevo.informeGlobal.name ||
                    'Arrastra aquí tu archivo o da click para buscar'
                  }}
                </p>
              </div>
            </section>
          </b-upload>
        </b-field>
      </div>

      <b-button v-if="mostrar()" @click="actualizarDialog()" class="is-info">
        Actualizar Datos
      </b-button>

      <b-button v-else disabled class="is-info">Actualizar Datos</b-button>

      <b-button @click="passwordDialog()" class="is-info">
        Cambiar contraseña
      </b-button>

      <b-loading :is-full-page="true" :can-cancel="false" v-model="isLoading" />
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment'
import validator from 'validator'
import botonRegresar from '../botonRegresar'

export default {
  components: {
    botonRegresar,
  },
  data() {
    return {
      idServicio: localStorage.getItem('idServicio'),
      idStatus: Number(localStorage.getItem('idStatus')),
      viejo: {},
      nuevo: {
        correo: '',
        fechaInicioFinal: '',
        fechaFinFinal: null,
        direccion: null,
        telefono: null,
        fechaNacimientoFinal: null,
        cartaAceptacion: {},
        cartaTermino: {},
        informeGlobal: {},
      },
      fechaNacimiento: [],
      fechaInicio: [],
      fechaFin: [],
      token: {
        headers: {
          token: localStorage.getItem('token'),
        },
      },
      minDate1: new Date('2020-01-01'),
      isLoading: false,
      padding: false,
    }
  },
  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 ''
    },
    status6() {
      if (this.idStatus === 6) {
        this.padding = true
        return false
      }
      return true
    },
    obtenerRegistro() {
      this.isLoading = true
      return axios
        .get(
          `${process.env.api}/servicio/admin?idServicio=${this.idServicio}`,
          this.token
        )
        .then((res) => {
          this.viejo = res.data
        })
        .catch((err) => {
          this.error(err.response.data.message)
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    dangerToast() {
      this.$buefy.toast.open({
        message: 'Asegurate de ingresar un PDF',
        type: 'is-danger',
      })
    },
    toast() {
      this.$buefy.toast.open({
        message: 'Se han actualizado los datos',
        type: 'is-success',
      })
    },
    mostrar() {
      if (
        validator.isEmail(this.nuevo.correo) ||
        this.nuevo.direccion ||
        this.nuevo.telefono ||
        this.nuevo.fechaNacimientoFinal ||
        (this.nuevo.fechaInicioFinal && this.nuevo.fechaFinFinal) ||
        this.nuevo.cartaTermino.name ||
        this.nuevo.cartaAceptacion.name ||
        this.nuevo.informeGlobal.name
      ) {
        if (this.nuevo.correo) {
          if (validator.isEmail(this.nuevo.correo)) {
            return true
          } else {
            return false
          }
        }
        return true
      }
    },
    validarExt(a) {
      const extPermitidas = /(.pdf)$/i
      switch (a) {
        case 1:
          if (!extPermitidas.exec(this.nuevo.cartaAceptacion.name)) {
            this.dangerToast()
            this.nuevo.cartaAceptacion = {}
          }
          break
        case 2:
          if (!extPermitidas.exec(this.nuevo.cartaTermino.name)) {
            this.dangerToast()
            this.nuevo.cartaTermino = {}
          }
          break
        case 3:
          if (!extPermitidas.exec(this.nuevo.informeGlobal.name)) {
            this.dangerToast()
            this.nuevo.informeGlobal = {}
          }
          break
      }
    },
    actualizar() {
      const formData = new FormData()
      const data = { idServicio: this.idServicio }

      this.isLoading = true
      if (this.nuevo.direccion) data.direccion = this.nuevo.direccion
      if (this.nuevo.correo) data.correo = this.nuevo.correo
      if (this.nuevo.telefono) data.telefono = this.nuevo.telefono
      if (this.nuevo.fechaInicioFinal)
        data.fechaInicio = this.nuevo.fechaInicioFinal
      if (this.nuevo.fechaFinFinal) data.fechaFin = this.nuevo.fechaFinFinal
      if (this.nuevo.fechaNacimientoFinal)
        data.fechaNacimiento = this.nuevo.fechaNacimientoFinal
      formData.append('data', JSON.stringify(data))
      if (this.nuevo.cartaAceptacion)
        formData.append('cartaAceptacion', this.nuevo.cartaAceptacion)
      if (this.nuevo.cartaTermino)
        formData.append('cartaTermino', this.nuevo.cartaTermino)
      if (this.nuevo.informeGlobal)
        formData.append('informeGlobal', this.nuevo.informeGlobal)

      axios
        .put(`${process.env.api}/servicio/update`, formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
            token: this.token.headers.token,
          },
        })
        .then((res) => {
          this.toast()
          this.$router.push('/admin/servicio')
        })
        .catch((err) => {
          this.error(err.response.data.message)
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    actualizarDialog() {
      this.$buefy.dialog.confirm({
        title: 'Actualizar datos',
        message: '¿Seguro(a) que quiere actualizar estos datos?',
        confirmText: 'Confirmar',
        cancelText: 'Cancelar',
        type: 'is-success',
        hasIcon: true,
        onConfirm: () => this.actualizar(),
      })
    },
    passwordDialog() {
      this.$buefy.dialog.confirm({
        title: 'Actualizar datos',
        message: '¿Seguro(a) que quiere actualizar la contraseña?',
        confirmText: 'Confirmar',
        cancelText: 'Cancelar',
        type: 'is-success',
        hasIcon: true,
        onConfirm: () => this.password(),
      })
    },
    password() {
      this.isLoading = true
      const data = { idServicio: this.idServicio }
      axios
        .put(`${process.env.api}/usuario/new_password_alumno`, data, this.token)
        .then((res) => {
          this.$buefy.toast.open({
            message: 'Se ha enviado el correo con la nueva contraseña',
            type: 'is-success',
          })
          this.$router.push('/admin')
        })
        .catch((err) => {
          this.error(err.response.data.message)
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    error(msj) {
      let salir = false
      switch (msj) {
        case 'invalid signature':
          msj = 'Tu token no es valido, inicia sesión de nuevo.'
          salir = true
          break
        case 'jwt expired':
          msj = 'Tu sesión ha expirado, inicia sesión de nuevo.'
          salir = true
          break
        case 'jwt malformed':
          msj = 'No se encontro tu token, inicia sesión de nuevo.'
          salir = true
          break
        case 'No hay token':
          msj = 'Ocurrio un error al enviar tu token, inicia sesión de nuevo.'
          salir = true
          break
      }

      this.$buefy.dialog.alert({
        title: 'Error',
        message: msj,
        type: 'is-danger',
        hasIcon: true,
        icon: 'alert-circle',
        ariaRole: 'alertdialog',
        ariaModal: true,
      })
      if (salir == true) {
        localStorage.clear()
        this.$router.push(`/`)
      }
    },
  },
  computed: {
    minDate2() {
      const min = new Date(this.fechaInicio)
      return new Date(min.getFullYear(), min.getMonth() + 6, min.getDate())
    },
  },
  watch: {
    fechaInicio: function () {
      this.nuevo.fechaInicioFinal = moment(this.fechaInicio[0])
      this.fechaFin[0] = null
    },
    fechaFin: function () {
      this.nuevo.fechaFinFinal = moment(this.fechaFin[0])
    },
    fechaNacimiento: function () {
      this.nuevo.fechaNacimientoFinal = moment(this.fechaNacimiento[0])
    },
  },
  created() {
    this.obtenerRegistro()
  },
}
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.pad {
  padding-bottom: 5%;
  padding-top: 5%;
}
</style>