122 lines
3.4 KiB
TypeScript
122 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import styleprograms from "./programas.module.css";
|
|
import { envConfig } from "@/app/lib/config";
|
|
|
|
interface Programa {
|
|
id_programa: number;
|
|
programa: string;
|
|
}
|
|
|
|
export default function Page() {
|
|
const [modo, setModo] = useState("ver");
|
|
|
|
const [programaSeleccionado, setProgramaSeleccionado] = useState("");
|
|
const [programas, setProgramas] = useState<Programa[]>([]);
|
|
|
|
useEffect(() => {
|
|
fetch(`${envConfig.apiUrl}/programa/`)
|
|
.then((res) => res.json())
|
|
.then((data) => setProgramas(data))
|
|
.catch((error) => console.error("Error al cargar programas:", error));
|
|
}, []);
|
|
|
|
const handleNuevo = () => setModo("nuevo");
|
|
const handleEditar = () => setModo("editar");
|
|
const handleCancelar = () => setModo("ver");
|
|
|
|
return (
|
|
<section className="containerSection">
|
|
{}
|
|
{modo === "ver" && (
|
|
<section className="containersection">
|
|
<h3 className="title">PROGRAMAS</h3>
|
|
<label className="label">ID: 2</label>
|
|
|
|
<h2>Programa</h2>
|
|
|
|
<select
|
|
value={programaSeleccionado}
|
|
onChange={(e) => setProgramaSeleccionado(e.target.value)}
|
|
>
|
|
<option value="">Selecciona un programa</option>
|
|
|
|
{programas.map((programa) => (
|
|
<option key={programa.id_programa} value={programa.id_programa}>
|
|
{programa.programa}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
<div className="margin">
|
|
<button className="button buttonSearch" onClick={handleEditar}>
|
|
Editar
|
|
</button>
|
|
|
|
<button
|
|
className={`button buttonSearch ${styleprograms.button}`}
|
|
onClick={handleNuevo}
|
|
>
|
|
Nuevo
|
|
</button>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{}
|
|
{modo === "editar" && (
|
|
<section className="containersection">
|
|
<h2 className="title">Editar Programa</h2>
|
|
<label className="label">ID: {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>
|
|
|
|
<div className="margin">
|
|
<button className="button buttonSearch">Guardar</button>
|
|
|
|
<button
|
|
className={`button buttonCancel ${styleprograms.button}`}
|
|
onClick={handleCancelar}
|
|
>
|
|
Cancelar
|
|
</button>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{}
|
|
{modo === "nuevo" && (
|
|
<section className="containersection">
|
|
<h2 className="title">Nuevo Programa</h2>
|
|
|
|
<label className="label">Programa</label>
|
|
<input type="text" placeholder="Coloca el programa" />
|
|
|
|
<div className="margin">
|
|
<button className="button buttonSearch">Insertar</button>
|
|
|
|
<button
|
|
className={`button buttonCancel ${styleprograms.button}`}
|
|
onClick={handleCancelar}
|
|
>
|
|
Cancelar
|
|
</button>
|
|
</div>
|
|
</section>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|