servicio_social_front/components/admin/EditarCasoEspecial.vue

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

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

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

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

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

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

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

    <b-field label="Motivo" v-if="viejo.motivo">
      <b-select class="my-4" v-model="nuevo.motivo" expanded>
        <option value="1">Tercera edad</option>

        <option value="2">Capacidades diferentes</option>
      </b-select>
    </b-field>

    <b-field label="Dependencia" v-if="viejo.dependencia">
      <b-input
        type="text"
        v-model="nuevo.dependencia"
        :placeholder="viejo.dependencia"
      />
    </b-field>

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

    <b-field class="mt-5">
      <b-button
        type="is-success"
        :disabled="!mostrarBoton()"
        @click="
          imprimirWarning(
            '¿Estás segura(a) de querer actualizar estos datos?',
            actualizar
          )
        "
      >
        Actualizar Datos
      </b-button>
    </b-field>
  </div>
</template>

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

export default {
  props: {
    idCasoEspecial: { type: Number, required: true },
    admin: { type: Object, required: true },
    viejo: { type: Object, required: true },
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirError: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      minDate1: new Date('2020-01-02'),
      nuevo: {},
    }
  },
  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 ''
    },
    mostrarBoton() {
      if (
        this.nuevo.correo ||
        this.nuevo.direccion ||
        this.nuevo.telefono ||
        this.nuevo.fechaNacimiento ||
        this.nuevo.motivo ||
        this.nuevo.institucion ||
        this.nuevo.dependencia ||
        (this.nuevo.fechaInicio && this.nuevo.fechaFin)
      ) {
        if (this.nuevo.correo) {
          if (validator.isEmail(this.nuevo.correo)) return true
          else return false
        }
        return true
      }
      return false
    },
    actualizar() {
      const data = { idCasoEspecial: this.idCasoEspecial }

      this.updateIsLoading(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.motivo) data.motivo = this.nuevo.motivo
      if (this.nuevo.dependencia) data.dependencia = this.nuevo.dependencia
      if (this.nuevo.institucion) data.institucion = this.nuevo.institucion
      if (this.nuevo.fechaInicio)
        data.fechaInicio = moment(this.nuevo.fechaInicio)
      if (this.nuevo.fechaFin) data.fechaFin = moment(this.nuevo.fechaFin)
      if (this.nuevo.fechaNacimiento)
        data.fechaNacimiento = moment(this.nuevo.fechaNacimiento)
      axios
        .put(`${process.env.api}/caso_especial/update`, data, this.admin.token)
        .then((res) => {
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
          this.$router.push('/admin/casos_especiales/caso_especial')
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
  },
  computed: {
    minDate2() {
      const min = new Date(this.nuevo.fechaInicio)

      return new Date(min.getFullYear(), min.getMonth() + 6, min.getDate())
    },
  },
}
</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;
}
</style>