servicio_social_front/components/admin/EditarResponsable.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-field>

    <b-field label="Correo eletrónico">
      <b-input
        type="email"
        :placeholder="responsable.usuario"
        v-model="nuevo.correo"
      />
    </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="
          imprimirWarning(
            '¿Seguro(a) que quiere actualizar la información de este usuario?',
            actualizar
          )
        "
      >
        Guardar Cambios
      </b-button>

      <b-button
        type="is-link"
        @click="
          imprimirWarning(
            '¿Seguro(a) que quiere cambiar la contraseña para este usuario?',
            password
          )
        "
      >
        Cambiar contraseña
      </b-button>
    </div>
  </div>
</template>

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

export default {
  props: {
    admin: { type: Object, required: true },
    responsable: { type: Object, required: true },
    imprimirError: { type: Function, required: true },
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      nuevo: {},
    }
  },
  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
    },
    actualizar() {
      const data = { idUsuario: this.responsable.idUsuario }

      this.updateIsLoading(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.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
          this.$router.push('/admin/responsables/responsable')
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
    password() {
      const data = { idUsuario: this.responsable.idUsuario }

      this.updateIsLoading(true)
      axios
        .put(
          `${process.env.api}/usuario/new_password_responsable`,
          data,
          this.admin.token
        )
        .then((res) => {
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
          this.$router.push('/admin/responsables/responsable')
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
  },
}
</script>

<style scoped></style>