From 1e2016bf11c4326cf2a2c5130cc9c32afdad1b3e Mon Sep 17 00:00:00 2001 From: AdalbertoCV <34152734@uaz.edu.mx> Date: Mon, 23 Sep 2024 13:43:53 -0600 Subject: [PATCH] =?UTF-8?q?Primera=20parte=20de=20edici=C3=B3n=20de=20moda?= =?UTF-8?q?lidades?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cosiap_frontend/src/App.jsx | 4 +- cosiap_frontend/src/api.js | 7 +- .../components/modalidades/CrearModalidad.css | 8 + .../components/modalidades/CrearModalidad.jsx | 4 +- .../modalidades/EditarModalidad.jsx | 142 ++++++++++++++++++ .../modalidades/ListaModalidades.jsx | 20 ++- .../components/modalidades/Modalidades.jsx | 12 ++ 7 files changed, 187 insertions(+), 10 deletions(-) create mode 100644 cosiap_frontend/src/components/modalidades/EditarModalidad.jsx diff --git a/cosiap_frontend/src/App.jsx b/cosiap_frontend/src/App.jsx index e20c2f0..36598c7 100644 --- a/cosiap_frontend/src/App.jsx +++ b/cosiap_frontend/src/App.jsx @@ -25,6 +25,7 @@ import LayoutBaseAuthenticator from "@/components/common/layouts/LayoutBaseAuthe import LayoutBaseNavigation from "@/components/common/layouts/LayoutBaseNavigation"; import Modalidades from "@/components/modalidades/Modalidades"; import CreateModalidad from "./components/modalidades/CrearModalidad"; +import EditModalidad from "./components/modalidades/EditarModalidad"; function App() { const [viewPageLoader, setViewPageLoader] = useState(false); @@ -106,7 +107,8 @@ function RoutesApp({ setViewPageLoader }) { > } /> } /> - } /> + } /> + } /> diff --git a/cosiap_frontend/src/api.js b/cosiap_frontend/src/api.js index 839e8af..aa272b7 100644 --- a/cosiap_frontend/src/api.js +++ b/cosiap_frontend/src/api.js @@ -90,7 +90,7 @@ const api = { get: () => ax.get('api/modalidades'), post: (data) => ax.post('api/modalidades/', data), getById: (id) => ax.get(`api/modalidades/${id}`), - update: (id, data) => ax.put(`api/modalidades/${id}`, data), + update: (id, data) => ax.put(`api/modalidades/${id}/`, data), delete: (id) => ax.delete(`api/modalidades/${id}`), monto: { post: (data) => ax.post('api/modalidades', data), @@ -111,6 +111,11 @@ const api = { reportes: { get: () => ax.get('api/solicitudes/reportes'), getById: (id) => ax.get(`api/solicitudes/reportes/${id}`), + }, + solicitar:{ + get: () => ax.get('api/solicitudes/solicitar'), + post: (data) => ax.post('api/solicitudes/solicitar', data), + update: (id,data) => ax.put(`api/solicitudes/solicitar/${id}`, data) } }, dynamicTables: { diff --git a/cosiap_frontend/src/components/modalidades/CrearModalidad.css b/cosiap_frontend/src/components/modalidades/CrearModalidad.css index 4a0598f..35cec7d 100644 --- a/cosiap_frontend/src/components/modalidades/CrearModalidad.css +++ b/cosiap_frontend/src/components/modalidades/CrearModalidad.css @@ -158,3 +158,11 @@ input[type="checkbox"] { margin-top: 20px; padding: 0 20px; } + +.preview-image { + width: 100px; + height: 100px; + object-fit: cover; + border: 1px solid #ccc; + margin-top: 10px; +} \ 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 fb4ea6c..ecdb4a7 100644 --- a/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx +++ b/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx @@ -2,6 +2,7 @@ import { useState, useEffect } from "react"; import api from '../../api'; import './CrearModalidad.css' import MainContainer from "../common/utility/MainContainer"; +import { useNavigate } from 'react-router-dom'; // componente para la creación de una modalidad // incluyendo la estructura de su formulario dinámico @@ -15,6 +16,7 @@ const CreateModalidad = () => { const [formName, setFormName] = useState(''); const [sections, setSections] = useState([]); const [formatos, setFormatos] = useState([]); + const navigate = useNavigate(); // Obtener los formatos disponibles al cargar el componente useEffect(() => { @@ -183,7 +185,7 @@ const CreateModalidad = () => { 'Content-Type': 'multipart/form-data', }, }); - alert('Modalidad creada con éxito'); + navigate('/modalidades') } catch (error){ console.error('Error al crear la modalidad.', error); alert('Ocurrió un error al crear la modalidad.') diff --git a/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx new file mode 100644 index 0000000..8428744 --- /dev/null +++ b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx @@ -0,0 +1,142 @@ +import { useState, useEffect } from "react"; +import api from '../../api'; +import './CrearModalidad.css'; +import MainContainer from "../common/utility/MainContainer"; +import { useNavigate, useParams } from 'react-router-dom'; + +const EditModalidad = () => { + const { id } = useParams(); + const [nombre, setNombre] = useState(''); + const [descripcion, setDescripcion] = useState(''); + const [montoMaximo, setMontoMaximo] = useState(0); + const [mostrar, setMostrar] = useState(true); + const [archivado, setArchivado] = useState(false); + const [imagen_anterior, setImagenAnterior] = useState(null) + const [imagen, setImagen] = useState(null); + const navigate = useNavigate(); + // const [formID, setFormID] = useState(''); + + useEffect(() => { + const fetchModalidad = async () => { + try { + const response = await api.modalidades.getById(id); + const modalidadData = response.data; + setNombre(modalidadData.data.nombre); + setDescripcion(modalidadData.data.descripcion); + setMontoMaximo(modalidadData.data.monto_maximo); + setMostrar(modalidadData.data.mostrar); + setImagenAnterior(modalidadData.data.imagen); + setArchivado(modalidadData.data.archivado); + //setFormID(modalidadData.dynamic_form); + } catch (error) { + console.error("Error al obtener la modalidad", error); + } + }; + + fetchModalidad(); + }, [id]); + + const handleImageChange = (e) => { + setImagen(e.target.files[0]); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + + try { + const formData = new FormData(); + formData.append('nombre', nombre); + formData.append('descripcion', descripcion); + formData.append('monto_maximo', montoMaximo); + formData.append('mostrar', mostrar); + formData.append('archivado', archivado); + if (imagen) { + formData.append('imagen', imagen); + } + await api.modalidades.update(id, formData); + navigate('/modalidades') + } catch (error) { + console.error('Error al actualizar la modalidad.', error); + alert('Ocurrió un error al actualizar la modalidad.'); + } + }; + + return ( + +
+
+
+
+ + setNombre(e.target.value)} + placeholder="Ingrese el nombre" + required + /> +
+
+ +