From ca4a939fd8aadf3ac08b56d60626f3c8dd96f2e9 Mon Sep 17 00:00:00 2001
From: AdalbertoCV <34152734@uaz.edu.mx>
Date: Wed, 16 Oct 2024 13:06:00 -0600
Subject: [PATCH] =?UTF-8?q?Actualizaci=C3=B3n=20de=20estilos=20+=20formato?=
 =?UTF-8?q?=20de=20diccionario=20en=20lookups?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cosiap_api/dynamic_tables/DynamicTable.py     | 18 +++--
 cosiap_frontend/src/App.css                   | 56 ++++++++++++--
 .../src/components/admin/HistorialAdmin.jsx   |  2 +-
 .../components/modalidades/CrearModalidad.jsx | 77 ++++++++++++++++---
 .../modalidades/EditarModalidad.jsx           | 55 ++++++++++---
 .../solicitudes/HistorialSolicitudes.jsx      |  4 +-
 6 files changed, 173 insertions(+), 39 deletions(-)

diff --git a/cosiap_api/dynamic_tables/DynamicTable.py b/cosiap_api/dynamic_tables/DynamicTable.py
index a8f7cbb..ca33432 100644
--- a/cosiap_api/dynamic_tables/DynamicTable.py
+++ b/cosiap_api/dynamic_tables/DynamicTable.py
@@ -198,6 +198,7 @@ class DynamicTable(serializers.ModelSerializer):
             field_path = column.split('__')
             field = model
             label = ""
+            
             for part in field_path:
                 if field._meta.get_field(part).is_relation:
                     field = field._meta.get_field(part).related_model
@@ -208,30 +209,34 @@ class DynamicTable(serializers.ModelSerializer):
                     else:
                         label = part.capitalize() 
     
+            # Inicializar lookups como un diccionario con valores nulos
+            lookups_dict = {lookup: None for lookup in []}
+            
             filter_info = {
                 'campo': column,
                 'label': label,
                 'html_type': '',
-                'lookups': [],
+                'lookups': lookups_dict,
             }
+    
             # Verificamos el tipo de campo actual para poder enviar los filtros disponibles
             # correctos según el tipo de campo, y el html_value correspondiente
             if isinstance(field, models.CharField) or isinstance(field, models.TextField):
                 filter_info['html_type'] = 'textInput'
-                filter_info['lookups'] = ['icontains']
+                filter_info['lookups'] = {'icontains': None}
                 # verificamos si existen choices para crear un nuevo diccionario "exact" con las keys y values
                 if field.choices:
-                    filter_info['lookups'] = ['iexact']
+                    filter_info['lookups'] = {'iexact': None}
                     filter_info['choices'] = [{'label': choice[1], 'value': choice[0]} for choice in field.choices]
             elif isinstance(field, models.IntegerField) or isinstance(field, models.FloatField) or isinstance(field, models.DecimalField):
                 filter_info['html_type'] = 'numberInput'
-                filter_info['lookups'] = ['gt', 'lt']
+                filter_info['lookups'] = {'gt': None, 'lt': None}
             elif isinstance(field, models.DateField) or isinstance(field, models.DateTimeField):
                 filter_info['html_type'] = 'dateInput'
-                filter_info['lookups'] = ['gt', 'lt', 'gte', 'lte']
+                filter_info['lookups'] = {'gt': None, 'lt': None, 'gte': None, 'lte': None}
             elif isinstance(field, models.BooleanField):
                 filter_info['html_type'] = 'checkbox'
-                filter_info['lookups'] = ['iexact']
+                filter_info['lookups'] = {'iexact': None}
                 filter_info['choices'] = ['True', 'False']
     
             available_filters.append(filter_info)
@@ -239,6 +244,7 @@ class DynamicTable(serializers.ModelSerializer):
         return available_filters
 
 
