servicio_social_front/components/admin/form.vue

<template>
  <div class="container">
    <b-button class="is-info">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"
          value="">
        </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">
          <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" value="" v-bind:placeholder="viejo.telefono"></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="" value="" 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" 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" 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" 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 v-if="mostrar()" 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-02')
    }
  },
  methods: {
    dangerToast () {
      this.$buefy.toast.open({
        message: 'Correo invalido',
        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
      ) {
        return true
      }
      return false
    }
  },
  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>