feat: Añadir selección de cantidad de preguntas en el formulario de plantillas de prueba y mejorar la gestión de edición

This commit is contained in:
2026-04-02 12:21:45 -03:00
parent d0a8e13fb6
commit 4470e3d20b
4 changed files with 52 additions and 11 deletions
+19 -4
View File
@@ -6,18 +6,33 @@ import TestTemplateManager from '@/components/TestTemplates/TestTemplateManager'
import TestTemplateForm from '@/components/TestTemplates/TestTemplateForm';
export default function TestTemplatesPage() {
const [view, setView] = useState<'list' | 'create'>('list');
const [view, setView] = useState<'list' | 'create' | 'edit'>('list');
const [editingTemplateId, setEditingTemplateId] = useState<string | null>(null);
return (
<PageLayout title="Plantillas de Pruebas">
{view === 'list' ? (
<TestTemplateManager
onCreateTemplate={() => setView('create')}
onCreateTemplate={() => {
setEditingTemplateId(null);
setView('create');
}}
onEditTemplate={(template) => {
setEditingTemplateId(template.id);
setView('edit');
}}
/>
) : (
<TestTemplateForm
onSuccess={() => setView('list')}
onCancel={() => setView('list')}
templateId={view === 'edit' ? editingTemplateId || undefined : undefined}
onSuccess={() => {
setEditingTemplateId(null);
setView('list');
}}
onCancel={() => {
setEditingTemplateId(null);
setView('list');
}}
/>
)}
</PageLayout>
@@ -53,6 +53,7 @@ export default function TestTemplateForm({ onSuccess, onCancel }: TestTemplateFo
const [expandedQuestion, setExpandedQuestion] = useState<string | null>(null);
const [aiContext, setAiContext] = useState('');
const [aiQuestionType, setAiQuestionType] = useState<QuestionType>('multiple-choice');
const [aiQuestionCount, setAiQuestionCount] = useState<number>(5);
// MySQL course selection state
const [mysqlPlans, setMysqlPlans] = useState<MySqlPlan[]>([]);
@@ -249,7 +250,7 @@ export default function TestTemplateForm({ onSuccess, onCancel }: TestTemplateFo
},
body: JSON.stringify({
topic: aiContext,
num_questions: 5,
num_questions: aiQuestionCount,
question_type: aiQuestionType,
}),
});
@@ -577,6 +578,26 @@ export default function TestTemplateForm({ onSuccess, onCancel }: TestTemplateFo
<option value="fill-in-the-blanks">Completar espacios</option>
<option value="audio-response">Respuesta de audio</option>
</select>
<select
value={aiQuestionCount}
onChange={(e) => setAiQuestionCount(Number(e.target.value))}
className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 bg-white"
disabled={generatingAI}
>
<option value={1}>1</option>
<option value={2}>2</option>
<option value={3}>3</option>
<option value={4}>4</option>
<option value={5}>5</option>
<option value={6}>6</option>
<option value={7}>7</option>
<option value={8}>8</option>
<option value={9}>9</option>
<option value={10}>10</option>
<option value={12}>12</option>
<option value={15}>15</option>
<option value={20}>20</option>
</select>
<button
type="button"
onClick={handleGenerateWithAI}
@@ -590,6 +611,9 @@ export default function TestTemplateForm({ onSuccess, onCancel }: TestTemplateFo
<p className="text-xs text-gray-500">
La IA genera varios tipos de ejercicios. Hotspot y Code Lab quedan para creacion manual del instructor.
</p>
<p className="text-xs text-gray-500">
Puedes elegir entre 1 y 20 preguntas por generacion.
</p>
</div>
{/* Sections */}
@@ -16,9 +16,10 @@ import { Plus, Search, Filter, Edit2, Trash2, Eye, Copy, BookOpen, Clock, Target
interface TestTemplateManagerProps {
onSelectTemplate?: (template: TestTemplate) => void;
onCreateTemplate?: () => void;
onEditTemplate?: (template: TestTemplate) => void;
}
export default function TestTemplateManager({ onSelectTemplate, onCreateTemplate }: TestTemplateManagerProps) {
export default function TestTemplateManager({ onSelectTemplate, onCreateTemplate, onEditTemplate }: TestTemplateManagerProps) {
const [templates, setTemplates] = useState<TestTemplate[]>([]);
const [loading, setLoading] = useState(true);
@@ -346,7 +347,7 @@ export default function TestTemplateManager({ onSelectTemplate, onCreateTemplate
<Eye className="w-4 h-4" />
</button>
<button
onClick={() => alert(`Implementar: Editar plantilla ${template.id}`)}
onClick={() => onEditTemplate?.(template)}
className="p-1 text-gray-400 hover:text-green-600 transition-colors"
title="Editar"
>