editar listo
This commit is contained in:
@@ -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>
|
||||
@@ -1,5 +1,16 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<BotonRegresar :path="'/admin/especial/casoEspecial'" />
|
||||
<FormEditar></FormEditar>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import formEditar from '../../../../../components/admin/especial/formEditar'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
formEditar,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user