From 8a928f8c644e65a2f8fee64a324e48a1ac20337b Mon Sep 17 00:00:00 2001
From: mxrco <yosoymarco3@gmail.com>
Date: Tue, 2 Mar 2021 10:21:37 -0600
Subject: [PATCH] editar listo

---
 components/admin/especial/formEditar.vue      | 272 ++++++++++++++++++
 .../especial/casoEspecial/editar/index.vue    |  13 +-
 2 files changed, 284 insertions(+), 1 deletion(-)
 create mode 100644 components/admin/especial/formEditar.vue

diff --git a/components/admin/especial/formEditar.vue b/components/admin/especial/formEditar.vue
new file mode 100644
index 0000000..cec969e
--- /dev/null
+++ b/components/admin/especial/formEditar.vue
@@ -0,0 +1,272 @@
+<template>
+  <div class="container">
+    <p class="is-size-2">Editar información del alumno</p>
+    <br />
+    <div class="formulario">
+      <b-field label="Correo eletrónico">
+        <b-input
+          type="email"
+          v-model="nuevo.correo"
+          :placeholder="viejo.correo"
+        >
+        </b-input>
+      </b-field>
+      <b-field label="Teléfono">
+        <b-input
+          type="number"
+          v-model="nuevo.telefono"
+          maxlength="10"
+          :placeholder="viejo.telefono"
+        >
+        </b-input>
+      </b-field>
+      <b-field label="Dirección">
+        <b-input
+          type="text"
+          v-model="nuevo.direccion"
+          :placeholder="viejo.direccion"
+        >
+        </b-input>
+      </b-field>
+      <b-field label="Fecha de inicio">
+        <b-datepicker
+          :placeholder="fecha(viejo.fechaInicio)"
+          icon="calendar-today"
+          v-model="nuevo.fechaInicio"
+          :min-date="minDate1"
+        >
+        </b-datepicker>
+      </b-field>
+      <transition name="fade">
+        <b-field label="Fecha de fin" v-if="nuevo.fechaInicio">
+          <b-datepicker
+            :placeholder="fecha(viejo.fechaFin)"
+            v-model="nuevo.fechaFin"
+            :min-date="minDate2"
+            icon="calendar-today"
+          >
+          </b-datepicker>
+        </b-field>
+      </transition>
+      <b-field label="Fecha de nacimiento">
+        <b-datepicker
+          :placeholder="fecha(viejo.fechaNacimiento)"
+          icon="calendar-today"
+          v-model="nuevo.fechaNacimiento"
+          >
+        </b-datepicker>
+      </b-field>
+      <b-field label="Motivo" v-if="viejo.motivo">
+        <b-select
+          class="my-4"
+          expanded
+          v-model="nuevo.motivo"
+        >
+          <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-input>
+      </b-field>
+      <b-field label="Institución" v-if="viejo.institucion">
+        <b-input
+          type="text"
+          v-model="nuevo.institucion"
+          :placeholder="viejo.institucion"
+        >
+        </b-input>
+      </b-field>
+    </div>
+    <b-button 
+      v-if="mostrar()" 
+      @click="actualizarDialog()"
+      class="my-5 is-success">
+        Actualizar Datos
+      </b-button>
+      <b-button v-else disabled class="is-success my-5">Actualizar Datos</b-button>
+    <b-loading
+      :is-full-page="true"
+      v-model="isLoading"
+      :can-cancel="false"
+    ></b-loading>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import moment from "moment";
+import validator from "validator";
+export default {
+  data() {
+    return {
+      idCasoEspecial: localStorage.getItem("idCasoEspecial"),
+      isLoading: false,
+      minDate1: new Date("2020-01-01"),
+      viejo: {},
+      nuevo: {
+        idCasoEspecial: null,
+        correo: "",
+        telefono: "",
+        fechaInicio: null,
+        fechaFin: null,
+        fechaNacimiento: null,
+        institucion: "",
+        dependencia: "",
+        motivo: "",
+        direccion: "",
+      },
+      token: {
+        headers: {
+          token: window.localStorage.getItem("token"),
+        },
+      },
+    };
+  },
+  methods: {
+    mostrar(){
+      if (
+        validator.isEmail(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;
+      }
+    },
+    actualizarDialog() {
+      this.$buefy.dialog.confirm({
+        title: "Actualizar datos",
+        message: "¿Seguro(a) que quiere actualizar estos datos?",
+        confirmText: "Confirmar",
+        cancelText: "Cancelar",
+        type: "is-success",
+        hasIcon: true,
+        onConfirm: () => this.actualizar(),
+      });
+    },
+    actualizar() {
+      this.isLoading = true;
+      const data = { idCasoEspecial: this.idCasoEspecial };
+
+      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.token)
+        .then((res) => {
+          this.$buefy.dialog.alert("Los datos han sido actualizados");
+          this.$router.push("/admin/especial/casoEspecial");
+        })
+        .catch((err) => {
+          this.error(err.response.data.message);
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+    obtenerDatos() {
+      this.isLoading = true;
+      return axios
+        .get(
+          `${process.env.api}/caso_especial/?idCasoEspecial=${this.idCasoEspecial}`,
+          this.token
+        )
+        .then((res) => {
+          console.log(res.data);
+          this.viejo = res.data;
+        })
+        .catch((err) => {
+          this.error(err.response.data.message);
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+    error(msj) {
+      let salir = false;
+      switch (msj) {
+        case "invalid signature":
+          msj = "Tu token no es valido, inicia sesión de nuevo.";
+          salir = true;
+          break;
+        case "jwt expired":
+          msj = "Tu sesión ha expirado, inicia sesión de nuevo.";
+          salir = true;
+          break;
+        case "jwt malformed":
+          msj = "No se encontro tu token, inicia sesión de nuevo.";
+          salir = true;
+          break;
+        case "No hay token":
+          msj = "Ocurrio un error al enviar tu token, inicia sesión de nuevo.";
+          salir = true;
+          break;
+      }
+
+      this.$buefy.dialog.alert({
+        title: "Error",
+        message: msj,
+        type: "is-danger",
+        hasIcon: true,
+        icon: "alert-circle",
+        iconPack: "mdi",
+        ariaRole: "alertdialog",
+        ariaModal: true,
+      });
+      if (salir == true) {
+        localStorage.clear();
+        this.$router.push(`/`);
+      }
+    },
+    fecha(date) {
+      if (date) {
+        const fecha = moment(date.substr(0, 10));
+        return `${fecha.date()}/${fecha.month() + 1}/${fecha.year()}`;
+      }
+    },
+  },
+  computed: {
+    minDate2() {
+      const min = new Date(this.nuevo.fechaInicio);
+      return new Date(min.getFullYear(), min.getMonth() + 6, min.getDate());
+    },
+  },
+  created() {
+    this.obtenerDatos();
+  },
+};
+</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>
\ No newline at end of file
diff --git a/pages/admin/especial/casoEspecial/editar/index.vue b/pages/admin/especial/casoEspecial/editar/index.vue
index a8b52c7..262c37e 100644
--- a/pages/admin/especial/casoEspecial/editar/index.vue
+++ b/pages/admin/especial/casoEspecial/editar/index.vue
@@ -1,5 +1,16 @@
 <template>
   <div class="container">
     <BotonRegresar :path="'/admin/especial/casoEspecial'" />
+    <FormEditar></FormEditar>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+import formEditar from '../../../../../components/admin/especial/formEditar'
+
+export default {
+  components: {
+    formEditar,
+  }
+}
+</script>
\ No newline at end of file