servicio_social_front/components/admin/InformacionResponsable.vue

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

    <b-field label="Nombre:">
      <p class="input">{{ responsable.nombre }}</p>
    </b-field>

    <b-field label="Correo:">
      <p class="input">{{ responsable.usuario }}</p>
    </b-field>

    <b-field label="Activo:">
      <p class="input">{{ responsable.activo ? 'Si' : 'No' }}</p>
    </b-field>

    <b-field label="Clave de programa:">
      <b-select v-model="programa" expanded>
        <option value="" disabled>Elija una clave de programa:</option>

        <option v-for="(p, i) in programas" :key="i" :value="p">
          {{ p.clavePrograma }}
        </option>
      </b-select>
    </b-field>

    <b-field label="Institucion:">
      <p class="input">{{ programa.institucion }}</p>
    </b-field>

    <b-field label="Dependencia:">
      <p class="input">{{ programa.dependencia }}</p>
    </b-field>

    <b-field label="Programa:">
      <p class="input">{{ programa.programa }}</p>
    </b-field>

    <b-field label="Programa de Acatlan:">
      <p class="input">
        <span v-if="programa.idPrograma">
          {{ programa.acatlan ? 'Si' : 'No' }}
        </span>
      </p>
    </b-field>

    <b-field label="Activo:">
      <p class="input">
        <span v-if="programa.idPrograma">
          {{ programa.activo ? 'Si' : 'No' }}
        </span>
      </p>
    </b-field>

    <b-field class="mt-5">
      <b-button
        type="is-link"
        tag="router-link"
        to="/admin/responsables/responsable/editar"
      >
        Editar información
      </b-button>
    </b-field>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    admin: { type: Object, required: true },
    imprimirError: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      idResponsable: null,
      programas: [],
      programa: {},
      responsable: {},
    }
  },
  methods: {
    obtenerResponsable() {
      this.updateIsLoading(true)
      axios
        .get(
          `${process.env.api}/usuario/responsable?idUsuario=${this.idResponsable}`,
          this.admin.token
        )
        .then((res) => {
          this.responsable = res.data
          this.obtenerProgramas()
          this.updateIsLoading(false)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
    obtenerProgramas() {
      axios
        .get(
          `${process.env.api}/programa/programas_admin?idUsuario=${this.idResponsable}`,
          this.admin.token
        )
        .then((res) => {
          this.programas = res.data
        })
        .catch((err) => {
          this.imprimirError(err.response.data)
        })
    },
  },
  created() {
    this.idResponsable = Number(localStorage.getItem('idResponsable'))
    if (!this.idResponsable) this.$router.push('/admin/responsables')
    else this.obtenerResponsable()
  },
}
</script>

<style scoped></style>