Merge branch 'Carlos' of repositorio.acatlan.unam.mx:IO/front-AT
This commit is contained in:
@@ -0,0 +1,229 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import axios from "axios";
|
||||
import Cookies from "js-cookie";
|
||||
|
||||
interface Periodo {
|
||||
id_periodo: number;
|
||||
semestre: string;
|
||||
fecha_inicio_servicio: string;
|
||||
fecha_fin_servicio: string;
|
||||
activo: boolean;
|
||||
}
|
||||
|
||||
export default function PeriodoPage() {
|
||||
|
||||
const [periodos, setPeriodos] = useState<Periodo[]>([]);
|
||||
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:5000/periodo";
|
||||
|
||||
const token = Cookies.get("token");
|
||||
const headers = { Authorization: `Bearer ${token}` };
|
||||
|
||||
const obtenerPeriodos = async () => {
|
||||
try {
|
||||
const res = await axios.get(API, { headers });
|
||||
setPeriodos(res.data);
|
||||
} catch (error) {
|
||||
console.error("Error al obtener periodos", error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
obtenerPeriodos();
|
||||
}, []);
|
||||
|
||||
// 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,
|
||||
{
|
||||
semestre,
|
||||
fecha_inicio_servicio: fechaInicio,
|
||||
fecha_fin_servicio: fechaFin,
|
||||
activo: true,
|
||||
},
|
||||
{ headers }
|
||||
);
|
||||
|
||||
limpiarFormulario();
|
||||
obtenerPeriodos();
|
||||
} catch (error) {
|
||||
console.error("Error al crear periodo", error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const eliminarPeriodo = async (id_periodo: number) => {
|
||||
try {
|
||||
await axios.delete(`${API}/${id_periodo}`, { headers });
|
||||
obtenerPeriodos();
|
||||
} catch (error) {
|
||||
console.error("Error al eliminar periodo", error);
|
||||
}
|
||||
};
|
||||
|
||||
const cargarPeriodo = (p: Periodo) => {
|
||||
setModoEdicion(true);
|
||||
setIdEditar(p.id_periodo);
|
||||
setSemestre(p.semestre);
|
||||
setFechaInicio(p.fecha_inicio_servicio);
|
||||
setFechaFin(p.fecha_fin_servicio);
|
||||
};
|
||||
|
||||
|
||||
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="Periodo (6 dígitos)"
|
||||
value={semestre}
|
||||
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)}
|
||||
/>
|
||||
|
||||
{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>
|
||||
|
||||
{/* ================= 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>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
+4
-1
@@ -268,10 +268,13 @@ button:disabled {
|
||||
background-color: #2563eb;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.buttonSearch:hover {
|
||||
background-color: #1d4ed8;
|
||||
}
|
||||
|
||||
|
||||
.buttonCharge {
|
||||
background-color: #16a34a;
|
||||
}
|
||||
@@ -493,7 +496,7 @@ thead tr {
|
||||
background-color: #2563eb;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
|
||||
Generated
+18
@@ -693,6 +693,7 @@
|
||||
"version": "2.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
|
||||
"integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
@@ -732,6 +733,7 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -752,6 +754,7 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -772,6 +775,7 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -792,6 +796,7 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -812,6 +817,7 @@
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -832,6 +838,7 @@
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -852,6 +859,7 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -872,6 +880,7 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -892,6 +901,7 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -912,6 +922,7 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -932,6 +943,7 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -952,6 +964,7 @@
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -972,6 +985,7 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -1841,6 +1855,7 @@
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"engines": {
|
||||
@@ -1851,6 +1866,7 @@
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
|
||||
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
@@ -2200,6 +2216,7 @@
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
|
||||
"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true
|
||||
},
|
||||
@@ -2246,6 +2263,7 @@
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"engines": {
|
||||
|
||||
@@ -41,6 +41,7 @@ export async function proxy(request: NextRequest) {
|
||||
"/AsignacionEquipo",
|
||||
"/Monitor",
|
||||
"/ActivosMantenimiento",
|
||||
"/Periodo",
|
||||
];
|
||||
|
||||
if (role === 5 && !onlyImpresiones.includes(pathname)) {
|
||||
@@ -66,6 +67,7 @@ export const config = {
|
||||
matcher: [
|
||||
"/",
|
||||
"/Reportes",
|
||||
"/Periodo",
|
||||
"/Monitor",
|
||||
"/QuitarSancion",
|
||||
"/Programas",
|
||||
|
||||
Reference in New Issue
Block a user