From 73a836572c856737d1a825ab882f0e4e62a191d2 Mon Sep 17 00:00:00 2001 From: Miranda Ariano Date: Thu, 12 Dec 2024 00:45:06 -0300 Subject: [PATCH] fix: arregle un error relacionado con el responsive --- .../Pages/Estadisticas/Estadisticas.tsx | 39 +++++--------- .../Estadisticas/SubPages/ListadoMaterias.tsx | 53 ++++++++----------- .../ListadoAlumnosQueCursanMateria.tsx | 22 ++++---- .../Estadisticas/SubPages/TablaAlumnos.tsx | 14 ++--- 4 files changed, 51 insertions(+), 77 deletions(-) diff --git a/FrontAdmin/src/components/Pages/Estadisticas/Estadisticas.tsx b/FrontAdmin/src/components/Pages/Estadisticas/Estadisticas.tsx index 9a5cad2..b918a0f 100644 --- a/FrontAdmin/src/components/Pages/Estadisticas/Estadisticas.tsx +++ b/FrontAdmin/src/components/Pages/Estadisticas/Estadisticas.tsx @@ -7,30 +7,23 @@ import SubMenuContent from '../../SubMenu/SubMenuContent'; function Estadisticas() { const { isOpen, onOpen, onClose } = useDisclosure(); - // Definir el ancho de la caja de SubMenuContent según el tamaño de la pantalla const isMobile = useBreakpointValue({ base: true, xl: false }); - // Estado para controlar la visibilidad del botón de hamburguesa const [showHamburger, setShowHamburger] = useState(true); const [lastScrollY, setLastScrollY] = useState(0); - // Función que maneja el desplazamiento const handleScroll = () => { if (window.scrollY > lastScrollY) { - // Si el desplazamiento es hacia abajo, ocultamos el botón setShowHamburger(false); } else { - // Si el desplazamiento es hacia arriba, mostramos el botón setShowHamburger(true); } - setLastScrollY(window.scrollY); // Actualizamos la posición del scroll + setLastScrollY(window.scrollY); }; - // Usamos useEffect para agregar el evento de scroll al montar el componente useEffect(() => { window.addEventListener('scroll', handleScroll); - // Limpiamos el evento cuando el componente se desmonta return () => { window.removeEventListener('scroll', handleScroll); }; @@ -38,64 +31,60 @@ function Estadisticas() { return ( - {/* SubMenuContent se muestra solo cuando no es pantalla pequeña */} {!isMobile ? ( ) : ( - // En pantallas pequeñas, solo mostramos el botón de hamburguesa si showHamburger es true - showHamburger && ( + showHamburger && !isOpen && ( } onClick={onOpen} + bg="blue.300" /> ) )} - - {/* El contenido principal (Outlet) */} - {/* Barra lateral (SubMenu) visible en móvil si se abre */} {isOpen && isMobile && ( - {/* Botón de cierre dentro del SubMenuContent */} } onClick={onClose} - size="sm" // Tamaño pequeño - color="black" // Color negro - variant="white" // Sin fondo + size="sm" + color="black" + variant="white" bg="white" - _hover={{ bg: 'gray.500' }} // Cambia a gris cuando el cursor esté sobre el botón + _hover={{ bg: 'gray.500' }} /> diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/ListadoMaterias.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/ListadoMaterias.tsx index f72a866..657be53 100644 --- a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/ListadoMaterias.tsx +++ b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/ListadoMaterias.tsx @@ -13,7 +13,7 @@ import { Input, } from '@chakra-ui/react'; import { FetchMaterias } from '../../../../API/Materias'; -import { FetchAlumnosMaterias } from '../../../../API/Materias'; // Asumo que tienes esta función en tu API +import { FetchAlumnosMaterias } from '../../../../API/Materias'; interface Materia { anio_cursada: number; @@ -24,44 +24,39 @@ interface Materia { } const ListadoMaterias: React.FC = () => { - const [materias, setMaterias] = useState([]); // Estado para las materias - const [filteredMaterias, setFilteredMaterias] = useState([]); // Estado para las materias filtradas por búsqueda - const [alumnos, setAlumnos] = useState([]); // Estado para los alumnos - const [currentPage, setCurrentPage] = useState(1); // Estado para la página actual - const [itemsPerPage] = useState(10); // Número de elementos por página - const [searchQuery, setSearchQuery] = useState(''); // Estado para la búsqueda por nombre de materia + const [materias, setMaterias] = useState([]); + const [filteredMaterias, setFilteredMaterias] = useState([]); + const [alumnos, setAlumnos] = useState([]); + const [currentPage, setCurrentPage] = useState(1); + const [itemsPerPage] = useState(10); + const [searchQuery, setSearchQuery] = useState(''); const navigate = useNavigate(); - // Maneja el clic sobre una materia para obtener los alumnos const handleMateriaClick = async (codigoMateria: number) => { try { - const alumnosData = await FetchAlumnosMaterias(codigoMateria); // Asumiendo que tienes una API para obtener los alumnos - setAlumnos(alumnosData); // Guarda los datos de los alumnos - navigate(`${codigoMateria}/alumnos`); // Navega a la ruta correspondiente + const alumnosData = await FetchAlumnosMaterias(codigoMateria); + setAlumnos(alumnosData); + navigate(`${codigoMateria}/alumnos`); } catch (error) { console.error('Error al obtener los alumnos:', error); - setAlumnos([]); // Respaldo a un array vacío en caso de error + setAlumnos([]); } }; - // Filtra las materias por nombre, ignorando mayúsculas/minúsculas const handleSearchChange = (event: React.ChangeEvent) => { const query = event.target.value; setSearchQuery(query); - // Filtra las materias según el query de búsqueda const filtered = materias.filter((materia) => materia.nombre.toLowerCase().includes(query.toLowerCase()) ); setFilteredMaterias(filtered); }; - // Paginación const indexOfLastMateria = currentPage * itemsPerPage; const indexOfFirstMateria = indexOfLastMateria - itemsPerPage; const currentMaterias = filteredMaterias.slice(indexOfFirstMateria, indexOfLastMateria); - // Cambiar de página const paginate = (pageNumber: number) => setCurrentPage(pageNumber); useEffect(() => { @@ -71,18 +66,18 @@ const ListadoMaterias: React.FC = () => { if (data && Array.isArray(data.results)) { const sortedMaterias = data.results.sort((a: Materia, b: Materia) => a.nombre.localeCompare(b.nombre) - ); // Ordenar alfabéticamente por el nombre - setMaterias(sortedMaterias); // Establecer las materias ordenadas - setFilteredMaterias(sortedMaterias); // Inicializamos también la lista filtrada + ); + setMaterias(sortedMaterias); + setFilteredMaterias(sortedMaterias); } else { console.error('Datos inválidos:', data); - setMaterias([]); // Respaldo a un array vacío si los datos son inválidos - setFilteredMaterias([]); // Respaldo a un array vacío si los datos son inválidos + setMaterias([]); + setFilteredMaterias([]); } } catch (error) { console.error('Network error:', error); - setMaterias([]); // Respaldo a un array vacío si ocurre un error - setFilteredMaterias([]); // Respaldo a un array vacío si ocurre un error + setMaterias([]); + setFilteredMaterias([]); } }; fetchData(); @@ -105,7 +100,6 @@ const ListadoMaterias: React.FC = () => { Listado de Materias - {/* Campo de búsqueda */} { p={2} borderRadius="md" _hover={{ bg: 'gray.100', cursor: 'pointer' }} - onClick={() => handleMateriaClick(materia.codigo_materia)} // Llama a la función cuando se haga clic + onClick={() => handleMateriaClick(materia.codigo_materia)} > {materia.nombre} @@ -133,16 +127,15 @@ const ListadoMaterias: React.FC = () => { - {/* Paginación */} Página {currentPage} de {Math.ceil(filteredMaterias.length / itemsPerPage)} @@ -151,10 +144,10 @@ const ListadoMaterias: React.FC = () => { isDisabled={currentPage === Math.ceil(filteredMaterias.length / itemsPerPage)} onClick={() => paginate(currentPage + 1)} color="white" - bg="blue.900" // Color azul más oscuro + bg="blue.900" _hover={{ bg: 'blue.800' }} > - {'Siguiente >>'} {/* Símbolo "Siguiente" */} + {'Siguiente >>'} diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/PaginasMaterias/ListadoAlumnosQueCursanMateria.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/PaginasMaterias/ListadoAlumnosQueCursanMateria.tsx index dc98438..45f9775 100644 --- a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/PaginasMaterias/ListadoAlumnosQueCursanMateria.tsx +++ b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/PaginasMaterias/ListadoAlumnosQueCursanMateria.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { useParams, Link } from 'react-router-dom'; // Asegúrate de importar Link +import { useParams, Link } from 'react-router-dom'; import { FetchAlumnosMaterias } from '../../../../../API/Materias'; import { Input, Button, Box, Table, Thead, Tbody, Tr, Th, Td, Flex, Text, InputGroup, InputLeftElement } from '@chakra-ui/react'; import { SearchIcon } from '@chakra-ui/icons'; @@ -24,10 +24,10 @@ const ListadoAlumnosQueCursanMateria = () => { const [error, setError] = useState(null); const [searchQuery, setSearchQuery] = useState(''); const [currentPage, setCurrentPage] = useState(1); - const [filteredAlumnos, setFilteredAlumnos] = useState([]); // Alumnos filtrados + const [filteredAlumnos, setFilteredAlumnos] = useState([]); const { codigo_materia } = useParams<{ codigo_materia: string }>(); - const alumnosPerPage = 10; // Máximo de alumnos por página + const alumnosPerPage = 10; useEffect(() => { const fetchData = async () => { @@ -39,7 +39,7 @@ const ListadoAlumnosQueCursanMateria = () => { const codigo_materiaNumber = parseInt(codigo_materia); const data = await FetchAlumnosMaterias(codigo_materiaNumber); setAlumnos(data.results); - setFilteredAlumnos(data.results); // Inicialmente se muestran todos + setFilteredAlumnos(data.results); } } catch (error: any) { setError(error.message || 'Error al obtener los datos'); @@ -56,8 +56,8 @@ const ListadoAlumnosQueCursanMateria = () => { setSearchQuery(query); if (query === '') { - setFilteredAlumnos(alumnos); // Si no hay filtro, se muestran todos - setCurrentPage(1); // Reseteamos la página a 1 + setFilteredAlumnos(alumnos); + setCurrentPage(1); } else { const filtered = alumnos.filter((alumno) => { return ( @@ -69,7 +69,7 @@ const ListadoAlumnosQueCursanMateria = () => { ); }); setFilteredAlumnos(filtered); - setCurrentPage(1); // Reseteamos la página a 1 cuando cambiamos el filtro + setCurrentPage(1); } }; @@ -77,7 +77,6 @@ const ListadoAlumnosQueCursanMateria = () => { setCurrentPage(pageNumber); }; - // Calculamos los alumnos a mostrar según la página actual y los resultados filtrados const indexOfLastAlumno = currentPage * alumnosPerPage; const indexOfFirstAlumno = indexOfLastAlumno - alumnosPerPage; const currentAlumnos = filteredAlumnos.slice(indexOfFirstAlumno, indexOfLastAlumno); @@ -85,12 +84,10 @@ const ListadoAlumnosQueCursanMateria = () => { if (loading) return Cargando datos...; if (error) return Error: {error}; - // Número total de páginas basado en los resultados filtrados const totalPages = filteredAlumnos.length > 0 ? Math.ceil(filteredAlumnos.length / alumnosPerPage) : 0; return ( - {/* Input con lupa */} @@ -123,8 +120,8 @@ const ListadoAlumnosQueCursanMateria = () => { @@ -153,7 +150,6 @@ const ListadoAlumnosQueCursanMateria = () => { - {/* Paginación */} {totalPages > 0 && (