Merge develop into testing

GomezMorinFrontEnd/src/pages/PageRequest/index.jsx

@@ -1,24 +1,92 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Header from "../../components/Header";
 import Button from "../../components/Button";
 import { useNavigate } from "react-router-dom";
-import { useSelector } from "react-redux";
+import DataGridComponent from "../../components/DataGridComponent";
+import { getForm } from "../../queries/queryRequestForm";
 
+/**
+ * The PageRequest component displays the request page, including a header, a button to create a new request,
+ * and a data grid component to display existing requests.
+ */
 const PageRequest = () => {
   const navigate = useNavigate();
   const rol = localStorage.getItem("nameRol");
+  const [rows, setRows] = useState([]);
+  const userPtr = localStorage.getItem("id");
+
+  /**
+   * Transforms the data received from the server into the appropriate format based on the user's role.
+   *
+   * @param {Array} datos - The data received from the server.
+   * @returns {Array} - The transformed data.
+   */
+  const transformarDatos = (datos) => {
+    if (rol === "Moral") {
+      return datos.map((dato, index) => ({
+        id: index,
+        col1: dato.folio,
+        col2: dato.membretatedLetterDoc.substring(
+          0,
+          dato.membretatedLetterDoc.lastIndexOf(".pdf")
+        ),
+        col3: dato.status,
+      }));
+    } else {
+      return datos.map((dato, index) => ({
+        id: index,
+        col1: dato.folio,
+        col2: dato.startDay,
+        col3: dato.typeEvent,
+        col4: dato.nameEvent,
+        col5: dato.status,
+      }));
+    }
+  };
+
+  useEffect(() => {
+    /**
+     * Calls the getForm function to fetch data from the server and updates the component's state with the transformed data.
+     */
+    getForm(userPtr).then((res) => {
+      const transformedData = transformarDatos(res);
+      setRows(transformedData);
+    });
+  }, []);
+
+  const columns = [
+    { field: "col1", headerName: "Folio", width: 100 },
+    { field: "col2", headerName: "Dia de Inicio", width: 140 },
+    { field: "col3", headerName: "Tipo", width: 140 },
+    { field: "col4", headerName: "Nombre", width: 180 },
+    { field: "col5", headerName: "Estatus", width: 140 },
+  ];
+  const columnsMoral = [
+    { field: "col1", headerName: "Folio", width: 100 },
+    { field: "col2", headerName: "Documento Enviado", width: 400 },
+    { field: "col3", headerName: "Estatus", width: 140 },
+  ];
+
+  /**
+   * Render the PageRequest component.
+   *
+   * @returns {JSX.Element} - The PageRequest component.
+   */
   return (
     <div className="grid grid-cols-6 w-screen h-screen">
       <div className="h-full col-span-1 bg-sideLeftBG bg-cover bg-center bg-no-repeat"></div>
-      <div className="col-span-4 h-full flex justify-between pt-16 ">
+      <div className="col-span-4 h-full flex justify-between">
         <div className="flex flex-col items-center py-10 w-full h-full p-12 ">
-          <Header tittle={"Mis solicitudes"} />
+          <Header tittle={"Solicitudes"} />
           <div className="sm:flex py-12 w-96 h-36 p-12 sm:px-6 ">
             <Button
               text={"Nueva Solicitud"}
               type={"button"}
               colorBg={"bg-light-blue-500"}
               colorHoverBg={"hover:bg-light-blue-700"}
+              /**
+               * Navigate to the appropriate form based on the user's role when the button is clicked.
+               */
               action={() => {
                 if (rol === "Moral") {
                   navigate("/request-formMoral");
@@ -28,6 +96,20 @@ const PageRequest = () => {
               }}
             ></Button>
           </div>
+          <div className="w-full">
+            {rows.length > 0 ? (
+              <DataGridComponent
+                rows={rows}
+                columns={rol === "Moral" ? columnsMoral : columns}
+              ></DataGridComponent>
+            ) : (
+              <div className="flex justify-center items-center w-full h-full">
+                <p className="text-2xl text-gray-400">
+                  No hay solicitudes registradas
+                </p>
+              </div>
+            )}
+          </div>
         </div>
       </div>
       <div className="h-full col-span-1 bg-sideRightBG bg-cover bg-center bg-no-repeat"></div>

GomezMorinFrontEnd/src/queries/queryRequestForm.js

@@ -181,3 +181,23 @@ export const createRequest = async (data) => {
     return Promise.reject(err);
   }
 };
+
+/**
+ * This function retrieves a form for a given user from a server using HTTP GET request.
+ *
+ * @param {string} userPtr - The user pointer of the user for which the form should be retrieved.
+ * @param {Object} [queryParams={}] - Optional object containing any additional query parameters for the HTTP GET request.
+ * @returns {Promise} - A Promise that either resolves with the response data or rejects with an error if the request fails.
+ */
+export const getForm = async (userPtr, queryParams = {}) => {
+  try {
+    const response = await axios({
+      url: `${baseURL}/solicitudes/${userPtr}`,
+      method: "GET",
+      params: queryParams,
+    });
+    return response.data;
+  } catch (err) {
+    return Promise.reject(err);
+  }
+};

GomezMorinFrontEnd/src/states/authSlice.js

@@ -62,6 +62,7 @@ export const authSlice = createSlice({
       state.nameRol = action.payload.nameRol;
       localStorage.setItem("nameRol", action.payload.nameRol);
       state.id = action.payload.id;
+      localStorage.setItem("id", action.payload.id);
       state.email = action.payload.email;
     },
 
@@ -79,6 +80,7 @@ export const authSlice = createSlice({
       localStorage.removeItem("accessToken");
       localStorage.removeItem("userName");
       localStorage.removeItem("nameRol");
+      localStorage.removeItem("id");
     },
   },
 });