From f47eeaf9752c6e2f297574dccfde328ab50d0d16 Mon Sep 17 00:00:00 2001
From: Andres2908 <saavedratrejo24@gmail.com>
Date: Thu, 11 Feb 2021 19:29:38 -0600
Subject: [PATCH] faltaDefinirParametrosEnviar

---
 .../admin/especial/formularioEspecial.vue     | 234 +++++++++++++-----
 1 file changed, 172 insertions(+), 62 deletions(-)

diff --git a/components/admin/especial/formularioEspecial.vue b/components/admin/especial/formularioEspecial.vue
index 02beb43..10fc69a 100644
--- a/components/admin/especial/formularioEspecial.vue
+++ b/components/admin/especial/formularioEspecial.vue
@@ -3,36 +3,48 @@
     <p class="is-size-3 mb-5"><b>Agregar un servicio social</b></p>
     <form>
       <b-field label="Artículo">
-        <b-select placeholder="Seleccione el articulo correspondiente" expanded>
+        <b-select
+          placeholder="Seleccione el articulo correspondiente"
+          expanded
+          v-model="alumno.articulo"
+        >
           <option value="1">Artículo 52</option>
           <option value="2">Artículo 91</option>
         </b-select>
       </b-field>
-      <b-field label="Número de cuenta">
-        <b-input
-          v-model="numeroCuenta"
-          class="my-4"
-          placeholder="Número de cuenta"
+
+      <b-field label="Número de cuenta" class="column p-0 my-5 is-full">
+        <input
+          class="input column"
+          v-model="noCuenta"
           message="Solo numeros"
           required="required"
           maxlength="9"
           type="number"
-        ></b-input>
+          placeholder="Número de cuenta"
+          min="0"
+        />
+
+        <p class="control">
+          <b-button class="button is-info" @click="buscarAlumno()"
+            >Buscar</b-button
+          >
+        </p>
       </b-field>
 
       <b-field label="Nombre">
-        <b-input class="my-4" placeholder="Nombre" v-model="nombre"></b-input>
+        <div class="input">{{ alumno.nombre }}</div>
       </b-field>
 
       <b-field label="Carrera">
-        <b-input class="my-4" placeholder="Carrera" v-model="carrera"></b-input>
+        <div class="input">{{ alumno.carrera }}</div>
       </b-field>
 
       <b-field label="Institución">
         <b-input
           class="my-4"
           placeholder="Institución"
-          v-model="institucion"
+          v-model="alumno.institucion"
         ></b-input>
       </b-field>
 
@@ -40,7 +52,7 @@
         <b-input
           class="my-4"
           placeholder="Dependencia"
-          v-model="dependencia"
+          v-model="alumno.dependencia"
         ></b-input>
       </b-field>
 
@@ -48,39 +60,44 @@
         <b-input
           class="my-4"
           placeholder="Dirección"
-          v-model="direccion"
+          v-model="alumno.direccion"
         ></b-input>
       </b-field>
 
       <b-field label="Fecha de nacimiento">
-        <b-input
-          class="my-4"
-          placeholder="Fecha de nacimiento"
-          v-model="fechaNacimiento"
-        ></b-input>
+        <b-datepicker
+          placeholder="Nacimiento"
+          icon="calendar-today"
+          v-model="alumno.fechaNacimiento"
+        >
+        </b-datepicker>
       </b-field>
 
       <b-field label="Fecha de inicio">
-        <b-input
-          class="my-4"
-          placeholder="Fecha de inicio"
-          v-model="fechaInicio"
-        ></b-input>
+        <b-datepicker
+          placeholder="Fecha Inicio"
+          icon="calendar-today"
+          v-model="alumno.fechaInicio"
+          :min-date="minDate"
+        >
+        </b-datepicker>
       </b-field>
 
-      <b-field label="Fecha de fin">
-        <b-input
-          class="my-4"
-          placeholder="Fecha de fin"
-          v-model="fechaFin"
-        ></b-input>
+      <b-field label="Fecha de fin" v-if="alumno.fechaInicio">
+        <b-datepicker
+          placeholder="Fecha fin"
+          v-model="alumno.fechaFin"
+          :min-date="minDate2"
+          icon="calendar-today"
+        >
+        </b-datepicker>
       </b-field>
 
       <b-field label="Correo electrónico">
         <b-input
           class="my-4"
           placeholder="Correo electrónico"
-          v-model="correoElectronico"
+          v-model="alumno.correoElectronico"
         ></b-input>
       </b-field>
     </form>
@@ -99,9 +116,7 @@
               <b-icon icon="upload" size="is-large"></b-icon>
             </p>
             <p>
-              {{
-                file.name || "Arrastra aquí tu archivo o da click para buscar"
-              }}
+              {{ file.name || "Agregue el archivo ZIP" }}
             </p>
           </div>
         </section>
@@ -111,50 +126,56 @@
     <b-field class="centro">
       <b-button
         :disabled="
-          numeroCuenta == '' ||
-            nombre == '' ||
-            carrera == '' ||
-            institucion == '' ||
-            dependencia == '' ||
-            direccion == '' ||
-            fechaNacimiento == '' ||
-            fechaInicio == '' ||
-            fehcaFin == '' ||
-            correoElectronico == ''
+          alumno.articulo == '' ||
+            alumno.numeroCuenta == '' ||
+            alumno.nombre == '' ||
+            alumno.carrera == '' ||
+            alumno.institucion == '' ||
+            alumno.dependencia == '' ||
+            alumno.direccion == '' ||
+            alumno.fechaNacimiento == '' ||
+            alumno.fechaInicio == '' ||
+            alumno.fehcaFin == '' ||
+            alumno.correoElectronico == ''
         "
         class="border-success my-5"
         type="is-success"
