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

<template>
  <div class="container">
    <b-button class="is-info" @click="regresar()">Regresar</b-button>
    <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>
      <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"
          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">Carta de aceptación</p>
      <br />
      <b-field>
        <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">Carta de término</p>
      <br />
      <b-field>
        <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">Informe global</p>
      <br />
      <b-field>
        <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>
      <br />
      <b-button class="is-info" @click="regresar()">Regresar</b-button>
      <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-loading
        :is-full-page="true"
        v-model="isLoading"
        :can-cancel="true"
      ></b-loading>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";
import validator from "validator";

export default {
  data() {
    return {
      idServicio: localStorage.getItem("idServicio"),
      viejo: {},
      nuevo: {
        correo: "",
        fechaInicioFinal: "",
        fechaFinFinal: null,
        direccion: null,
        telefono: null,
        fechaNacimientoFinal: null,
        cartaAceptacion: {},
        cartaTermino: {},
        informeGlobal: {},
      },
      fechaNacimiento: [],
      fechaInicio: [],
      fechaFin: [],
      minDate1: new Date("2020-01-01"),
      isLoading: false,
    };
  },
  methods: {
    obtenerRegistro() {
      this.isLoading = true;
      return axios
        .get(
          `${process.env.api}/servicio/admin?idServicio=${this.idServicio}` //,
          // this.token
        )
        .then((res) => {
          this.isLoading = false;
          this.viejo = res.data;
          console.log(this.viejo);
        })
        .catch((err) => {
          this.isLoading = false;
          console.log(err.response.data.message);
        });
    },
    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;
      }
    },
    regresar() {
      this.$router.push("/admin/servicio");
    },
    actualizar() {
      this.isLoading = true;
      const data = {};
      if (this.nuevo.direccion) {
        data.direccionUpdate = this.nuevo.direccion;
      }
      if (this.nuevo.correo) {
        data.correoUpdate = this.nuevo.correo;
      }
      if (this.nuevo.telefono) {
        data.telefonoUpdate = this.nuevo.telefono;
      }
      if (this.nuevo.fechaInicioFinal) {
        data.fechaInicioUpdate = this.nuevo.fechaInicioFinal;
      }
      if (this.nuevo.fechaFinFinal) {
        data.fechaFinUpdate = this.nuevo.fechaFinFinal;
      }
      if (this.nuevo.fechaNacimientoFinal) {
        data.fechaNacimientoUpdate = this.nuevo.fechaNacimientoFinal;
      }
      const formData = new FormData();
      if (this.cartaAceptacion) {
        formData.append("cartaAceptacion", this.cartaAceptacion);
      }
      if (this.cartaTermino) {
        formData.append("cartaTermino", this.cartaTermino);
      }
      if (this.informeGlobal) {
        formData.append("informeGlobal", this.informeGlobal);
      }
      if (data) {
        formData.append("data", JSON.stringify(data));
      }
      axios
        .put(`${process.env.api}/servicio/update`, formData)
        .then((res) => {
          this.isLoading = false;
          this.$router.push("./");
          this.toast();
        })
        .catch((err) => {
          this.isLoading = false;
          console.log(err.response.data.message);
        });
    },
    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(),
      });
    },
    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;
}
</style>