From dda7e7197e0d5bc78a5f86eb1c1b90eb5df4fa05 Mon Sep 17 00:00:00 2001
From: TioSam77 <sammarw@gmail.com>
Date: Sun, 23 Jun 2024 16:57:00 -0600
Subject: [PATCH] =?UTF-8?q?=20Creaci=C3=B3n=20de=20borrado=20y=20edicion?=
 =?UTF-8?q?=20de=20profesor=201?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.css                         |   2 +-
 src/App.js                          |   5 +-
 src/components/CardEditProfesor.css |  72 ++++++++
 src/components/CardEditProfesor.js  |  64 +++++++
 src/components/FormEditProfesor.css |  89 ++++++++++
 src/components/FormEditProfesor.js  | 266 ++++++++++++++++++++++++++++
 src/components/Formulario.js        |  51 +++---
 src/pages/CardEditProfesorPage.js   |  26 +++
 src/pages/FormEditProfesorPage.js   |  27 +++
 9 files changed, 580 insertions(+), 22 deletions(-)
 create mode 100644 src/components/CardEditProfesor.css
 create mode 100644 src/components/CardEditProfesor.js
 create mode 100644 src/components/FormEditProfesor.css
 create mode 100644 src/components/FormEditProfesor.js
 create mode 100644 src/pages/CardEditProfesorPage.js
 create mode 100644 src/pages/FormEditProfesorPage.js

diff --git a/src/App.css b/src/App.css
index bc7f4ad..2b2d95a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -164,4 +164,4 @@ p.text-center.mt-3 {
   object-fit: cover;
   border-radius: 1em;
   margin: 5px;
-}
\ No newline at end of file
+}
diff --git a/src/App.js b/src/App.js
index bfcfc77..30e38de 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,7 +10,8 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.bundle.min';
 import CrearUsuario from './components/CrearUsuario';
 import MDUser from './components/MDUser';
