Edicion de preguntas

frontend/src/App.jsx

@@ -916,6 +916,7 @@ function QuestionsManagerModal({ checklist, onClose }) {
   const [questions, setQuestions] = useState([])
   const [loading, setLoading] = useState(true)
   const [showCreateForm, setShowCreateForm] = useState(false)
+  const [editingQuestion, setEditingQuestion] = useState(null)
   const [formData, setFormData] = useState({
     section: '',
     text: '',
@@ -1012,6 +1013,93 @@ function QuestionsManagerModal({ checklist, onClose }) {
     }
   }
 
+  const handleEditQuestion = (question) => {
+    setEditingQuestion(question)
+    setShowCreateForm(false)
+    setFormData({
+      section: question.section || '',
+      text: question.text,
+      type: question.type,
+      points: question.points || 1,
+      options: question.options || {
+        type: question.type,
+        choices: [
+          { value: 'pass', label: 'Pasa', points: 1, status: 'ok' },
+          { value: 'fail', label: 'Falla', points: 0, status: 'critical' }
+        ]
+      },
+      allow_photos: question.allow_photos ?? true,
+      max_photos: question.max_photos || 3,
+      requires_comment_on_fail: question.requires_comment_on_fail || false,
+      send_notification: question.send_notification || false,
+      parent_question_id: question.parent_question_id || null,
+      show_if_answer: question.show_if_answer || '',
+      ai_prompt: question.ai_prompt || ''
+    })
+  }
+
+  const handleUpdateQuestion = async (e) => {
+    e.preventDefault()
+    
+    try {
+      const token = localStorage.getItem('token')
+      const API_URL = import.meta.env.VITE_API_URL || ''
+      
+      const response = await fetch(`${API_URL}/api/questions/${editingQuestion.id}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        },
+        body: JSON.stringify({
+          checklist_id: checklist.id,
+          section: formData.section,
+          text: formData.text,
+          type: formData.type,
+          points: parseInt(formData.points),
+          options: formData.options,
+          allow_photos: formData.allow_photos,
+          max_photos: parseInt(formData.max_photos),
+          requires_comment_on_fail: formData.requires_comment_on_fail,
+          send_notification: formData.send_notification,
+          parent_question_id: formData.parent_question_id || null,
+          show_if_answer: formData.show_if_answer || null,
+          ai_prompt: formData.ai_prompt || null
+        })
+      })
+
+      if (response.ok) {
+        setEditingQuestion(null)
+        setFormData({
+          section: '',
+          text: '',
+          type: 'boolean',
+          points: 1,
+          options: {
+            type: 'boolean',
+            choices: [
+              { value: 'pass', label: 'Pasa', points: 1, status: 'ok' },
+              { value: 'fail', label: 'Falla', points: 0, status: 'critical' }
+            ]
+          },
+          allow_photos: true,
+          max_photos: 3,
+          requires_comment_on_fail: false,
+          send_notification: false,
+          parent_question_id: null,
+          show_if_answer: '',
+          ai_prompt: ''
+        })
+        loadQuestions()
+      } else {
+        alert('Error al actualizar pregunta')
+      }
+    } catch (error) {
+      console.error('Error:', error)
+      alert('Error al actualizar pregunta')
+    }
+  }
+
   const handleDeleteQuestion = async (questionId) => {
     if (!confirm('¿Estás seguro de eliminar esta pregunta?')) return
     
@@ -1071,17 +1159,43 @@ function QuestionsManagerModal({ checklist, onClose }) {
               </p>
             </div>
             <button
-              onClick={() => setShowCreateForm(!showCreateForm)}
+              onClick={() => {
+                setShowCreateForm(!showCreateForm)
+                setEditingQuestion(null)
+                setFormData({
+                  section: '',
+                  text: '',
+                  type: 'boolean',
+                  points: 1,
+                  options: {
+                    type: 'boolean',
+                    choices: [
+                      { value: 'pass', label: 'Pasa', points: 1, status: 'ok' },
+                      { value: 'fail', label: 'Falla', points: 0, status: 'critical' }
+                    ]
+                  },
+                  allow_photos: true,
+                  max_photos: 3,
+                  requires_comment_on_fail: false,
+                  send_notification: false,
+                  parent_question_id: null,
+                  show_if_answer: '',
+                  ai_prompt: ''
+                })
+              }}
               className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition"
             >
-              {showCreateForm ? 'Cancelar' : '+ Nueva Pregunta'}
+              {showCreateForm || editingQuestion ? 'Cancelar' : '+ Nueva Pregunta'}
             </button>
           </div>
 
-          {/* Create Form */}
+          {/* Create/Edit Form */}
-          {showCreateForm && (
+          {(showCreateForm || editingQuestion) && (
             <div className="bg-purple-50 border border-purple-200 rounded-lg p-4 mb-6">
-              <form onSubmit={handleCreateQuestion} className="space-y-4">
+              <h3 className="text-lg font-semibold text-purple-900 mb-4">
+                {editingQuestion ? '✏️ Editar Pregunta' : '➕ Nueva Pregunta'}
+              </h3>
+              <form onSubmit={editingQuestion ? handleUpdateQuestion : handleCreateQuestion} className="space-y-4">
                 <div className="grid grid-cols-2 gap-4">
                   <div>
                     <label className="block text-sm font-medium text-gray-700 mb-1">
@@ -1352,7 +1466,7 @@ function QuestionsManagerModal({ checklist, onClose }) {
                   type="submit"
                   className="w-full px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition"
                 >
-                  Crear Pregunta
+                  {editingQuestion ? 'Actualizar Pregunta' : 'Crear Pregunta'}
                 </button>
               </form>
             </div>
@@ -1424,12 +1538,20 @@ function QuestionsManagerModal({ checklist, onClose }) {
                               </div>
                             </div>
                           </div>
-                          <button
+                          <div className="ml-4 flex gap-2">
-                            onClick={() => handleDeleteQuestion(question.id)}
+                            <button
-                            className="ml-4 text-red-600 hover:text-red-700 text-sm"
+                              onClick={() => handleEditQuestion(question)}
-                          >
+                              className="text-blue-600 hover:text-blue-700 text-sm"
-                            Eliminar
+                            >
-                          </button>
+                              ✏️ Editar
+                            </button>
+                            <button
+                              onClick={() => handleDeleteQuestion(question.id)}
+                              className="text-red-600 hover:text-red-700 text-sm"
+                            >
+                              🗑️ Eliminar
+                            </button>
+                          </div>
                         </div>
                       )
                     })}