242 lines
12 KiB
TypeScript
242 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import { questionBankApi } from '@/lib/api';
|
|
import { X, Upload, FileSpreadsheet, Check, AlertCircle, Download } from 'lucide-react';
|
|
|
|
interface ExcelImportModalProps {
|
|
onSuccess?: () => void;
|
|
onCancel?: () => void;
|
|
}
|
|
|
|
export default function ExcelImportModal({ onSuccess, onCancel }: ExcelImportModalProps) {
|
|
const [excelFile, setExcelFile] = useState<File | null>(null);
|
|
const [uploading, setUploading] = useState(false);
|
|
const [result, setResult] = useState<any>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) {
|
|
if (!file.name.endsWith('.xlsx') && !file.name.endsWith('.xls')) {
|
|
alert('Por favor sube un archivo Excel (.xlsx o .xls)');
|
|
return;
|
|
}
|
|
setExcelFile(file);
|
|
setError(null);
|
|
}
|
|
};
|
|
|
|
const handleUpload = async () => {
|
|
if (!excelFile) {
|
|
alert('Selecciona un archivo primero');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setUploading(true);
|
|
setError(null);
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', excelFile);
|
|
|
|
const response = await fetch(`${process.env.NEXT_PUBLIC_CMS_API_URL || 'http://localhost:3001'}/question-bank/import-excel`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
|
},
|
|
body: formData,
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Error al importar');
|
|
}
|
|
|
|
const data = await response.json();
|
|
setResult(data);
|
|
|
|
setTimeout(() => {
|
|
onSuccess?.();
|
|
}, 2000);
|
|
|
|
} catch (err: any) {
|
|
console.error('Excel import failed:', err);
|
|
setError(err.message || 'Error al importar');
|
|
} finally {
|
|
setUploading(false);
|
|
}
|
|
};
|
|
|
|
const downloadTemplate = () => {
|
|
// Create a simple template explanation
|
|
alert('Descargando plantilla...\n\nColumnas requeridas:\n1. question_text - Texto de la pregunta\n2. question_type - multiple-choice, true-false, etc.\n3. options - ["A","B","C","D"]\n4. correct_answer - 0, 1, 2, o 3\n5. explanation - Explicación (opcional)\n6. difficulty - easy, medium, hard\n7. tags - tag1,tag2,tag3');
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg max-w-2xl w-full">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
|
|
<div className="flex items-center gap-3">
|
|
<FileSpreadsheet className="w-6 h-6 text-green-600" />
|
|
<div>
|
|
<h2 className="text-xl font-bold text-gray-900 dark:text-white">
|
|
Importar desde Excel
|
|
</h2>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
Sube preguntas desde un archivo Excel (.xlsx)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={onCancel}
|
|
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-6 space-y-4">
|
|
{/* Info Box */}
|
|
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
|
<h4 className="font-semibold text-blue-900 dark:text-blue-100 mb-2 text-sm">
|
|
¿Cómo funciona?
|
|
</h4>
|
|
<ul className="text-xs text-blue-800 dark:text-blue-200 space-y-1">
|
|
<li>• Crea un Excel con columnas: question_text, question_type, options, correct_answer, explanation, difficulty, tags</li>
|
|
<li>• question_type: multiple-choice, true-false, short-answer, etc.</li>
|
|
<li>• options: Formato JSON ["A","B","C","D"] o separado por comas</li>
|
|
<li>• correct_answer: Índice de la opción correcta (0, 1, 2, 3)</li>
|
|
<li>• Todas las preguntas se importarán al banco</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Download Template Button */}
|
|
<div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<div className="flex items-center gap-3">
|
|
<Download className="w-5 h-5 text-gray-500" />
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-900 dark:text-white">Plantilla de ejemplo</p>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">Descarga una plantilla con el formato correcto</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={downloadTemplate}
|
|
className="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors text-sm font-medium"
|
|
>
|
|
Descargar
|
|
</button>
|
|
</div>
|
|
|
|
{/* File Upload */}
|
|
<div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-8 text-center">
|
|
<input
|
|
type="file"
|
|
accept=".xlsx,.xls"
|
|
onChange={handleFileChange}
|
|
className="hidden"
|
|
id="excel-upload"
|
|
/>
|
|
<label
|
|
htmlFor="excel-upload"
|
|
className="cursor-pointer flex flex-col items-center gap-3"
|
|
>
|
|
<FileSpreadsheet className="w-12 h-12 text-green-500" />
|
|
<div>
|
|
<span className="text-sm font-medium text-blue-600 hover:text-blue-700">
|
|
Subir archivo Excel
|
|
</span>
|
|
<span className="text-sm text-gray-500 dark:text-gray-400">
|
|
{' '}o arrastrar aquí
|
|
</span>
|
|
</div>
|
|
<p className="text-xs text-gray-400 dark:text-gray-500">
|
|
.xlsx, .xls - Máx 10MB
|
|
</p>
|
|
</label>
|
|
|
|
{excelFile && (
|
|
<div className="mt-4 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
|
|
<div className="flex items-center gap-2 text-sm text-green-800 dark:text-green-200">
|
|
<Check className="w-4 h-4" />
|
|
Archivo seleccionado: {excelFile.name}
|
|
<span className="text-xs">({(excelFile.size / 1024 / 1024).toFixed(2)} MB)</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Result Messages */}
|
|
{result && (
|
|
<div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<Check className="w-5 h-5 text-green-600" />
|
|
<p className="font-semibold text-green-900 dark:text-green-100">
|
|
¡Importación completada!
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-4 text-sm">
|
|
<div>
|
|
<span className="text-green-700 dark:text-green-300">Importadas:</span>
|
|
<span className="ml-2 font-bold text-green-900 dark:text-green-100">
|
|
{result.imported}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-green-700 dark:text-green-300">Saltadas:</span>
|
|
<span className="ml-2 font-bold text-green-900 dark:text-green-100">
|
|
{result.skipped}
|
|
</span>
|
|
</div>
|
|
{result.error && (
|
|
<div>
|
|
<span className="text-green-700 dark:text-green-300">Errores:</span>
|
|
<span className="ml-2 font-bold text-green-900 dark:text-green-100">
|
|
{result.error}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 flex items-center gap-3">
|
|
<AlertCircle className="w-5 h-5 text-red-600" />
|
|
<div>
|
|
<p className="text-sm font-medium text-red-900 dark:text-red-100">
|
|
Error
|
|
</p>
|
|
<p className="text-xs text-red-700 dark:text-red-300">
|
|
{error}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="p-6 border-t border-gray-200 dark:border-gray-700 flex items-center justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={onCancel}
|
|
disabled={uploading}
|
|
className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors disabled:opacity-50"
|
|
>
|
|
{result ? 'Cerrar' : 'Cancelar'}
|
|
</button>
|
|
<button
|
|
onClick={handleUpload}
|
|
disabled={uploading || !excelFile}
|
|
className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center gap-2 disabled:opacity-50"
|
|
>
|
|
<Upload className="w-4 h-4" />
|
|
{uploading ? 'Importando...' : 'Importar Excel'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|