servicio_social_front/pages/admin/programa/infoResponsable/index.vue

<template>
  <div class="container">
    <BotonRegresar
      :path="'/admin/programa'"
      :deleteFromLocalStorage="['correo', 'idResponsable', 'nombre']"
    />
    <p class="is-size-2 mb-4">Información del responsable</p>
    <p class="is-size-4 mb-4"><strong>Nombre: </strong> {{ nombre }}</p>
    <p class="is-size-4 mb-4"><strong>Correo: </strong> {{ correo }}</p>
    <div class="columns">
      <p class="is-size-4 column is-narrow" style="width: 250px">
        <strong>Clave de programa: </strong>
      </p>
      <b-select
        class="column"
        v-model="selected"
        placeholder="Elija una clave: "
      >
        <option
          v-for="programa in programas"
          v-bind:key="programa.id"
          :value="programa"
        >
          {{ programa.clavePrograma }}
        </option>
      </b-select>
    </div>
    <p class="is-size-4 mb-4">
      <strong>Programa: </strong> {{ selected.programa }}
    </p>
    <p class="is-size-4 mb-4">
      <strong>Institución: </strong> {{ selected.institucion }}
    </p>
    <p class="is-size-4 mb-4">
      <strong>Dependencia: </strong> {{ selected.dependencia }}
    </p>
    <div class="">
      <b-button
        class="boton is-info my-5"
        tag="router-link"
        to="/admin/programa/infoResponsable/modificar"
      >
        Editar información
      </b-button>
    </div>
    <BotonRegresar
      :path="'/admin/programa'"
      :deleteFromLocalStorage="['correo', 'idResponsable', 'nombre']"
    />
  </div>
</template>

<script>
import axios from 'axios'
import botonRegresar from '../../../../components/botonRegresar'

export default {
  components: {
    botonRegresar,
  },
  data() {
    return {
      idResponsable: localStorage.getItem('idResponsable'),
      correo: localStorage.getItem('correo'),
      nombre: localStorage.getItem('nombre'),
      programas: [],
      selected: {},
      token: {
        headers: {
          token: window.localStorage.getItem('token'),
        },
      },
    }
  },
  methods: {
    obtenerProgramas() {
      return axios
        .get(
          `${process.env.api}/programa/programas_admin?idUsuario=${this.idResponsable}`,
          this.token
        )
        .then((res) => {
          this.programas = res.data
        })
        .catch((err) => {
          this.error(err.response.data.message)
        })
    },
    error(msj) {
      let salir = false
      switch (msj) {
        case 'invalid signature':
          msj = 'Tu token no es valido, inicia sesión de nuevo.'
          salir = true
          break
        case 'jwt expired':
          msj = 'Tu sesión ha expirado, inicia sesión de nuevo.'
          salir = true
          break
        case 'jwt malformed':
          msj = 'No se encontro tu token, inicia sesión de nuevo.'
          salir = true
          break
        case 'No hay token':
          msj = 'Ocurrio un error al enviar tu token, inicia sesión de nuevo.'
          salir = true
          break
      }

      this.$buefy.dialog.alert({
        title: 'Error',
        message: msj,
        type: 'is-danger',
        hasIcon: true,
        icon: 'alert-circle',
        iconPack: 'mdi',
        ariaRole: 'alertdialog',
        ariaModal: true,
      })
      if (salir == true) {
        localStorage.clear()
        this.$router.push(`/`)
      }
    },
  },
  created() {
    this.obtenerProgramas()
  },
  beforeCreate() {
    if (!localStorage.getItem('idResponsable')) {
      this.$router.push('/admin/programa')
    }
  },
}
</script>

<style scoped>
.programa {
  margin-right: 20px;
  padding-right: 20px;
}
</style>