servicio_social_front/components/admin/especial/formEditar.vue

<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>