servicio_social_front/components/admin/responsables/infoResponsable/modificar/updateResponsable.vue

<template>
  <div>
    <h3 class="title">Editar información del responsable</h3>

    <b-field label="Nombre">
      <b-input
        type="text"
        :placeholder="responsable.nombre"
        v-model="nuevo.nombre"
      >
      </b-input>
    </b-field>

    <b-field label="Correo eletrónico">
      <b-input
        type="email"
        :placeholder="responsable.usuario"
        v-model="nuevo.correo"
      >
      </b-input>
    </b-field>

    <!-- <b-field label="Estado:">
      <b-select v-model="nuevo.activo" expanded>
        <option :value="true">Activado</option>
        <option :value="false">Desactivado</option>
      </b-select>
    </b-field> -->

    <div class="pt-5">
      <b-button
        type="is-info"
        :disabled="mostrarBoton()"
        @click="guardarCambiosDialog()"
      >
        Guardar Cambios
      </b-button>

      <b-button type="is-info" @click="passwordDialog()">
        Cambiar contraseña
      </b-button>
    </div>

    <b-loading :is-full-page="true" :can-cancel="false" v-model="isLoading">
    </b-loading>
  </div>
</template>

<script>
import validator from 'validator'
import axios from 'axios'

export default {
  data() {
    return {
      responsable: {},
      idResponsable: null,
      nuevo: {},
      isLoading: false,
    }
  },
  props: {
    admin: { type: Object, required: true },
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirError: { type: Function, required: true },
  },
  methods: {
    mostrarBoton() {
      if (this.nuevo.correo) {
        if (!validator.isEmail(this.nuevo.correo)) return true
        if (this.nuevo.correo != this.responsable.usuario) return false
      }
      if (this.nuevo.nombre && this.nuevo.nombre != this.responsable.nombre)
        return false
      return true
    },
    toast() {
      this.$buefy.toast.open({
        message: 'Se han actualizado los datos del responsable',
        type: 'is-success',
      })
    },
    passwordDialog() {
      this.$buefy.dialog.confirm({
        title: 'Actualizar contraseña',
        message:
          '¿Seguro(a) que quiere cambiar la contraseña para este usuario?',
        confirmText: 'Confirmar',
        cancelText: 'Cancelar',
        type: 'is-success',
        hasIcon: true,
        onConfirm: () => this.password(),
      })
    },
    guardarCambiosDialog() {
      this.$buefy.dialog.confirm({
        title: 'Actualizar datos',
        message:
          '¿Seguro(a) que quiere actualizar la información de este usuario?',
        confirmText: 'Confirmar',
        cancelText: 'Cancelar',
        type: 'is-success',
        hasIcon: true,
        onConfirm: () => this.actualizar(),
      })
    },
    obtenerResponsable() {
      this.isLoading = true
      axios
        .get(
          `${process.env.api}/usuario/responsable?idUsuario=${this.idResponsable}`,
          this.admin.token
        )
        .then((res) => {
          this.responsable = res.data
          // this.nuevo.activo = this.responsable.activo
          this.isLoading = false
        })
        .catch((err) => {
          this.isLoading = false
          this.imprimirError(err.response.data)
        })
    },
    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.admin.token
        )
        .then((res) => {
          this.isLoading = false
          this.toast()
          this.$router.push('/admin/responsables')
        })
        .catch((err) => {
          this.isLoading = false
          this.imprimirError(err.response.data)
        })
    },
    password() {
      const data = { idUsuario: this.idResponsable }

      this.isLoading = true
      axios
        .put(
          `${process.env.api}/usuario/new_password_responsable`,
          data,
          this.admin.token
        )
        .then((res) => {
          this.$buefy.toast.open({
            message: res.data.message,
            type: 'is-success',
          })
          this.isLoading = false
          this.$router.push('/admin/responsables')
        })
        .catch((err) => {
          this.isLoading = false
          this.imprimirError(err.response.data)
        })
    },
  },
  created() {
    this.idResponsable = localStorage.getItem('idResponsable')
    if (this.admin.idTipoUsuario === 1) this.obtenerResponsable()
  },
}
</script>