+
     @staticmethod
     def validate_and_clean_filters(request_data, available_filters):
         '''
diff --git a/cosiap_frontend/src/App.css b/cosiap_frontend/src/App.css
index 61cc03b..c6e36f4 100644
--- a/cosiap_frontend/src/App.css
+++ b/cosiap_frontend/src/App.css
@@ -126,12 +126,18 @@ textarea {
   background-color: #696d69;
   color: white;
   border: none;
-  padding: 8px 12px;
+  padding: 12px 18px;  /* Más espacio para alargar el botón */
   font-size: 14px;
   border-radius: 16px;
   cursor: pointer;
   margin-top: 10px;
   margin-right: 10px;
+
+  display: flex;  /* Alinear el contenido del botón */
+  align-items: center;
+  justify-content: center;
+  gap: 8px;  /* Espacio entre el ícono y el texto */
+  transition: background-color 0.3s ease;
 }
 
 .add-button:hover {
@@ -225,13 +231,50 @@ input[type="checkbox"] {
 }
 
 .card {
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  margin: 15px 0;
-  padding: 10px;
-  background-color: #f5f5f5;
+  border: 2px solid #b4756e; 
+  border-radius: 12px; 
+  margin: 20px 0; 
+  padding: 15px; 
+  background-color: #f1f1f1; 
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
+  transition: transform 0.3s ease, box-shadow 0.3s ease; 
+}
+
+
+.card-header-section {
+  font-weight: bold;
+  font-size: 18px;
+  color: brown; /* Color verde oscuro para el título */
+  margin-bottom: 10px;
+  border-bottom: 1px solid #6b1a08; /* Línea inferior */
+  padding-bottom: 5px;
+}
+
+.card-header-element {
+  font-weight: bold;
+  font-size: 16px;
+  color: brown; /* Color verde oscuro para el título */
+  margin-bottom: 10px;
+  border-bottom: 1px solid #6b1a08; /* Línea inferior */
+  padding-bottom: 5px;
 }
 
+.card-header-option {
+  font-weight: bold;
+  font-size: 14px;
+  color: brown; /* Color verde oscuro para el título */
+  margin-bottom: 10px;
+  border-bottom: 1px solid #6b1a08; /* Línea inferior */
+  padding-bottom: 5px;
+}
+
+.card-body {
+  padding: 10px 0;
+  font-size: 16px;
+  line-height: 1.6; /* Mejor legibilidad */
+}
+
+
 .element-card {
   border: 1px solid #ddd;
   border-radius: 5px;
@@ -893,3 +936,4 @@ th, td {
 .confirm-delete-menu button:hover {
   opacity: 0.9; /* Efecto hover */
 }
+
diff --git a/cosiap_frontend/src/components/admin/HistorialAdmin.jsx b/cosiap_frontend/src/components/admin/HistorialAdmin.jsx
index 7f0b110..aa9232c 100644
--- a/cosiap_frontend/src/components/admin/HistorialAdmin.jsx
+++ b/cosiap_frontend/src/components/admin/HistorialAdmin.jsx
@@ -101,7 +101,7 @@ const ListaSolicitudesSolicitante = () => {
                 <div>
                     <button className="button-ver" onClick={() => navigate(`/visualizar-solicitud/${fila.solicitud_n}`)}
                     >
-                        Ver
+                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 6.5c3.79 0 7.17 2.13 8.82 5.5-1.65 3.37-5.02 5.5-8.82 5.5S4.83 15.37 3.18 12C4.83 8.63 8.21 6.5 12 6.5m0-2C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zm0 5c1.38 0 2.5 1.12 2.5 2.5s-1.12 2.5-2.5 2.5-2.5-1.12-2.5-2.5 1.12-2.5 2.5-2.5m0-2c-2.48 0-4.5 2.02-4.5 4.5s2.02 4.5 4.5 4.5 4.5-2.02 4.5-4.5-2.02-4.5-4.5-4.5z"/></svg>
                     </button>
                 </div>
             )
diff --git a/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx b/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx
index b2b18e1..bbe75e5 100644
--- a/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-key */
 import { useState, useEffect } from "react";
 import api from '../../api';
 import '@/App.css';
@@ -191,7 +192,12 @@ const CreateModalidad = () => {
                     'Content-Type': 'multipart/form-data',
                 },
             });
-            navigate('/modalidades')
+            if (e) {
+                showAlert('Modalidad creada correctamente.', true)
+                setTimeout(() => {
+                    navigate('/modalidades'); 
+                }, 1000);
+            }
         } catch (error){
             const errorMessage = 'Error al crear la modalidad, por favor complete o revise los datos.'
             showAlert(`Error: ${errorMessage}`, false);
@@ -281,16 +287,28 @@ const CreateModalidad = () => {
                     onClick={addSection}
                     className="add-button"
                 >
-                    (+) Sección
+                <svg 
+                    xmlns="http://www.w3.org/2000/svg" 
+                    height="24px" 
+                    viewBox="0 0 24 24" 
+                    width="24px" 
+                    fill="#e8eaed"
+                >
+                    <path d="M0 0h24v24H0V0z" fill="none"/>
+                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
+                </svg>
+                    Sección
                 </button>
                 </div>
             </div>
         </div>
     
         {/* Creación de secciones */}
+        
         {sections.map((section, sectionIndex) => (
+        <div className="card">
             <div className="section" key={sectionIndex}>
-            <h3 className="subtitle-text">Sección {sectionIndex + 1}</h3>
+            <h3 className="card-header-section">Sección {sectionIndex + 1}</h3>
                 <div className="form-group">
                     <label>Nombre:</label>
                     <div className="form-row">
@@ -306,23 +324,35 @@ const CreateModalidad = () => {
                         type="button"
                         onClick={() => addElementToSection(sectionIndex)}
                         className="add-button"
+                        style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
                     >
-                        (+) Elemento
+                        <svg 
+                            xmlns="http://www.w3.org/2000/svg" 
+                            height="24px" 
+                            viewBox="0 0 24 24" 
+                            width="24px" 
+                            fill="#e8eaed"
+                        >
+                            <path d="M0 0h24v24H0V0z" fill="none"/>
+                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
+                        </svg>
+                        Elemento
                     </button>
                     <button
                         type="button"
                         onClick={() => removeSection(sectionIndex)}
                         className="delete-button"
                     >
-                        (-) Sección
+                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>
+                        Sección
                     </button>
                     </div>
                 </div>
     
-    
                 {section.elements.map((element, elementIndex) => (
+                <div className="card">
                     <div className="element" key={elementIndex}>
-                    <h4 className="subtitle-text-1">Elemento {elementIndex + 1}</h4>
+                    <h4 className="card-header-element">Elemento {elementIndex + 1}</h4>
                         <div className="form-group">
                             <label>Nombre del Elemento:</label>
                             <div className="form-row">
@@ -343,7 +373,17 @@ const CreateModalidad = () => {
                                         onClick={() => addOptionToElement(sectionIndex, elementIndex)}
                                         className="add-button"
                                     >
-                                        (+) Opción
+                                    <svg 
+                                        xmlns="http://www.w3.org/2000/svg" 
+                                        height="24px" 
+                                        viewBox="0 0 24 24" 
+                                        width="24px" 
+                                        fill="#e8eaed"
+                                    >
+                                        <path d="M0 0h24v24H0V0z" fill="none"/>
+                                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
+                                    </svg>
+                                        Opción
                                     </button>
                                 </>
                             )}
@@ -353,7 +393,8 @@ const CreateModalidad = () => {
                                 onClick={() => removeElementFromSection(sectionIndex, elementIndex)}
                                 className="delete-button"
                             >
-                                (-) Elemento
+                            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>
+                                Elemento
                             </button>
 
                             </div>
@@ -404,9 +445,10 @@ const CreateModalidad = () => {
                             />
                         </div>
                         {['opcion_multiple', 'desplegable', 'casillas'].includes(element.type) && (
-                        <>
-                            <h5 className="subtitle-text-2">Opciones:</h5>
+                        <>  
                             {element.options.map((option, optionIndex) => (
+                            <div className="card">
+                                <h5 className="card-header-option">Nueva opción:</h5>
                                 <div className="option" key={optionIndex}>
                                     <div className="form-group">
                                         <label>Nombre de la Opción:</label>
@@ -425,18 +467,29 @@ const CreateModalidad = () => {
                                             onClick={() => removeOptionFromElement(sectionIndex, elementIndex, optionIndex)}
                                             className="delete-button"
                                         >
-                                            (-) Opción
+                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>
+                                            Opción
                                         </button>
                                         </div>
                                     </div>
                                 </div>
+                            </div>
                             ))}
+                            
                         </>
                     )}
                     </div>
+                    
+                </div>
+                
                 ))}
             </div>
+            
+        </div>
+        
         ))}
+        
+        
     
         <div className="button-container">
 
diff --git a/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
index f63a223..b67cec5 100644
--- a/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
@@ -561,7 +561,17 @@ const EditModalidad = () => {
                                 className="add-button"
                                 onClick={() => setIsAddingSection(true)}
                             >
-                            (+) Sección
+                            <svg 
+                                xmlns="http://www.w3.org/2000/svg" 
+                                height="24px" 
+                                viewBox="0 0 24 24" 
+                                width="24px" 
+                                fill="#e8eaed"
+                            >
+                                <path d="M0 0h24v24H0V0z" fill="none"/>
+                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
+                            </svg>
+                             Sección
                             </button>
                         </div>
                         
@@ -593,7 +603,7 @@ const EditModalidad = () => {
                     {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="card-header-section">Sección {sectionIndex + 1}</h4>
                             <label>Nombre de la sección:</label>
                             <div className="form-row">
                                 <input
@@ -611,7 +621,17 @@ const EditModalidad = () => {
                                         setIsAddingElement(true);
                                     }}
                                 >
-                                    (+) Elemento
+                                <svg 
+                                    xmlns="http://www.w3.org/2000/svg" 
+                                    height="24px" 
+                                    viewBox="0 0 24 24" 
+                                    width="24px" 
+                                    fill="#e8eaed"
+                                >
+                                    <path d="M0 0h24v24H0V0z" fill="none"/>
+                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
+                                </svg>
+                                    Elemento
                                 </button>
 
                                 <button
@@ -619,7 +639,8 @@ const EditModalidad = () => {
                                     className="delete-button"
                                     onClick={() => removeSectionFromAPI(section.id)}
                                 >
-                                (-) Sección
+                                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>
+                                Sección
                                 </button>
                             </div>
                             {isAddingElement && selectedSectionId === section.id && (
@@ -682,10 +703,9 @@ const EditModalidad = () => {
                                     </div>
                                 )}
                             </div>
-                            <div className="card">
-                                {Object.values(section.elementos).map((element, elementIndex) => (
+                            {Object.values(section.elementos).map((element, elementIndex) => (
                                     <div key={element.id} className="card">
-                                        <h4 className="subtitle-text-1">Elemento {elementIndex + 1}</h4>
+                                        <h4 className="card-header-element">Elemento {elementIndex + 1}</h4>
                                         <div className="form-row">
                                         <div className="form-group">
                                         <label>Nombre del elemento:</label>
@@ -710,7 +730,17 @@ const EditModalidad = () => {
                                                         setIsAddingOption(true);
                                                     }}
                                                 >
-                                                    (+) Opción
+                                                <svg 
+                                                    xmlns="http://www.w3.org/2000/svg" 
+                                                    height="24px" 
+                                                    viewBox="0 0 24 24" 
+                                                    width="24px" 
+                                                    fill="#e8eaed"
+                                                >
+                                                    <path d="M0 0h24v24H0V0z" fill="none"/>
+                                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
+                                                </svg>
+                                                    Opción
                                                 </button>
                                                 
                                             </>
@@ -720,7 +750,8 @@ const EditModalidad = () => {
                                                 className="delete-button"
                                                 onClick={() => removeElementFromSectionAPI(section.id, element.id)}
                                             >
-                                            (-) Elemento
+                                            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>
+                                            Elemento
                                         </button>
                                         </div>
                                 
@@ -793,7 +824,7 @@ const EditModalidad = () => {
                                         {/* Opciones del elemento (si existen) */}
                                         {element.opciones && Object.values(element.opciones).map((option, optionIndex) => (
                                             <div key={option.id} className="card">
-                                                <h4 className="subtitle-text-2">Opción {optionIndex +1}</h4>
+                                                <h4 className="card-header-option">Opción {optionIndex +1}</h4>
                                                 <label>
                                                 <div className="form-group">
                                                 <label>Nombre de la opción:</label>
@@ -810,7 +841,8 @@ const EditModalidad = () => {
                                                         className="delete-button"
                                                         onClick={() => removeOptionFromElementAPI(section.id, element.id, option.id)}
                                                     >
-                                                    (-) Opción
+                                                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>
+                                                    Opción
                                                     </button>
                                                 </div>
                                                 </div>
@@ -820,7 +852,6 @@ const EditModalidad = () => {
                                     </div>
                                 ))}
                             </div>
-                        </div>
                     ))}
                 </div>
                 <div className="button-container">
diff --git a/cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.jsx b/cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.jsx
index c44f2af..5c96281 100644
--- a/cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.jsx
+++ b/cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.jsx
@@ -100,12 +100,12 @@ const ListaSolicitudes = () => {
                 <div>
                     <button className="button-ver" onClick={() => navigate(`/ver-solicitud/${fila.solicitud_n}`)}
                     >
-                        Ver
+                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 6.5c3.79 0 7.17 2.13 8.82 5.5-1.65 3.37-5.02 5.5-8.82 5.5S4.83 15.37 3.18 12C4.83 8.63 8.21 6.5 12 6.5m0-2C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zm0 5c1.38 0 2.5 1.12 2.5 2.5s-1.12 2.5-2.5 2.5-2.5-1.12-2.5-2.5 1.12-2.5 2.5-2.5m0-2c-2.48 0-4.5 2.02-4.5 4.5s2.02 4.5 4.5 4.5 4.5-2.02 4.5-4.5-2.02-4.5-4.5-4.5z"/></svg>
                     </button>
                     {fila.status === 'Pendiente' && (
                         <button className="button-editar" onClick={() => navigate(`/editar-solicitud/${fila.solicitud_n}`)}
                         >
-                            Editar
+                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>
                         </button>
                     )}
                 </div>
-- 
GitLab