pcpuma_unam_operador/components/panel_admin/AdminInstitucionSA.vue

<template>
  <div class="column is-4">
    <h3 class="is-size-4 mb-4">Alta del responsable de PC-Puma</h3>

    <b-field label="Nombre del responsable" v-show="admin.tipoUsuario.id_tipo_usuario === 2">
      <b-input
        type="text"
        :disabled="!institucion.id_institucion"
        :has-counter="false"
        :maxlength="60"
        :placeholder="institucion.responsable"
        v-model="responsable"
      />
    </b-field>

    <b-field label="Correo" v-show="admin.tipoUsuario.id_tipo_usuario === 2">
      <b-input
        type="email"
        :disabled="!institucion.id_institucion"
        :has-counter="false"
        :maxlength="60"
        :placeholder="institucion.correo"
        v-model="correo"
      />
    </b-field>

    <b-field label="Teléfono" v-show="admin.tipoUsuario.id_tipo_usuario === 2">
      <b-input
        type="tel"
        :disabled="!institucion.id_institucion"
        :has-counter="false"
        :maxlength="10"
        :placeholder="institucion.telefono"
        v-model="telefono"
      />
    </b-field>

    <b-field label="Ubicación" v-show="admin.tipoUsuario.id_tipo_usuario === 2">
      <b-input
        type="text"
        :disabled="!institucion.id_institucion"
        :has-counter="false"
        :maxlength="100"
        :placeholder="institucion.ubicacion"
        v-model="ubicacion"
      />
    </b-field>

    <BotonGuardar
      :disabled="responsable || correo || telefono || ubicacion ? false : true"
      :guardar="actualizarDatos"
      msjWarning="¿Estas segur@ de querer guardar estos cambios?"
    />
  </div>
</template>

<script>
import axios from 'axios'
import BotonGuardar from '@/components/botones/BotonGuardar'

export default {
  components: { BotonGuardar },
  props: {
    buscar: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
    admin: { type: Object, required: true },
    institucion: { type: Object, required: true },
  },
  data() {
    return {
      correo: '',
      responsable: '',
      telefono: '',
      ubicacion: '',
    }
  },
  methods: {
    actualizarDatos() {
      const data = { id_institucion: this.institucion.id_institucion }

      this.updateIsLoading(true)
      if (this.correo) data.correo = this.correo
      if (this.responsable) data.responsable = this.responsable
      if (this.telefono) data.telefono = this.telefono
      if (this.ubicacion) data.ubicacion = this.ubicacion
      axios
        .put(`${process.env.api}/institucion`, data, this.$getToken.token())
        .then((res) => {
          this.correo = ''
          this.responsable = ''
          this.telefono = ''
          this.ubicacion = ''
          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)
        })
    },
  },
}
</script>

<style></style>