From f5662eed077414cb0bc718859301fe9ffb7e5692 Mon Sep 17 00:00:00 2001
From: AdalbertoCV <34152734@uaz.edu.mx>
Date: Thu, 3 Oct 2024 13:35:49 -0600
Subject: [PATCH] =?UTF-8?q?Actualizacion=20de=20dise=C3=B1os=20formularios?=
 =?UTF-8?q?=20din=C3=A1micos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/modalidades/CrearModalidad.css |  94 +++++++-
 .../components/modalidades/CrearModalidad.jsx | 138 ++++++------
 .../modalidades/EditarModalidad.jsx           | 200 ++++++++++--------
 3 files changed, 269 insertions(+), 163 deletions(-)

diff --git a/cosiap_frontend/src/components/modalidades/CrearModalidad.css b/cosiap_frontend/src/components/modalidades/CrearModalidad.css
index 9112abd..4d82bf3 100644
--- a/cosiap_frontend/src/components/modalidades/CrearModalidad.css
+++ b/cosiap_frontend/src/components/modalidades/CrearModalidad.css
@@ -90,15 +90,22 @@ textarea {
 }
 
 .delete-button {
-    background-color: #f44336;
-    color: white;
-    border: none;
-    padding: 8px 12px;
-    font-size: 14px;
-    border-radius: 16px;
-    cursor: pointer;
-    margin-top: 10px;
-    margin-right: 10px;
+    background-color: #f44336; 
+    color: white; 
+    border: none; 
+    padding: 8px 12px; 
+    font-size: 14px; 
+    border-radius: 16px; 
+    cursor: pointer; 
+    margin-top: 10px; 
+    margin-right: 10px; 
+    display: flex; 
+    align-items: center; 
+    justify-content: center; 
+}
+
+.delete-button i {
+    font-size: 16px; /* Ajusta el tamaño del ícono */
 }
 
 .delete-button:hover {
@@ -110,10 +117,11 @@ textarea {
     background-color: #4fb659;
     color: white;
     padding: 10px 20px;
-    font-size: 16px;
+    font-size: 14px;
     border: none;
     border-radius: 16px;
     cursor: pointer;
+    font-style: oblique;
     margin-top: 20px;
 }
 
@@ -175,6 +183,22 @@ input[type="checkbox"] {
     background-color: #f5f5f5;
 }
 
+.element-card {
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    margin: 15px 0;
+    padding: 10px;
+    background-color: #adacac;
+}
+
+.element-card-header{
+    font-weight: bold;
+}
+
+.element-card-body{
+    padding: 10px;
+}
+
 .card-header {
     font-weight: bold;
 }
@@ -189,4 +213,54 @@ input[type="checkbox"] {
     padding: 5px;
     border-radius: 5px;
     background-color: #e9e9e9;
+}
+
+.form-row {
+    display: flex;
+    align-items: center; /* Alinea los elementos al centro verticalmente */
+    gap: 10px; /* Espacio entre los elementos */
+    height: auto; /* Asegúrate de que la altura del contenedor sea flexible */
+}
+
+.form-row label {
+    flex-shrink: 0; /* Evita que el label se encoja */
+}
+
+.form-row input {
+    flex: 1; /* Hace que el input ocupe el espacio disponible */
+}
+
+.element-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between; /* Para que el input esté a la izquierda y los botones a la derecha */
+    gap: 10px; /* Espacio entre el input y los botones */
+    width: 100%; /* Asegura que ocupe todo el ancho disponible */
+}
+
+.element-input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 16px;
+}
+
+.element-buttons {
+    display: flex;
+    gap: 5px; /* Espacio entre los botones */
+}
+
+.form-row input,
+.form-row button,
+.form-row label {
+    line-height: normal; /* Asegura que todos los elementos tengan una línea de texto coherente */
+    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;
+}
+
+.form-row input {
+    flex: 1; /* Hace que el input crezca según el espacio disponible */
 }
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx b/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx
index fb3ba54..e07f781 100644
--- a/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx
@@ -268,6 +268,7 @@ const CreateModalidad = () => {
     
             <div className="form-group">
                 <label>Nombre del Formulario:</label>
+                <div className="form-row">
                 <input
                     type="text"
                     value={formName}
@@ -275,6 +276,14 @@ const CreateModalidad = () => {
                     placeholder="Ingrese el nombre del formulario"
                     required
                 />
+                <button
+                    type="button"
+                    onClick={addSection}
+                    className="add-button"
+                >
+                    (+) Sección
+                </button>
+                </div>
             </div>
         </div>
     
@@ -284,6 +293,7 @@ const CreateModalidad = () => {
             <h3 className="subtitle-text">Sección {sectionIndex + 1}</h3>
                 <div className="form-group">
                     <label>Nombre:</label>
+                    <div className="form-row">
                     <input
                         type="text"
                         value={section.name}
@@ -291,31 +301,31 @@ const CreateModalidad = () => {
                         placeholder="Nombre de la sección"
                         required
                     />
-                </div>
     
-                {/* Botón para eliminar sección */}
-                <button
-                    type="button"
-                    onClick={() => removeSection(sectionIndex)}
-                    className="delete-button"
-                >
-                    Eliminar Sección
-                </button>
+                    <button
+                        type="button"
+                        onClick={() => addElementToSection(sectionIndex)}
+                        className="add-button"
+                    >
+                        (+) Elemento
+                    </button>
+                    <button
+                        type="button"
+                        onClick={() => removeSection(sectionIndex)}
+                        className="delete-button"
+                    >
+                        (-) Sección
+                    </button>
+                    </div>
+                </div>
     
-                <button
-                    type="button"
-                    onClick={() => addElementToSection(sectionIndex)}
-                    className="add-button"
-                >
-                    + Agregar Elemento
-                </button>
-                <br></br>
     
                 {section.elements.map((element, elementIndex) => (
                     <div className="element" key={elementIndex}>
                     <h4 className="subtitle-text-1">Elemento {elementIndex + 1}</h4>
                         <div className="form-group">
                             <label>Nombre del Elemento:</label>
+                            <div className="form-row">
                             <input
                                 type="text"
                                 value={element.name}
@@ -325,6 +335,28 @@ const CreateModalidad = () => {
                                 placeholder="Nombre del elemento"
                                 required
                             />
+                            {/* Opciones si el tipo es seleccionable */}
+                            {['opcion_multiple', 'desplegable', 'casillas'].includes(element.type) && (
+                                <>
+                                    <button
+                                        type="button"
+                                        onClick={() => addOptionToElement(sectionIndex, elementIndex)}
+                                        className="add-button"
+                                    >
+                                        (+) Opción
+                                    </button>
+                                </>
+                            )}
+                            {/* Botón para eliminar elemento */}
+                            <button
+                                type="button"
+                                onClick={() => removeElementFromSection(sectionIndex, elementIndex)}
+                                className="delete-button"
+                            >
+                                (-) Elemento
+                            </button>
+
+                            </div>
                         </div>
     
                         <div className="form-group">
@@ -362,67 +394,45 @@ const CreateModalidad = () => {
                                 </select>
                             </div>
                         )}
-    
-                        {/* Botón para eliminar elemento */}
-                        <button
-                            type="button"
-                            onClick={() => removeElementFromSection(sectionIndex, elementIndex)}
-                            className="delete-button"
-                        >
-                            Eliminar Elemento
-                        </button>
-
-    
-                        {/* Opciones si el tipo es seleccionable */}
                         {['opcion_multiple', 'desplegable', 'casillas'].includes(element.type) && (
-                            <>
-                                <h5 className="subtitle-text-2">Opciones:</h5>
-                                {element.options.map((option, optionIndex) => (
-                                    <div className="option" key={optionIndex}>
-                                        <div className="form-group">
-                                            <label>Nombre de la Opción:</label>
-                                            <input
-                                                type="text"
-                                                value={option.name}
-                                                onChange={(e) =>
-                                                    updateOption(sectionIndex, elementIndex, optionIndex, 'name', e.target.value)
-                                                }
-                                                placeholder="Nombre de la opción"
-                                                required
-                                            />
-                                        </div>
-    
-                                        {/* Botón para eliminar opción */}
+                        <>
+                            <h5 className="subtitle-text-2">Opciones:</h5>
+                            {element.options.map((option, optionIndex) => (
+                                <div className="option" key={optionIndex}>
+                                    <div className="form-group">
+                                        <label>Nombre de la Opción:</label>
+                                        <div className="form-row">
+                                        <input
+                                            type="text"
+                                            value={option.name}
+                                            onChange={(e) =>
+                                                updateOption(sectionIndex, elementIndex, optionIndex, 'name', e.target.value)
+                                            }
+                                            placeholder="Nombre de la opción"
+                                            required
+                                        />
                                         <button
                                             type="button"
                                             onClick={() => removeOptionFromElement(sectionIndex, elementIndex, optionIndex)}
                                             className="delete-button"
                                         >
-                                            Eliminar Opción
+                                            (-) Opción
                                         </button>
+                                        </div>
                                     </div>
-                                ))}
-                                <button
-                                    type="button"
-                                    onClick={() => addOptionToElement(sectionIndex, elementIndex)}
-                                    className="add-button"
-                                >
-                                    + Agregar Opción
-                                </button>
-                            </>
-                        )}
+                                </div>
+                            ))}
+                        </>
+                    )}
                     </div>
                 ))}
             </div>
         ))}
     
         <div className="button-container">
