pcpuma_unam_operador/components/operador/usuarios/AdminUsuario.vue

<template>
  <div class="column is-4">
    <h3 class="is-size-4 mb-4">Administrador</h3>

    <BotonDesactivar
      :admin="operador"
      :data="usuario"
      tipo="usuario"
      :cambiarStatus="cambiarStatus"
    />

    <b-button
      v-if="!institucion.multa"
      class="my-5"
      type="is-danger"
      @click="multa()"
      :disabled="!usuario.id_usuario"
      expanded
    >
      Multar usuario
    </b-button>

    <b-button
      v-if="institucion.multa"
      class="my-5"
      type="is-link"
      @click="
        imprimirWarning(
          '¿Estas segur@ que deseas retirar la multa a este usuario?',
          quitarMulta
        )
      "
      expanded
    >
      Quitar multa
    </b-button>

    <b-field label="Cambiar teléfono del usuario" v-if="usuario.id_usuario">
      <b-input
        icon="list-status"
        v-model="nuevoTelefono"
        placeholder="Nuevo teléfono"
        rounded
      />
    </b-field>

    <b-field label="Cambiar email de usuario" v-if="usuario.id_usuario">
      <b-input
        icon="list-status"
        v-model="nuevoEmail"
        placeholder="Nuevo email"
        rounded
      />
    </b-field>

    <b-button
      class="my-5"
      type="is-link"
      v-show="usuario.id_usuario"
      @click="
        $alertsGenericos.imprimirWarning(
          $buefy,
          `¿Estas segur@ que deseas cambiar esta información?`,
          updateUsuario
        )
      "
      :disabled="mostrarBoton()"
      rounded
      expanded
    >
      Actualizar Información
    </b-button>
  </div>
</template>

<script>
import axios from 'axios'
import BotonDesactivar from '@/components/operador/BotonDesactivar'
import MultaModalAdmin from '@/components/operador/usuarios/MultaModalAdmin'

export default {
  components: { BotonDesactivar, MultaModalAdmin },
  props: {
    operador: { type: Object, required: true },
    usuario: { type: Object, required: true },
    updateIsLoading: { type: Function, required: true },
    buscar: { type: Function, required: true },
  },
  data() {
    return {
      isActivo: false,

      institucion: {},
      nuevoTelefono: '',
      nuevoEmail: '',
    }
  },
  methods: {
    mostrarBoton() {
      // if (
      //   this.idStatus != this.equipo.status.id_status ||
      //   (this.equipo.programa &&
      //     this.idPrograma != this.equipo.programa.id_programa) ||
      //   this.idCarrito != this.equipo.carrito.id_carrito
      // )
      //   return false
      // return true
    },
    multa() {
      const modalProps = {
        operador: this.operador,
        usuario: this.usuario,
        updateIsLoading: this.updateIsLoading,
        buscar: this.buscar,
      }

      this.$buefy.modal.open({
        props: modalProps,
        parent: this,
        component: MultaModalAdmin,
        hasModalCard: true,
        customClass: 'custom-class custom-class-2',
        trapFocus: true,
      })
    },
    quitarMulta() {
      const data = {
        id_institucion_usuario: 1,
      }

      this.updateIsLoading(true)
      axios
        .put(`${process.env.api}/multa`, data, this.operador.token)
        .then((res) => {
          this.buscar()
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    cambiarStatus(dataSelect, status) {
      const data = { id_usuario: dataSelect.id_usuario, activo: status }
      this.updateIsLoading(true)

      axios
        .put(`${process.env.api}/usuario`, data)
        .then((res) => {
          this.buscar()
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    updateUsuario() {
      const data = {
        id_usuario: this.usuario.id_usuario,
        telefono: this.nuevoTelefono
          ? this.nuevoTelefono
          : this.usuario.telefono,
        correo: this.nuevoEmail ? this.nuevoEmail : this.usuario.correo,
      }
      this.updateIsLoading(true)
      axios
        .put(`${process.env.api}/usuario`, data, this.operador.token)
        .then((res) => {
          this.buscar()
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
  watch: {
    usuario() {
      if (
        this.operador.institucion.id_institucion ===
        this.usuario.instituciones[0].institucionCarrera.institucion
          .id_institucion
      ) {
        this.institucion = this.usuario.instituciones[0]
      } else {
        this.institucion = this.usuario.instituciones[1]
      }
    },
  },
}
</script>

<style></style>