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">Exelente</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">Exelente</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">Exelente</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">Exelente</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">Exelente</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 == '' ||
              p6 == '' ||
              p7 == ''
          "
          class="border-success my-5"
          type="is-success"
          @click="enviarCuestionario()"
          >Enviar</b-button
        >
      </b-field>
    </section>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      idServicio: "",
      cuestionario: "",

      actividad1: "",
      actividad2: "",
      actividad3: "",
      actividad4: "",
      actividad5: "",
      retroalimentacion: [],
      p6: "",
      p7: "",
      token: {
        headers: {
          token: window.localStorage.getItem("token"),
        },
      },
    };
  },
  methods: {
    enviarCuestionario() {
      const data = {
        actividad1: this.actividad1,
        actividad2: this.actividad2,
        actividad3: this.actividad3,
        actividad4: this.actividad4,
        actividad5: this.actividad5,
        retroalimentacion: this.retroalimentacion,
        p6: this.p6,
        p7: this.p7,
      };
      console.log(data);

      /*
      axios
        .post(`${process.env.api}/cuestionario_programa`, data)
        .then((res) => {});
      */
    },
    getIdLocal() {
      this.idServicio = localStorage.getItem("idServicio");
      this.cuestionario = localStorage.getItem("cuestionario");

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

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