From a3b6ee8148e30c49d83a7f1fa1ff331e9a433395 Mon Sep 17 00:00:00 2001
From: AdalbertoCV <34152734@uaz.edu.mx>
Date: Tue, 1 Oct 2024 12:48:30 -0600
Subject: [PATCH] Correccion de recarga de pagina en editarModalidad

---
 cosiap_api/dynamic_forms/models.py            | 14 +----
 .../solicitudes/respuestas_serializer.py      |  4 +-
 .../common/utility/RenderElemento.jsx         |  9 ++-
 .../modalidades/EditarModalidad.jsx           | 51 +++++++++--------
 .../src/components/modalidades/Modalidad.jsx  | 55 ++++++++++++++++++-
 5 files changed, 89 insertions(+), 44 deletions(-)

diff --git a/cosiap_api/dynamic_forms/models.py b/cosiap_api/dynamic_forms/models.py
index f1be9a8..7995782 100644
--- a/cosiap_api/dynamic_forms/models.py
+++ b/cosiap_api/dynamic_forms/models.py
@@ -380,20 +380,10 @@ class RCasillas(Respuesta):
     def clean(self):
         super().clean()
         respuesta = self.valor    
-        noRespuesta = respuesta.count() == 0              
-        obligatorio = self.elemento.obligatorio                          
-        opcOtro = self.elemento.opcionOtro                      
-        otro = self.otro                
+        noRespuesta = respuesta == None             
+        obligatorio = self.elemento.obligatorio                                                                
         if (noRespuesta) and obligatorio:
             raise ValidationError("Este campo es Obligatorio.")          
-        if obligatorio:
-            if not ((opcOtro and (otro and otro.strip())) or not opcOtro) and (respuesta and respuesta.filter(nombre='Otro').exists()):
-                raise ValidationError("Este campo es obligatorio")
-        if (otro and otro.strip()) and (respuesta and not respuesta.filter(nombre='Otro').exists()):
-            raise ValidationError("No esta seleccionada opcion Otro")        
-        if respuesta and (respuesta.filter(nombre='Otro').exists() and not( otro and otro.strip())):
-            raise ValidationError("Si eliges 'otro', debes proporcionar más detalles en el campo 'otro'.")    
-    
 
 class RDesplegable(Respuesta):
     valor = models.CharField(max_length=100,null=True, blank=True)
diff --git a/cosiap_api/solicitudes/respuestas_serializer.py b/cosiap_api/solicitudes/respuestas_serializer.py
index 3570e67..0367ffd 100644
--- a/cosiap_api/solicitudes/respuestas_serializer.py
+++ b/cosiap_api/solicitudes/respuestas_serializer.py
@@ -110,8 +110,8 @@ class RespuestaSerializer(serializers.Serializer):
         return respuesta
 
     def update(self, instance, validated_data):
-        valor_texto = validated_data.get('valor_texto', instance.valor_texto)
-        valor_file = validated_data.get('valor_file', instance.valor_file)
+        valor_texto = validated_data.get('valor_texto', instance.valor)
+        valor_file = validated_data.get('valor_file', instance.valor)
         otro = validated_data.get('otro', instance.otro)
 
         # Determina el nuevo valor
diff --git a/cosiap_frontend/src/components/common/utility/RenderElemento.jsx b/cosiap_frontend/src/components/common/utility/RenderElemento.jsx
index a7c5c55..62ef2d1 100644
--- a/cosiap_frontend/src/components/common/utility/RenderElemento.jsx
+++ b/cosiap_frontend/src/components/common/utility/RenderElemento.jsx
@@ -1,13 +1,15 @@
 import '@/components/modalidades/Modalidad.css'
 
