80% completo

2024-06-27 15:50:44 -06:00
parent d087e968d8
commit 1c63fa8b2b
7 changed files with 142 additions and 101 deletions
@@ -17,6 +17,7 @@ import { PrivateRoutes, PublicRoutes } from './models/routes';
 import NavUsuario from './components/CardUsuarios/NavUsuarios';
 import InterAdmin from './pages/PanelNavegacion/InterAdmin';
 import InterResp from './components/InterResp'
+
 const App = () => {
  return (
    <div className="App">
@@ -24,12 +25,12 @@ const App = () => {
        <Header />
          <Routes>
            <Route path={PublicRoutes.FILTER} element={<Directorio/>}></Route>
-            <Route path="/profesor/perfil/:id" element={<PerfilProfesor />} />
+            <Route path = {`${PublicRoutes.DATAPROFESOR}:id_profesor`} element={<PerfilProfesor/>} />
            <Route path={PublicRoutes.LOGIN} element={<Login/>}></Route>
            <Route path={PrivateRoutes.INTERFACE} element={<PanelNavegacion/>} />
            <Route path={PrivateRoutes.CREARPROFESOR} element={<Directorio2/>}></Route>
            <Route path={PrivateRoutes.CREARUSUARIO} element={<CrearUsuario/>}></Route>
-            <Route path='/EditarUsuario' element={<NavUsuario/>} />
+            <Route path={PrivateRoutes.FILTERUSUARIO} element={<NavUsuario/>} />
            <Route path = {`${PrivateRoutes.EDITARUSUARIO}:id_usuario`} element={<MDUser/>}></Route>
            <Route path = {`${PrivateRoutes.EDITARPROFESOR}:id_profesor`} element={<FormEditProfesorPage/>} />
            <Route path={PublicRoutes.NOTFOUND} element={<Pagina404/>} />
@@ -1,6 +1,6 @@

 .card {
-    max-width: 450px;
+    max-width: 400px;
    width: 100%;
    height: 175px;
    margin: auto;
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import './CardProfesor.css';
-import { PrivateRoutes } from '../../models/routes';
+import { PrivateRoutes, PublicRoutes } from '../../models/routes';

 const CardProfesor = ({ profesor, edificioNombre, permissions }) => {
  const [showDialog, setShowDialog] = useState(false);
@@ -23,6 +23,10 @@ const CardProfesor = ({ profesor, edificioNombre, permissions }) => {
    window.location.href = `${PrivateRoutes.EDITARPROFESOR}${profesor.id_profesor}`;
  };

+  const handleViewProfesor = () =>{
+    window.location.href = `${PublicRoutes.DATAPROFESOR}${profesor.id_profesor}`;
+  }
+
  const fetchDelete = async (id_profesor) => {
    try {
      const token = localStorage.getItem('Token');
@@ -53,11 +57,11 @@ const CardProfesor = ({ profesor, edificioNombre, permissions }) => {

  return (
    <div className="card m-1">
-      <img src={profesor.fotografia} alt="Profesor img" className="imgProfe" />
+      <img src={profesor.fotografia} alt="Profesor img" className="imgProfe" onClick={handleViewProfesor}/>
      <div className="card-content">

-        <h4>{profesor.nombre}</h4>
-        <h6>{edificioNombre}</h6>
+        <h4 onClick={handleViewProfesor} >{profesor.nombre}</h4>
+        <h6 onClick={handleViewProfesor} >{edificioNombre}</h6>

        <div className="button-group">
          {permissions ? (
@@ -71,7 +75,7 @@ const CardProfesor = ({ profesor, edificioNombre, permissions }) => {
            </>
          ) : null}
        </div>
-      </div>
+      </div >
      {showDialog && (
        <div className="dialog-overlay">
          <div className="dialog">
@@ -1,67 +1,59 @@
-*{
-    padding: 0;
+.perfil-profesor {
+  font-family: Arial, sans-serif;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: #f9f9f9;
+  margin: 20px auto;
+  max-width: 800px;
 }

-.perfil-profesor {
-  padding: 20px;
+.foto-nombre {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.foto {
+  width: 200px;
+  height: 250px;
+  border-radius: 50%;
+  margin-right: 20px;
+}
+
+.info {
  display: flex;
  flex-direction: column;
-  gap: 20px;
-  border: 1px solid #ccc;
-  border-radius: 10px;
-  background-color: #f9f9f9;
-}
-
-.datos-profesor, .datos-academicos, .lineas-investigacion, .proyectos-academicos {
-  padding: auto;
-  border: 1px solid #ccc;
-  border-radius: 10px;
-  background-color: #fff;
-}
-
-.datos-profesor .foto-nombre {
-  display: flex;
-  align-items: flex-start;
-  gap:0;
-}
-
-.datos-profesor .foto {
-  width: 333px; /* Incrementa el tamaño de la imagen */
-  height: 333px; /* Incrementa el tamaño de la imagen */
-  border-radius:10px ;
-  object-fit: cover;
-}
-
-.datos-profesor .info {
+  align-items: center;
  flex: 1;
 }

-.datos-profesor .info h2 {
-    padding: 10px;
-    text-align: center;
-    border-radius:10px ;
-    background-color: #D59F0F;
-    margin-top: 0;
-  }
-  
+.datos-academicos, .lineas-investigacion, .proyectos-academicos {
+  margin-top: 20px;
+  border-top: 1px solid #ccc;
+  padding-top: 20px;
+}

-.datos-profesor .info p {
-  margin: 5px 0;
-}
-
-h3 {
-  color: #fff;
-  padding: 10px;
-  border-radius: 10px;
-  margin: auto; /* Ajusta los márgenes para que el encabezado esté pegado arriba */
-  text-align: center;
-}
-
-ul {
-  list-style-type: disc;
-  padding-left: 20px;
-}
-
-ul li {
+.datos-academicos h3, .lineas-investigacion h3, .proyectos-academicos h3 {
+  font-size: 1.2em;
+  margin-bottom: 10px;
+}
+
+.datos-academicos ul, .lineas-investigacion ul, .proyectos-academicos ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.datos-academicos li, .lineas-investigacion li, .proyectos-academicos li {
+  margin-bottom: 10px;
+}
+
+.datos-academicos li strong, .lineas-investigacion li strong, .proyectos-academicos li strong {
+  font-weight: bold;
+  margin-right: 5px;
+}
+
+.info p {
  margin: 5px 0;
 }
@@ -2,62 +2,104 @@ import React, { useEffect, useState } from 'react';
 import './PerfilProfesor.css';
 import { useParams } from 'react-router-dom';

+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 PerfilProfesor = () => {
-  const{id}=useParams()
+  const { id_profesor } = useParams();
  const [profesor, setProfesor] = useState(null);
+  const [adscripciones, setAdscripciones] = useState([]);
+  const [categorias, setCategorias] = useState([]);
+  const [edificios, setEdificios] = useState([]);

  useEffect(() => {
-    console.log(id)
-    const fetchProfesor = async () => {
+    const fetchData = async () => {
+      try {
+        const adscripcionesResponse = await fetch('http://localhost:3000/adscripcion');
+        const adscripcionesData = await adscripcionesResponse.json();
+        setAdscripciones(adscripcionesData);

-        const response = await fetch(`http://localhost:3000/profesor/36`)
-        .then(response=>response.json())
-        .then(data=>setProfesor(data))
+        const categoriasResponse = await fetch('http://localhost:3000/categoria');
+        const categoriasData = await categoriasResponse.json();
+        setCategorias(categoriasData);
+
+        const edificiosResponse = await fetch('http://localhost:3000/edificio');
+        const edificiosData = await edificiosResponse.json();
+        setEdificios(edificiosData);
+
+        const profesorResponse = await fetch(`http://localhost:3000/profesor/${id_profesor}`);
+        const profesorData = await profesorResponse.json();
+        profesorData.proyectosAcademicos = profesorData.proyectosAcademicos.map(proyecto => ({
+          ...proyecto,
+          proyecto: proyecto.proyecto || proyecto.proyecto_html
+        }));
+        profesorData.lineasInvestigacion = profesorData.lineasInvestigacion.map(linea => ({
+          ...linea,
+          lineas_inv: linea.lineas_inv || linea.lineas_inv_html
+        }));
+        setProfesor(profesorData);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
    };

-    fetchProfesor();
-  }, []);
+    fetchData();
+  }, [id_profesor]);

  if (!profesor) {
-    return <div>Cargando datos del profesor...</div>;
+    return <div className="perfil-profesor">Cargando datos del profesor...</div>;
  }

+  const edificioProfesor = edificios.find(edificio => edificio.id_edificio === profesor.id_edificio);
+  const adscripcionProfesor = adscripciones.find(adscripcion => adscripcion.id_adscripcion === profesor.id_adscripcion);
+  const categoriaProfesor = categorias.find(categoria => categoria.id_categoria === profesor.id_categoria);
+
+  const fotoProfesor = profesor.fotografia || defaultImage;
+
  return (
    <div className="perfil-profesor">
-      <div className="datos-profesor">
-        <div className="foto-nombre">
-          <img src={profesor.fotografia} alt={profesor.nombre} className="foto" />
-          <div className="info">
-            <h2>{profesor.nombre}</h2>
-            <p><strong>Ubicación:</strong> {profesor.ubicacion}</p>
-            <p><strong>Correo:</strong> {profesor.correo_pcp}</p>
-            <p><strong>Edificio:</strong> {profesor.id_edificio}</p>
-            <p><strong>Teléfono de oficina:</strong> {profesor.tel_oficina}</p>
-            <p><strong>Extensión:</strong> {profesor.extension}</p>
-          </div>
+      <div className="foto-nombre">
+        <img src={fotoProfesor} alt={profesor.nombre} className="foto" />
+        <div className="info">
+          <h2>{profesor.nombre}</h2>
+          <p><strong>Ubicación:</strong> {profesor.ubicacion ? profesor.ubicacion: "NO ubicado"}</p>
+          <p><strong>Correo:</strong> {profesor.correo_pcp ? profesor.correo_pcp:"No ubicado"}</p>
+          <p><strong>Teléfono de oficina:</strong> {profesor.tel_oficina ? profesor.tel_oficina:"No ubicado"}</p>
+          <p><strong>Extensión:</strong> {profesor.extension ? profesor.extension:"No ubicado"}</p>
+          <p><strong>Edificio:</strong> {edificioProfesor ? edificioProfesor.edificio : 'No ubicado'}</p>
        </div>
      </div>
+
      <div className="datos-academicos">
-        <h3>Datos académicos</h3>
+        <h4>Datos académicos</h4>
        <ul>
-          <li><strong>Categoría:</strong> {profesor.id_categoria}</li>
-          <li><strong>Adscripción:</strong> {profesor.id_adscripcion}</li>
+          <li><strong>Categoría:</strong> {categoriaProfesor ? categoriaProfesor.categoria : 'No ubicado'}</li>
+          <li><strong>Adscripción:</strong> {adscripcionProfesor ? adscripcionProfesor.adscripcion : 'No ubicado'}</li>
        </ul>
      </div>
+
      <div className="lineas-investigacion">
-        <h3>Líneas de investigación</h3>
+        <h4>Líneas de investigación</h4>
        <ul>
-          {profesor.lineasInvestigacion.map((linea, index) => (
-            <li key={index}><strong>Investigaciones:</strong> {linea.lineas_inv}</li>
-          ))}
+          {profesor.lineasInvestigacion.length > 0 ? (
+            profesor.lineasInvestigacion.map((linea, index) => (
+              <li key={index}><strong>Investigaciones:</strong> {linea.lineas_inv ? linea.lineas_inv:"NO encontrado"}</li>
+            ))
+          ) : (
+            <li>No hay líneas de investigación registradas.</li>
+          )}
        </ul>
      </div>
+
      <div className="proyectos-academicos">
-        <h3>Proyectos académicos</h3>
+        <h4>Proyectos académicos</h4>
        <ul>
-          {profesor.proyectosAcademicos.map((proyecto, index) => (
-            <li key={index}><strong>Proyectos:</strong> {proyecto.proyecto}</li>
-          ))}
+          {profesor.proyectosAcademicos.length > 0 ? (
+            profesor.proyectosAcademicos.map((proyecto, index) => (
+              <li key={index}><strong>Proyectos:</strong> {proyecto.proyecto ? proyecto.proyecto : "NO encontrado"}</li>
+            ))
+          ) : (
+            <li>No hay proyectos académicos registrados.</li>
+          )}
        </ul>
      </div>
    </div>
@@ -2,13 +2,15 @@ export const PublicRoutes={
    NOTFOUND:'*',
    LOGIN:'/login',
    FILTER:'/',
-    DATA:'/profesor/perfil/'
+    DATAPROFESOR:'/perfil/Profesor/'
 }

 export const PrivateRoutes={
    CREARPROFESOR:'/Crear/Profesor',
    EDITARPROFESOR:'/Editar/Profesor/',
    CREARUSUARIO:'/Creacion/Usuario',
-    EDITARUSUARIO:'/Editar/Usuario/:id_usuario',
+    EDITARUSUARIO:'/Editar/Usuario/',
+    DATAUSUARIO:'/perfil/Usuario',
    INTERFACE:'/Interface',
+    FILTERUSUARIO:'/Filter/Usuario'
 }
@@ -8,17 +8,17 @@ const InterAdmin = () => {
            <div className="admin-section">
                <div className="section-header">
                    <h2>Usuarios</h2>
-                    <img src='https://w7.pngwing.com/pngs/1022/170/png-transparent-users-group-computer-icons-user-s-computer-website-internet-forum-thumbnail.png' alt="Usuarios" className="section-icon" />
+                    <img src='https://static.vecteezy.com/system/resources/previews/017/066/794/non_2x/user-icon-line-isolated-on-white-background-black-flat-thin-icon-on-modern-outline-style-linear-symbol-and-editable-stroke-simple-and-pixel-perfect-stroke-illustration-vector.jpg' alt="Usuarios" className="section-icon" />
                </div>
                <div className="button-group">
                    <button className="action-button" onClick={() => window.location.href= PrivateRoutes.CREARUSUARIO}>Crear</button>
-                    <button className="action-button" onClick={() => window.location.href=PrivateRoutes.INTERFACE}>Editar</button>
+                    <button className="action-button" onClick={() => window.location.href=PrivateRoutes.FILTERUSUARIO}>Editar</button>
                </div>
            </div>
            <div className="admin-section">
                <div className="section-header">
                    <h2>Profesores</h2>
-                    <img src='https://png.pngtree.com/png-clipart/20190516/original/pngtree-users-vector-icon-png-image_3725294.jpg' alt="Profesores" className="section-icon" />
+                    <img src='https://static.vecteezy.com/system/resources/previews/007/165/333/non_2x/book-icon-book-icon-simple-sign-book-icon-isolated-on-with-background-illustration-of-book-icon-free-free-vector.jpg' alt="Profesores" className="section-icon" />
                </div>
                <div className="button-group">
                    <button className="action-button" onClick={() => window.location.href= PrivateRoutes.CREARPROFESOR}>Crear</button>