65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import axios from "axios";
|
|
import Cookies from "js-cookie";
|
|
import { envConfig } from "@/app/lib/config";
|
|
interface Periodo {
|
|
id_periodo: number;
|
|
semestre: string;
|
|
fecha_inicio_servicio: string;
|
|
fecha_fin_servicio: string;
|
|
}
|
|
|
|
export default function PeriodoPicker({
|
|
onChange,
|
|
}: {
|
|
onChange: (p1: Periodo | null, p2: Periodo | null) => void;
|
|
}) {
|
|
const [periodos, setPeriodos] = useState<Periodo[]>([]);
|
|
const [p1, setP1] = useState<number | null>(null);
|
|
const [p2, setP2] = useState<number | null>(null);
|
|
|
|
|
|
const token = Cookies.get("token");
|
|
const headers = { Authorization: `Bearer ${token}` };
|
|
|
|
useEffect(() => {
|
|
const fetchPeriodos = async () => {
|
|
const res = await axios.get(`${envConfig.apiUrl}/periodo`, { headers });
|
|
setPeriodos(res.data);
|
|
};
|
|
fetchPeriodos();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const periodo1 = periodos.find(p => p.id_periodo === p1) || null;
|
|
const periodo2 = periodos.find(p => p.id_periodo === p2) || null;
|
|
|
|
onChange(periodo1, periodo2);
|
|
}, [p1, p2]);
|
|
|
|
return (
|
|
<div className="flex gap-4">
|
|
{/* Periodo 1 */}
|
|
<select onChange={(e) => setP1(Number(e.target.value))}>
|
|
<option value="">Periodo 1</option>
|
|
{periodos.map(p => (
|
|
<option key={p.id_periodo} value={p.id_periodo}>
|
|
{p.semestre}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
{/* Periodo 2 */}
|
|
<select onChange={(e) => setP2(Number(e.target.value))}>
|
|
<option value="">Periodo 2</option>
|
|
{periodos.map(p => (
|
|
<option key={p.id_periodo} value={p.id_periodo}>
|
|
{p.semestre}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
);
|
|
} |