servicio_social_front/components/responsable/cuestionario.vue

<template>
  <div v-if="this.idServicio && this.cuestionario" class="container">
    <div class="section">
      <b-button
        class="border-info mb-5"
        type="is-info is-light"
        icon-left="arrow-left-box"
        tag="router-link"
        to="/responsable"
        >Regresar</b-button
      >

      <h1 class="title is-3 mt-2">
        Estimad(a) responsable de programa de servicio social:
      </h1>
      <p>
        Te solicitamos llenar cuidadosamente los campos solicitados a
        continuación para poder validar el término del servicio social de
        nuestro alumno(a)
      </p>
    </div>

    <section class="section pt-0">
      <h3 class="subtitle is-5">
        Mencione 5 actividades desempeñadas por el alumno:
      </h3>
      <b-input
        class="my-4"
        placeholder="1.-"
        v-model="actividad1"
        maxlength="400"
      ></b-input>
      <b-input
        class="my-4"
        placeholder="2.-"
        v-model="actividad2"
        maxlength="400"
      ></b-input>
      <b-input
        class="my-4"
        placeholder="3.-"
        v-model="actividad3"
        maxlength="400"
      ></b-input>
      <b-input
        class="my-4"
        placeholder="4.-"
        v-model="actividad4"
        maxlength="400"
      ></b-input>
      <b-input
        class="mt-3"
        placeholder="5.-"
        v-model="actividad5"
        maxlength="400"
      ></b-input>
    </section>

    <section class="section pt-0">
      <div class="columns">
        <p class="column is- 9">
          1. Conocimiento teóricos para las funciones encomendadas
        </p>
        <b-field class="column is-2">
          <b-select placeholder="Seleccionar" v-model="retroalimentacion[0]">
            <option value="1">Deficiente</option>
            <option value="2">Regular</option>
            <option value="3">Bueno</option>
            <option value="4">Excelente</option>
          </b-select>
        </b-field>
      </div>
      <br />

      <div class="columns">
        <p class="column is- 9">
          2. Conocimientos técnicos para las funciones encomendadas
        </p>
        <b-field class="column is-2">
          <b-select placeholder="Seleccionar" v-model="retroalimentacion[1]">
            <option value="1">Deficiente</option>
            <option value="2">Regular</option>
            <option value="3">Bueno</option>
            <option value="4">Excelente</option>
          </b-select>
        </b-field>
      </div>
      <br />

      <div class="columns">
        <p class="column is- 9">
          3. Iniciativa para la implementación de mejoras en la empresa
        </p>
        <b-field class="column is-2">
          <b-select placeholder="Seleccionar" v-model="retroalimentacion[2]">
            <option value="1">Deficiente</option>
            <option value="2">Regular</option>
            <option value="3">Bueno</option>
            <option value="4">Excelente</option>
          </b-select>
        </b-field>
      </div>
      <br />

      <div class="columns">
        <p class="column is- 9">
          4. Puntualidad en la entrega de los trabajos de las tareas
          encomendadas
        </p>
        <b-field class="column is-2">
          <b-select placeholder="Seleccionar" v-model="retroalimentacion[3]">
            <option value="1">Deficiente</option>
            <option value="2">Regular</option>
            <option value="3">Bueno</option>
            <option value="4">Excelente</option>
          </b-select>
        </b-field>
      </div>
      <br />

      <div class="columns">
        <p class="column is- 9">5. Desempeño general de sus funciones</p>
        <b-field class="column is-2">
          <b-select placeholder="Seleccionar" v-model="retroalimentacion[4]">
            <option value="1">Deficiente</option>
            <option value="2">Regular</option>
            <option value="3">Bueno</option>
            <option value="4">Excelente</option>
          </b-select>
        </b-field>
      </div>

      <p class="my-5">
        6. De acuerdo a lo observado ¿cuáles considera que son las cualidades de
        nuestros alumnos de esta licenciatura?
      </p>
      <b-input placeholder="Respuesta" maxlength="800" v-model="p6"></b-input>
      <p class="my-5">
        7. De acuerdo a lo observado ¿cuáles considera que son los aspectos a
        mejorar en la formación de nuestros alumnos de esta licenciatura?
      </p>
      <b-input placeholder="Respuesta" maxlength="800" v-model="p7"></b-input>

      <b-field class="centro">
        <b-button
          :disabled="
            actividad1 == '' ||
              actividad2 == '' ||
              actividad3 == '' ||
              actividad4 == '' ||
              actividad5 == '' ||
              retroalimentacion.length < 5 ||
              p6 == '' ||
              p7 == ''
          "
          class="border-success my-5"
          type="is-success"
          @click="enviarCuestionario()"
          >Enviar</b-button
        >
      </b-field>
    </section>

    <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="true">
    </b-loading>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      idServicio: localStorage.getItem("idServicio"),
      cuestionario: "",
      isLoading: false,
      actividad1: "",
      actividad2: "",
      actividad3: "",
      actividad4: "",
      actividad5: "",
      retroalimentacion: [],
      p6: "",
      p7: "",
      token: {
        headers: {
          token: window.localStorage.getItem("token"),
        },
      },
    };
  },
  methods: {
    enviarCuestionario() {
      const data = {
        idServicio: this.idServicio,
        actividad1: this.actividad1,
        actividad2: this.actividad2,
        actividad3: this.actividad3,
        actividad4: this.actividad4,
        actividad5: this.actividad5,
        retroalimentacion: this.retroalimentacion,
        p6: this.p6,
        p7: this.p7,
        idServicio: this.idServicio,
      };

      this.isLoading = true;
      axios
        .post(`${process.env.api}/cuestionario_programa`, data, this.token)
        .then((res) => {
          this.$buefy.dialog.alert({
            title: "Success",
            message: "Se enviaron los datos correctamente",
            type: "is-success",
            hasIcon: true,
            icon: "checkbox-marked-circle",
            iconPack: "mdi",
            ariaRole: "alertdialog",
            ariaModal: true,
          });
        })
        .catch((error) => {
          this.error(error.response.data.message);
        })
        .finally(() => {
          this.isLoading = false;
          localStorage.removeItem("idServicio");
          localStorage.removeItem("cuestionario");
          this.$router.push("/responsable");
        });
    },
    getIdLocal() {
      this.idServicio = localStorage.getItem("idServicio");
      this.cuestionario = localStorage.getItem("cuestionario");

      if (this.idServicio === null || this.cuestionario === null) {
        this.$router.push("/responsable");
      }
    },
    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.getIdLocal();
  },
};
</script>

<style>
.centro {
  text-align: center;
}
</style>