From 216d9fab722628f97d4caf1a55c988fe9cccf096 Mon Sep 17 00:00:00 2001
From: AdalbertoCV <34152734@uaz.edu.mx>
Date: Fri, 4 Oct 2024 13:02:20 -0600
Subject: [PATCH] Manejo de campo Obligatorio para elementos en dynamic forms

---
 .../common/utility/RenderElemento.jsx         | 94 +++++++++----------
 .../components/modalidades/CrearModalidad.css |  2 +-
 .../components/modalidades/CrearModalidad.jsx | 13 ++-
 .../modalidades/EditarModalidad.jsx           | 29 +++++-
 .../src/components/modalidades/Modalidad.jsx  | 45 +++++----
 5 files changed, 107 insertions(+), 76 deletions(-)

diff --git a/cosiap_frontend/src/components/common/utility/RenderElemento.jsx b/cosiap_frontend/src/components/common/utility/RenderElemento.jsx
index e6b4abe..6e9c491 100644
--- a/cosiap_frontend/src/components/common/utility/RenderElemento.jsx
+++ b/cosiap_frontend/src/components/common/utility/RenderElemento.jsx
@@ -2,7 +2,7 @@ import '@/components/modalidades/Modalidad.css'
 import api from "@/api";
 
 export const renderElemento = (seccionId, elemento, handleInputChange, handleCheckboxChange) => {
-  const { tipo, opciones, id, nombre, formato } = elemento;
+  const { tipo, opciones, id, nombre, formato, obligatorio } = elemento;
 
   const handleChange = (e) => {
     const valor = e.target.value;
@@ -12,96 +12,92 @@ export const renderElemento = (seccionId, elemento, handleInputChange, handleChe
 
   const handleDownload = async (elemento, formato) => {
     try {
-      // Realiza la petición al backend para obtener el archivo
       const response = await api.formatos.getById(formato, {
-        responseType: 'blob', // Esto asegura que obtengas los datos como un archivo binario
+        responseType: 'blob',
       });
   
-      // Verifica si el tipo de contenido es correcto
       const contentType = response.headers['content-type'];
-      console.log('Content Type:', contentType); // Para depuración
+      console.log('Content Type:', contentType);
   
       if (contentType !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
         throw new Error('Tipo de archivo inesperado');
       }
   
-      // Crea un Blob a partir de los datos recibidos
       const blob = new Blob([response.data], { type: contentType });
-  
-      // Crea un URL para el archivo descargado
       const url = window.URL.createObjectURL(blob);
   
-      // Crea un enlace temporal
       const link = document.createElement('a');
       link.href = url;
-      link.setAttribute('download', `${elemento.nombre}_formato.docx`); // Cambia a .docx
+      link.setAttribute('download', `${elemento.nombre}_formato.docx`);
       
-      // Añadir el enlace al cuerpo del documento para que sea visible en el navegador
       document.body.appendChild(link);
-      
-      // En lugar de hacer clic en el enlace, solo configuramos el enlace
       link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
-  
-      // Dejar el enlace en el DOM para que sea visible
-      // document.body.removeChild(link); // No eliminar el enlace si deseas que la descarga sea visible
-  
-      // Revoca el URL del blob para liberar memoria
       window.URL.revokeObjectURL(url);
     } catch (error) {
       console.error('Error al descargar el formato:', error);
     }
   };
   
+  const renderInput = (inputElement, obligatorio) => (
+    <>
+      {inputElement}
+      {obligatorio && <small className="required-text">*obligatorio</small>}
+    </>
+  );
 
   switch (tipo) {
     case "texto_corto":
-      return (
+      return renderInput(
         <input
           key={id}
           type="text"
           name={nombre}
           placeholder={nombre}
-          required
+          required={obligatorio}
           className="input-class"
           onChange={handleChange}
-        />
+        />,
+        obligatorio
       );
     case "texto_parrafo":
-      return (
+      return renderInput(
         <textarea
           key={id}
           name={nombre}
           placeholder={nombre}
-          required
+          required={obligatorio}
           className="textarea-class"
           onChange={handleChange}
-        />
+        />,
+        obligatorio
       );
     case "numerico":
-      return (
+      return renderInput(
         <input
           key={id}
           type="number"
           name={nombre}
           placeholder={nombre}
-          required
+          required={obligatorio}
           className="input-class"
           onChange={handleChange}
-        />
+        />,
+        obligatorio
       );
     case "opcion_multiple":
     case "desplegable":
-      return (
-        <select onChange={handleChange} key={id} name={nombre} required className="select-class">
+      return renderInput(
+        <select onChange={handleChange} key={id} name={nombre} required={obligatorio} className="select-class">
           {Object.keys(opciones).map((opcionId) => (
             <option key={opcionId} value={opciones[opcionId].nombre}>
               {opciones[opcionId].nombre}
             </option>
           ))}
-        </select>
+        </select>,
+        obligatorio
       );
     case "casillas":
-      return (
+      return renderInput(
         <div key={id} className="checkbox-group">
           {Object.keys(opciones).map((opcionId) => (
             <label key={opcionId} className="checkbox-label">
@@ -110,60 +106,62 @@ export const renderElemento = (seccionId, elemento, handleInputChange, handleChe
                 name={nombre}
                 value={opciones[opcionId].nombre}
                 onChange={(e) => handleCheckboxChange(seccionId, id, e)}
-                required
+                required={obligatorio}
               />
               {opciones[opcionId].nombre}
             </label>
           ))}
-        </div>
+        </div>,
+        obligatorio
       );
-      case "documento":
-      return (
+    case "documento":
+      return renderInput(
         <div key={id}>
           <input
             type="file"
             name={nombre}
-            required
+            required={obligatorio}
             accept=".pdf"
             className="file-input-class"
             onChange={(e) => handleInputChange(seccionId, id, e.target.files[0])}
           />
-          {formato &&  (
+          {formato && (
             <button
               className="download-button"
-              onClick={() => handleDownload(elemento,formato)}
+              onClick={() => handleDownload(elemento, formato)}
             >
               Descargar Formato
             </button>
           )}
-        </div>
+        </div>,
+        obligatorio
       );
     case "fecha":
-      return (
+      return renderInput(
         <input
           key={id}
           type="date"
           name={nombre}
-          required
+          required={obligatorio}
           className="date-input-class"
           onChange={handleChange}
-        />
+        />,
+        obligatorio
       );
     case "hora":
-      return (
+      return renderInput(
         <input
           key={id}
           type="time"
           name={nombre}
-          required
+          required={obligatorio}
           className="time-input-class"
           onChange={handleChange}
-        />
+        />,
+        obligatorio
       );
     case "separador":
-      return (
-        <hr key={id} className="separator-class" />
-      );
+      return <hr key={id} className="separator-class" />;
     default:
       return null;
   }
diff --git a/cosiap_frontend/src/components/modalidades/CrearModalidad.css b/cosiap_frontend/src/components/modalidades/CrearModalidad.css
index 4d82bf3..f6215d7 100644
--- a/cosiap_frontend/src/components/modalidades/CrearModalidad.css
+++ b/cosiap_frontend/src/components/modalidades/CrearModalidad.css
@@ -258,7 +258,7 @@ input[type="checkbox"] {
     padding: 8px; /* Ajusta el padding para que sea igual en todos los elementos */
     height: auto; /* Permite que los elementos ajusten su altura automáticamente */
     font-size: 15px; /* Asegura que todos tengan el mismo tamaño de fuente */
-    font-style:oblique;
+    font-style:normal;
 }
 
 .form-row input {
diff --git a/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx b/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx
index e07f781..47bcaa8 100644
--- a/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx
@@ -149,7 +149,7 @@ const CreateModalidad = () => {
             // 4. Creamos los elementos y los asociamos a las secciones
             for (const [sectionIndex, section] of sections.entries()){
                 const elementPromises = section.elements.map(element =>
-                    api.dynamicForms.elementos.post({nombre: element.name, tipo: element.type, formato: element.formato})
+                    api.dynamicForms.elementos.post({nombre: element.name, tipo: element.type, obligatorio:element.obligatorio, formato: element.formato})
                 );
                 const elementosResponses = await Promise.all(elementPromises);
                 const elementIds = elementosResponses.map(res => res.data.data.id);
@@ -377,7 +377,7 @@ const CreateModalidad = () => {
                                 <option value="separador">Separador</option>
                             </select>
                         </div>
-
+                        
                         {element.type === 'documento' && (
                             <div className="form-group">
                                 <label>Formato:</label>
@@ -394,6 +394,15 @@ const CreateModalidad = () => {
                                 </select>
                             </div>
                         )}
+                        <div className="form-group">
+                            <label>¿Es obligatorio?</label>
+                            <input
+                                type="checkbox"
+                                checked={element.obligatorio} // Esto controla el estado del radio
+                                style={{ transform: 'scale(1)', marginLeft: '5px' }}
+                                onChange={(e) => updateElement(sectionIndex, elementIndex, 'obligatorio', e.target.checked)}
+                            />
+                        </div>
                         {['opcion_multiple', 'desplegable', 'casillas'].includes(element.type) && (
                         <>
                             <h5 className="subtitle-text-2">Opciones:</h5>
diff --git a/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
index ecc9598..c456473 100644
--- a/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
@@ -27,6 +27,7 @@ const EditModalidad = () => {
     const [selectedSectionId, setSelectedSectionId] = useState(null);
     const [isAddingElement, setIsAddingElement] = useState(false);
     const [newOptionName, setNewOptionName] = useState('');
+    const [newElemetObligatorio, setNewElementObligatorio] = useState(false);
     const [selectedElementId, setSelectedElementId] = useState(null);
     const [isAddingOption, setIsAddingOption] = useState(false);
     // hooks para el manejo de las alertas
@@ -414,6 +415,7 @@ const EditModalidad = () => {
                     return api.dynamicForms.elementos.update(element.id, {
                         nombre: element.nombre,
                         tipo: element.tipo,
+                        obligatorio:element.obligatorio,
                         formato: element.formato
                     });
                 });
@@ -566,6 +568,7 @@ const EditModalidad = () => {
                          {/* Input para agregar nueva sección */}
                              {isAddingSection && (
                             <div className="card">
+                                <label>Nombre de la sección:</label>
                                  <div className="form-group">
                                      <input 
                                          type="text"
@@ -591,6 +594,7 @@ const EditModalidad = () => {
                         <div key={section.id} className="card">
                             <div className="form-group">
                             <h4 className="subtitle-text">Sección {sectionIndex + 1}</h4>
+                            <label>Nombre de la sección:</label>
                             <div className="form-row">
                                 <input
                                     type="text"
@@ -620,13 +624,14 @@ const EditModalidad = () => {
                             </div>
                             {isAddingElement && selectedSectionId === section.id && (
                                     <div className="card">
+                                    <label>Nombre del elemento:</label>
                                         <input
                                             type="text"
                                             value={newElementName}
                                             onChange={(e) => setNewElementName(e.target.value)}
                                             placeholder="Nombre del nuevo elemento"
                                         />
-                                        Tipo:
+                                        <label>Tipo:</label>
                                         <select
                                             value={newElementType}
                                             onChange={(e) => setNewElementType(e.target.value)}
@@ -643,6 +648,15 @@ const EditModalidad = () => {
                                             <option value="documento">Documento</option>
                                             <option value="separador">Separador</option>
                                         </select>
+                                        <div className="form-group">
+                                            <label>¿Es obligatorio?</label>
+                                            <input
+                                                type="checkbox"
+                                                checked={newElemetObligatorio} // Esto controla el estado del radio
+                                                style={{ transform: 'scale(1)', marginLeft: '5px' }}
+                                                onChange={(e) => setNewElementObligatorio(e.target.checked)}
+                                            />
+                                        </div>
                                         {newElementType === 'documento' && (
                                         <div className="form-group">
                                             <label>Formato:</label>
@@ -674,6 +688,7 @@ const EditModalidad = () => {
                                         <h4 className="subtitle-text-1">Elemento {elementIndex + 1}</h4>
                                         <div className="form-row">
                                         <div className="form-group">
+                                        <label>Nombre del elemento:</label>
                                         <label>
                                             <input
                                                 type="text"
@@ -710,6 +725,7 @@ const EditModalidad = () => {
                                         </div>
                                 
                                         <div className="form-group">
+                                        <label>Tipo:</label>
                                         <select
                                             value={element.tipo}
                                             onChange={(e) => updateElement(section.id, element.id, 'tipo', e.target.value)}
@@ -727,8 +743,18 @@ const EditModalidad = () => {
                                             <option value="documento">Documento</option>
                                             <option value="separador">Separador</option>
                                         </select>
+                                        <div className="form-group">
+                                            <label>¿Es obligatorio?</label>
+                                            <input
+                                                type="checkbox"
+                                                checked={element.obligatorio} 
+                                                style={{ transform: 'scale(1)', marginLeft: '5px' }}
+                                                onChange={(e) => updateElement(section.id, element.id, 'obligatorio', e.target.checked)}
+                                            />
+                                        </div>
                                         {isAddingOption && selectedElementId === element.id && (
                                          <div className="card">
+                                         <label>Nombre de la opción:</label>
                                              <div className="form-group">
                                                  <input
                                                      type="text"
@@ -770,6 +796,7 @@ const EditModalidad = () => {
                                                 <h4 className="subtitle-text-2">Opción {optionIndex +1}</h4>
                                                 <label>
                                                 <div className="form-group">
+                                                <label>Nombre de la opción:</label>
                                                 <div className="form-row">
                                                 
                                                     <input
diff --git a/cosiap_frontend/src/components/modalidades/Modalidad.jsx b/cosiap_frontend/src/components/modalidades/Modalidad.jsx
index fabd000..2a3bfd8 100644
--- a/cosiap_frontend/src/components/modalidades/Modalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/Modalidad.jsx
@@ -188,21 +188,27 @@ 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
-        if (res.valor instanceof File) {
-            return !res.valor;
-        }
-        // Si el valor es un string, aplica .trim()
-        return !res.valor || (typeof res.valor === 'string' && res.valor.trim() === "");
+    console.log("Respuestas:", respuesta);
+
+    // Filtrar los elementos obligatorios y verificar si están contestados
+    const elementosObligatoriosSinRespuesta = Object.keys(secciones).flatMap(seccionId => {
+        return Object.values(secciones[seccionId].elementos)
+            .filter(elemento => elemento.obligatorio)  // Filtrar solo los elementos obligatorios
+            .filter(elemento => !respuesta.some(res => res.elemento_id === elemento.id && res.valor))  // Verificar si no hay respuesta
+            .map(elemento => elemento.nombre);  // Obtener el nombre de cada elemento que falta
     });
 
     const isMontoInvalid = !montoSolicitado || montoError;
 
-    if (isEmptyResponse || isMontoInvalid) {
-        showAlert('Por favor completa todos los campos requeridos.', false);
+    // Mostrar error si falta alguna respuesta obligatoria o si el monto es inválido
+    if (elementosObligatoriosSinRespuesta.length > 0 || isMontoInvalid) {
+        const missingElementsMessage = elementosObligatoriosSinRespuesta.length > 0
+            ? `Por favor completa los campos obligatorios: ${elementosObligatoriosSinRespuesta.join(', ')}.`
+            : '';
+        
+        const montoErrorMessage = isMontoInvalid ? 'La cantidad solicitada es inválida o está vacía.' : '';
+
+        showAlert(`${missingElementsMessage} ${montoErrorMessage}`, false);
         return;
     }
 
@@ -216,18 +222,15 @@ const SolicitarModalidad = () => {
         formData.append(`respuestas[${index}][seccion_id]`, res.seccion_id);
         formData.append(`respuestas[${index}][elemento_id]`, res.elemento_id);
         if (res.valor instanceof File) {
-            // Si es un archivo, adjunta el archivo usando valor_file
             formData.append(`respuestas[${index}][valor_file]`, res.valor);
         } else {
-            // Si es un texto, adjunta el texto usando valor_texto
             formData.append(`respuestas[${index}][valor_texto]`, res.valor);
         }
     });
 
-    console.log("datos a enviar:", formData);
+    console.log("Datos a enviar:", formData);
 
     try {
-        // Asegúrate de que la petición esté configurada para enviar multipart/form-data
         const response = await api.solicitudes.solicitar.post(formData, {
             headers: {
                 'Content-Type': 'multipart/form-data',
@@ -242,16 +245,10 @@ const SolicitarModalidad = () => {
             showAlert(`Error: ${errorMessage}`, false);
         }
     } catch (error) {
-        // Atrapando el mensaje de error específico
-        if (error.response && error.response.data && error.response.data.messages) {
-            const specificErrorMessage = error.response.data.messages.error[0]; // Obtener el primer mensaje de error
-            showAlert(`Error: ${specificErrorMessage}`, false);
-        } else {
-            const errorMessage = error.message || 'Error en la conexión';
-            showAlert(`Error: ${errorMessage}`, false);
-        }
+        const specificErrorMessage = error.response?.data?.messages?.error[0] || error.message || 'Error en la conexión';
+        showAlert(`Error: ${specificErrorMessage}`, false);
     }
-};
+  };
 
   return (
     modalidad && (
-- 
GitLab