-            <button
-                type="button"
-                onClick={addSection}
-                className="add-button"
-            >
-                + Agregar Sección
+
+            <button  onClick={(e) => navigate('/modalidades')} className="add-button">
+                Cancelar
             </button>
 
             <button
diff --git a/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
index 2b36492..ecc9598 100644
--- a/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
@@ -547,32 +547,57 @@ const EditModalidad = () => {
                     </div>
 
                     <div className="form-group">
-                        <label>Nombre del formulario:</label>
-                        <input
-                            type="text"
-                            value={formName}
-                            onChange={(e) => setFormName(e.target.value)}
-                        />
+                    <label>Nombre del formulario:</label>
+                        <div className="form-row">
+                            <input
+                                type="text"
+                                value={formName}
+                                onChange={(e) => setFormName(e.target.value)}
+                            />
+                            <button
+                                type="button"
+                                className="add-button"
+                                onClick={() => setIsAddingSection(true)}
+                            >
+                            (+) Sección
+                            </button>
+                        </div>
+                        
+                         {/* Input para agregar nueva sección */}
+                             {isAddingSection && (
+                            <div className="card">
+                                 <div className="form-group">
+                                     <input 
+                                         type="text"
+                                         value={newSectionName}
+                                         onChange={(e) => setNewSectionName(e.target.value)}
+                                         placeholder="Nombre de la nueva sección"
+                                     />
+                                     <div className="button-container">
+                                     <button className="submit-button"
+                                         type="button"
+                                         onClick={handleAddSection}
+                                     >
+                                         Guardar
+                                     </button>
+                                     </div>
+                                 </div>
+                            </div>
+                             )}
                     </div>
     
                     {/* Secciones del formulario */}
                     {Object.values(sections).map((section,sectionIndex) => (
                         <div key={section.id} className="card">
                             <div className="form-group">
-                                <h4 className="subtitle-text">Sección {sectionIndex + 1}</h4>
+                            <h4 className="subtitle-text">Sección {sectionIndex + 1}</h4>
+                            <div className="form-row">
                                 <input
                                     type="text"
                                     value={section.nombre}
                                     onChange={(e) => handleUpdateSectionName(section.id, e.target.value)}
                                     placeholder="Nombre de la sección"
                                 />
-                                <button
-                                    type="button"
-                                    className="delete-button"
-                                    onClick={() => removeSectionFromAPI(section.id)}
-                                >
-                                Eliminar Sección
-                                </button>
     
                                 <button
                                     type="button"
@@ -582,12 +607,19 @@ const EditModalidad = () => {
                                         setIsAddingElement(true);
                                     }}
                                 >
-                                    + Agregar Elemento
+                                    (+) Elemento
                                 </button>
 
-
-                                {isAddingElement && selectedSectionId === section.id && (
-                                    <div className="form-group">
+                                <button
+                                    type="button"
+                                    className="delete-button"
+                                    onClick={() => removeSectionFromAPI(section.id)}
+                                >
+                                (-) Sección
+                                </button>
+                            </div>
+                            {isAddingElement && selectedSectionId === section.id && (
+                                    <div className="card">
                                         <input
                                             type="text"
                                             value={newElementName}
@@ -636,10 +668,12 @@ const EditModalidad = () => {
                                     </div>
                                 )}
                             </div>
-                            <div className="card-body">
+                            <div className="card">
                                 {Object.values(section.elementos).map((element, elementIndex) => (
-                                    <div key={element.id} className="form-group">
+                                    <div key={element.id} className="card">
                                         <h4 className="subtitle-text-1">Elemento {elementIndex + 1}</h4>
+                                        <div className="form-row">
+                                        <div className="form-group">
                                         <label>
                                             <input
                                                 type="text"
@@ -647,7 +681,35 @@ const EditModalidad = () => {
                                                 onChange={(e) => handleUpdateElementName(section.id, element.id, e.target.value)}
                                                 placeholder="Nombre del elemento"
                                             />
+                                            
                                         </label>
+                                        </div>
+                                        
+                                        {['opcion_multiple', 'desplegable', 'casillas'].includes(element.tipo) && (
+                                            <>
+                                                <button
+                                                    type="button"
+                                                    className="add-button"
+                                                    onClick={() => {
+                                                        setSelectedElementId(element.id);
+                                                        setIsAddingOption(true);
+                                                    }}
+                                                >
+                                                    (+) Opción
+                                                </button>
+                                                
+                                            </>
+                                        )}
+                                        <button
+                                                type="button"
+                                                className="delete-button"
+                                                onClick={() => removeElementFromSectionAPI(section.id, element.id)}
+                                            >
+                                            (-) Elemento
+                                        </button>
+                                        </div>
+                                
+                                        <div className="form-group">
                                         <select
                                             value={element.tipo}
                                             onChange={(e) => updateElement(section.id, element.id, 'tipo', e.target.value)}
@@ -665,7 +727,26 @@ const EditModalidad = () => {
                                             <option value="documento">Documento</option>
                                             <option value="separador">Separador</option>
                                         </select>
-
+                                        {isAddingOption && selectedElementId === element.id && (
+                                         <div className="card">
+                                             <div className="form-group">
+                                                 <input
+                                                     type="text"
+                                                     value={newOptionName}
+                                                     onChange={(e) => setNewOptionName(e.target.value)}
+                                                     placeholder="Nombre de la nueva opción"
+                                                 />
+                                                 <button
+                                                     className="submit-button"
+                                                     type="button"
+                                                     onClick={() => handleAddOption(element.id)}
+                                                 >
+                                                     Guardar
+                                                 </button>
+                                             </div>
+                                         </div>
+                                        )}
+                                        </div>
                                         {element.tipo === 'documento' && (
                                         <div className="form-group">
                                             <label>Formato:</label>
@@ -682,51 +763,15 @@ const EditModalidad = () => {
                                             </select>
                                         </div>
                                         )}
-
-                                        <button
-                                                type="button"
-                                                className="delete-button"
-                                                onClick={() => removeElementFromSectionAPI(section.id, element.id)}
-                                            >
-                                            Eliminar Elemento
-                                        </button>
-                                        {['opcion_multiple', 'desplegable', 'casillas'].includes(element.tipo) && (
-                                            <>
-                                                <button
-                                                    type="button"
-                                                    className="add-button"
-                                                    onClick={() => {
-                                                        setSelectedElementId(element.id);
-                                                        setIsAddingOption(true);
-                                                    }}
-                                                >
-                                                    + Agregar Opción
-                                                </button>
-                                                
-                                                {isAddingOption && selectedElementId === element.id && (
-                                                    <div className="form-group">
-                                                        <input
-                                                            type="text"
-                                                            value={newOptionName}
-                                                            onChange={(e) => setNewOptionName(e.target.value)}
-                                                            placeholder="Nombre de la nueva opción"
-                                                        />
-                                                        <button className="submit-button"
-                                                            type="button"
-                                                            onClick={() => handleAddOption(element.id)}
-                                                        >
-                                                            Guardar
-                                                        </button>
-                                                    </div>
-                                                )}
-                                            </>
-                                        )}
                                         
                                         {/* Opciones del elemento (si existen) */}
                                         {element.opciones && Object.values(element.opciones).map((option, optionIndex) => (
-                                            <div key={option.id} className="option-card">
+                                            <div key={option.id} className="card">
                                                 <h4 className="subtitle-text-2">Opción {optionIndex +1}</h4>
                                                 <label>
+                                                <div className="form-group">
+                                                <div className="form-row">
+                                                
                                                     <input
                                                         type="text"
                                                         value={option.nombre}
@@ -738,8 +783,10 @@ const EditModalidad = () => {
                                                         className="delete-button"
                                                         onClick={() => removeOptionFromElementAPI(section.id, element.id, option.id)}
                                                     >
-                                                    Eliminar Opción
+                                                    (-) Opción
                                                     </button>
+                                                </div>
+                                                </div>
                                                 </label>
                                             </div>
                                         ))}
@@ -750,38 +797,13 @@ const EditModalidad = () => {
                     ))}
                 </div>
                 <div className="button-container">
-                    <button
-                        type="button"
-                        className="add-button"
-                        onClick={() => setIsAddingSection(true)}
-                    >
-                     + Agregar Sección
+                    <button  onClick={(e) => navigate('/modalidades')} className="add-button">
+                        Cancelar
                     </button>
                     <button type="submit" className="submit-button">
                         Actualizar Modalidad
                     </button>
                 </div>
-                <div className="card">
-                {/* Input para agregar nueva sección */}
-                    {isAddingSection && (
-                        <div className="form-group">
-                            <input 
-                                type="text"
-                                value={newSectionName}
-                                onChange={(e) => setNewSectionName(e.target.value)}
-                                placeholder="Nombre de la nueva sección"
-                            />
-                            <div className="button-container">
-                            <button className="submit-button"
-                                type="button"
-                                onClick={handleAddSection}
-                            >
-                                Guardar
-                            </button>
-                            </div>
-                        </div>
-                    )}
-                </div>
             </form>
         </MainContainer>
     );    
-- 
GitLab