gitea/checklist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Frontend (v1.0.98):

Browse Source 
Formulario mejorado (App.jsx):

Selector de pregunta padre SIEMPRE disponible para cualquier tipo
Selector de condición opcional (solo si el padre es boolean/single_choice)
Indicadores visuales claros:
Verde: "Esta subpregunta aparecerá SIEMPRE"
Azul: "⚡ Condición aplicada"
Visualización distinguible:

Badge verde 📎 para subpreguntas siempre visibles
Badge azul ⚡ para subpreguntas condicionales
Texto explicativo debajo de cada subpregunta
This commit is contained in:
ronalds
2025-12-02 17:58:43 -03:00
parent c6a6ba976e
commit fce31467d8
3 changed files with 130 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json
View File

@@ -1,7 +1,7 @@
{
"name": "checklist-frontend",
"private": true,
"version": "1.0.97",
"version": "1.0.98",
"type": "module",
"scripts": {
"dev": "vite",

2
frontend/public/service-worker.js
View File

@@ -1,6 +1,6 @@
// Service Worker para PWA con detección de actualizaciones
// IMPORTANTE: Actualizar esta versión cada vez que se despliegue una nueva versión
const CACHE_NAME = 'ayutec-v1.0.97';
const CACHE_NAME = 'ayutec-v1.0.98';
const urlsToCache = [
'/',
'/index.html'

254
frontend/src/App.jsx
View File

@@ -1692,134 +1692,124 @@ function QuestionsManagerModal({ checklist, onClose }) {
/>
</div>
{/* Pregunta Condicional - Subpreguntas Anidadas hasta 5 niveles */}
{/* Subpreguntas y Preguntas Condicionales - Anidadas hasta 5 niveles */}
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
<h4 className="text-sm font-semibold text-blue-900 mb-3">
⚡ Pregunta Condicional - Subpreguntas Anidadas (hasta 5 niveles)
📋 Subpreguntas y Preguntas Condicionales (hasta 5 niveles)
</h4>
{/* Solo permitir condicionales para boolean y single_choice */}
{(() => {
const currentType = formData.options?.type || formData.type
const allowConditional = ['boolean', 'single_choice'].includes(currentType)
if (!allowConditional) {
<div className="space-y-4">
{/* Selector de pregunta padre - SIEMPRE disponible */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Pregunta padre (opcional)
</label>
<select
value={formData.parent_question_id || ''}
onChange={(e) => setFormData({
...formData,
parent_question_id: e.target.value ? parseInt(e.target.value) : null,
show_if_answer: '' // Reset al cambiar padre
})}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 bg-white"
>
<option value="">Ninguna (pregunta principal)</option>
{questions
.filter(q => {
// Permitir cualquier pregunta que no sea esta misma
// y que tenga depth_level < 5 (para no exceder límite)
const depth = q.depth_level || 0
return depth < 5 && (!editingQuestion || q.id !== editingQuestion.id)
})
.map(q => {
const depth = q.depth_level || 0
const indent = ' '.repeat(depth)
const levelLabel = depth > 0 ? ` [Nivel ${depth}]` : ''
return (
<option key={q.id} value={q.id}>
{indent}#{q.id} - {q.text.substring(0, 40)}{q.text.length > 40 ? '...' : ''}{levelLabel}
</option>
)
})
}
</select>
<p className="text-xs text-gray-500 mt-1">
Si seleccionas una pregunta padre, esta pregunta se mostrará como subpregunta debajo de ella
</p>
</div>
{/* Condición - Solo si hay padre y el padre es boolean/single_choice */}
{formData.parent_question_id && (() => {
const parentQ = questions.find(q => q.id === formData.parent_question_id)
if (!parentQ) return null
const config = parentQ.options || {}
const parentType = config.type || parentQ.type
const isConditionalParent = ['boolean', 'single_choice'].includes(parentType)
if (!isConditionalParent) {
return (
<div className="p-3 bg-green-50 rounded-lg border border-green-200">
<p className="text-sm text-green-800">
✓ Esta subpregunta aparecerá <strong>SIEMPRE</strong> debajo de la pregunta padre seleccionada
</p>
</div>
)
}
return (
<div className="p-3 bg-gray-50 rounded-lg border border-gray-200">
<p className="text-sm text-gray-600">
ℹ️ Las preguntas condicionales solo están disponibles para tipos <strong>Boolean</strong> y <strong>Opción Única</strong>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
⚡ Condición (opcional) - Mostrar si la respuesta es:
</label>
<select
value={formData.show_if_answer || ''}
onChange={(e) => setFormData({ ...formData, show_if_answer: e.target.value || null })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 bg-white"
>
<option value="">Siempre visible (sin condición)</option>
{config.choices ? (
config.choices.map((choice, idx) => (
<option key={idx} value={choice.value}>
Solo si es: {choice.label}
</option>
))
) : (
// Compatibilidad con tipos antiguos
parentType === 'pass_fail' ? [
<option key="pass" value="pass">Solo si es: ✓ Pasa</option>,
<option key="fail" value="fail">Solo si es: ✗ Falla</option>
] : [
<option key="good" value="good">Solo si es: ✓ Bueno</option>,
<option key="bad" value="bad">Solo si es: ✗ Malo</option>
]
)}
</select>
<p className="text-xs text-gray-500 mt-1">
{formData.show_if_answer
? '⚡ Se mostrará SOLO cuando la respuesta del padre coincida'
: '✓ Se mostrará SIEMPRE debajo de la pregunta padre'}
</p>
</div>
)
}
return (
<>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Pregunta padre
</label>
<select
value={formData.parent_question_id || ''}
onChange={(e) => setFormData({
...formData,
parent_question_id: e.target.value ? parseInt(e.target.value) : null,
show_if_answer: '' // Reset al cambiar padre
})}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 bg-white"
>
<option value="">Ninguna (pregunta principal)</option>
{questions
.filter(q => {
// Permitir cualquier pregunta que no sea esta misma
// y que tenga depth_level < 5 (para no exceder límite)
const depth = q.depth_level || 0
return depth < 5
})
.map(q => {
const depth = q.depth_level || 0
const indent = ' '.repeat(depth)
const levelLabel = depth > 0 ? ` [Nivel ${depth}]` : ''
return (
<option key={q.id} value={q.id}>
{indent}#{q.id} - {q.text.substring(0, 40)}{q.text.length > 40 ? '...' : ''}{levelLabel}
</option>
)
})
}
</select>
<p className="text-xs text-gray-500 mt-1">
Esta pregunta aparecerá solo si se cumple la condición de la pregunta padre
</p>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Mostrar si la respuesta es:
</label>
<select
value={formData.show_if_answer}
onChange={(e) => setFormData({ ...formData, show_if_answer: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 bg-white"
disabled={!formData.parent_question_id}
>
<option value="">Seleccione...</option>
{formData.parent_question_id && (() => {
const parentQ = questions.find(q => q.id === formData.parent_question_id)
if (!parentQ) return null
// Leer opciones del nuevo formato
const config = parentQ.options || {}
const parentType = config.type || parentQ.type
// Para boolean o single_choice, mostrar las opciones configuradas
if ((parentType === 'boolean' || parentType === 'single_choice') && config.choices) {
return config.choices.map((choice, idx) => (
<option key={idx} value={choice.value}>
{choice.label}
</option>
))
}
// Compatibilidad con tipos antiguos
if (parentType === 'pass_fail') {
return [
<option key="pass" value="pass">✓ Pasa</option>,
<option key="fail" value="fail">✗ Falla</option>
]
} else if (parentType === 'good_bad') {
return [
<option key="good" value="good">✓ Bueno</option>,
<option key="bad" value="bad">✗ Malo</option>
]
}
return <option disabled>Tipo de pregunta no compatible</option>
})()}
</select>
<p className="text-xs text-gray-500 mt-1">
La pregunta solo se mostrará con esta respuesta específica
</p>
</div>
})()}
{/* Indicador de profundidad */}
{formData.parent_question_id && (() => {
const parentQ = questions.find(q => q.id === formData.parent_question_id)
const parentDepth = parentQ?.depth_level || 0
const newDepth = parentDepth + 1
return (
<div className={`p-2 rounded ${newDepth >= 5 ? 'bg-red-50 border border-red-200' : 'bg-blue-100'}`}>
<p className="text-xs">
📊 <strong>Profundidad:</strong> Nivel {newDepth} de 5 máximo
{newDepth >= 5 && ' ⚠️ Máximo alcanzado'}
</p>
</div>
{/* Indicador de profundidad */}
{formData.parent_question_id && (() => {
const parentQ = questions.find(q => q.id === formData.parent_question_id)
const parentDepth = parentQ?.depth_level || 0
const newDepth = parentDepth + 1
return (
<div className={`mt-3 p-2 rounded ${newDepth >= 5 ? 'bg-red-50 border border-red-200' : 'bg-blue-100'}`}>
<p className="text-xs">
📊 <strong>Profundidad:</strong> Nivel {newDepth} de 5 máximo
{newDepth >= 5 && ' ⚠️ Máximo alcanzado'}
</p>
</div>
)
})()}
</>
)
})()}
)
})()}
</div>
</div>
{/* AI Prompt - Solo visible si el checklist tiene IA habilitada */}
@@ -1979,15 +1969,22 @@ function QuestionsManagerModal({ checklist, onClose }) {
<div className="flex-1">
<div className="flex items-center gap-2">
{isSubQuestion && (
<span className="text-xs bg-blue-200 text-blue-800 px-2 py-1 rounded">
⚡ Condicional
<span className={`text-xs px-2 py-1 rounded ${
question.show_if_answer
? 'bg-blue-200 text-blue-800'
: 'bg-green-200 text-green-800'
}`}>
{question.show_if_answer ? '⚡ Condicional' : '📎 Subpregunta'}
</span>
)}
<p className="text-gray-900">{question.text}</p>
</div>
{isSubQuestion && parentQuestion && (
<p className="text-xs text-blue-600 mt-1">
→ Aparece si <strong>#{question.parent_question_id}</strong> es <strong>{question.show_if_answer}</strong>
<p className={`text-xs mt-1 ${question.show_if_answer ? 'text-blue-600' : 'text-green-600'}`}>
{question.show_if_answer
? `→ Aparece si #${question.parent_question_id} es ${question.show_if_answer}`
: `→ Siempre visible debajo de #${question.parent_question_id}`
}
</p>
)}
<div className="flex gap-4 mt-2 text-sm text-gray-600">
@@ -4416,11 +4413,16 @@ function InspectionModal({ checklist, existingInspection, user, onClose, onCompl
// If no parent, always visible
if (!q.parent_question_id) return true
// Check parent answer
// If has parent but NO condition (show_if_answer is null/empty), always show if parent was answered
if (!q.show_if_answer) {
const parentAnswer = answers[q.parent_question_id]
return !!parentAnswer // Show if parent has any answer
}
// If has parent AND condition, check if parent answer matches
const parentAnswer = answers[q.parent_question_id]
if (!parentAnswer) return false
// Show if parent answer matches trigger
return parentAnswer.value === q.show_if_answer
})
.sort((a, b) => a.order - b.order) // Mantener orden del backend