Files
servicio_social_front/components/responsable/CuestionarioResponsable2copy.vue

681 lines
22 KiB
Vue

<template>
<div class="container mt-5">
<!--
<h1 class="text-center mb-4">{{ formulario.titulo }}</h1>
<p class="text-center">{{ formulario.descripcion }}</p> -->
<div>
<div
v-for="(item, index) in sortedItems"
:key="item.id || item.idTabla"
class="mb-6"
>
<div v-if="item.tipo" class="mt-6">
<label :for="item.id" class="form-label"
>{{ item.numeroPregunta }}. {{ item.texto }}</label
>
<div v-if="item.tipo === 'seleccionUnica'">
<div v-for="opcion in item.opciones" :key="opcion" class="SINO">
<b-radio
v-model="respuestas[item.id]"
:id="item.id"
:native-value="opcion"
type="is-info"
>
{{ opcion }}
</b-radio>
</div>
</div>
<div v-if="item.tipo === 'seleccionMultiple'">
<div v-for="opcion in item.opciones" :key="opcion" class="SINO">
<input
class="checkb"
type="checkbox"
:value="opcion"
v-model="respuestas[item.id]"
/>
{{ opcion }}
</div>
</div>
<div v-if="item.tipo === 'texto'">
<b-input
:id="item.id"
v-model="respuestas[item.id]"
placeholder="Escribe tu respuesta aquí"
></b-input>
</div>
</div>
<div v-else>
<!-- <h3 class="mb-3">{{ item.numeroPregunta }}. {{ item.preguntaTabla }}</h3>
<h5 v-if="item.subPreguntaTabla" class="mb-3">{{ item.subPreguntaTabla }}</h5>
-->
<template
v-if="
index === 0 ||
item.numeroPregunta !== sortedItems[index - 1].numeroPregunta
"
>
<h3 class="mb-3">
{{ item.numeroPregunta }}. {{ item.preguntaTabla }}
</h3>
</template>
<!-- Subtítulo (h5) siempre que exista -->
<h5 v-if="item.subPreguntaTabla" class="mb-3">
{{ item.subPreguntaTabla }}
</h5>
<table class="table table-bordered text-center">
<thead>
<tr>
<th></th>
<th v-for="opcion in item.renglones[0].opciones" :key="opcion">
{{ opcion }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="renglon in item.renglones" :key="renglon.idRenglon">
<td>{{ renglon.textoRenglon }}</td>
<td v-for="opcion in renglon.opciones" :key="opcion">
<input
type="radio"
:name="`tabla-${item.idTabla}-renglon-${renglon.idRenglon}`"
:value="opcion"
v-model="respuestas[item.idTabla][renglon.idRenglon]"
/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="my-6 mb-6">
<b-field class="centro">
<button
class="button is-success is-medium"
@click="() => {submitForm()}"
:disabled="!isFormComplete"
>
Enviar
</button>
</b-field>
</div>
</div>
</template>
<script>
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
import axios from 'axios'
export default {
data() {
return {
respuestas: {}, // Inicialización para almacenar las respuestas
formulario: {
titulo:
'2025 Evaluación de la institución receptora de servicio social',
descripcion: `Estimado(a) responsable de programa de servicio social:
Te solicitamos llenar cuidadosamente los campos solicitados a continuación para poder
validar el término del servicio social de nuestro alumno(a).
Los datos están sujetos al aviso de privacidad integral que se puede consultar en el sitio web: www.acatlan.unam.mx/normatividad`,
preguntas: [
{
numeroPregunta: 1,
id: 'actividadesUniversitario',
tipo: 'texto',
texto:
'Mencione las principales actividades que realizó el/la universitario(a) en su programa de servicio social',
},
{
numeroPregunta: 2,
id: 'calificacionGeneral',
tipo: 'seleccionUnica',
texto:
'Haciendo una evaluación general, ¿Cómo califica el desempeño del universitario(a)?',
opciones: ['Excelente', 'Bueno', 'Regular', 'Deficiente'],
},
{
numeroPregunta: 4,
id: 'cursosComplementarios',
tipo: 'texto',
texto:
'¿Qué cursos considera que complementarían la formación de nuestros egresados?',
},
{
numeroPregunta: 5,
id: 'contratariaFuturo',
tipo: 'seleccionUnica',
texto: '¿Considera contratar en un futuro al universitario(a)?',
opciones: ['Sí', 'No'],
},
{
numeroPregunta: 6,
id: 'porqueNoContrataria',
tipo: 'texto',
texto:
'Si su respuesta a la pregunta anterior fue NO, comente ¿por qué?',
condicional: {
preguntaId: 'contratariaFuturo',
valor: 'No',
},
},
],
tablas: [
// ----- PREGUNTA 3, dividida en sub-secciones A, B, C, D, E ------
{
idTabla: 301,
numeroPregunta: 3,
preguntaTabla:
'Haciendo una evaluación general, ¿Cómo Califica el desempeño del universitario(a)?',
subPreguntaTabla: 'A. Habilidades personales',
renglones: [
{
idRenglon: 1,
textoRenglon: 'Puntualidad',
opciones: ['Deficiente', 'Básico', 'Intermedio', 'Destacado'],
},
{
idRenglon: 2,
textoRenglon: 'Eficiencia',
opciones: ['Deficiente', 'Básico', 'Intermedio', 'Destacado'],
},
{
idRenglon: 3,
textoRenglon: 'Organizado',
opciones: ['Deficiente', 'Básico', 'Intermedio', 'Destacado'],
},
{
idRenglon: 4,
textoRenglon: 'Eficacia',
opciones: ['Deficiente', 'Básico', 'Intermedio', 'Destacado'],
},
],
},
{
idTabla: 302,
numeroPregunta: 3,
preguntaTabla:
'3. Haciendo una evaluación general, ¿Cómo califica el desempeño del universitario(a)?',
subPreguntaTabla: 'B. Habilidades profesionales',
renglones: [
{
idRenglon: 1,
textoRenglon: 'Disposición',
opciones: ['Deficiente', 'Básico', 'Intermedio', 'Destacado'],
},
{
idRenglon: 2,
textoRenglon: 'Proactivo/anticipación',
opciones: ['Deficiente', 'Básico', 'Intermedio', 'Destacado'],
},
{
idRenglon: 3,
textoRenglon: 'Propositivo',
opciones: ['Deficiente', 'Básico', 'Intermedio', 'Destacado'],
},
{
idRenglon: 4,
textoRenglon: 'Resolutivo',
opciones: ['Deficiente', 'Básico', 'Intermedio', 'Destacado'],
},
],
},
{
idTabla: 303,
numeroPregunta: 3,
preguntaTabla:
'3. Haciendo una evaluación general, ¿Cómo califica el desempeño del universitario(a)?',
subPreguntaTabla: 'C. Habilidades sociales',
renglones: [
{
idRenglon: 1,
textoRenglon: 'Empatía',
opciones: ['Deficiente', 'Básico', 'Intermedio', 'Destacado'],
},
{
idRenglon: 2,
textoRenglon: 'Trabajo en equipo',
opciones: ['Deficiente', 'Básico', 'Intermedio', 'Destacado'],
},
{
idRenglon: 3,
textoRenglon: 'Comunicación asertiva',
opciones: ['Deficiente', 'Básico', 'Intermedio', 'Destacado'],
},
{
idRenglon: 4,
textoRenglon: 'Receptividad',
opciones: ['Deficiente', 'Básico', 'Intermedio', 'Destacado'],
},
{
idRenglon: 5,
textoRenglon: 'Tolerancia a la frustración',
opciones: ['Deficiente', 'Básico', 'Intermedio', 'Destacado'],
},
],
},
{
idTabla: 304,
numeroPregunta: 3,
preguntaTabla:
'3. Haciendo una evaluación general, ¿Cómo califica el desempeño del universitario(a)?',
subPreguntaTabla: 'D. Conocimientos',
renglones: [
{
idRenglon: 1,
textoRenglon: 'Conocimientos teóricos',
opciones: ['Deficiente', 'Básico', 'Intermedio', 'Destacado'],
},
{
idRenglon: 2,
textoRenglon: 'Conocimientos metodológicos',
opciones: ['Deficiente', 'Básico', 'Intermedio', 'Destacado'],
},
{
idRenglon: 3,
textoRenglon: 'Pensamiento crítico',
opciones: ['Deficiente', 'Básico', 'Intermedio', 'Destacado'],
},
{
idRenglon: 4,
textoRenglon: 'Formación académica general',
opciones: ['Deficiente', 'Básico', 'Intermedio', 'Destacado'],
},
{
idRenglon: 5,
textoRenglon: 'Uso tecnológico',
opciones: ['Deficiente', 'Básico', 'Intermedio', 'Destacado'],
},
],
},
/* {
idTabla: 305,
numeroPregunta: 3,
preguntaTabla:
'3. Haciendo una evaluación general, ¿Cómo califica el desempeño del universitario(a)?',
subPreguntaTabla: 'E. Otro',
renglones: [
{
idRenglon: 1,
textoRenglon: 'Otro',
opciones: ['Deficiente', 'Básico', 'Intermedio', 'Destacado'],
},
],
}, */
],
},
}
},
/* created() {
// Inicializa las respuestas vacías para cada pregunta
this.formulario.preguntas.forEach((pregunta) => {
if (pregunta.tipo === 'evaluacion') {
this.respuestas[pregunta.id] = {}
pregunta.categorias.forEach((categoria) => {
categoria.items.forEach((item) => {
this.respuestas[pregunta.id][item] = ''
})
})
} else if (
pregunta.tipo === 'checkbox' ||
pregunta.tipo === 'seleccionMultiple'
) {
this.respuestas[pregunta.id] = []
} else {
this.respuestas[pregunta.id] = ''
}
})
// Inicializa respuestas para cada tabla
this.formulario.tablas.forEach((tabla) => {
this.$set(this.respuestas, tabla.idTabla, {}); // Asegura que exista respuestas[tabla.idTabla]
tabla.renglones.forEach((renglon) => {
this.$set(this.respuestas[tabla.idTabla], renglon.idRenglon, null); // Asegura que exista respuestas[tabla.idTabla][renglon.idRenglon]
});
});
}, */
created() {
this.formulario.preguntas.forEach((pregunta) => {
if (pregunta.tipo === 'seleccionMultiple') {
this.$set(this.respuestas, pregunta.id, []) // Inicializar correctamente selección múltiple
} else {
this.$set(this.respuestas, pregunta.id, '') // Otras preguntas como texto o selección única
}
})
// Inicializa respuestas para cada tabla
this.formulario.tablas.forEach((tabla) => {
this.$set(this.respuestas, tabla.idTabla, {})
tabla.renglones.forEach((renglon) => {
this.$set(this.respuestas[tabla.idTabla], renglon.idRenglon, null)
})
})
},
computed: {
sortedItems() {
const items = [...this.formulario.preguntas, ...this.formulario.tablas]
return items.sort((a, b) => {
if (a.numeroPregunta === b.numeroPregunta) {
return (a.idTabla || 0) - (b.idTabla || 0)
}
return a.numeroPregunta - b.numeroPregunta
})
},
isFormComplete() {
// Verifica todas las preguntas individuales
const allQuestionsAnswered = this.formulario.preguntas.every(
(pregunta) => {
const respuesta = this.respuestas[pregunta.id]
if (pregunta.tipo === 'seleccionMultiple') {
return respuesta && respuesta.length > 0 // Debe tener al menos una opción seleccionada
}
return respuesta !== null && respuesta !== '' // No debe ser null ni vacío
}
)
// Verifica todas las respuestas de la tabla
const allTablesAnswered = this.formulario.tablas.every((tabla) => {
return tabla.renglones.every((renglon) => {
return (
this.respuestas[tabla.idTabla] &&
this.respuestas[tabla.idTabla][renglon.idRenglon] !== null
)
})
})
return allQuestionsAnswered && allTablesAnswered
},
},
methods: {
submitForm() {
if (!this.validateResponses()) {
return // Detiene el envío si la validación falla
}
console.log('Respuestas enviadas:', this.respuestas)
//alert('Formulario enviado. Gracias por tu participación.')
// Aquí formateamos las respuestas
const respuestaFormateada = this.formatearRespuestas(this.respuestas)
console.log('Respuestas formateadas:', respuestaFormateada)
// this.sendAnswers(respuestaFormateada)
let data = {
...respuestaFormateada,
idServicio: localStorage.getItem('idServicio'),
p1: 'respuesta1 - trabajando para que sea una string',
}
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',
ariaRole: 'alertdialog',
ariaModal: true,
})
//this.reset()
localStorage.removeItem('idCuestionarioAlumno')
this.$router.push('/alumno')
})
.catch((error) => {
// this.error(error.response.data.message)
this.$buefy.dialog.alert({
title: 'Error',
message:
error.response?.data?.message || 'Error al enviar el formulario',
type: 'is-danger',
})
})
.finally(() => {
this.isLoading = false
})
},
formatearRespuestas(respuestas) {
// Objeto final a devolver
const resultado = {}
// Recorremos todas las claves de "respuestas"
for (const key in respuestas) {
// Verificamos si es un ID de tabla (numérico) o un ID de pregunta (string)
const esTabla = !isNaN(Number(key)) // true si la clave se puede convertir a número
if (esTabla) {
// 1) BUSCAMOS LA DEFINICIÓN DE LA TABLA
const idTabla = parseInt(key, 10)
const tablaDef = this.formulario.tablas.find(
(t) => t.idTabla === idTabla
)
if (!tablaDef) {
// Si no se encontró la tabla, continuamos
continue
}
// 2) OBTENEMOS EL NÚMERO DE PREGUNTA Y, OPCIONALMENTE, LA LETRA (A, B, C...)
const numPregunta = tablaDef.numeroPregunta
// Si quieres “sacar” la letra (A, B, C…) de algo como "A. Habilidades sociales"
// Se puede hacer un match sencillo al principio
let subLetra = ''
if (tablaDef.subPreguntaTabla) {
// Ejemplo: "A. Habilidades personales"
const coincidencia = tablaDef.subPreguntaTabla.match(/^([A-E])\./)
if (coincidencia) {
subLetra = coincidencia[1] // 'A', 'B', 'C', etc.
}
}
// 3) LUEGO RECORREMOS LAS RESPUESTAS DE LA TABLA (por cada idRenglon)
const respuestasTabla = respuestas[key] // p.ej: { "1": "Deficiente", "2": "Básico", ... }
for (const idRenglon in respuestasTabla) {
const valor = respuestasTabla[idRenglon]
// Formamos la clave final.
// Si hay subLetra, hacemos `p3_A_1`. Sino, solo `p3_1`.
let clave = `p${numPregunta}_${idRenglon}`
if (subLetra) {
clave = `p${numPregunta}_${subLetra}_${idRenglon}`
}
resultado[clave] = valor
}
} else {
// NO ES UNA TABLA => ES UNA PREGUNTA NORMAL
// Buscamos su definición para obtener el numeroPregunta
const preguntaDef = this.formulario.preguntas.find(
(p) => p.id === key
)
if (!preguntaDef) {
// No se encontró la definición (caso raro)
continue
}
const numPregunta = preguntaDef.numeroPregunta
// Creamos algo como `p2`, `p5`, etc.
const clave = `p${numPregunta}`
resultado[clave] = respuestas[key]
}
}
return resultado
},
validateResponses() {
for (const pregunta of this.formulario.preguntas) {
const respuesta = this.respuestas[pregunta.id]
// Verifica que no haya respuestas vacías
if (respuesta === null || respuesta === '') {
this.$buefy.dialog.alert({
title: 'Error',
message: `Por favor, responde la pregunta: "${pregunta.texto}"`,
type: 'is-danger',
})
return false
}
// Para selección múltiple, al menos un elemento debe estar seleccionado
if (
pregunta.tipo === 'seleccionMultiple' &&
(!respuesta || respuesta.length === 0)
) {
this.$buefy.dialog.alert({
title: 'Error',
message: `Por favor, selecciona al menos una opción en: "${pregunta.texto}"`,
type: 'is-danger',
})
return false
}
// Validación adicional si la pregunta es de texto (evitar respuestas peligrosas)
if (pregunta.tipo === 'texto' && respuesta.length > 500) {
this.$buefy.dialog.alert({
title: 'Error',
message: `La respuesta de la pregunta "${pregunta.texto}" es demasiado larga.`,
type: 'is-danger',
})
return false
}
}
// Verifica que todas las respuestas en las tablas estén completas
for (const tabla of this.formulario.tablas) {
for (const renglon of tabla.renglones) {
const respuesta = this.respuestas[tabla.idTabla]?.[renglon.idRenglon]
if (respuesta === null) {
this.$buefy.dialog.alert({
title: 'Error',
message: `Por favor, responde la pregunta en la tabla: "${tabla.preguntaTabla}" en la fila "${renglon.textoRenglon}"`,
type: 'is-danger',
})
return false
}
}
}
return true
},
updateRespuestas(id, valor) {
this.$set(this.respuestas, id, valor)
console.log('Radio seleccionado:', id, valor)
},
},
}
</script>
<!-- respuestas de cuestionario formulario2
todas las preguntas se guardan correctamente
{
"p3_A_1": "Deficiente",
"p3_A_2": "Deficiente",
"p3_A_3": "Deficiente",
"p3_A_4": "Deficiente",
"p3_B_1": "Básico",
"p3_B_2": "Básico",
"p3_B_3": "Básico",
"p3_B_4": "Básico",
"p3_C_1": "Intermedio",
"p3_C_2": "Intermedio",
"p3_C_3": "Intermedio",
"p3_C_4": "Intermedio",
"p3_C_5": "Intermedio",
"p3_D_1": "Destacado",
"p3_D_2": "Destacado",
"p3_D_3": "Destacado",
"p3_D_4": "Destacado",
"p3_D_5": "Destacado",
"p3_E_1": "Deficiente",
"p1": "respuesta1",
"p2": "Excelente",
"p4": "respuesta4",
"p5": "Sí",
"p6": "respuesta 6"
} -->
<!-- respuestas de cuestionario formulario alumno
{
"p12_A_1": "Deficiente",
"p12_A_2": "Deficiente",
"p12_A_3": "Deficiente",
"p12_A_4": "Deficiente",
"p12_B_1": "Básico",
"p12_B_2": "Básico",
"p12_B_3": "Básico",
"p12_B_4": "Básico",
"p12_C_1": "Intermedio",
"p12_C_2": "Intermedio",
"p12_C_3": "Intermedio",
"p12_C_4": "Intermedio",
"p10_1": "si",
"p10_2": "si",
"p10_3": "si",
"p11_1": "Nunca",
"p11_2": "Rara vez",
"p11_3": "Algunas veces",
"p11_4": "Siempre",
"p17_1": "si",
"p17_2": "no",
"p17_3": "si",
"p3_1": "si",
"p3_2": "si",
"p3_3": "si",
"p3_4": "si",
"p12_D_1": "Destacado",
"p12_D_2": "Destacado",
"p12_D_3": "Destacado",
"p12_D_4": "Destacado",
"p12_D_5": "Destacado",
"p1": [
"Dependencia de la UNAM",
"Asesoría académica",
"Oportunidad de desarrollo de tesis"
],
"p2": "Deficiente",
"p4": "No",
"p5": "respuesta5",
"p6": "Sí",
"p7": "Sí",
"p8": "respuesta8",
"p9": "Sí",
"p13": "Responsable directo del programa",
"p14": "Se te otorgó de acuerdo a lo establecido",
"p15": "Sí",
"p16": "respuesta 16",
"p18": "respuesta18"
}
-->