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>