servicio_social_front/components/admin/servicio/modificar/form.vue

<template>
  <div class="container">
    <b-button class="is-info" @click="regresar()">Regresar</b-button>
    <br><br>
    <p class="is-size-2">Editar información del alumno</p>
    <br>
    <div class="formulario">
      <b-field label="Correo eletrónico alumno">
        <b-input
          type="email"
          v-model="nuevo.correo"
          v-bind:placeholder="viejo.correo">
        </b-input>
      </b-field>
      <b-field label="Fecha de inicio">
        <b-datepicker
          v-bind:placeholder="viejo.fechaInicio"
          icon="calendar-today"
          v-model="fechaInicio[0]"
          :min-date="minDate1">
        </b-datepicker>
      </b-field>
      <transition name="fade">
        <b-field label="Fecha de fin" v-if="fechaInicio[0]">
          <b-datepicker
            v-bind:placeholder="viejo.fechaInicio"
            v-model="fechaFin[0]"
            :min-date="minDate2"
            icon="calendar-today">
          </b-datepicker>
        </b-field>
      </transition>
      <b-field label="Dirección">
        <b-input type="text" v-model="nuevo.direccion" v-bind:placeholder="viejo.direccion"></b-input>
      </b-field>
      <b-field label="Teléfono">
        <b-input type="number" v-bind:placeholder="viejo.telefono" maxlength="10"></b-input>
      </b-field>
      <b-field label="Fecha de nacimiento">
        <b-datepicker
          v-bind:placeholder="viejo.fechaNacimiento"
          v-model="fechaNacimiento[0]"
          icon="calendar-today">
        </b-datepicker>
      </b-field>
      <b-field label="ID status">
        <b-input type="" v-bind:placeholder="viejo.idStatus"></b-input>
      </b-field>
      <p class="is-size-5">Carta de aceptación</p>
      <br>
      <b-field>
        <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">Carta de término</p>
      <br>
      <b-field>
        <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">Informe global</p>
      <br>
      <b-field>
        <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>
      <br>
      <b-button class="is-info" @click="regresar()">Regresar</b-button>
      <b-button v-if="mostrar()" class="is-info">Actualizar Datos</b-button>
      <b-button v-else disabled class="is-info">Actualizar Datos</b-button>
    </div>
  </div>
</template>

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

export default {
  data () {
    return {
      viejo: {
        correo: 'juanito@gmail.com',
        fechaInicio: '20-05-15',
        fechaFin: '2020-11-12',
        direccion: 'La que sea',
        telefono: 5548689152,
        fechaNacimiento: '2000-02-06',
        idStatus: 1
      },
      nuevo: {
        correo: '',
        fechaInicioFinal: '',
        fechaFinFinal: null,
        direccion: null,
        telefono: null,
        fechaNacimientoFinal: null,
        idStatus: null,
        cartaAceptacion: {},
        cartaTermino: {},
        informeGlobal: {}
      },
      fechaNacimiento: [],
      fechaInicio: [],
      fechaFin: [],
      minDate1: new Date('2020-01-01')
    }
  },
  methods: {
    dangerToast () {
      this.$buefy.toast.open({
        message: 'Asegurate de ingresar un PDF',
        type: 'is-danger'
      })
    },
    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 ||
        this.nuevo.idStatus
      ) {
        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
      }
    },
    regresar () {
      localStorage.removeItem('idRegistro')
      this.$router.push('/admin/servicio')
    }
  },
  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])
    }
  }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0
}
</style>