Refactor API to accept pagination and filtering parameters

Seminario-Integrador-2024 · Oct 14, 2024 · d3abe97 · d3abe97
1 parent fa41180
commit d3abe97
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 15 deletions.
diff --git a/FrontAdmin/src/API/Inhabilitaciones.ts b/FrontAdmin/src/API/Inhabilitaciones.ts
@@ -1,9 +1,9 @@
 import Cookies from 'js-cookie';
 
-export const getInhabilitaciones = async () => {
+export const getInhabilitaciones = async (limit: number, offset: number) => {
     try {
         const token = Cookies.get('tokennn');
-        const response = await fetch('http://localhost:8000/api/alumnos/inhabilitados', {
+        const response = await fetch(`http://localhost:8000/api/alumnos/inhabilitados?limit=${limit}&offset=${offset}` , {
         method: 'GET',
         headers: {
             'Content-Type': 'application/json',

diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Inhabilitaciones/Inhabilitaciones.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Inhabilitaciones/Inhabilitaciones.tsx
@@ -14,14 +14,14 @@ function Inhabilitados() {
 
   useEffect(() => {
     const fetchData = async () => {
-      const response = await getInhabilitaciones();
+      const response = await getInhabilitaciones(limit1, offset1);
       setInhabilitados(response);
       setTotalInhabilitados(response.length);
       setLoading(false);
     };
 
     fetchData();
-  }, []);
+  }, [limit1, offset1]);
 
   const handleNextPage = () => {   
     if (offset1 + limit1 < totalInhabilitados) {
@@ -57,6 +57,19 @@ function Inhabilitados() {
                 >
                     Alumnos a Habilitar
                 </Tab>
+                <Tab
+                    _selected={{
+                    borderBottom: "2px solid",
+                    borderColor: "blue.500",
+                    color: "blue.500",
+                    borderTop: "none",
+                    borderLeft: "none",
+                    borderRight: "none"
+                    }}
+                    _focus={{ boxShadow: "none" }}
+                >
+                    Alumnos a Inhabilitar
+                </Tab>
                 <Tab
                     _selected={{
                     borderBottom: "2px solid",
@@ -74,7 +87,6 @@ function Inhabilitados() {
 
                 <TabPanels>
                     <TabPanel>
-
                     <Flex>
                         <Box
                             borderRadius={8}
@@ -97,20 +109,38 @@ function Inhabilitados() {
                     </TabPanel>
                     <TabPanel>
                     <Flex>
-
+                        <Box
+                            borderRadius={8}
+                            borderColor={"gray.200"}
+                            borderStyle={"solid"}
+                            borderWidth={1}
+                            p={3}
+                        >
                         {loading ? (
                                 <Spinner />
                             ) : (
+                            <Box>
+                                <Flex>
+                                    <Text fontSize="xl" fontWeight="bold">Inhabilitar</Text>
+                                </Flex>
+                            </Box>
+                        )}
+                        </Box>
+                    </Flex>
+                    </TabPanel>
+                    <TabPanel>
+                    <Flex>
+
+                        {loading ? (
+                                <Spinner />
+                            ) : 
+                            inhabilitados.length > 0 ?
+                            (
                             <Box justifyContent={"center"} w={"100%"}>
-                                <Flex direction={"column"} w={"100%"} mb={4}>
+                                <Flex direction={"column"} w={"100%"} mb={2}>
                                     <Tag  bg="secundaryBg" w={"100%"} p={"10px"} size="lg" fontSize={18} display="flex" justifyContent="center" fontWeight={"bold"} fontFamily={"serif"}>Total: {totalInhabilitados}</Tag>
                                 </Flex>
-                                <Box  borderRadius={8}
-                                    borderColor={"gray.200"}
-                                    borderStyle={"solid"}
-                                    w={"100%"}
-                                    borderWidth={1}
-                                    p={3}>
+                                <Input type="text"  placeholder="Buscar por Apellido y Nombre, Legajo o DNI..." w={"100%"} mb={2} />
                                 <Tabla headers={headers} data={inhabilitados} /> 
                                     <Box bottom="0" width="100%" bg="white" p="10px" mt={4} boxShadow="md" >
                                             <Flex justifyContent="space-between" alignItems={"center"}>
@@ -123,9 +153,9 @@ function Inhabilitados() {
                                             </Button>
                                             </Flex>
                                 </Box>
-                                </Box>
+
                             </Box>
-                        )}
+                        ): <p>No hay datos para mostrar</p>}
 
                     </Flex>
                     </TabPanel>