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") ? (
-

- ) : null}
+

{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 (
+
+
+
+ );
+ })}
+