feat: token count implement
This commit is contained in:
@@ -0,0 +1,241 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user