From d535cf32e58e2b0ef6a284c559fbef6bb61dbd90 Mon Sep 17 00:00:00 2001
From: AdalbertoCV <34152734@uaz.edu.mx>
Date: Fri, 27 Sep 2024 12:33:26 -0600
Subject: [PATCH] =?UTF-8?q?Modificaci=C3=B3n=20de=20modalidad=20completada?=
=?UTF-8?q?.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../modalidades/EditarModalidad.jsx | 325 +++++++++++++++++-
1 file changed, 322 insertions(+), 3 deletions(-)
diff --git a/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
index 016dc67..66e125c 100644
--- a/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
@@ -18,6 +18,17 @@ const EditModalidad = () => {
const [formId, setFormId] = useState(null)
const [formName, setFormName] = useState('');
const [formatos, setFormatos] = useState([]);
+ // creamos hooks para manejar las nuevas agregaciones de secciones, elementos y opciones.
+ const [newSectionName, setNewSectionName] = useState('');
+ const [isAddingSection, setIsAddingSection] = useState(false);
+ const [newElementName, setNewElementName] = useState('');
+ const [newElementType, setNewElementType] = useState('');
+ const [newElementFormat, setNewElementFormat] = useState(null);
+ const [selectedSectionId, setSelectedSectionId] = useState(null);
+ const [isAddingElement, setIsAddingElement] = useState(false);
+ const [newOptionName, setNewOptionName] = useState('');
+ const [selectedElementId, setSelectedElementId] = useState(null);
+ const [isAddingOption, setIsAddingOption] = useState(false);
@@ -100,6 +111,171 @@ const EditModalidad = () => {
setImagen(e.target.files[0]);
};
+ // agregamos una nueva seccion
+ const handleAddSection = async () => {
+ try {
+ // 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)
+
+ // 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
+ }));
+
+ // 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.');
+ }
+ };
+
+ // agregamos un nuevo elemento a la seccion
+ const handleAddElement = async (sectionId) => {
+ try {
+ 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
+ });
+
+ await api.dynamicForms.secciones.postSectionElement(sectionId, response.data.data.id)
+
+ // Actualizar el estado para agregar el nuevo elemento a la sección
+ setSections(prevSections => {
+ const updatedSections = { ...prevSections };
+ Object.values(updatedSections[sectionId].elementos).push(response.data);
+ 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 {
+ // Hacer una solicitud POST para agregar la nueva opción
+ const response = await api.dynamicForms.opciones.post({
+ nombre: newOptionName,
+ });
+
+ await api.dynamicForms.elementos.postElementOption(elementId, response.data.data.id)
+
+ // Actualizar el estado para agregar la nueva opción al elemento
+ setSections(prevSections => {
+ const updatedSections = { ...prevSections };
+ const updatedElements = Object.values(updatedSections[sectionId].elementos).map(element => {
+ if (element.id === elementId) {
+ return { ...element, opciones: [...(element.opciones || []), response.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);
+ alert('Ocurrió un error al agregar la opción.');
+ }
+ };
+
+ // manejamos la eliminacion de una seccion existente en el formulario
+ const removeSectionFromAPI = async (sectionId) => {
+ try{
+ await api.dynamicForms.secciones.delete(sectionId);
+ setSections(prevSections => {
+ const updatedSections = { ...prevSections };
+ delete updatedSections[sectionId]; // Eliminar la sección del objeto
+
+ return updatedSections;
+ });
+ } catch (error){
+ alert('Ocurrió un error al eliminar la sección.');
+ }
+ }
+
+ // manejamos el caso de la eliminacion de un elemento de una sección
+ const removeElementFromSectionAPI = async (sectionId, elementId) => {
+ try{
+ await api.dynamicForms.elementos.delete(elementId);
+
+ // Actualizar el estado de las secciones para eliminar el elemento del front
+ setSections(prevSections => {
+ const updatedSections = { ...prevSections };
+ const updatedElements = Object.values(updatedSections[sectionId]?.elementos).filter(
+ element => element.id !== elementId
+ );
+
+ // Si existen elementos, actualizamos la sección
+ if (updatedElements) {
+ updatedSections[sectionId].elementos = updatedElements;
+ }
+
+ return updatedSections;
+ });
+ }catch(error){
+ alert('Ocurrió un error al eliminar el elemento.');
+ }
+ }
+
+ // manejamos la eliminacion de una opcion de un elemento
+ const removeOptionFromElementAPI = async (sectionId, elementId, optionId) => {
+ try{
+ // Llamar al método delete de la API para eliminar la opción del elemento
+ await api.dynamicForms.opciones.delete(optionId);
+
+ // Actualizar el estado de las secciones para eliminar la opción del front
+ setSections(prevSections => {
+ const updatedSections = { ...prevSections };
+
+ const updatedElements = Object.values(updatedSections[sectionId]?.elementos).map(element => {
+ if (element.id === elementId) {
+ // Filtrar las opciones para eliminar la que corresponde
+ const updatedOptions = Object.values(element.opciones).filter(
+ option => option.id !== optionId
+ );
+ return { ...element, opciones: updatedOptions };
+ }
+ return element;
+ });
+
+ // Si los elementos fueron actualizados, los asignamos nuevamente a la sección
+ if (updatedElements) {
+ updatedSections[sectionId].elementos = updatedElements;
+ }
+
+ return updatedSections;
+ });
+ }catch (error){
+ alert('Ocurrió un error al eliminar la opción.');
+ }
+ }
+
// actualizar un elemento
const updateElement = (sectionId, elementId, field, value) => {
setSections(prevSections => {
@@ -169,7 +345,9 @@ const EditModalidad = () => {
const handleSubmit = async (e) => {
- e.preventDefault();
+ if (e) {
+ e.preventDefault();
+ }
try {
console.log('Nombre del formulario:', formName);
@@ -274,7 +452,9 @@ const EditModalidad = () => {
formData.append('imagen', imagen);
}
await api.modalidades.update(id, formData);
- navigate('/modalidades');
+ if (e) {
+ navigate('/modalidades');
+ }
} catch (error) {
console.error('Error al actualizar la modalidad.', error);
alert('Ocurrió un error al actualizar la modalidad.');
@@ -368,6 +548,75 @@ const EditModalidad = () => {
onChange={(e) => handleUpdateSectionName(section.id, e.target.value)}
placeholder="Nombre de la sección"
/>
+
+
+
+
+
+ {isAddingElement && selectedSectionId === section.id && (
+
+
setNewElementName(e.target.value)}
+ placeholder="Nombre del nuevo elemento"
+ />
+ Tipo:
+
+ {newElementType === 'documento' && (
+
+
+
+
+ )}
+
+
{Object.values(section.elementos).map((element, elementIndex) => (
@@ -386,7 +635,7 @@ const EditModalidad = () => {
onChange={(e) => updateElement(section.id, element.id, 'tipo', e.target.value)}
required={element.obligatorio}
>
-
+
@@ -415,6 +664,14 @@ const EditModalidad = () => {
)}
+
+
{/* Opciones del elemento (si existen) */}
{element.opciones && Object.values(element.opciones).map((option, optionIndex) => (
@@ -427,9 +684,43 @@ const EditModalidad = () => {
onChange={(e) => handleUpdateOptionName(section.id, element.id, option.id, e.target.value)}
placeholder="Nombre de la opción"
/>
+
))}
+
+
+ {isAddingOption && selectedElementId === element.id && (
+
+ setNewOptionName(e.target.value)}
+ placeholder="Nombre de la nueva opción"
+ />
+
+
+ )}
))}
@@ -437,10 +728,38 @@ const EditModalidad = () => {
))}
+
+
+ {/* Input para agregar nueva sección */}
+ {isAddingSection && (
+
+
setNewSectionName(e.target.value)}
+ placeholder="Nombre de la nueva sección"
+ />
+
+
+
+
+ )}
+