Nurfog
7f9b9d69ae
- Added functionality to save study plans and courses in SAM format to PostgreSQL. - Updated SQL queries to reflect SAM-native column names and handle conflicts appropriately. - Introduced new fields in the Asset model for English level and SAM identifiers. - Enhanced the TestTemplateForm component to manage linked assets and shared materials. - Created a new AdminSharedMaterialsPage for uploading ZIP files of shared materials. - Added migrations to create SAM mirror tables and update the assets table with new columns.
535 lines
25 KiB
TypeScript
535 lines
25 KiB
TypeScript
'use client';
|
|
|
|
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
|
import {
|
|
cmsApi,
|
|
questionBankApi,
|
|
TestTemplate,
|
|
TestTemplateFilters,
|
|
TestType,
|
|
Course,
|
|
Module,
|
|
Lesson,
|
|
MySqlPlan,
|
|
MySqlCourse,
|
|
} from '@/lib/api';
|
|
import { Plus, Search, Filter, Edit2, Trash2, Eye, Copy, BookOpen, Clock, Target, Tag, X } from 'lucide-react';
|
|
|
|
interface TestTemplateManagerProps {
|
|
onSelectTemplate?: (template: TestTemplate) => void;
|
|
onCreateTemplate?: () => void;
|
|
onEditTemplate?: (template: TestTemplate) => void;
|
|
}
|
|
|
|
export default function TestTemplateManager({ onSelectTemplate, onCreateTemplate, onEditTemplate }: TestTemplateManagerProps) {
|
|
const [templates, setTemplates] = useState<TestTemplate[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const [filters, setFilters] = useState<TestTemplateFilters>({});
|
|
const [showFilters, setShowFilters] = useState(false);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [filterPlans, setFilterPlans] = useState<MySqlPlan[]>([]);
|
|
const [filterCourses, setFilterCourses] = useState<MySqlCourse[]>([]);
|
|
const [filterPlanId, setFilterPlanId] = useState<number | ''>('');
|
|
const [filterCourseId, setFilterCourseId] = useState<number | ''>('');
|
|
|
|
const [showApplyModal, setShowApplyModal] = useState(false);
|
|
const [selectedTemplate, setSelectedTemplate] = useState<TestTemplate | null>(null);
|
|
const [courses, setCourses] = useState<Course[]>([]);
|
|
const [selectedTargetCourseId, setSelectedTargetCourseId] = useState<string>('');
|
|
|
|
const [selectedLesson, setSelectedLesson] = useState<string>('');
|
|
const [applying, setApplying] = useState(false);
|
|
|
|
const resetApplyState = () => {
|
|
setSelectedTemplate(null);
|
|
setSelectedTargetCourseId('');
|
|
setSelectedLesson('');
|
|
};
|
|
|
|
const loadTemplates = useCallback(async () => {
|
|
try {
|
|
setLoading(true);
|
|
const data = await cmsApi.listTestTemplates(filters);
|
|
setTemplates(data);
|
|
} catch (error) {
|
|
console.error('Failed to load test templates:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [filters]);
|
|
|
|
useEffect(() => {
|
|
loadTemplates();
|
|
}, [loadTemplates]);
|
|
|
|
useEffect(() => {
|
|
questionBankApi.getMySQLPlans().then(setFilterPlans).catch(() => {});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!filterPlanId) {
|
|
setFilterCourses([]);
|
|
setFilterCourseId('');
|
|
setFilters((prev) => ({ ...prev, mysql_course_id: undefined }));
|
|
return;
|
|
}
|
|
|
|
questionBankApi
|
|
.getMySQLCoursesByPlan(filterPlanId)
|
|
.then(setFilterCourses)
|
|
.catch(() => {
|
|
setFilterCourses([]);
|
|
});
|
|
}, [filterPlanId]);
|
|
|
|
const filteredTemplates = useMemo(() => {
|
|
if (!searchTerm.trim()) return templates;
|
|
const q = searchTerm.toLowerCase();
|
|
return templates.filter((t) => {
|
|
const inName = t.name?.toLowerCase().includes(q);
|
|
const inDesc = t.description?.toLowerCase().includes(q);
|
|
const inTags = (t.tags || []).some((tag) => tag.toLowerCase().includes(q));
|
|
return Boolean(inName || inDesc || inTags);
|
|
});
|
|
}, [templates, searchTerm]);
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (!confirm('¿Estás seguro de que deseas eliminar esta plantilla?')) return;
|
|
|
|
try {
|
|
await cmsApi.deleteTestTemplate(id);
|
|
await loadTemplates();
|
|
} catch (error) {
|
|
console.error('Failed to delete template:', error);
|
|
alert('Error al eliminar la plantilla');
|
|
}
|
|
};
|
|
|
|
const handleApplyTemplate = async (template: TestTemplate) => {
|
|
setSelectedTemplate(template);
|
|
setShowApplyModal(true);
|
|
setSelectedTargetCourseId('');
|
|
setSelectedLesson('');
|
|
|
|
cmsApi.getCourses()
|
|
.then(setCourses)
|
|
.catch((e) => console.error('Failed to load courses:', e));
|
|
};
|
|
|
|
const handleApplyToLesson = async () => {
|
|
if (!selectedTemplate || !selectedTargetCourseId || !selectedLesson) {
|
|
alert('Selecciona curso y lección');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setApplying(true);
|
|
await cmsApi.applyTemplateToLesson(selectedTemplate.id, selectedLesson);
|
|
alert('Plantilla aplicada exitosamente a la lección');
|
|
setShowApplyModal(false);
|
|
resetApplyState();
|
|
} catch (error) {
|
|
console.error('Failed to apply template:', error);
|
|
alert('Error al aplicar la plantilla');
|
|
} finally {
|
|
setApplying(false);
|
|
}
|
|
};
|
|
|
|
const getTestTypeLabel = (type: TestType) => {
|
|
const labels: Record<TestType, string> = {
|
|
CA: 'Evaluación Continua',
|
|
MWT: 'Examen Escrito Parcial',
|
|
MOT: 'Examen Oral Parcial',
|
|
FOT: 'Examen Oral Final',
|
|
FWT: 'Examen Escrito Final',
|
|
};
|
|
return labels[type] || type;
|
|
};
|
|
|
|
const getTestTypeColor = (type: TestType) => {
|
|
if (type === 'CA') return 'bg-blue-100 text-blue-800';
|
|
if (type.includes('MWT') || type.includes('MOT')) return 'bg-purple-100 text-purple-800';
|
|
if (type.includes('FWT') || type.includes('FOT')) return 'bg-orange-100 text-orange-800';
|
|
return 'bg-gray-100 text-gray-800';
|
|
};
|
|
|
|
const getLinkedMaterialsCount = (template: TestTemplate): number => {
|
|
const data = template.template_data;
|
|
if (!data || typeof data !== 'object') return 0;
|
|
const selected = (data as Record<string, unknown>).selected_assets;
|
|
return Array.isArray(selected) ? selected.length : 0;
|
|
};
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<div className="mb-6 flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">Plantillas de Pruebas</h1>
|
|
<p className="text-sm text-gray-600 mt-1">
|
|
Gestiona plantillas y vincúlalas a una lección específica de un curso
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={onCreateTemplate}
|
|
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
Nueva Plantilla
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mb-6 flex gap-3">
|
|
<div className="flex-1 relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Buscar plantillas..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowFilters(!showFilters)}
|
|
className={`flex items-center gap-2 px-4 py-2 border rounded-lg transition-colors ${
|
|
showFilters ? 'bg-blue-50 border-blue-500' : 'border-gray-300 hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
<Filter className="w-4 h-4" />
|
|
Filtros
|
|
</button>
|
|
</div>
|
|
|
|
{showFilters && (
|
|
<div className="mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200 grid grid-cols-3 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Programa de Estudios</label>
|
|
<select
|
|
value={filterPlanId}
|
|
onChange={(e) => {
|
|
const id = e.target.value ? Number(e.target.value) : '';
|
|
setFilterPlanId(id);
|
|
setFilterCourseId('');
|
|
setFilters((f) => ({ ...f, mysql_course_id: undefined }));
|
|
}}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="">Todos los programas</option>
|
|
{filterPlans.map((p) => (
|
|
<option key={p.idPlanDeEstudios} value={p.idPlanDeEstudios}>{p.NombrePlan}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Curso</label>
|
|
<select
|
|
value={filterCourseId}
|
|
disabled={!filterPlanId}
|
|
onChange={(e) => {
|
|
const id = e.target.value ? Number(e.target.value) : '';
|
|
setFilterCourseId(id);
|
|
setFilters((f) => ({ ...f, mysql_course_id: id || undefined }));
|
|
}}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
|
|
>
|
|
<option value="">Todos los cursos</option>
|
|
{filterCourses.map((c) => (
|
|
<option key={c.idCursos} value={c.idCursos}>{c.NombreCurso}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Tipo de Prueba</label>
|
|
<select
|
|
value={filters.test_type || ''}
|
|
onChange={(e) => setFilters({ ...filters, test_type: (e.target.value as TestType) || undefined })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="">Todos los tipos</option>
|
|
<option value="CA">Continuous Assessment (CA)</option>
|
|
<option value="MWT">Midterm Written Test (MWT)</option>
|
|
<option value="MOT">Midterm Oral Test (MOT)</option>
|
|
<option value="FOT">Final Oral Test (FOT)</option>
|
|
<option value="FWT">Final Written Test (FWT)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{loading ? (
|
|
<div className="text-center py-12">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto" />
|
|
<p className="mt-4 text-gray-600">Cargando plantillas...</p>
|
|
</div>
|
|
) : filteredTemplates.length === 0 ? (
|
|
<div className="text-center py-12 bg-gray-50 rounded-lg">
|
|
<BookOpen className="w-16 h-16 text-gray-400 mx-auto mb-4" />
|
|
<h3 className="text-lg font-medium text-gray-900">No hay plantillas</h3>
|
|
<p className="text-gray-600 mt-1">Crea tu primera plantilla de prueba</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{filteredTemplates.map((template) => (
|
|
<div
|
|
key={template.id}
|
|
className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-lg transition-shadow"
|
|
>
|
|
<div className="flex items-start justify-between mb-3">
|
|
<h3 className="font-semibold text-gray-900 flex-1">{template.name}</h3>
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
onClick={() => onSelectTemplate?.(template)}
|
|
className="p-1 text-gray-400 hover:text-blue-600 transition-colors"
|
|
title="Ver detalles"
|
|
>
|
|
<Eye className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => onEditTemplate?.(template)}
|
|
className="p-1 text-gray-400 hover:text-green-600 transition-colors"
|
|
title="Editar"
|
|
>
|
|
<Edit2 className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(template.id)}
|
|
className="p-1 text-gray-400 hover:text-red-600 transition-colors"
|
|
title="Eliminar"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{template.description && (
|
|
<p className="text-sm text-gray-600 mb-3 line-clamp-2">{template.description}</p>
|
|
)}
|
|
|
|
<div className="flex flex-wrap gap-2 mb-3">
|
|
<span className={`px-2 py-1 rounded text-xs font-medium ${getTestTypeColor(template.test_type)}`}>
|
|
{getTestTypeLabel(template.test_type)}
|
|
</span>
|
|
{template.mysql_course_id && (
|
|
<span className="px-2 py-1 rounded text-xs font-medium bg-indigo-100 text-indigo-800">
|
|
Curso SAM #{template.mysql_course_id}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2 mb-3">
|
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
<Clock className="w-4 h-4" />
|
|
<span>{template.duration_minutes} minutos</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
<Target className="w-4 h-4" />
|
|
<span>Puntuación mínima: {template.passing_score}%</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
<Tag className="w-4 h-4" />
|
|
<span>Puntos totales: {template.total_points}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
<BookOpen className="w-4 h-4" />
|
|
<span>Materiales vinculados: {getLinkedMaterialsCount(template)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{template.tags && template.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-1 mb-3">
|
|
{template.tags.map((tag, idx) => (
|
|
<span key={idx} className="px-2 py-0.5 bg-gray-100 text-gray-600 text-xs rounded">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between pt-3 border-t border-gray-200">
|
|
<span className="text-xs text-gray-500">Usos: {template.usage_count}</span>
|
|
<button
|
|
onClick={() => handleApplyTemplate(template)}
|
|
className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 transition-colors"
|
|
>
|
|
<Copy className="w-3 h-3" />
|
|
Aplicar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{showApplyModal && selectedTemplate && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white rounded-lg max-w-2xl w-full max-h-[80vh] overflow-y-auto">
|
|
<div className="p-6 border-b border-gray-200 flex items-center justify-between">
|
|
<div>
|
|
<h3 className="text-xl font-bold text-gray-900">Aplicar Plantilla a Lección</h3>
|
|
<p className="text-sm text-gray-500">{selectedTemplate.name}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
setShowApplyModal(false);
|
|
resetApplyState();
|
|
}}
|
|
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6 space-y-4">
|
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
|
<h4 className="font-semibold text-blue-900 mb-2">Información de la Plantilla</h4>
|
|
<div className="grid grid-cols-2 gap-3 text-sm">
|
|
<div>
|
|
<span className="text-blue-700">Tipo:</span>
|
|
<span className="ml-2 font-medium">{getTestTypeLabel(selectedTemplate.test_type)}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-blue-700">Duración:</span>
|
|
<span className="ml-2 font-medium">{selectedTemplate.duration_minutes} min</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-blue-700">Puntos:</span>
|
|
<span className="ml-2 font-medium">{selectedTemplate.total_points}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-blue-700">Aprobación:</span>
|
|
<span className="ml-2 font-medium">{selectedTemplate.passing_score}%</span>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<span className="text-blue-700">Materiales vinculados:</span>
|
|
<span className="ml-2 font-medium">{getLinkedMaterialsCount(selectedTemplate)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">1. Curso OpenCCB</label>
|
|
<select
|
|
value={selectedTargetCourseId}
|
|
onChange={(e) => {
|
|
setSelectedTargetCourseId(e.target.value);
|
|
setSelectedLesson('');
|
|
}}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="">Selecciona un curso...</option>
|
|
{courses.map((course) => (
|
|
<option key={course.id} value={course.id}>{course.title}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{selectedTargetCourseId && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">2. Lección</label>
|
|
<LessonSelector
|
|
courseId={selectedTargetCourseId}
|
|
selectedLesson={selectedLesson}
|
|
onSelect={setSelectedLesson}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
|
|
<h4 className="font-semibold text-yellow-900 mb-2 text-sm">¿Qué sucederá?</h4>
|
|
<ul className="text-xs text-yellow-800 space-y-1">
|
|
<li>• La lección se convertirá en un quiz con las preguntas de la plantilla</li>
|
|
<li>• Se configurará con 1 solo intento por alumno</li>
|
|
<li>• Los alumnos podrán revisar sus respuestas después de completar</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6 border-t border-gray-200 flex items-center justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setShowApplyModal(false);
|
|
resetApplyState();
|
|
}}
|
|
className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
|
>
|
|
Cancelar
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleApplyToLesson}
|
|
disabled={applying || !selectedLesson}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2 disabled:opacity-50"
|
|
>
|
|
<Copy className="w-4 h-4" />
|
|
{applying ? 'Aplicando...' : 'Aplicar Plantilla'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function LessonSelector({
|
|
courseId,
|
|
selectedLesson,
|
|
onSelect,
|
|
}: {
|
|
courseId: string;
|
|
selectedLesson: string;
|
|
onSelect: (lessonId: string) => void;
|
|
}) {
|
|
const [modules, setModules] = useState<Module[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const loadLessons = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const course = await cmsApi.getCourseWithFullOutline(courseId);
|
|
setModules(course.modules || []);
|
|
} catch (error) {
|
|
console.error('Failed to load lessons:', error);
|
|
setModules([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
loadLessons();
|
|
}, [courseId]);
|
|
|
|
if (loading) {
|
|
return <div className="text-sm text-gray-500">Cargando lecciones...</div>;
|
|
}
|
|
|
|
const totalLessons = modules.reduce((acc, m) => acc + (m.lessons?.length || 0), 0);
|
|
if (totalLessons === 0) {
|
|
return <div className="text-sm text-red-600">Este curso no tiene lecciones</div>;
|
|
}
|
|
|
|
return (
|
|
<select
|
|
value={selectedLesson}
|
|
onChange={(e) => onSelect(e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="">Selecciona una lección...</option>
|
|
{modules.map((mod) => (
|
|
<optgroup key={mod.id} label={mod.title}>
|
|
{(mod.lessons || []).map((lesson: Lesson) => (
|
|
<option key={lesson.id} value={lesson.id}>
|
|
{lesson.title}
|
|
</option>
|
|
))}
|
|
</optgroup>
|
|
))}
|
|
</select>
|
|
);
|
|
}
|