diff --git a/GomezMorinFrontEnd/src/components/DataGridComponent.jsx b/GomezMorinFrontEnd/src/components/DataGridComponent.jsx index 5f51e17..45b3598 100644 --- a/GomezMorinFrontEnd/src/components/DataGridComponent.jsx +++ b/GomezMorinFrontEnd/src/components/DataGridComponent.jsx @@ -25,7 +25,7 @@ import { DataGrid } from "@mui/x-data-grid"; */ const DataGridComponent = ({ rows, columns }) => { return ( -
+
); diff --git a/GomezMorinFrontEnd/src/pages/RequestAll/index.jsx b/GomezMorinFrontEnd/src/pages/RequestAll/index.jsx index 50c56d0..37ba148 100644 --- a/GomezMorinFrontEnd/src/pages/RequestAll/index.jsx +++ b/GomezMorinFrontEnd/src/pages/RequestAll/index.jsx @@ -2,14 +2,17 @@ * The RequestAll component displays a table with data that represents incoming requests. * It includes an image title, a search bar, and a data grid component. */ -import React from "react"; +import React, { useEffect, useState } from "react"; import ImageTitle from "../../components/ImageTiTle"; import SearchBar from "../../components/SearchBar"; import DataGridComponent from "../../components/DataGridComponent"; import ImageTitleImage from "../../../public/images/ImageTitleImage.png"; import EditModal from "../../components/EditModal"; +import { getAllForms } from "../../queries/queryRequestForm"; +const userId = localStorage.getItem("id"); const RequestAll = () => { + const [rows, setRows] = useState([]); // Define columns to be displayed in the data grid component const columns = [ { field: "fecha", headerName: "Fecha", width: 200 }, @@ -27,28 +30,31 @@ const RequestAll = () => { ]; // Define rows to be displayed in the data grid component - const rows = [ - { - id: 1, - fecha: "01/01/2021", - folio: "1", - tipo: "Persona física", - evento: "Evento 1", - nombre: "Nombre 1", - estatus: "Estatus 1", - renderCell: () => , - }, - { - id: 2, - fecha: "01/01/2021", - folio: "1", - tipo: "Persona moral", - evento: "-", - nombre: "Nombre 1", - estatus: "Estatus 1", + + const transformData = (data) => { + return data.map((item) => ({ + id: item._id, + fecha: item.requestDate, + folio: item.folio, + tipo: item.membretatedLetterDoc ? "Persona moral" : "Persona física", + evento: item.membretatedLetterDoc ? "-" : item.typeEvent, + nombre: item.membretatedLetterDoc + ? item.membretatedLetterDoc + : item.nameEvent, + estatus: item.status, renderCell: () => , - }, - ]; + })); + }; + + useEffect(() => { + /** + * Calls the getAllForms function to fetch data from the server and updates the component's state with the transformed data. + */ + getAllForms(userId).then((res) => { + const data = transformData(res); + setRows(data); + }); + }, []); // Render the RequestAll component return ( @@ -57,10 +63,6 @@ const RequestAll = () => { {/* Display an image title with the "Bandeja de Entrada" title and an image */}
-
- {/* Display a search bar */} - -
{/* Display the data grid component with the columns and rows */} diff --git a/GomezMorinFrontEnd/src/queries/queryRequestForm.js b/GomezMorinFrontEnd/src/queries/queryRequestForm.js index df2aea4..e0dbd1a 100644 --- a/GomezMorinFrontEnd/src/queries/queryRequestForm.js +++ b/GomezMorinFrontEnd/src/queries/queryRequestForm.js @@ -201,3 +201,24 @@ export const getForm = async (userPtr, queryParams = {}) => { return Promise.reject(err); } }; + +/** + * Function to retrieve all forms of a given user from the server + * + * @param {string} userId - The ID of the user + * @returns {Promise} A Promise that resolves to an array of forms or rejects with an error + */ +export const getAllForms = async (userId) => { + try { + const body = { + id: userId, + }; + const response = await axios.post( + `${baseURL}/solicitudes/request-all`, + body + ); + return response.data; + } catch (err) { + return Promise.reject(err); + } +};