PeriodoPage

app/(private)/Periodo/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from "react";
 import axios from "axios";
+import Cookies from "js-cookie";
 
 interface Periodo {
   id_periodo: number;
@@ -17,20 +18,17 @@ export default function PeriodoPage() {
   const [semestre, setSemestre] = useState("");
   const [fechaInicio, setFechaInicio] = useState("");
   const [fechaFin, setFechaFin] = useState("");
+  const [modoEdicion, setModoEdicion] = useState(false);
+  const [idEditar, setIdEditar] = useState<number | null>(null);
 
-  const API = "http://localhost:3000/periodo"; // NO CAMBIO RUTA
+  const API = "http://localhost:5000/periodo";
 
-  
-  const config = {
-    headers: {
-      Authorization: `Bearer ${localStorage.getItem("token")}`,
-    },
-  };
+  const token = Cookies.get("token");
+  const headers = { Authorization: `Bearer ${token}` };
 
- 
   const obtenerPeriodos = async () => {
     try {
-      const res = await axios.get(API, config);
+      const res = await axios.get(API, { headers });
       setPeriodos(res.data);
     } catch (error) {
       console.error("Error al obtener periodos", error);
@@ -41,9 +39,22 @@ export default function PeriodoPage() {
     obtenerPeriodos();
   }, []);
 
-  // CREAR PERIODO
- 
+  // VALIDAR SEMESTRE 
+  const handleSemestreChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const valor = e.target.value;
+
+   
+    if (/^\d{0,6}$/.test(valor)) {
+      setSemestre(valor);
+    }
+  };
+
   const crearPeriodo = async () => {
+    if (semestre.length !== 6) {
+      alert("El semestre debe tener exactamente 6 dígitos.");
+      return;
+    }
+
     try {
       await axios.post(
         API,
@@ -53,95 +64,166 @@ export default function PeriodoPage() {
           fecha_fin_servicio: fechaFin,
           activo: true,
         },
-        config
+        { headers }
       );
 
-      setSemestre("");
-      setFechaInicio("");
-      setFechaFin("");
-
+      limpiarFormulario();
       obtenerPeriodos();
     } catch (error) {
       console.error("Error al crear periodo", error);
     }
   };
 
-  // ELIMINAR PERIODO
- 
+
   const eliminarPeriodo = async (id_periodo: number) => {
     try {
-      await axios.delete(`${API}/${id_periodo}`, config);
+      await axios.delete(`${API}/${id_periodo}`, { headers });
       obtenerPeriodos();
     } catch (error) {
       console.error("Error al eliminar periodo", error);
     }
   };
 
-  return (
-    <div style={{ padding: "40px" }}>
-      <h1 style={{ color: "#0c035c" }}>PERIODO ESCOLAR</h1>
+  const cargarPeriodo = (p: Periodo) => {
+    setModoEdicion(true);
+    setIdEditar(p.id_periodo);
+    setSemestre(p.semestre);
+    setFechaInicio(p.fecha_inicio_servicio);
+    setFechaFin(p.fecha_fin_servicio);
+  };
 
-      {/* ================= CREAR ================= */}
-      <div style={{ marginBottom: "20px" }}>
+ 
+  const modificarPeriodo = async () => {
+    if (semestre.length !== 6) {
+      alert("El semestre debe tener exactamente 6 dígitos.");
+      return;
+    }
+
+    try {
+      await axios.put(
+        `${API}/${idEditar}`,
+        {
+          semestre,
+          fecha_inicio_servicio: fechaInicio,
+          fecha_fin_servicio: fechaFin,
+        },
+        { headers }
+      );
+
+      limpiarFormulario();
+      obtenerPeriodos();
+    } catch (error) {
+      console.error("Error al modificar periodo", error);
+    }
+  };
+
+  const limpiarFormulario = () => {
+    setSemestre("");
+    setFechaInicio("");
+    setFechaFin("");
+    setModoEdicion(false);
+    setIdEditar(null);
+  };
+
+  return (
+    <div>
+      <h1 style={{ color: "rgb(3, 1, 72)" }}>PERIODO ESCOLAR</h1>
+
+      {/* ================= FORMULARIO ================= */}
+      <div style={{ marginBottom: "10px" }}>
         <input
           type="text"
-          placeholder="Semestre (6 caracteres)"
+          placeholder="Periodo (6 dígitos)"
           value={semestre}
-          onChange={(e) => setSemestre(e.target.value)}
+          maxLength={6}
+          onChange={handleSemestreChange}
         />
 
+        <label style={{ color: "rgb(3, 1, 72)" }}>
+          Elige la fecha de inicio de Periodo
+        </label>
         <input
           type="date"
           value={fechaInicio}
           onChange={(e) => setFechaInicio(e.target.value)}
         />
 
+        <label style={{ color: "rgb(3, 1, 72)" }}>
+          Elige la fecha de fin de Periodo
+        </label>
         <input
           type="date"
           value={fechaFin}
           onChange={(e) => setFechaFin(e.target.value)}
         />
 
-        <button
-          className="button buttonSearch"
-          onClick={crearPeriodo}
-        >
-          Crear Periodo
-        </button>
+        {modoEdicion ? (
+          <>
+            <button
+              className="button buttonSearch"
+              onClick={modificarPeriodo}
+            >
+              Guardar Cambios
+            </button>
+
+            <button
+              className="button buttonCancel"
+              onClick={limpiarFormulario}
+            >
+              Cancelar
+            </button>
+          </>
+        ) : (
+          <button
+            className="button buttonSearch"
+            onClick={crearPeriodo}
+          >
+            Crear Periodo
+          </button>
+        )}
       </div>
 
-      {/* ================= LISTADO ================= */}
-      <table border={1} cellPadding={8}>
-        <thead>
-          <tr>
-            <th>ID</th>
-            <th>Semestre</th>
-            <th>Inicio</th>
-            <th>Fin</th>
-            <th>Activo</th>
-            <th>Acción</th>
-          </tr>
-        </thead>
-        <tbody>
-          {periodos.map((p) => (
-            <tr key={p.id_periodo}>
-              <td>{p.id_periodo}</td>
-              <td>{p.semestre}</td>
-              <td>{p.fecha_inicio_servicio}</td>
-              <td>{p.fecha_fin_servicio}</td>
-              <td>{p.activo ? "Sí" : "No"}</td>
-              <td>
-                <button
-                  className="button buttonCancel"
-                  onClick={() => eliminarPeriodo(p.id_periodo)}
-                >
-                  Borrar Periodo
-                </button>
-              </td>
+      {/* ================= TABLA ================= */}
+      <div style={{ overflow: "auto", maxHeight: "350px" }}>
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>PERIODO</th>
+              <th>Inicio</th>
+              <th>Fin</th>
+              <th>Activo</th>
+              <th>Acción</th>
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            {periodos.map((p) => (
+              <tr key={p.id_periodo}>
+                <td>{p.id_periodo}</td>
+                <td>{p.semestre}</td>
+                <td>{p.fecha_inicio_servicio}</td>
+                <td>{p.fecha_fin_servicio}</td>
+               <td>{p.activo === true ? "Sí" : "No"}</td>
+                <td>
+                  <button
+                    className="button buttonSearch"
+                    onClick={() => cargarPeriodo(p)}
+                  >
+                    Modificar
+                  </button>
+
+                  <button
+                    className="button buttonCancel"
+                    onClick={() => eliminarPeriodo(p.id_periodo)}
+                  >
+                    Borrar
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 }