back 1.0.38 y front 1.0.39 cambios en condicionales de sub preguntas, solo boleanos
This commit is contained in:
@@ -1130,107 +1130,127 @@ function QuestionsManagerModal({ checklist, onClose }) {
|
||||
<h4 className="text-sm font-semibold text-blue-900 mb-3">
|
||||
⚡ Pregunta Condicional - Subpreguntas Anidadas (hasta 5 niveles)
|
||||
</h4>
|
||||
<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>
|
||||
</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
|
||||
{/* Solo permitir condicionales para boolean y single_choice */}
|
||||
{(() => {
|
||||
const currentType = formData.options?.type || formData.type
|
||||
const allowConditional = ['boolean', 'single_choice'].includes(currentType)
|
||||
|
||||
if (!allowConditional) {
|
||||
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>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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 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>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user