From c6a1ba4b4527f06a67d1dcb38768cebfeb9498f0 Mon Sep 17 00:00:00 2001
From: AdalbertoCV <34152734@uaz.edu.mx>
Date: Tue, 1 Oct 2024 17:24:13 -0600
Subject: [PATCH] Correccion de agregacion de elementos y opciones
---
.../modalidades/EditarModalidad.jsx | 159 ++++++++++++------
1 file changed, 104 insertions(+), 55 deletions(-)
diff --git a/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
index 57a0cda..6960bfa 100644
--- a/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
@@ -111,19 +111,24 @@ const EditModalidad = () => {
setImagen(e.target.files[0]);
};
- // agregamos una nueva seccion
+ // Agregamos una nueva sección
const handleAddSection = async () => {
try {
+ if (!newSectionName) {
+ alert('Por favor, ingrese un nombre para la nueva sección.');
+ return;
+ }
+
// Hacer una solicitud POST para agregar la nueva sección
const response = await api.dynamicForms.secciones.post({ nombre: newSectionName });
- await api.dynamicForms.dynamicForms.postFormSection(formId, response.data.data.id)
-
+ await api.dynamicForms.dynamicForms.postFormSection(formId, response.data.data.id);
+
// Actualizar el estado con la nueva sección
setSections(prevSections => ({
...prevSections,
- [response.data.data.id]: { ...response.data.data, elementos: [] } // Aseguramos que la nueva sección tenga un array vacío para elementos
+ [response.data.data.id]: { ...response.data.data, elementos: [] } // Inicializar con un arreglo vacío de elementos
}));
-
+
// Limpiar el input y ocultar el campo
setNewSectionName('');
setIsAddingSection(false);
@@ -133,46 +138,74 @@ const EditModalidad = () => {
}
};
- // agregamos un nuevo elemento a la seccion
+
+ // Agregamos un nuevo elemento a la sección
const handleAddElement = async (sectionId) => {
try {
- if (newElementType === '') {
- setNewElementType('texto_corto');
+ if (!newElementName) {
+ alert('Por favor, ingrese un nombre para el nuevo elemento.');
+ return;
}
- // Hacer una solicitud POST para agregar el nuevo elemento
+
+ const elementType = newElementType || 'texto_corto';
const response = await api.dynamicForms.elementos.post({
nombre: newElementName,
- tipo: newElementType,
+ tipo: elementType,
formato: newElementFormat,
});
-
+
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 };
- // 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
- ];
+ const section = updatedSections[sectionId];
+
+ if (!section) {
+ console.error('Sección no encontrada');
+ return updatedSections; // No actualizamos si la sección no existe
+ }
+
+ // Verificar que elementos sea un arreglo, inicializándolo si no lo es
+ if (!Array.isArray(section.elementos)) {
+ console.error('Elementos no es un arreglo, inicializando como un arreglo vacío.');
+ section.elementos = []; // Asegurarse de que sea un arreglo
+ }
+
+ // Agregar el nuevo elemento
+ const newElement = {
+ ...response.data.data,
+ opciones: [] // Asegurarnos que el nuevo elemento tenga un array vacío para opciones
+ };
+
+ // Asegurarse de que el nuevo elemento se agregue sin perder los existentes
+ section.elementos = [...section.elementos, newElement];
+
return updatedSections;
});
-
+
// Limpiar el input y ocultar el campo
setNewElementName('');
setSelectedSectionId(null);
setIsAddingElement(false);
+ await handleSubmit();
+ sessionStorage.setItem('scrollPosition', window.scrollY);
+ 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
+
+ // Agregamos una nueva opción a un elemento
const handleAddOption = async (sectionId, elementId) => {
try {
+ if (!newOptionName) {
+ alert('Por favor, ingrese un nombre para la nueva opción.');
+ return;
+ }
+
// Hacer una solicitud POST para agregar la nueva opción
const response = await api.dynamicForms.opciones.post({
nombre: newOptionName,
@@ -181,25 +214,40 @@ const EditModalidad = () => {
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 = updatedSections[sectionId].elementos.map((element) => {
- if (element.id === elementId) {
- return {
- ...element,
- opciones: [...(element.opciones || []), response.data.data]
- };
- }
- return element;
- });
- updatedSections[sectionId].elementos = updatedElements;
- return updatedSections;
+ const section = updatedSections[sectionId];
+
+ if (!section) {
+ console.error('Sección no encontrada');
+ return updatedSections; // No actualizamos si la sección no existe
+ }
+
+ const element = section.elementos[elementId]
+ if (!element) {
+ console.error('Elemento no encontrado');
+ return updatedSections; // No actualizamos si el elemento no existe
+ }
+
+ // Asegurarse de que opciones sea un arreglo, inicializándolo si no lo es
+ if (!Array.isArray(element.opciones)) {
+ console.error('Opciones no es un arreglo, inicializando como un arreglo vacío.');
+ element.opciones = []; // Asegurarse de que sea un arreglo
+ }
+
+ // Agregar la nueva opción manteniendo las existentes
+ element.opciones = [...element.opciones, response.data.data];
+
+ return updatedSections; // Devolver las secciones actualizadas
});
// Limpiar el input y ocultar el campo
setNewOptionName('');
setSelectedElementId(null);
setIsAddingOption(false);
+ await handleSubmit();
+ sessionStorage.setItem('scrollPosition', window.scrollY);
+ window.location.reload();
console.log(`Opción "${newOptionName}" agregada correctamente al elemento ${elementId}.`);
} catch (error) {
console.error('Error al agregar la opción', error);
@@ -207,6 +255,7 @@ const EditModalidad = () => {
}
};
+
// manejamos la eliminacion de una seccion existente en el formulario
const removeSectionFromAPI = async (sectionId) => {
try{
@@ -675,28 +724,6 @@ const EditModalidad = () => {
>
Eliminar Elemento
-
- {/* Opciones del elemento (si existen) */}
- {element.opciones && Object.values(element.opciones).map((option, optionIndex) => (
-