-export const renderElemento = (seccionId, elemento, handleInputChange) => {
+export const renderElemento = (seccionId, elemento, handleInputChange, handleCheckboxChange) => {
   const { tipo, opciones, id, nombre } = elemento;
 
   const handleChange = (e) => {
     const valor = e.target.value;
+    console.log(`Valor seleccionado: ${valor}`);
     handleInputChange(seccionId, id, valor); 
   };
 
+
   switch (tipo) {
     case "texto_corto":
       return (
@@ -48,9 +50,6 @@ export const renderElemento = (seccionId, elemento, handleInputChange) => {
     case "desplegable":
       return (
         <select onChange={handleChange} key={id} name={nombre} required className="select-class">
-          <option value="" disabled>
-            Seleccione {nombre}
-          </option>
           {Object.keys(opciones).map((opcionId) => (
             <option key={opcionId} value={opciones[opcionId].nombre}>
               {opciones[opcionId].nombre}
@@ -67,7 +66,7 @@ export const renderElemento = (seccionId, elemento, handleInputChange) => {
                 type="checkbox"
                 name={nombre}
                 value={opciones[opcionId].nombre}
-                onChange={handleChange}
+                onChange={(e) => handleCheckboxChange(seccionId, id, e)}
                 required
               />
               {opciones[opcionId].nombre}
diff --git a/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
index 7255b35..57a0cda 100644
--- a/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
@@ -121,14 +121,12 @@ const EditModalidad = () => {
             // Actualizar el estado con la nueva sección
             setSections(prevSections => ({
                 ...prevSections,
-                [response.data.data.id]: { ...response.data, elementos: [] } // Aseguramos que la nueva sección tenga un array vacío para elementos
+                [response.data.data.id]: { ...response.data.data, elementos: [] } // Aseguramos que la nueva sección tenga un array vacío para elementos
             }));
     
             // Limpiar el input y ocultar el campo
             setNewSectionName('');
             setIsAddingSection(false);
-            await handleSubmit();
-            window.location.reload();
         } catch (error) {
             console.error('Error al agregar la sección', error);
             alert('Ocurrió un error al agregar la sección.');
@@ -138,36 +136,40 @@ const EditModalidad = () => {
     // agregamos un nuevo elemento a la seccion
     const handleAddElement = async (sectionId) => {
         try {
-            if (newElementType === ''){
-                setNewElementType('texto_corto')
+            if (newElementType === '') {
+                setNewElementType('texto_corto');
             }
             // Hacer una solicitud POST para agregar el nuevo elemento
             const response = await api.dynamicForms.elementos.post({
-                nombre: newElementName, tipo: newElementType, formato: newElementFormat
+                nombre: newElementName,
+                tipo: newElementType,
+                formato: newElementFormat,
             });
-
-            await api.dynamicForms.secciones.postSectionElement(sectionId, response.data.data.id)
-    
+        
+            await api.dynamicForms.secciones.postSectionElement(sectionId, response.data.data.id);
+        
             // Actualizar el estado para agregar el nuevo elemento a la sección
-            setSections(prevSections => {
+            setSections((prevSections) => {
                 const updatedSections = { ...prevSections };
-                Object.values(updatedSections[sectionId].elementos).push(response.data);
+                // Asegúrate de que el elemento se agregue al array de elementos
+                updatedSections[sectionId].elementos = [
+                    ...updatedSections[sectionId].elementos,
+                    { ...response.data.data, opciones: [] }, // Aseguramos que el nuevo elemento tenga un array vacío para opciones
+                ];
                 return updatedSections;
             });
-    
+        
             // Limpiar el input y ocultar el campo
             setNewElementName('');
             setSelectedSectionId(null);
             setIsAddingElement(false);
-            await handleSubmit();
-            window.location.reload();
             console.log(`Elemento "${newElementName}" agregado correctamente a la sección ${sectionId}.`);
         } catch (error) {
             console.error('Error al agregar el elemento', error);
             alert('Ocurrió un error al agregar el elemento.');
         }
     };
-
+    
     // agregamos una nueva opcion a un elemento
     const handleAddOption = async (sectionId, elementId) => {
         try {
@@ -175,28 +177,29 @@ const EditModalidad = () => {
             const response = await api.dynamicForms.opciones.post({
                 nombre: newOptionName,
             });
-
-            await api.dynamicForms.elementos.postElementOption(elementId, response.data.data.id)
-    
+        
+            await api.dynamicForms.elementos.postElementOption(elementId, response.data.data.id);
+        
             // Actualizar el estado para agregar la nueva opción al elemento
-            setSections(prevSections => {
+            setSections((prevSections) => {
                 const updatedSections = { ...prevSections };
-                const updatedElements = Object.values(updatedSections[sectionId].elementos).map(element => {
+                const updatedElements = updatedSections[sectionId].elementos.map((element) => {
                     if (element.id === elementId) {
-                        return { ...element, opciones: [...(element.opciones || []), response.data] };
+                        return { 
+                            ...element, 
+                            opciones: [...(element.opciones || []), response.data.data] 
+                        };
                     }
                     return element;
                 });
                 updatedSections[sectionId].elementos = updatedElements;
                 return updatedSections;
             });
-    
+        
             // Limpiar el input y ocultar el campo
             setNewOptionName('');
             setSelectedElementId(null);
             setIsAddingOption(false);
-            await handleSubmit();
-            window.location.reload();
             console.log(`Opción "${newOptionName}" agregada correctamente al elemento ${elementId}.`);
         } catch (error) {
             console.error('Error al agregar la opción', error);
diff --git a/cosiap_frontend/src/components/modalidades/Modalidad.jsx b/cosiap_frontend/src/components/modalidades/Modalidad.jsx
index 6b25b83..fabd000 100644
--- a/cosiap_frontend/src/components/modalidades/Modalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/Modalidad.jsx
@@ -84,6 +84,7 @@ const SolicitarModalidad = () => {
 
 
   const handleInputChange = (seccionId, elementoId, valor, otro = "") => {
+    console.log(`Actualizando respuesta: seccionId=${seccionId}, elementoId=${elementoId}, valor=${valor}`);
     setRespuesta((prevRespuestas) => {
       const existingRespuesta = prevRespuestas.find(
         (r) => r.seccion_id === seccionId && r.elemento_id === elementoId
@@ -105,6 +106,57 @@ const SolicitarModalidad = () => {
   };
 
 
+  const handleCheckboxChange = (seccionId, id, e) => {
+    const { value, checked } = e.target;
+  
+    // Obtén las respuestas existentes
+    const existingRespuesta = respuesta.find(
+      (r) => r.seccion_id === seccionId && r.elemento_id === id
+    );
+  
+    console.log(existingRespuesta)
+  
+    setRespuesta((prevRespuestas) => {
+      let newValor;
+  
+      // Si ya hay una respuesta, actualiza su valor; si no, crea uno nuevo
+      if (existingRespuesta) {
+        // Si ya hay una respuesta, obtenemos los valores actuales
+        const valoresActuales = existingRespuesta.valor ? existingRespuesta.valor.split(",") : [];
+        console.log("Valores actuales:", valoresActuales)
+  
+        // Agregar o quitar el valor según la selección
+        if (checked) {
+          // Agregar valor si se selecciona
+          newValor = valoresActuales.includes(value) ? valoresActuales : [...valoresActuales, value];
+        } else {
+          // Remover valor si se deselecciona
+          newValor = valoresActuales.filter((v) => v !== value);
+        }
+      } else {
+        // Si no existe, comenzamos con un array que contiene el valor actual
+        newValor = checked ? [value] : [];
+      }
+  
+      // Unimos los valores en una cadena separada por comas
+      const cadenaValores = newValor.join(",");
+      console.log("Cadena Respuesta: ", cadenaValores);
+  
+      // Si no existe la respuesta, agrega una nueva al array
+      if (!existingRespuesta) {
+        return [...prevRespuestas, { seccion_id: seccionId, elemento_id: id, valor: cadenaValores }];
+      }
+  
+      // Si ya existe, actualiza la respuesta existente
+      return prevRespuestas.map((r) =>
+        r.seccion_id === seccionId && r.elemento_id === id
+          ? { ...r, valor: cadenaValores }
+          : r
+      );
+    });
+  };
+  
+
   /* Función para mostrar el monto_maximo en formato de pesos MXN */
   const formatCurrency = (amount) => {
     return new Intl.NumberFormat("es-MX", {
@@ -136,6 +188,7 @@ const SolicitarModalidad = () => {
   };
 
   const handleSubmit = async () => {
+    console.log("Respuestas:", respuesta)
     // Verifica que las respuestas no estén vacías
     const isEmptyResponse = respuesta.some((res) => {
         // Si el valor es un archivo, solo verifica que no esté vacío
@@ -231,7 +284,7 @@ const SolicitarModalidad = () => {
               {Object.keys(secciones[seccionId].elementos).map((elementoId) => (
                 <div key={elementoId} className="element-card">
                   <h4>{secciones[seccionId].elementos[elementoId].nombre}</h4>
-                  {renderElemento(seccionId, secciones[seccionId].elementos[elementoId], handleInputChange)}
+                  {renderElemento(secciones[seccionId].id, secciones[seccionId].elementos[elementoId], handleInputChange, handleCheckboxChange)}
                 </div>
               ))}
             </div>
-- 
GitLab