servicio_social_front/pages/admin/programa/infoResponsable/modificar/index.vue

<template>
  <div class="container" style="margin-bottom:10%;margin-top:2%;">
    <BotonRegresar :path="'/admin/programa/infoResponsable'" />
    <p class="is-size-2">Editar información del responsable</p>
    <b-field label="Nombre">
      <b-input type="text" v-model="nuevo.nombre" :placeholder="viejo.nombre">
      </b-input>
    </b-field>
    <b-field label="Correo eletrónico">
      <b-input type="email" v-model="nuevo.correo" :placeholder="viejo.correo">
      </b-input>
    </b-field>
    <b-button class="boton is-info my-5" v-if="mostrar()" @click="actualizar()">
      Editar responsable
    </b-button>
    <b-button class="boton is-info my-5" v-else disabled>
      Editar responsable
    </b-button>
    <b-button @click="passwordDialog()" class="is-info my-5">
      Cambiar contraseña
    </b-button>
    <b-loading
      :is-full-page="true"
      v-model="isLoading"
      :can-cancel="false"
    ></b-loading>
  </div>
</template>

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

export default {
  components: {
    botonRegresar,
  },
  data() {
    return {
      idResponsable: localStorage.getItem("idResponsable"),
      viejo: {
        nombre: localStorage.getItem("nombre"),
        correo: localStorage.getItem("correo"),
      },
      nuevo: {
        nombre: "",
        correo: "",
      },
      idServicio: localStorage.getItem("idServicio"),
      token: {
        headers: {
          token: window.localStorage.getItem("token"),
        },
      },
      isLoading: false,
    };
  },
  methods: {
    mostrar() {
      if (validator.isEmail(this.nuevo.correo) || this.nuevo.nombre) {
        if (this.nuevo.correo) {
          if (validator.isEmail(this.nuevo.correo)) {
            return true;
          } else {
            return false;
          }
        }
        return true;
      }
    },
    actualizar() {
      const data = { idUsuario: this.idResponsable };

      this.isLoading = true;
      if (this.nuevo.correo) {
        data.correo = this.nuevo.correo;
      }
      if (this.nuevo.nombre) {
        data.nombre = this.nuevo.nombre;
      }
      axios
        .put(`${process.env.api}/usuario/responsable/update`, data, this.token)
        .then((res) => {
          this.isLoading = false;
          this.toast();
          this.$router.push("/admin/programa");
        })
        .catch((err) => {
          this.isLoading = false;
          this.error(err.response.data.message);
        });
    },
    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 = { idUsuario: this.idResponsable };
      axios
        .put(
          `${process.env.api}/usuario/new_password_responsable`,
          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;
        });
    },
    toast() {
      this.$buefy.toast.open({
        message: "Se han actualizado los datos del responsable",
        type: "is-success",
      });
    },
    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(`/`);
      }
    },
  },
  beforeCreate() {
    if (!localStorage.getItem("idResponsable")) {
      this.$router.push("/admin/programa");
    }
  },
};
</script>