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: 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>