-        @click="enviarCuestionario()"
+        @click="enviar()"
         >Enviar</b-button
       >
     </b-field>
+    <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="false" />
   </div>
 </template>
 
 <script>
+import "buefy/dist/buefy.css";
 import axios from "axios";
+import validator from "validator";
+import moment from "moment";
 export default {
   data() {
     return {
       file: [],
+      minDate: new Date(),
+      isLoading: false,
+      searched: false,
+      noCuenta: "",
       alumno: {
+        cuenta: "",
+        nombre: "",
+        carrera: "",
+        creditos: "",
+        institucion: "",
+        dependencia: "",
+        idAlumno: "",
+        idCarrera: "",
         fechaNacimiento: "",
-        fechaInicio: "",
-        fechaFin: "",
-        Usuario: {},
-        Carrera: {},
-        Status: {},
+        fechaiIicio: [],
+        fechaFin: [],
+        correoElectronico: "",
       },
-      numeroCuenta: "",
-      nombre: "",
-      carrera: "",
-      institucion: "",
-      dependencia: "",
-      direccion: "",
-      fechaNacimiento: "",
-      fechaInicio: "",
-      fechaFin: "",
-      correoElectronico: "",
+
       token: {
         headers: {
           token: window.localStorage.getItem("token"),
@@ -163,6 +184,23 @@ export default {
     };
   },
   methods: {
+    reset() {
+      this.alumno.cuenta = "";
+      this.alumno.nombre = "";
+      this.alumno.carrera = "";
+      this.alumno.creditos = "";
+      this.alumno.institucion = "";
+      this.alumno.dependencia = "";
+      this.alumno.idAlumno = "";
+      this.alumno.idCarrera = "";
+      this.alumno.fechaNacimiento = "";
+      this.alumno.fechaInicio = [];
+      this.alumno.fechaFin = [];
+      this.alumno.correoElectronico = "";
+
+      this.noCuenta = "";
+      this.file = [];
+    },
     buscarAlumno() {
       this.isLoading = true;
       axios
@@ -170,8 +208,10 @@ export default {
           `${process.env.api}/usuario/escolares?numeroCuenta=${this.noCuenta}`,
           this.token
         )
-        .then((resp) => {
+        .then((res) => {
+          this.alumno.cuenta = this.noCuenta;
           this.alumno = res.data;
+          this.searched = true;
           console.log(res.data);
         })
         .catch((error) => {
@@ -181,6 +221,49 @@ export default {
           this.isLoading = false;
         });
     },
+    enviar() {
+      this.isLoading = true;
+      const data = {
+        idUsuario: this.alumno.idAlumno,
+        idCarrera: this.alumno.idCarrera,
+        numeroCuenta: this.alumno.cuenta,
+        creditos: this.alumno.creditos.toString(),
+        correo: this.alumno.correoElectronico,
+        fechaInicio: moment(this.alumno.inicio),
+        fechaFin: moment(this.alumno.fin),
+      };
+      const formData = new FormData();
+
+      formData.append("alumno", JSON.stringify(data));
+      formData.append("cartaAceptacion", this.file);
+
+      axios
+        .post(`${process.env.api}/servicio/nuevo`, formData, {
+          headers: {
+            "Content-Type": "multipart/form-data",
+            token: this.token.headers.token,
+          },
+        })
+        .then((res) => {
+          this.$buefy.dialog.alert({
+            title: "Success",
+            message: "Se enviaron los datos correctamente",
+            type: "is-success",
+            hasIcon: true,
+            icon: "checkbox-marked-circle",
+            iconPack: "mdi",
+            ariaRole: "alertdialog",
+            ariaModal: true,
+          });
+          this.reset();
+        })
+        .catch((error) => {
+          this.error(error.response.data.message);
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
     error(msj) {
       let salir = false;
       switch (msj) {
@@ -225,11 +308,38 @@ export default {
       }
       return numero;
     },
+    maxLength(str, max) {
+      if (str.length > max) return str.substr(0, max);
+      return str;
+    },
+    correoValidado() {
+      if (validator.isEmail(this.alumno.correoElectronico)) {
+        return "";
+      }
+    },
   },
-  created() {
-    this.buscarAlumno();
+  watch: {
+    noCuenta() {
+      if (this.searched === false) {
+        this.noCuenta = Number(this.noCuenta) < 0 ? "" : this.noCuenta;
+        this.noCuenta = this.esNumero(this.noCuenta);
+        this.noCuenta = this.maxLength(this.noCuenta, 9);
+      } else {
+        this.noCuenta = "";
+        this.searched = false;
+        this.reset();
+      }
+    },
+  },
+  mounted() {
+    this.minDate.setDate(this.minDate.getDate() - 16);
+  },
+  computed: {
+    minDate2() {
+      const min = new Date(this.alumno.fechaInicio);
+      return new Date(min.getFullYear(), min.getMonth() + 6, min.getDate());
+    },
   },
-  watch: {},
 };
 </script>