servicio_social_front/components/admin/servicio/modificar/form.vue

<template>
  <div class="container" :class="{ pad: padding }">
    <BotonRegresar :path="'/admin/servicio'" />
    <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="email"
          v-model="nuevo.correo"
          :placeholder="viejo.correo"
        >
        </b-input>
      </b-field>
      <div v-if="status6()">
        <b-field label="Fecha de inicio">
          <b-datepicker
            :placeholder="fecha(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[0]">
            <b-datepicker
              :placeholder="fecha(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="text"
            v-model="nuevo.direccion"
            :placeholder="viejo.direccion"
          >
          </b-input>
        </b-field>
        <b-field label="Teléfono">
          <b-input
            type="number"
            :placeholder="viejo.telefono"
            v-model="nuevo.telefono"
            maxlength="10"
          ></b-input>
        </b-field>
        <b-field label="Fecha de nacimiento">
          <b-datepicker
            :placeholder="fecha(viejo.fechaNacimiento)"
            v-model="fechaNacimiento[0]"
            icon="calendar-today"
          >
          </b-datepicker>
        </b-field>
        <p class="is-size-5" v-if="viejo.cartaAceptacion">Carta de aceptación</p>
        <br />
        <b-field v-if="viejo.cartaAceptacion">
          <b-upload
            v-model="nuevo.cartaAceptacion"
            type="is-black"
            v-on:input="validarExt(1)"
            accept="application/pdf"
            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" v-if="viejo.cartaTermino">Carta de término</p>
        <br />
        <b-field v-if="viejo.cartaTermino">
          <b-upload
            v-model="nuevo.cartaTermino"
            type="is-black"
            v-on:input="validarExt(2)"
            accept="application/pdf"
            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" v-if="viejo.informeGlobal">Informe global</p>
        <br />
        <b-field v-if="viejo.informeGlobal">
          <b-upload
            v-model="nuevo.informeGlobal"
            type="is-black"
            v-on:input="validarExt(3)"
            accept="application/pdf"
            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>
      </div>
      <br />
      <b-button v-if="mostrar()" @click="actualizarDialog()" class="is-info">
        Actualizar Datos
      </b-button>
      <b-button v-else disabled class="is-info">Actualizar Datos</b-button>
      <b-button @click="passwordDialog()" class="is-info">
        Cambiar contraseña
      </b-button>
      <b-loading
        :is-full-page="true"
        v-model="isLoading"
        :can-cancel="false"
      ></b-loading>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";
import validator from "validator";
import botonRegresar from "../../../botonRegresar";

export default {
  components: {
    botonRegresar,
  },
  data() {
    return {
      idServicio: localStorage.getItem("idServicio"),
      idStatus: Number(localStorage.getItem("idStatus")),
      viejo: {},
      nuevo: {
        correo: "",
        fechaInicioFinal: "",
        fechaFinFinal: null,
        direccion: null,
        telefono: null,
        fechaNacimientoFinal: null,
        cartaAceptacion: {},
        cartaTermino: {},
        informeGlobal: {},
      },
      fechaNacimiento: [],
      fechaInicio: [],
      fechaFin: [],
      token: {
        headers: {
          token: window.localStorage.getItem("token"),
        },
      },
      minDate1: new Date("2020-01-01"),
      isLoading: false,
      padding: false,
    };
  },
  methods: {
    status6(){
      if(this.idStatus === 6) {
        this.padding = true;
        return false;
      }
      return true
    },
    obtenerRegistro() {
      this.isLoading = true;
      return axios
        .get(
          `${process.env.api}/servicio/admin?idServicio=${this.idServicio}`,
          this.token
        )
        .then((res) => {
          this.viejo = res.data;
        })
        .catch((err) => {
          this.error(err.response.data.message);
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    dangerToast() {
      this.$buefy.toast.open({
        message: "Asegurate de ingresar un PDF",
        type: "is-danger",
      });
    },
    toast() {
      this.$buefy.toast.open({
        message: "Se han actualizado los datos",
        type: "is-success",
      });
    },
    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
      ) {
        if (this.nuevo.correo) {
          if (validator.isEmail(this.nuevo.correo)) {
            return true;
          } else {
            return false;
          }
        }
        return true;
      }
    },
    validarExt(a) {
      const extPermitidas = /(.pdf)$/i;
      switch (a) {
        case 1:
          if (!extPermitidas.exec(this.nuevo.cartaAceptacion.name)) {
            this.dangerToast();
            this.nuevo.cartaAceptacion = {};
          }
          break;
        case 2:
          if (!extPermitidas.exec(this.nuevo.cartaTermino.name)) {
            this.dangerToast();
            this.nuevo.cartaTermino = {};
          }
          break;
        case 3:
          if (!extPermitidas.exec(this.nuevo.informeGlobal.name)) {
            this.dangerToast();
            this.nuevo.informeGlobal = {};
          }
          break;
      }
    },
    actualizar() {
      const formData = new FormData();
      const data = { idServicio: this.idServicio };

      this.isLoading = true;
      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.fechaInicioFinal)
        data.fechaInicio = this.nuevo.fechaInicioFinal;
      if (this.nuevo.fechaFinFinal) data.fechaFin = this.nuevo.fechaFinFinal;
      if (this.nuevo.fechaNacimientoFinal)
        data.fechaNacimiento = this.nuevo.fechaNacimientoFinal;
      formData.append("data", JSON.stringify(data));
      if (this.nuevo.cartaAceptacion)
        formData.append("cartaAceptacion", this.nuevo.cartaAceptacion);
      if (this.nuevo.cartaTermino)
        formData.append("cartaTermino", this.nuevo.cartaTermino);
      if (this.nuevo.informeGlobal)
        formData.append("informeGlobal", this.nuevo.informeGlobal);

      axios
        .put(`${process.env.api}/servicio/update`, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
            token: this.token.headers.token,
          },
        })
        .then((res) => {
          this.toast();
          this.$router.push("/admin/servicio");
        })
        .catch((err) => {
          this.error(err.response.data.message);
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    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(),
      });
    },
    passwordDialog() {
      this.$buefy.dialog.confirm({
        title: "Actualizar datos",
        message: "¿Seguro(a) que quiere actualizar la contraseña?",
        confirmText: "Confirmar",
        cancelText: "Cancelar",
        type: "is-success",
        hasIcon: true,
        onConfirm: () => this.password(),
      });
    },
    password() {
      this.isLoading = true;
      const data = { idServicio: this.idServicio };
      axios
        .put(`${process.env.api}/usuario/new_password_alumno`, data, this.token)
        .then((res) => {
          this.$buefy.toast.open({
            message: "Se ha enviado el correo con la nueva contraseña",
            type: "is-success",
          });
          this.$router.push("/admin");
        })
        .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.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]);
    },
  },
  created() {
    this.obtenerRegistro();
  },
};
</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;
}
.pad {
  padding-bottom: 5%;
  padding-top: 5%;
}
</style>