diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 41b24ab..ddcc8c1 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -928,6 +928,8 @@ function QuestionsManagerModal({ checklist, onClose }) { const [viewingAudit, setViewingAudit] = useState(null) const [auditHistory, setAuditHistory] = useState([]) const [loadingAudit, setLoadingAudit] = useState(false) + const [draggedQuestion, setDraggedQuestion] = useState(null) + const [dragOverQuestion, setDragOverQuestion] = useState(null) const [formData, setFormData] = useState({ section: '', text: '', @@ -1212,6 +1214,80 @@ function QuestionsManagerModal({ checklist, onClose }) { } } + // Drag & Drop handlers + const handleDragStart = (e, question) => { + setDraggedQuestion(question) + e.dataTransfer.effectAllowed = 'move' + e.currentTarget.style.opacity = '0.5' + } + + const handleDragEnd = (e) => { + e.currentTarget.style.opacity = '1' + setDraggedQuestion(null) + setDragOverQuestion(null) + } + + const handleDragOver = (e, question) => { + e.preventDefault() + e.dataTransfer.dropEffect = 'move' + setDragOverQuestion(question) + } + + const handleDragLeave = (e) => { + setDragOverQuestion(null) + } + + const handleDrop = async (e, targetQuestion) => { + e.preventDefault() + + if (!draggedQuestion || draggedQuestion.id === targetQuestion.id) { + setDraggedQuestion(null) + setDragOverQuestion(null) + return + } + + const questionsList = Object.values(questionsBySection).flat() + const draggedIndex = questionsList.findIndex(q => q.id === draggedQuestion.id) + const targetIndex = questionsList.findIndex(q => q.id === targetQuestion.id) + + // Crear nueva lista con el orden actualizado + const newList = [...questionsList] + const [movedQuestion] = newList.splice(draggedIndex, 1) + newList.splice(targetIndex, 0, movedQuestion) + + // Preparar datos para el backend + const reorderData = newList.map((q, index) => ({ + question_id: q.id, + new_order: index + })) + + try { + const token = localStorage.getItem('token') + const API_URL = import.meta.env.VITE_API_URL || '' + + const response = await fetch(`${API_URL}/api/checklists/${checklist.id}/questions/reorder`, { + method: 'PATCH', + headers: { + 'Authorization': `Bearer ${token}`, + 'Content-Type': 'application/json' + }, + body: JSON.stringify(reorderData) + }) + + if (response.ok) { + loadQuestions() + } else { + alert('Error al reordenar pregunta') + } + } catch (error) { + console.error('Error:', error) + alert('Error al reordenar pregunta') + } + + setDraggedQuestion(null) + setDragOverQuestion(null) + } + const questionsBySection = questions.reduce((acc, q) => { const section = q.section || 'Sin sección' if (!acc[section]) acc[section] = [] @@ -1588,9 +1664,17 @@ function QuestionsManagerModal({ checklist, onClose }) { return (
handleDragStart(e, question)} + onDragEnd={handleDragEnd} + onDragOver={(e) => handleDragOver(e, question)} + onDragLeave={handleDragLeave} + onDrop={(e) => handleDrop(e, question)} + className={`p-4 hover:bg-gray-50 flex justify-between items-start cursor-move transition-all ${ isSubQuestion ? 'bg-blue-50 ml-8 border-l-4 border-blue-300' : '' + } ${ + dragOverQuestion?.id === question.id ? 'border-t-4 border-indigo-500' : '' }`} >
@@ -1628,22 +1712,11 @@ function QuestionsManagerModal({ checklist, onClose }) {
- {/* Botones de reordenamiento */} -
- - + {/* Indicador de drag */} +
+ + +