diff --git a/src/App.js b/src/App.js index 03d4752..1be49f9 100644 --- a/src/App.js +++ b/src/App.js @@ -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 (
@@ -24,12 +25,12 @@ const App = () => {
}> - } /> + } /> }> } /> }> }> - } /> + } /> }> } /> } /> diff --git a/src/components/CardProfesores/CardProfesor.css b/src/components/CardProfesores/CardProfesor.css index f2d6435..2058f28 100644 --- a/src/components/CardProfesores/CardProfesor.css +++ b/src/components/CardProfesores/CardProfesor.css @@ -1,6 +1,6 @@ .card { - max-width: 450px; + max-width: 400px; width: 100%; height: 175px; margin: auto; diff --git a/src/components/CardProfesores/CardProfesor.js b/src/components/CardProfesores/CardProfesor.js index 75caa67..88b794b 100644 --- a/src/components/CardProfesores/CardProfesor.js +++ b/src/components/CardProfesores/CardProfesor.js @@ -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 (
- Profesor img + Profesor img
-

{profesor.nombre}

-
{edificioNombre}
+

{profesor.nombre}

+
{edificioNombre}
{permissions ? ( @@ -71,7 +75,7 @@ const CardProfesor = ({ profesor, edificioNombre, permissions }) => { ) : null}
-
+
{showDialog && (
diff --git a/src/components/PerfilProfesor.css b/src/components/PerfilProfesor.css index c53e600..796d836 100644 --- a/src/components/PerfilProfesor.css +++ b/src/components/PerfilProfesor.css @@ -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; } diff --git a/src/components/PerfilProfesor.js b/src/components/PerfilProfesor.js index b7e084a..3044403 100644 --- a/src/components/PerfilProfesor.js +++ b/src/components/PerfilProfesor.js @@ -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
Cargando datos del profesor...
; + return
Cargando datos del profesor...
; } + 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 (
-
-
- {profesor.nombre} -
-

{profesor.nombre}

-

Ubicación: {profesor.ubicacion}

-

Correo: {profesor.correo_pcp}

-

Edificio: {profesor.id_edificio}

-

Teléfono de oficina: {profesor.tel_oficina}

-

Extensión: {profesor.extension}

-
+
+ {profesor.nombre} +
+

{profesor.nombre}

+

Ubicación: {profesor.ubicacion ? profesor.ubicacion: "NO ubicado"}

+

Correo: {profesor.correo_pcp ? profesor.correo_pcp:"No ubicado"}

+

Teléfono de oficina: {profesor.tel_oficina ? profesor.tel_oficina:"No ubicado"}

+

Extensión: {profesor.extension ? profesor.extension:"No ubicado"}

+

Edificio: {edificioProfesor ? edificioProfesor.edificio : 'No ubicado'}

+
-

Datos académicos

+

Datos académicos

    -
  • Categoría: {profesor.id_categoria}
    • -
  • Adscripción: {profesor.id_adscripcion}
    • +
  • Categoría: {categoriaProfesor ? categoriaProfesor.categoria : 'No ubicado'}
    • +
  • Adscripción: {adscripcionProfesor ? adscripcionProfesor.adscripcion : 'No ubicado'}
+
-

Líneas de investigación

+

Líneas de investigación

    - {profesor.lineasInvestigacion.map((linea, index) => ( -
  • Investigaciones: {linea.lineas_inv}
    • - ))} + {profesor.lineasInvestigacion.length > 0 ? ( + profesor.lineasInvestigacion.map((linea, index) => ( +
  • Investigaciones: {linea.lineas_inv ? linea.lineas_inv:"NO encontrado"}
    • + )) + ) : ( +
  • No hay líneas de investigación registradas.
    • + )}
+
-

Proyectos académicos

+

Proyectos académicos

    - {profesor.proyectosAcademicos.map((proyecto, index) => ( -
  • Proyectos: {proyecto.proyecto}
    • - ))} + {profesor.proyectosAcademicos.length > 0 ? ( + profesor.proyectosAcademicos.map((proyecto, index) => ( +
  • Proyectos: {proyecto.proyecto ? proyecto.proyecto : "NO encontrado"}
    • + )) + ) : ( +
  • No hay proyectos académicos registrados.
    • + )}
diff --git a/src/models/routes.js b/src/models/routes.js index b7829b7..5e92914 100644 --- a/src/models/routes.js +++ b/src/models/routes.js @@ -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' } \ No newline at end of file diff --git a/src/pages/PanelNavegacion/InterAdmin.js b/src/pages/PanelNavegacion/InterAdmin.js index edd3969..853ba7f 100644 --- a/src/pages/PanelNavegacion/InterAdmin.js +++ b/src/pages/PanelNavegacion/InterAdmin.js @@ -8,17 +8,17 @@ const InterAdmin = () => {

Usuarios

- Usuarios + Usuarios
- +

Profesores

- Profesores + Profesores