Skip to content

Commit

Permalink
Tup 88 pesta a inhabilitaciones (#145)
Browse files Browse the repository at this point in the history
  • Loading branch information
yoelmarain authored Oct 16, 2024
2 parents 9f15740 + af18700 commit 39599f2
Show file tree
Hide file tree
Showing 8 changed files with 386 additions and 6 deletions.
75 changes: 75 additions & 0 deletions FrontAdmin/src/API/Inhabilitaciones.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import Cookies from 'js-cookie';

export const getInhabilitaciones = async (limit: number, offset: number) => {
try {
const token = Cookies.get('tokennn');
const response = await fetch(`http://localhost:8000/api/alumnos/inhabilitados?limit=${limit}&offset=${offset}` , {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
});

if (response.ok) {
const data = await response.json();
return data;
} else {
throw new Error('Error en la respuesta del servidor');
}
} catch (error) {
throw new Error('Network error: ' + error);
}
};


export const getAlumnosaInhabilitar = async () => {
try {
const token = Cookies.get('tokennn');
const response = await fetch(`http://localhost:8000/api/alumnos/alumnos-a-inhabilitar` , {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
});

if (response.ok) {
const data = await response.json();
return data;
} else {
throw new Error('Error en la respuesta del servidor');
}
} catch (error) {
throw new Error('Network error: ' + error);
}

};

export const inhabilitarAlumno = async (legajo: number) => {
try {
const token = Cookies.get('tokennn');
const response = await fetch(`http://localhost:8000/api/alumnos/alumno-a-inhabilitar/${legajo}/` , {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
});
if (response.ok) {
if (response.status === 204) {
// No hay contenido en la respuesta
return {};
} else {
const data = await response.json();
return data;
}
} else {
throw new Error('Error en la respuesta del servidor');
}
} catch (error) {
throw new Error('Network error: ' + error);
}

};

Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,13 @@ export default function Listado() {

const handleNextPage2 = () => {
if (offset2 + limit2 < totalabonaron) {
setOffset1(offset2 + limit2);
setOffset2(offset2 + limit2);
}
};

const handlePreviousPage2 = () => {
if (offset2 > 0) {
setOffset1(offset2 - limit2);
setOffset2(offset2 - limit2);
}
};

Expand Down Expand Up @@ -86,9 +86,6 @@ export default function Listado() {
setFilter(event.target.value);
};

console.log(abonaron);
console.log(noAbonaron);

return (
<Flex w={"100%"}
justifyContent={"center"}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const Tabla: React.FC<TablaProps> = ({ headers, data }) => {
'DNI': 'user',
'Estado financiero': 'estado_financiero',
'Legajo': 'legajo',
'Desde': 'fecha_inhabilitacion'
};
const navigate = useNavigate();

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { useEffect } from "react";
import { getAlumnosaInhabilitar } from '../../../../../API/Inhabilitaciones';
import { useState } from "react";
import { Box, Button, Flex, Spinner } from "@chakra-ui/react";
import Tabla from './Tabla';

export default function AInhabilitar() {

const [alumnosAInhabilitar, setAlumnosAInhabilitar] = useState<any[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const headers = ['Apellido y Nombre', 'Legajo' , 'DNI'];
const [request, setRequest] = useState<boolean>(false);

const fetchData = async () => {
setLoading(true);
const response2 = await getAlumnosaInhabilitar();
setAlumnosAInhabilitar(response2.results);
};

useEffect(() => {
fetchData();
}, []);

return (
<Box
borderRadius={8}
w={"100%"}
>

<Box w={"100%"}>
<Flex justifyContent={"center"} w={"100%"}>
{alumnosAInhabilitar.length > 0 ? ( <Flex direction={"column"} w={"100%"}>
<Tabla headers={headers} data={alumnosAInhabilitar} request={request} onInhabilitar={fetchData} setRequest={setRequest} />
<Flex justifyContent={"flex-end"}>
<Button
onClick={() => setRequest(true)}
color={"white"}
size={"md"}
m={2}
>
Inhabilitar
</Button>
</Flex>
</Flex>
) : <p>No hay datos para mostrar</p>}
</Flex>
</Box>

</Box>

);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
import React, { useEffect, useState } from 'react';
import {getInhabilitaciones} from '../../../../../API/Inhabilitaciones';
import Tabla from '../Cuotas/Tabla';
import AInhabilitar from './Alumnos_a_Inhabilitar';
import { Box, Button, Flex, Tab, TabList, Text ,TabPanel, TabPanels, Tabs, Tag, Spinner, Input } from "@chakra-ui/react";
import { ArrowLeftIcon, ArrowRightIcon } from '@chakra-ui/icons';

function Inhabilitados() {
const [inhabilitados, setInhabilitados] = useState<any[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const headers = ['Apellido y Nombre', 'Legajo' , 'DNI', 'Desde'];
const [limit1] = useState(10);
const [offset1, setOffset1] = useState(0);
const [totalInhabilitados, setTotalInhabilitados] = useState<number>(0);

useEffect(() => {
const fetchData = async () => {
const response = await getInhabilitaciones(limit1, offset1);
setInhabilitados(response.results);
setTotalInhabilitados(response.count);
setLoading(false);
};

fetchData();
}, [limit1, offset1]);

const handleNextPage = () => {
if (offset1 + limit1 < totalInhabilitados) {
setOffset1(offset1 + limit1);
}
};

const handlePreviousPage = () => {
if (offset1 > 0) {
setOffset1(offset1 - limit1);
}
};



return (
<Flex w={"100%"}
justifyContent={"center"}
alignItems={"center"}
flex={1}>
<Tabs w={"100%"}>
<TabList display="flex" justifyContent="center" alignItems="center" borderBottom="2px solid" borderColor="gray.200">
<Tab
_selected={{
borderBottom: "2px solid",
borderColor: "blue.500",
color: "blue.500",
borderTop: "none",
borderLeft: "none",
borderRight: "none"
}}
_focus={{ boxShadow: "none" }}
>
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",
borderColor: "blue.500",
color: "blue.500",
borderTop: "none",
borderLeft: "none",
borderRight: "none"
}}
_focus={{ boxShadow: "none" }}
>
Alumnos Inhabilitados
</Tab>
</TabList>

<TabPanels>
<TabPanel>
<Flex>
<Box
borderRadius={8}
borderColor={"gray.200"}
borderStyle={"solid"}
borderWidth={1}
p={3}
>
{loading ? (
<Spinner />
) : (
<Box>
<Flex>
<Text fontSize="xl" fontWeight="bold">Habilitar</Text>
</Flex>
</Box>
)}
</Box>
</Flex>
</TabPanel>
<TabPanel>
<Flex>
<AInhabilitar />
</Flex>
</TabPanel>
<TabPanel>
<Flex>

{loading ? (
<Spinner />
) :
inhabilitados.length > 0 ?
(
<Box justifyContent={"center"} w={"100%"}>
<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>
<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"}>
<Button onClick={handlePreviousPage} isDisabled={offset1 === 0} color="white" leftIcon={<ArrowLeftIcon/>}>
Anterior
</Button>
<Text textAlign={"center"} mb={0}>Página {Math.ceil(offset1 / limit1) + 1} de {Math.ceil(totalInhabilitados / limit1)}</Text>
<Button onClick={handleNextPage} isDisabled={offset1 + limit1 >= totalInhabilitados} color="white" rightIcon={<ArrowRightIcon/>}>
Siguiente
</Button>
</Flex>
</Box>

</Box>
): <p>No hay datos para mostrar</p>}

</Flex>
</TabPanel>
</TabPanels>
</Tabs>
</Flex>
);
}

export default Inhabilitados;
Loading

0 comments on commit 39599f2

Please sign in to comment.