-
+import CardEditProfesorPage from './pages/CardEditProfesorPage';
+import FormEditProfesorPage from './pages/FormEditProfesorPage'; 
 
 const App = () => {
   return (
@@ -23,6 +24,8 @@ const App = () => {
             <Route path='/Acceso' element={<Login/>}></Route>
             <Route path='/Modificacion y Borrado de Usuario' element={<MDUser/>}></Route>
             <Route path='/Creacion de Usuario' element={<CrearUsuario/>}></Route>
+            <Route path="/Modificacion y Borrado de Profesor" element={<CardEditProfesorPage />} />
+            <Route path="/Editar Profesor/:id" element={<FormEditProfesorPage />} />
             </Routes>
         <Footer />
       </Router>
diff --git a/src/components/CardEditProfesor.css b/src/components/CardEditProfesor.css
new file mode 100644
index 0000000..918d33b
--- /dev/null
+++ b/src/components/CardEditProfesor.css
@@ -0,0 +1,72 @@
+.card {
+  max-width: 600px;
+  width: 100%;
+  margin: auto;
+  padding: 1em;
+  border-radius: 1em;
+  background: white;
+  box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+
+.card-content { 
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.imgProfe {
+  width: 150px;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 1em;
+  margin: 5px;
+}
+
+.button-group,
+.dialog-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 10px; /* Add space between buttons */
+  width: 100%;
+  margin-top: 10px;
+}
+
+.button-group button,
+.dialog-buttons button {
+  flex: 1;
+  padding: 10px;
+  border-radius: 5px;
+  border: none;
+  color: white;
+  cursor: pointer;
+}
+
+.edit-button {
+  background-color: #002B7A;
+}
+
+.btn-danger {
+  background-color: #d9534f;
+}
+
+.dialog {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: white;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1);
+}
+
+.confirm-button {
+  background-color: #d9534f;
+}
+
+.cancel-button {
+  background-color: #6c757d;
+}
diff --git a/src/components/CardEditProfesor.js b/src/components/CardEditProfesor.js
new file mode 100644
index 0000000..db3aec7
--- /dev/null
+++ b/src/components/CardEditProfesor.js
@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import '../App.css';
+import './CardEditProfesor.css';
+
+const CardEditProfesor = ({ profesor, edificioNombre, onDelete }) => {
+  const [showDialog, setShowDialog] = useState(false);
+  const [confirmText, setConfirmText] = useState("");
+  const navigate = useNavigate();
+
+  const handleEdit = () => {
+    navigate(`/editar-profesor/${profesor.id}`);
+  };
+
+  const handleDelete = () => {
+    if (confirmText === "aceptar") {
+      onDelete(profesor.id);
+      setShowDialog(false);
+    } else {
+      alert("Debes escribir 'aceptar' para eliminar al profesor");
+    }
+  };
+
+  return (
+    <div className="card m-3">
+      <img src={profesor.fotografia} alt="Profesor img" className="imgProfe" />
+      <div className="card-content">
+        <h2>{profesor.nombre}</h2>
+        <h4>{edificioNombre}</h4>
+        <div className="button-group">
+          <button 
+            onClick={handleEdit} 
+            className="btn edit-button"
+          >
+            Editar
+          </button>
+          <button 
+            onClick={() => setShowDialog(true)} 
+            className="btn btn-danger"
+          >
+            Borrar
+          </button>
+        </div>
+        {showDialog && (
+          <div className="dialog">
+            <p>¿Deseas eliminar al profesor {profesor.nombre}?</p>
+            <p>Para borrar al profesor, escribe la palabra "aceptar".</p>
+            <input 
+              type="text" 
+              value={confirmText} 
+              onChange={(e) => setConfirmText(e.target.value)}
+            />
+            <div className="dialog-buttons">
+              <button onClick={handleDelete} className="btn confirm-button">Confirmar</button>
+              <button onClick={() => setShowDialog(false)} className="btn cancel-button">Cancelar</button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CardEditProfesor;
diff --git a/src/components/FormEditProfesor.css b/src/components/FormEditProfesor.css
new file mode 100644
index 0000000..0b96bf5
--- /dev/null
+++ b/src/components/FormEditProfesor.css
@@ -0,0 +1,89 @@
+.formulario-container {
+    max-width: 800px;
+    width: 90%;
+    margin: 20px auto;
+    padding: 1.5em;
+    background: white;
+    box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1);
+    border-radius: 1em;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1em;
+  }
+  
+  .form-group {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  label {
+    margin-bottom: 0.5em;
+  }
+  
+  input[type="text"],
+  input[type="email"],
+  input[type="tel"],
+  select {
+    padding: 0.5em;
+    font-size: 1em;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  
+  button.small-button {
+    padding: 0.4em 1em;
+    font-size: 0.9em;
+    color: #fff;
+    background-color: #007bff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    justify-self: center;
+    align-self: center;
+    width: 70px;
+    margin-top: 1em;
+  }
+  
+  button.small-button:hover {
+    background-color: #0056b3;
+  }
+  
+  .required {
+    color: red;
+  }
+  
+  .full-width {
+    grid-column: span 2;
+  }
+  
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    .formulario-container {
+      grid-template-columns: 1fr;
+    }
+  
+    .full-width {
+      grid-column: span 1;
+    }
+  }
+  
+  .dialog-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .dialog-box {
+    background: white;
+    padding: 2em;
+    border-radius: 1em;
+    box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1);
+    text-align: center;
+  }
+  
\ No newline at end of file
diff --git a/src/components/FormEditProfesor.js b/src/components/FormEditProfesor.js
new file mode 100644
index 0000000..6caba39
--- /dev/null
+++ b/src/components/FormEditProfesor.js
@@ -0,0 +1,266 @@
+import React, { useState, useEffect } from 'react';
+import './FormEditProfesor.css'; // Importa el archivo de estilos del formulario
+
+const Formulario = ({ profesor }) => {
+  const [id_usuario, setId_usuario] = useState(profesor.id_usuario || '1');
+  const [nombre, setNombreCompleto] = useState(profesor.nombre || '');
+  const [num_trabajador, setNum_trabajador] = useState(profesor.num_trabajador || '');
+  const [rfc, setRfc] = useState(profesor.rfc || '');
+  const [homoclave, setHomoclave] = useState(profesor.homoclave || '');
+  const [correo_pcp, setCorreo_pcp] = useState(profesor.correo_pcp || '');
+  const [correo_per, setCorreoPersonal] = useState(profesor.correo_per || '');
+  const [ubicacion, setUbicacion] = useState(profesor.ubicacion || '');
+  const [tel_oficina, setTelefonoOficina] = useState(profesor.tel_oficina || '');
+  const [extension, setExtension] = useState(profesor.extension || '');
+  const [tel_personal, setTelefonoPersonal] = useState(profesor.tel_personal || '');
+  const [fotografia, setFotografia] = useState(profesor.fotografia || '');
+  const [id_adscripcion, setAdscripcion] = useState(profesor.id_adscripcion || '');
+  const [id_categoria, setCategoria] = useState(profesor.id_categoria || '');
+  const [id_edificio, setEdificio] = useState(profesor.id_edificio || '');
+  const [activo, setActivo] = useState(profesor.activo || '1');
+  const [adscripciones, setAdscripciones] = useState([]);
+  const [categorias, setCategorias] = useState([]);
+  const [edificios, setEdificios] = useState([]);
+  const [showDialog, setShowDialog] = useState(false);
+
+  useEffect(() => {
+    fetch('http://localhost:3000/adscripcion')
+      .then(response => response.json())
+      .then(data => setAdscripciones(data))
+      .catch(error => console.error('Error fetching adscripciones:', error));
+
+    fetch('http://localhost:3000/categoria')
+      .then(response => response.json())
+      .then(data => setCategorias(data))
+      .catch(error => console.error('Error fetching categorias:', error));
+
+    fetch('http://localhost:3000/edificio')
+      .then(response => response.json())
+      .then(data => setEdificios(data))
+      .catch(error => console.error('Error fetching edificios:', error));
+  }, []);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    const profesorData = {
+      id_usuario,
+      nombre,
+      num_trabajador,
+      rfc,
+      homoclave,
+      correo_pcp,
+      correo_per,
+      ubicacion,
+      tel_oficina,
+      extension,
+      tel_personal,
+      id_adscripcion,
+      id_categoria,
+      id_edificio,
+      activo,
+      fotografia,
+    };
+
+    fetch('http://localhost:3000/profesor', {
+      method: 'PUT', // Cambiar a 'POST' para crear un nuevo registro
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(profesorData),
+    })
+    .then(response => response.json())
+    .then(data => {
+      console.log(profesorData);
+      console.log('Success:', data);
+      setShowDialog(true);
+    })
+    .catch((error) => {
+      console.error('Error:', error);
+    });
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit} className="formulario-container" style={{ backgroundColor: '#d59f0f' }}>
+        <div className="form-group">
+          <label htmlFor="nombre">Nombre completo:<span className="required">*</span></label>
+          <input
+            type="text"
+            id="nombre"
+            value={nombre}
+            onChange={(e) => setNombreCompleto(e.target.value)}
+            required
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="numeroTrabajador">Número de trabajador:<span className="required">*</span></label>
+          <input
+            type="text"
+            id="numeroTrabajador"
+            value={num_trabajador}
+            onChange={(e) => setNum_trabajador(e.target.value)}
+            required
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="rfc">RFC:<span className="required">*</span></label>
+          <input
+            type="text"
+            id="rfc"
+            value={rfc}
+            onChange={(e) => setRfc(e.target.value)}
+            required
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="homoclave">Homoclave:<span className="required">*</span></label>
+          <input
+            type="text"
+            id="homoclave"
+            value={homoclave}
+            onChange={(e) => setHomoclave(e.target.value)}
+            required
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="correoPrincipal">Correo principal:<span className="required">*</span></label>
+          <input
+            type="email"
+            id="correoPrincipal"
+            value={correo_pcp}
+            onChange={(e) => setCorreo_pcp(e.target.value)}
+            required
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="correoPersonal">Correo personal:</label>
+          <input
+            type="email"
+            id="correoPersonal"
+            value={correo_per}
+            onChange={(e) => setCorreoPersonal(e.target.value)}
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="edificio">Edificio:<span className="required">*</span></label>
+          <select
+            id="edificio"
+            value={id_edificio}
+            onChange={(e) => setEdificio(e.target.value)}
+            required
+          >
+            <option value="No asignado">No asignado</option>
+            {edificios.map((edificio) => (
+                <option key={edificio.id_edificio} value={edificio.id_edificio}>{edificio.edificio}</option>
+              ))}
+          </select>
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="categoria">Categoría:<span className="required">*</span></label>
+          <select
+            id="categoria"
+            value={id_categoria}
+            onChange={(e) => setCategoria(e.target.value)}
+            required
+          >
+            <option value="No asignado">No asignado</option>
+            {categorias.map((categoria) => (
+                <option key={categoria.id_categoria} value={categoria.id_categoria}>{categoria.categoria}</option>
+              ))}
+          </select>
+        </div>
+        <div className="form-group">
+          <label htmlFor="adscripcion">Adscripción:<span className="required">*</span></label>
+          <select
+            id="adscripcion"
+            value={id_adscripcion}
+            onChange={(e) => setAdscripcion(e.target.value)}
+            required
+          >
+            <option value="No asignado">No asignado</option>
+            {adscripciones.map((adscripcion) => (
+                <option key={adscripcion.id_adscripcion} value={adscripcion.id_adscripcion}>{adscripcion.adscripcion}</option>
+              ))}
+          </select>
+        </div>
+        <div className="form-group">
+          <label htmlFor="activo">Activo:<span className="required">*</span></label>
+          <select
+            id="activo"
+            value={activo}
+            onChange={(e) => setActivo(e.target.value)}
+            required
+          >
+            <option value="1">Si</option>
+            <option value="0">No</option>
+          </select>
+        </div>
+        <div className="form-group">
+          <label htmlFor="ubicacion">Ubicación:<span className="required">*</span></label>
+          <input
+            type="text"
+            id="ubicacion"
+            value={ubicacion}
+            onChange={(e) => setUbicacion(e.target.value)}
+            required
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="telefonoOficina">Teléfono de oficina:<span className="required">*</span></label>
+          <input
+            type="tel"
+            id="telefonoOficina"
+            value={tel_oficina}
+            onChange={(e) => setTelefonoOficina(e.target.value)}
+            required
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="extension">Extensión:<span className="required">*</span></label>
+          <input
+            type="text"
+            id="extension"
+            value={extension}
+            onChange={(e) => setExtension(e.target.value)}
+            required
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="telefonoPersonal">Teléfono personal:</label>
+          <input
+            type="tel"
+            id="telefonoPersonal"
+            value={tel_personal}
+            onChange={(e) => setTelefonoPersonal(e.target.value)}
+          />
+        </div>
+        <div className="form-group full-width">
+          <label htmlFor="fotografia">fotografia:</label>
+          <input
+            type="text"
+            id="fotografia"
+            value={fotografia}
+            onChange={(e) => setFotografia(e.target.value)}
+          />
+        </div>
+        <div className="form-group full-width">
+          <button type="submit" className="small-button">Guardar</button>
+        </div>
+      </form>
+
+      {showDialog && (
+        <div className="dialog-overlay">
+          <div className="dialog-box">
+            <p>Se ha creado un nuevo registro.</p>
+            <button onClick={() => setShowDialog(false)}>Cerrar</button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Formulario;
diff --git a/src/components/Formulario.js b/src/components/Formulario.js
index 94f9efd..5636608 100644
--- a/src/components/Formulario.js
+++ b/src/components/Formulario.js
@@ -1,26 +1,27 @@
 import React, { useState, useEffect } from 'react';
-import './Formulario.css'; // Importa el archivo de estilos del formulario
+import './FormEditProfesor.css'; // Importa el archivo de estilos del formulario
 
-const Formulario = () => {
-  const [id_usuario, setId_usuario] = useState('1');
-  const [nombre, setNombreCompleto] = useState('');
-  const [num_trabajador, setNum_trabajador] = useState('');
-  const [rfc, setRfc] = useState('');
-  const [homoclave, setHomoclave] = useState('');
-  const [correo_pcp, setCorreo_pcp] = useState('');
-  const [correo_per, setCorreoPersonal] = useState('');
-  const [ubicacion, setUbicacion] = useState('');
-  const [tel_oficina, setTelefonoOficina] = useState('');
-  const [extension, setExtension] = useState('');
-  const [tel_personal, setTelefonoPersonal] = useState('');
-  const [fotografia, setFotografia] = useState('');
-  const [id_adscripcion, setAdscripcion] = useState('');
-  const [id_categoria, setCategoria] = useState('');
-  const [id_edificio, setEdificio] = useState('');
-  const [activo, setActivo] = useState('1');
+const Formulario = ({ profesor }) => {
+  const [id_usuario, setId_usuario] = useState(profesor.id_usuario || '1');
+  const [nombre, setNombreCompleto] = useState(profesor.nombre || '');
+  const [num_trabajador, setNum_trabajador] = useState(profesor.num_trabajador || '');
+  const [rfc, setRfc] = useState(profesor.rfc || '');
+  const [homoclave, setHomoclave] = useState(profesor.homoclave || '');
+  const [correo_pcp, setCorreo_pcp] = useState(profesor.correo_pcp || '');
+  const [correo_per, setCorreoPersonal] = useState(profesor.correo_per || '');
+  const [ubicacion, setUbicacion] = useState(profesor.ubicacion || '');
+  const [tel_oficina, setTelefonoOficina] = useState(profesor.tel_oficina || '');
+  const [extension, setExtension] = useState(profesor.extension || '');
+  const [tel_personal, setTelefonoPersonal] = useState(profesor.tel_personal || '');
+  const [fotografia, setFotografia] = useState(profesor.fotografia || '');
+  const [id_adscripcion, setAdscripcion] = useState(profesor.id_adscripcion || '');
+  const [id_categoria, setCategoria] = useState(profesor.id_categoria || '');
+  const [id_edificio, setEdificio] = useState(profesor.id_edificio || '');
+  const [activo, setActivo] = useState(profesor.activo || '1');
   const [adscripciones, setAdscripciones] = useState([]);
   const [categorias, setCategorias] = useState([]);
   const [edificios, setEdificios] = useState([]);
+  const [showDialog, setShowDialog] = useState(false);
 
   useEffect(() => {
     fetch('http://localhost:3000/adscripcion')
@@ -62,7 +63,7 @@ const Formulario = () => {
     };
 
     fetch('http://localhost:3000/profesor', {
-      method: 'POST',
+      method: 'PUT', // Cambiar a 'POST' para crear un nuevo registro
       headers: {
         'Content-Type': 'application/json',
       },
@@ -72,6 +73,7 @@ const Formulario = () => {
     .then(data => {
       console.log(profesorData);
       console.log('Success:', data);
+      setShowDialog(true);
     })
     .catch((error) => {
       console.error('Error:', error);
@@ -245,9 +247,18 @@ const Formulario = () => {
           />
         </div>
         <div className="form-group full-width">
-          <button type="submit" className="small-button">Crear</button>
+          <button type="submit" className="small-button">Registrar</button>
         </div>
       </form>
+
+      {showDialog && (
+        <div className="dialog-overlay">
+          <div className="dialog-box">
+            <p>Se ha creado un nuevo registro.</p>
+            <button onClick={() => setShowDialog(false)}>Cerrar</button>
+          </div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/pages/CardEditProfesorPage.js b/src/pages/CardEditProfesorPage.js
new file mode 100644
index 0000000..60db74c
--- /dev/null
+++ b/src/pages/CardEditProfesorPage.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import CardEditProfesor from '../components/CardEditProfesor';
+
+const dummyProfesor = {
+  id: 1,
+  nombre: "Juan Pérez",
+  fotografia: "https://via.placeholder.com/150"
+};
+
+const CardEditProfesorPage = () => {
+  const handleDelete = (id) => {
+    alert(`Profesor con id ${id} eliminado`);
+  };
+
+  return (
+    <div className="main-content">
+      <CardEditProfesor 
+        profesor={dummyProfesor} 
+        edificioNombre="Edificio A"
+        onDelete={handleDelete} 
+      />
+    </div>
+  );
+};
+
+export default CardEditProfesorPage;
diff --git a/src/pages/FormEditProfesorPage.js b/src/pages/FormEditProfesorPage.js
new file mode 100644
index 0000000..9e8aadf
--- /dev/null
+++ b/src/pages/FormEditProfesorPage.js
@@ -0,0 +1,27 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import FormEditProfesor from '../components/FormEditProfesor';
+
+const FormEditProfesorPage = () => {
+  const { id } = useParams();
+  const [profesor, setProfesor] = useState(null);
+
+  useEffect(() => {
+    fetch(`http://localhost:3000/profesor/${id}`)
+      .then(response => response.json())
+      .then(data => setProfesor(data))
+      .catch(error => console.error('Error fetching profesor:', error));
+  }, [id]);
+
+  return (
+    <div>
+      {profesor ? (
+        <FormEditProfesor profesor={profesor} />
+      ) : (
+        <p>Cargando datos...</p>
+      )}
+    </div>
+  );
+};
+
+export default FormEditProfesorPage;