programasfinish

app/(private)/Programas/page.tsx

@@ -14,6 +14,8 @@ export default function Page() {
 
   const [programaSeleccionado, setProgramaSeleccionado] = useState("");
   const [programas, setProgramas] = useState<Programa[]>([]);
+  const [nombrePrograma, setNombrePrograma] = useState("");
+
 
   useEffect(() => {
     fetch("http://localhost:5000/programa/")
@@ -21,10 +23,43 @@ export default function Page() {
       .then((data) => setProgramas(data))
       .catch((error) => console.error("Error al cargar programas:", error));
   }, []);
+  const handleGuardar = async () => {
+  if (!programaSeleccionado) return;
+
+  await fetch(
+    `http://localhost:5000/programa/${programaSeleccionado}`,
+    {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        programa: nombrePrograma,
+      }),
+    }
+  );
+
+
+  const res = await fetch("http://localhost:5000/programa/");
+  const data = await res.json();
+  setProgramas(data);
+
+  setModo("ver");
+};
 
   const handleNuevo = () => setModo("nuevo");
-  const handleEditar = () => setModo("editar");
+  
   const handleCancelar = () => setModo("ver");
+  const handleEditar = () => {
+  const programa = programas.find(
+    (p) => p.id_programa === Number(programaSeleccionado)
+  );
+
+  if (programa) {
+    setNombrePrograma(programa.programa);
+    setModo("editar");
+  }
+};
 
   return (
     <section className="containerSection">
@@ -33,9 +68,9 @@ export default function Page() {
       {modo === "ver" && (
         <section className="containersection">
           <h3 className="title">PROGRAMAS</h3>
-          <label className="label">ID: 2</label>
+          <label className="label">Programa para seleccionar y editar</label>
 
-          <h2>Programa</h2>
+          
 
           <select
             value={programaSeleccionado}
@@ -49,6 +84,7 @@ export default function Page() {
               </option>
             ))}
           </select>
+        
 
           <div className="margin">
             <button
@@ -57,6 +93,7 @@ export default function Page() {
             >
               Editar
             </button>
+            
 
             <button
               className={`button buttonSearch ${styleprograms.button}`}
@@ -72,20 +109,15 @@ export default function Page() {
       {modo === "editar" && (
         <section className="containersection">
           <h2 className="title">Editar Programa</h2>
-          <label className="label">ID: {programaSeleccionado}</label>
+          <label className="label"> {programaSeleccionado}</label>
 
-          <select
-            value={programaSeleccionado}
-            onChange={(e) => setProgramaSeleccionado(e.target.value)}
-          >
-            <option value="">Elige un programa</option>
-
-            {programas.map((programa) => (
-              <option key={programa.id_programa} value={programa.id_programa}>
-                {programa.programa}
-              </option>
-            ))}
-          </select>
+          
+          <input
+  type="text"
+  value={nombrePrograma}
+  onChange={(e) => setNombrePrograma(e.target.value)}
+  placeholder="Nombre del programa"
+/>
 
           <div className="margin">
             <button className="button buttonSearch">Guardar</button>