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>