feat: creacion de plantillas para pruebas, prototipo
This commit is contained in:
@@ -0,0 +1,34 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import PageLayout from '@/components/PageLayout';
|
||||
import { TestTemplateManager, TestTemplateForm } from '@/components/TestTemplates';
|
||||
import { Plus } from 'lucide-react';
|
||||
|
||||
export default function TestTemplatesPage() {
|
||||
const [showCreateForm, setShowCreateForm] = useState(false);
|
||||
const [refreshKey, setRefreshKey] = useState(0);
|
||||
|
||||
const handleSuccess = () => {
|
||||
setShowCreateForm(false);
|
||||
setRefreshKey(prev => prev + 1);
|
||||
};
|
||||
|
||||
return (
|
||||
<PageLayout title="Plantillas de Pruebas">
|
||||
<div key={refreshKey}>
|
||||
<TestTemplateManager
|
||||
onSelectTemplate={() => setShowCreateForm(true)}
|
||||
onCreateTemplate={() => setShowCreateForm(true)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{showCreateForm && (
|
||||
<TestTemplateForm
|
||||
onSuccess={handleSuccess}
|
||||
onCancel={() => setShowCreateForm(false)}
|
||||
/>
|
||||
)}
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,301 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { cmsApi, CreateTestTemplatePayload, CourseLevel, CourseType, TestType } from '@/lib/api';
|
||||
import { X, Save, Plus, Trash2 } from 'lucide-react';
|
||||
|
||||
interface TestTemplateFormProps {
|
||||
onSuccess?: () => void;
|
||||
onCancel?: () => void;
|
||||
}
|
||||
|
||||
export default function TestTemplateForm({ onSuccess, onCancel }: TestTemplateFormProps) {
|
||||
const [formData, setFormData] = useState<CreateTestTemplatePayload>({
|
||||
name: '',
|
||||
description: '',
|
||||
level: 'beginner',
|
||||
course_type: 'regular',
|
||||
test_type: 'CA',
|
||||
duration_minutes: 60,
|
||||
passing_score: 70,
|
||||
total_points: 100,
|
||||
instructions: '',
|
||||
template_data: { sections: [], questions: [] },
|
||||
tags: [],
|
||||
});
|
||||
|
||||
const [newTag, setNewTag] = useState('');
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!formData.name.trim()) {
|
||||
alert('El nombre es obligatorio');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setSaving(true);
|
||||
await cmsApi.createTestTemplate(formData);
|
||||
alert('Plantilla creada exitosamente');
|
||||
onSuccess?.();
|
||||
} catch (error) {
|
||||
console.error('Failed to create template:', error);
|
||||
alert('Error al crear la plantilla');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddTag = () => {
|
||||
if (newTag.trim() && !formData.tags?.includes(newTag.trim())) {
|
||||
setFormData({
|
||||
...formData,
|
||||
tags: [...(formData.tags || []), newTag.trim()],
|
||||
});
|
||||
setNewTag('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveTag = (tagToRemove: string) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
tags: formData.tags?.filter(tag => tag !== tagToRemove) || [],
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<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-3xl w-full max-h-[90vh] overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
||||
<h2 className="text-xl font-bold text-gray-900">Nueva Plantilla de Prueba</h2>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-6">
|
||||
{/* Basic Info */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold text-gray-900">Información Básica</h3>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Nombre *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Ej: Final Exam - Beginner 1"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Descripción
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Descripción de la plantilla..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Classification */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold text-gray-900">Clasificación</h3>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Nivel *
|
||||
</label>
|
||||
<select
|
||||
value={formData.level}
|
||||
onChange={(e) => setFormData({ ...formData, level: e.target.value as CourseLevel })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="beginner">Beginner</option>
|
||||
<option value="beginner_1">Beginner 1</option>
|
||||
<option value="beginner_2">Beginner 2</option>
|
||||
<option value="intermediate">Intermediate</option>
|
||||
<option value="intermediate_1">Intermediate 1</option>
|
||||
<option value="intermediate_2">Intermediate 2</option>
|
||||
<option value="advanced">Advanced</option>
|
||||
<option value="advanced_1">Advanced 1</option>
|
||||
<option value="advanced_2">Advanced 2</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Tipo de Curso *
|
||||
</label>
|
||||
<select
|
||||
value={formData.course_type}
|
||||
onChange={(e) => setFormData({ ...formData, course_type: e.target.value as CourseType })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="regular">Regular</option>
|
||||
<option value="intensive">Intensivo</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Tipo de Prueba *
|
||||
</label>
|
||||
<select
|
||||
value={formData.test_type}
|
||||
onChange={(e) => setFormData({ ...formData, test_type: e.target.value as TestType })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* Configuration */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold text-gray-900">Configuración</h3>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Duración (minutos) *
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.duration_minutes}
|
||||
onChange={(e) => setFormData({ ...formData, duration_minutes: parseInt(e.target.value) || 0 })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Puntuación Mínima (%) *
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.passing_score}
|
||||
onChange={(e) => setFormData({ ...formData, passing_score: parseInt(e.target.value) || 0 })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||
min="0"
|
||||
max="100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Puntos Totales *
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.total_points}
|
||||
onChange={(e) => setFormData({ ...formData, total_points: parseInt(e.target.value) || 0 })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Instrucciones
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.instructions}
|
||||
onChange={(e) => setFormData({ ...formData, instructions: e.target.value })}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Instrucciones generales para la prueba..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold text-gray-900">Etiquetas</h3>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={newTag}
|
||||
onChange={(e) => setNewTag(e.target.value)}
|
||||
onKeyPress={(e) => e.key === 'Enter' && (e.preventDefault(), handleAddTag())}
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Agregar etiqueta..."
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleAddTag}
|
||||
className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors flex items-center gap-1"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Agregar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{formData.tags && formData.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{formData.tags.map((tag, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm flex items-center gap-1"
|
||||
>
|
||||
{tag}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveTag(tag)}
|
||||
className="hover:text-blue-600"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-end gap-3 pt-6 border-t border-gray-200">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
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"
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
{saving ? 'Guardando...' : 'Guardar Plantilla'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,304 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { cmsApi, TestTemplate, TestTemplateFilters, CourseLevel, CourseType, TestType } from '@/lib/api';
|
||||
import { Plus, Search, Filter, Edit2, Trash2, Eye, Copy, BookOpen, Clock, Target, Tag } from 'lucide-react';
|
||||
|
||||
interface TestTemplateManagerProps {
|
||||
onSelectTemplate?: (template: TestTemplate) => void;
|
||||
onCreateTemplate?: () => void;
|
||||
}
|
||||
|
||||
export default function TestTemplateManager({ onSelectTemplate, onCreateTemplate }: 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 loadTemplates = 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);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadTemplates();
|
||||
}, [filters]);
|
||||
|
||||
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) => {
|
||||
if (onSelectTemplate) {
|
||||
onSelectTemplate(template);
|
||||
} else {
|
||||
alert(`Plantilla "${template.name}" seleccionada. (Implementar lógica de aplicación)`);
|
||||
}
|
||||
};
|
||||
|
||||
const getLevelLabel = (level: CourseLevel) => {
|
||||
const labels: Record<CourseLevel, string> = {
|
||||
beginner: 'Beginner',
|
||||
beginner_1: 'Beginner 1',
|
||||
beginner_2: 'Beginner 2',
|
||||
intermediate: 'Intermediate',
|
||||
intermediate_1: 'Intermediate 1',
|
||||
intermediate_2: 'Intermediate 2',
|
||||
advanced: 'Advanced',
|
||||
advanced_1: 'Advanced 1',
|
||||
advanced_2: 'Advanced 2',
|
||||
};
|
||||
return labels[level] || level;
|
||||
};
|
||||
|
||||
const getCourseTypeLabel = (type: CourseType) => {
|
||||
return type === 'intensive' ? 'Intensivo' : 'Regular';
|
||||
};
|
||||
|
||||
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 getLevelColor = (level: CourseLevel) => {
|
||||
if (level.includes('beginner')) return 'bg-green-100 text-green-800';
|
||||
if (level.includes('intermediate')) return 'bg-yellow-100 text-yellow-800';
|
||||
if (level.includes('advanced')) return 'bg-red-100 text-red-800';
|
||||
return 'bg-gray-100 text-gray-800';
|
||||
};
|
||||
|
||||
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';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
{/* Header */}
|
||||
<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 de evaluaciones por nivel y tipo de 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>
|
||||
|
||||
{/* Search and Filters */}
|
||||
<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>
|
||||
|
||||
{/* Filter Panel */}
|
||||
{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">Nivel</label>
|
||||
<select
|
||||
value={filters.level || ''}
|
||||
onChange={(e) => setFilters({ ...filters, level: e.target.value as CourseLevel || 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 niveles</option>
|
||||
<option value="beginner">Beginner</option>
|
||||
<option value="beginner_1">Beginner 1</option>
|
||||
<option value="beginner_2">Beginner 2</option>
|
||||
<option value="intermediate">Intermediate</option>
|
||||
<option value="intermediate_1">Intermediate 1</option>
|
||||
<option value="intermediate_2">Intermediate 2</option>
|
||||
<option value="advanced">Advanced</option>
|
||||
<option value="advanced_1">Advanced 1</option>
|
||||
<option value="advanced_2">Advanced 2</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Tipo de Curso</label>
|
||||
<select
|
||||
value={filters.course_type || ''}
|
||||
onChange={(e) => setFilters({ ...filters, course_type: e.target.value as CourseType || 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="intensive">Intensivo</option>
|
||||
<option value="regular">Regular</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>
|
||||
)}
|
||||
|
||||
{/* Templates Grid */}
|
||||
{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"></div>
|
||||
<p className="mt-4 text-gray-600">Cargando plantillas...</p>
|
||||
</div>
|
||||
) : templates.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">
|
||||
{templates.map((template) => (
|
||||
<div
|
||||
key={template.id}
|
||||
className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-lg transition-shadow"
|
||||
>
|
||||
{/* Header */}
|
||||
<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={() => alert(`Implementar: Ver plantilla ${template.id}`)}
|
||||
className="p-1 text-gray-400 hover:text-blue-600 transition-colors"
|
||||
title="Ver detalles"
|
||||
>
|
||||
<Eye className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => alert(`Implementar: Editar plantilla ${template.id}`)}
|
||||
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>
|
||||
|
||||
{/* Description */}
|
||||
{template.description && (
|
||||
<p className="text-sm text-gray-600 mb-3 line-clamp-2">{template.description}</p>
|
||||
)}
|
||||
|
||||
{/* Badges */}
|
||||
<div className="flex flex-wrap gap-2 mb-3">
|
||||
<span className={`px-2 py-1 rounded text-xs font-medium ${getLevelColor(template.level)}`}>
|
||||
{getLevelLabel(template.level)}
|
||||
</span>
|
||||
<span className="px-2 py-1 rounded text-xs font-medium bg-gray-100 text-gray-800">
|
||||
{getCourseTypeLabel(template.course_type)}
|
||||
</span>
|
||||
<span className={`px-2 py-1 rounded text-xs font-medium ${getTestTypeColor(template.test_type)}`}>
|
||||
{getTestTypeLabel(template.test_type)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Metadata */}
|
||||
<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>
|
||||
|
||||
{/* Tags */}
|
||||
{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>
|
||||
)}
|
||||
|
||||
{/* Usage Stats */}
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default as TestTemplateManager } from './TestTemplateManager';
|
||||
export { default as TestTemplateForm } from './TestTemplateForm';
|
||||
+163
-2
@@ -590,7 +590,11 @@ export interface CourseInstructor {
|
||||
const getToken = () => typeof window !== 'undefined' ? localStorage.getItem('studio_token') : null;
|
||||
const getSelectedOrgId = () => typeof window !== 'undefined' ? localStorage.getItem('studio_selected_org_id') : null;
|
||||
|
||||
const apiFetch = (url: string, options: RequestInit = {}, isLms: boolean = false) => {
|
||||
interface ApiFetchOptions extends RequestInit {
|
||||
query?: Record<string, string | number | boolean | undefined | null>;
|
||||
}
|
||||
|
||||
const apiFetch = (url: string, options: ApiFetchOptions = {}, isLms: boolean = false) => {
|
||||
const token = getToken();
|
||||
const selectedOrgId = getSelectedOrgId();
|
||||
const baseUrl = isLms ? LMS_API_BASE_URL : API_BASE_URL;
|
||||
@@ -602,7 +606,23 @@ const apiFetch = (url: string, options: RequestInit = {}, isLms: boolean = false
|
||||
...(selectedOrgId ? { 'X-Organization-Id': selectedOrgId } : {})
|
||||
};
|
||||
|
||||
return fetch(`${baseUrl}${url}`, { ...options, headers }).then(async res => {
|
||||
// Build query string
|
||||
const queryParams = options.query;
|
||||
let finalUrl = `${baseUrl}${url}`;
|
||||
if (queryParams) {
|
||||
const searchParams = new URLSearchParams();
|
||||
Object.entries(queryParams).forEach(([key, value]) => {
|
||||
if (value !== undefined && value !== null) {
|
||||
searchParams.append(key, String(value));
|
||||
}
|
||||
});
|
||||
const queryString = searchParams.toString();
|
||||
if (queryString) {
|
||||
finalUrl += `${url.includes('?') ? '&' : '?'}${queryString}`;
|
||||
}
|
||||
}
|
||||
|
||||
return fetch(finalUrl, { ...options, headers }).then(async res => {
|
||||
if (!res.ok) {
|
||||
const text = await res.text();
|
||||
try {
|
||||
@@ -881,6 +901,28 @@ export const cmsApi = {
|
||||
apiFetch(`/lessons/${lessonId}/dependencies`, { method: 'POST', body: JSON.stringify(payload) }),
|
||||
removeDependency: (lessonId: string, prerequisiteId: string): Promise<void> =>
|
||||
apiFetch(`/lessons/${lessonId}/dependencies/${prerequisiteId}`, { method: 'DELETE' }),
|
||||
|
||||
// Test Templates
|
||||
listTestTemplates: (filters?: TestTemplateFilters): Promise<TestTemplate[]> =>
|
||||
apiFetch('/test-templates', { method: 'GET', query: filters as any }, false),
|
||||
getTestTemplate: (templateId: string): Promise<TestTemplateWithQuestions> =>
|
||||
apiFetch(`/test-templates/${templateId}`, {}, false),
|
||||
createTestTemplate: (payload: CreateTestTemplatePayload): Promise<TestTemplate> =>
|
||||
apiFetch('/test-templates', { method: 'POST', body: JSON.stringify(payload) }, false),
|
||||
updateTestTemplate: (templateId: string, payload: UpdateTestTemplatePayload): Promise<TestTemplate> =>
|
||||
apiFetch(`/test-templates/${templateId}`, { method: 'PUT', body: JSON.stringify(payload) }, false),
|
||||
deleteTestTemplate: (templateId: string): Promise<void> =>
|
||||
apiFetch(`/test-templates/${templateId}`, { method: 'DELETE' }, false),
|
||||
createTemplateQuestion: (templateId: string, payload: CreateQuestionPayload): Promise<TestTemplateQuestion> =>
|
||||
apiFetch(`/test-templates/${templateId}/questions`, { method: 'POST', body: JSON.stringify(payload) }, false),
|
||||
deleteTemplateQuestion: (templateId: string, questionId: string): Promise<void> =>
|
||||
apiFetch(`/test-templates/${templateId}/questions/${questionId}`, { method: 'DELETE' }, false),
|
||||
createTemplateSection: (templateId: string, payload: CreateSectionPayload): Promise<TestTemplateSection> =>
|
||||
apiFetch(`/test-templates/${templateId}/sections`, { method: 'POST', body: JSON.stringify(payload) }, false),
|
||||
deleteTemplateSection: (templateId: string, sectionId: string): Promise<void> =>
|
||||
apiFetch(`/test-templates/${templateId}/sections/${sectionId}`, { method: 'DELETE' }, false),
|
||||
applyTemplateToLesson: (templateId: string, lessonId: string, gradingCategoryId?: string): Promise<void> =>
|
||||
apiFetch(`/test-templates/${templateId}/apply`, { method: 'POST', body: JSON.stringify({ lesson_id: lessonId, grading_category_id: gradingCategoryId }) }, false),
|
||||
};
|
||||
|
||||
export const lmsApi = {
|
||||
@@ -997,4 +1039,123 @@ export interface BackgroundTask {
|
||||
status: 'idle' | 'queued' | 'processing' | 'failed' | 'completed' | 'error';
|
||||
progress: number;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
// ==================== Test Templates ====================
|
||||
|
||||
export type CourseLevel = 'beginner' | 'beginner_1' | 'beginner_2' | 'intermediate' | 'intermediate_1' | 'intermediate_2' | 'advanced' | 'advanced_1' | 'advanced_2';
|
||||
export type CourseType = 'intensive' | 'regular';
|
||||
export type TestType = 'CA' | 'MWT' | 'MOT' | 'FOT' | 'FWT';
|
||||
export type QuestionType = 'multiple-choice' | 'true-false' | 'short-answer' | 'essay' | 'matching' | 'ordering';
|
||||
|
||||
export interface TestTemplate {
|
||||
id: string;
|
||||
organization_id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
level: CourseLevel;
|
||||
course_type: CourseType;
|
||||
test_type: TestType;
|
||||
duration_minutes: number;
|
||||
passing_score: number;
|
||||
total_points: number;
|
||||
instructions?: string;
|
||||
template_data: any;
|
||||
tags?: string[];
|
||||
is_active: boolean;
|
||||
usage_count: number;
|
||||
created_by: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface TestTemplateSection {
|
||||
id: string;
|
||||
template_id: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
section_order: number;
|
||||
points: number;
|
||||
instructions?: string;
|
||||
section_data?: any;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface TestTemplateQuestion {
|
||||
id: string;
|
||||
template_id: string;
|
||||
section_id?: string;
|
||||
question_order: number;
|
||||
question_type: QuestionType;
|
||||
question_text: string;
|
||||
options?: any;
|
||||
correct_answer?: any;
|
||||
explanation?: string;
|
||||
points: number;
|
||||
metadata?: any;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface TestTemplateWithQuestions {
|
||||
template: TestTemplate;
|
||||
sections: TestTemplateSection[];
|
||||
questions: TestTemplateQuestion[];
|
||||
}
|
||||
|
||||
export interface CreateTestTemplatePayload {
|
||||
name: string;
|
||||
description?: string;
|
||||
level: CourseLevel;
|
||||
course_type: CourseType;
|
||||
test_type: TestType;
|
||||
duration_minutes: number;
|
||||
passing_score: number;
|
||||
total_points: number;
|
||||
instructions?: string;
|
||||
template_data: any;
|
||||
tags?: string[];
|
||||
}
|
||||
|
||||
export interface UpdateTestTemplatePayload {
|
||||
name?: string;
|
||||
description?: string;
|
||||
level?: CourseLevel;
|
||||
course_type?: CourseType;
|
||||
test_type?: TestType;
|
||||
duration_minutes?: number;
|
||||
passing_score?: number;
|
||||
total_points?: number;
|
||||
instructions?: string;
|
||||
template_data?: any;
|
||||
tags?: string[];
|
||||
is_active?: boolean;
|
||||
}
|
||||
|
||||
export interface CreateQuestionPayload {
|
||||
section_id?: string;
|
||||
question_order: number;
|
||||
question_type: string;
|
||||
question_text: string;
|
||||
options?: any;
|
||||
correct_answer?: any;
|
||||
explanation?: string;
|
||||
points: number;
|
||||
metadata?: any;
|
||||
}
|
||||
|
||||
export interface CreateSectionPayload {
|
||||
title: string;
|
||||
description?: string;
|
||||
section_order: number;
|
||||
points: number;
|
||||
instructions?: string;
|
||||
section_data?: any;
|
||||
}
|
||||
|
||||
export interface TestTemplateFilters {
|
||||
level?: CourseLevel;
|
||||
course_type?: CourseType;
|
||||
test_type?: TestType;
|
||||
tags?: string;
|
||||
search?: string;
|
||||
}
|
||||
Reference in New Issue
Block a user