diff --git a/.env b/.env index b607765..f2dfb88 100644 --- a/.env +++ b/.env @@ -1 +1,2 @@ REACT_APP_API_URL=https://venus.acatlan.unam.mx/directorio_test +REACT_APP_PORT=3001 diff --git a/src/App.css b/src/App.css index 874a035..0bd3e41 100644 --- a/src/App.css +++ b/src/App.css @@ -423,7 +423,7 @@ p .text-center .mt-3 { justify-content: space-evenly; width: 400px; max-width: 90vw; - margin: 10px; + margin: 10px auto; } .cargando { diff --git a/src/assets/img/escudo-b2.png b/src/assets/img/escudo-b2.png new file mode 100644 index 0000000..1b8b234 Binary files /dev/null and b/src/assets/img/escudo-b2.png differ diff --git a/src/assets/img/logo_unam-b.png b/src/assets/img/logo_unam-b.png new file mode 100644 index 0000000..a9a0ea0 Binary files /dev/null and b/src/assets/img/logo_unam-b.png differ diff --git a/src/components/Card/Card.css b/src/components/Card/Card.css index cea3d1d..9a2b6db 100644 --- a/src/components/Card/Card.css +++ b/src/components/Card/Card.css @@ -1,7 +1,7 @@ .card { max-width: 90vw; width: 400px; - height: 175px; + height: 170px; margin: auto; padding: 0.5em; border-radius: 1em !important; @@ -11,7 +11,22 @@ flex-direction: row !important; justify-content: left; text-align: center; - transition: box-shadow 0.3s ease, transform 0.3s ease; + transition: box-shadow 0.3s ease-out, transform 0.3s ease-out ; +} + +.transition{ + opacity: 0; + transform: translateY(20px); + transition: opacity 0.5s ease-out, transform 0.5s ease-out; +} + +.transition.show { + display: flex; + justify-content: center; + width: 40vw; + min-width: 340px; + opacity: 1; + transform: translateY(0); } .card:hover { @@ -37,6 +52,7 @@ display: flex; justify-content: center; align-items: center; + max-width: 130px; } @@ -56,4 +72,10 @@ .status-label.inactive { background-color: red; + } + + .profesores-container { + display: flex; + flex-wrap: wrap; + justify-content: center; } \ No newline at end of file diff --git a/src/components/Card/CardProfesores/CardProfesor.js b/src/components/Card/CardProfesores/CardProfesor.js index dc3230d..e7a101e 100644 --- a/src/components/Card/CardProfesores/CardProfesor.js +++ b/src/components/Card/CardProfesores/CardProfesor.js @@ -3,13 +3,19 @@ import "../Card.css"; import { PrivateRoutes, PublicRoutes } from "../../../models/routes"; import { useDeleteTeacher } from "../../../services/teacher.services"; -const CardProfesor = ({ profesor, edificioNombre, permissions }) => { +const API_URL = process.env.REACT_APP_API_URL; + +const CardProfesor = ({ + profesor, + edificioNombre, + permissions, + currentPage, +}) => { const [showDialog, setShowDialog] = useState(false); const [confirmText, setConfirmText] = useState(""); const { deleteTeacher } = useDeleteTeacher(); const defaultImage = "https://static.vecteezy.com/system/resources/thumbnails/020/765/399/small_2x/default-profile-account-unknown-icon-black-silhouette-free-vector.jpg"; - const fotoProfesor = profesor.fotografia || defaultImage; const handleDeleteClick = () => { setShowDialog(true); @@ -28,20 +34,28 @@ const CardProfesor = ({ profesor, edificioNombre, permissions }) => { }; const handleViewProfesor = () => { + localStorage.setItem("lastPage", currentPage); window.location.href = `${PublicRoutes.DATAPROFESOR}${profesor.id_profesor}`; }; + const handleImageError = (e) => { + e.target.src = defaultImage; + }; + return (
- {fotoProfesor && fotoProfesor.startsWith("http") ? ( - {profesor.nombre} - ) : null} + {profesor.nombre} {permissions ? (
{ e.preventDefault(); @@ -25,6 +26,7 @@ function FilterProfesor() { categoria, edificio, }); + setCurrentPage(1); }; return ( @@ -104,7 +106,12 @@ function FilterProfesor() {
- +
); } diff --git a/src/components/Card/CardProfesores/Mapeo.js b/src/components/Card/CardProfesores/Mapeo.js index 8cd23ba..4a0d68f 100644 --- a/src/components/Card/CardProfesores/Mapeo.js +++ b/src/components/Card/CardProfesores/Mapeo.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import "../../../App.css"; import CardProfesor from "./CardProfesor"; import Guard from "../../../guards/route.guard"; @@ -8,8 +8,8 @@ import { } from "../../../services/teacher.services"; import { PrivateRoutes } from "../../../models/routes"; -const Mapeo = ({ filters, edificios }) => { - const [currentPage, setCurrentPage] = useState(1); +const Mapeo = ({ filters, edificios, currentPage, setCurrentPage }) => { + const [shownCards, setShownCards] = useState([]); const permissions = Guard(); const { @@ -25,6 +25,50 @@ const Mapeo = ({ filters, edificios }) => { error: errorActives, } = useTeachersActives(currentPage, filters); + const { profesores, totalPages } = permissions + ? { profesores: profesoresData, totalPages: totalDataPages } + : { profesores: profesoresActivesData, totalPages: totalActivePages }; + + const [maxPagesToShow, setMaxPagesToShow] = useState(10); + + useEffect(() => { + const updateMaxPagesToShow = () => { + if (window.innerWidth < 650) { + setMaxPagesToShow(5); + } else { + setMaxPagesToShow(10); + } + }; + + window.addEventListener("resize", updateMaxPagesToShow); + updateMaxPagesToShow(); + return () => window.removeEventListener("resize", updateMaxPagesToShow); + }, []); + + useEffect(() => { + const storedPage = localStorage.getItem("lastPage"); + if (storedPage) { + localStorage.removeItem("lastPage"); + } + }, [setCurrentPage]); + + useEffect(() => { + if (!loadingData && !loadingActives && profesores) { + setShownCards([]); + profesores.forEach((_, index) => { + setTimeout(() => { + setShownCards((prev) => [...prev, index]); + }, index * 120); + }); + } + }, [loadingData, loadingActives, profesores, currentPage]); + + useEffect(() => { + setTimeout(() => { + window.scrollTo({ top: 0, behavior: "smooth" }); + }, 100); + }, [currentPage]); + if (loadingData || loadingActives) { return (
@@ -49,25 +93,20 @@ const Mapeo = ({ filters, edificios }) => { ); } - const { profesores, totalPages } = permissions - ? { profesores: profesoresData, totalPages: totalDataPages } - : { profesores: profesoresActivesData, totalPages: totalActivePages }; - const handleNextPage = () => { if (currentPage < totalPages) { setCurrentPage((prevPage) => prevPage + 1); } }; - + const handlePrevPage = () => { if (currentPage > 1) { setCurrentPage((prevPage) => prevPage - 1); } - }; + }; const renderPageNumbers = () => { const pageNumbers = []; - const maxPagesToShow = 5; let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2)); let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1); @@ -115,20 +154,29 @@ const Mapeo = ({ filters, edificios }) => {
) : null} - {profesores.map((profesor) => { - const edificio = edificios.find( - (e) => e.id_edificio === profesor.id_edificio - ); - const edificioNombre = edificio ? edificio.edificio : "Desconocido"; - return ( - - ); - })} +
+ {profesores.map((profesor, index) => { + const edificio = edificios.find( + (e) => e.id_edificio === profesor.id_edificio + ); + const edificioNombre = edificio ? edificio.edificio : "Desconocido"; + return ( +
+ +
+ ); + })} +