Segundo commit

components/admin/form.vue

@@ -1,79 +1,187 @@
 <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="" v-model="nuevo.correo" value=""></b-input>
-      </b-field>
-      <b-field label="Correo eletrónico responsable">
-        <b-input type="" value=""></b-input>
-      </b-field>
-      <b-field label="Número de cuenta">
-        <b-input type="" value=""></b-input>
+        <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-input type="" value=""></b-input>
-      </b-field>
-      <b-field label="Fecha de fin">
-        <b-input type="" value=""></b-input>
+        <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="" value=""></b-input>
+        <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="" value=""></b-input>
+        <b-input type="number" value="" v-bind:placeholder="viejo.telefono"></b-input>
       </b-field>
       <b-field label="Fecha de nacimiento">
-        <b-input type="" value=""></b-input>
-      </b-field>
-      <b-field label="Institución">
-        <b-input type="" value=""></b-input>
-      </b-field>
-      <b-field label="Dependecia">
-        <b-input type="" value=""></b-input>
-      </b-field>
-      <b-field label="Fecha de registro">
-        <b-input type="" value=""></b-input>
+        <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=""></b-input>
+        <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 class="is-info">Regresar</b-button>
+      <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 {
-      name: '',
+      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: '',
-        correoResponsable: '',
-        noCuenta: null,
-        fechaInicio: null,
-        fechaFin: null,
-        cartaAceptacion: null,
+        fechaInicioFinal: '',
+        fechaFinFinal: null,
         direccion: null,
         telefono: null,
-        fechaNacimiento: null,
-        cuestionarioA: null,
-        cuestionarioP: null,
-        informeGlobal: null,
-        vistoBuenoAcatlan: null,
-        cartaTermino: null,
-        institucion: null,
-        dependencia: null,
-        programa: null,
-        clavePrograma: null,
-        fechaRegistro: null,
+        fechaNacimientoFinal: null,
         idStatus: null,
-        acatlanContigo: 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>

components/layouts/Footer.vue

@@ -24,10 +24,10 @@ export default {}
 <style scoped>
 footer {
   background-color: #1b3d70;
-  position: fixed;
+  /*position: fixed;
   bottom: 0px;
   left: 0px;
-  right: 0px;
+  right: 0px;*/
 }
 
 .caja {