Clayzxr
127 lines
4.4 KiB
TypeScript
127 lines
4.4 KiB
TypeScript
import { useEffect, useState } from "preact/hooks";
|
|
|
|
export default function ConsultMobility() {
|
|
const [mobilityData, setMobilityData] = useState<MobilityData[]>([]);
|
|
const [promotions, setPromotions] = useState<Promotion[]>([]);
|
|
const [selectedPromotion, setSelectedPromotion] = useState<number | "all">("all");
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
console.log("ConsultMobility: Fetching data from API...");
|
|
const response = await fetch("/mobility/api/insert-mobility");
|
|
if (!response.ok) {
|
|
throw new Error(`Error fetching data: ${response.statusText}`);
|
|
}
|
|
|
|
const result = await response.json();
|
|
console.log("ConsultMobility: Data fetched successfully:", result);
|
|
|
|
setPromotions(result.promotions);
|
|
|
|
const mergedData = result.students.map((student: any) => {
|
|
const existingMobility = result.mobilities.find(
|
|
(mobility: any) => mobility.studentId === student.id
|
|
);
|
|
return {
|
|
id: existingMobility ? existingMobility.id : null,
|
|
studentId: student.id,
|
|
firstName: student.firstName,
|
|
lastName: student.lastName,
|
|
startDate: existingMobility?.startDate || null,
|
|
endDate: existingMobility?.endDate || null,
|
|
weeksCount: existingMobility?.weeksCount || null,
|
|
destinationCountry: existingMobility?.destinationCountry || null,
|
|
destinationName: existingMobility?.destinationName || null,
|
|
mobilityStatus: existingMobility?.mobilityStatus || "N/A",
|
|
promotionId: student.promotionId,
|
|
promotionName: student.promotionName,
|
|
};
|
|
});
|
|
|
|
setMobilityData(mergedData);
|
|
} catch (err) {
|
|
console.error("ConsultMobility: Error fetching data:", err);
|
|
setError("Failed to load data. Please try again later.");
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, []);
|
|
|
|
const filteredData =
|
|
selectedPromotion === "all"
|
|
? mobilityData
|
|
: mobilityData.filter((entry) => entry.promotionId === selectedPromotion);
|
|
|
|
return (
|
|
<section>
|
|
<h2>Consult Mobility</h2>
|
|
{error && <p className="error">{error}</p>}
|
|
|
|
<div>
|
|
<label htmlFor="promotionSelect">Select Promotion: </label>
|
|
<select
|
|
id="promotionSelect"
|
|
value={selectedPromotion}
|
|
onChange={(e) =>
|
|
setSelectedPromotion(
|
|
e.target.value === "all" ? "all" : Number(e.target.value)
|
|
)
|
|
}
|
|
>
|
|
<option value="all">All Promotions</option>
|
|
{promotions.map((promo) => (
|
|
<option key={promo.id} value={promo.id}>
|
|
{promo.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{promotions.map((promo) => (
|
|
<div key={promo.id}>
|
|
{selectedPromotion === "all" || selectedPromotion === promo.id ? (
|
|
<>
|
|
<h3>Promotion: {promo.name}</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>First Name</th>
|
|
<th>Last Name</th>
|
|
<th>Start Date</th>
|
|
<th>End Date</th>
|
|
<th>Weeks Count</th>
|
|
<th>Destination Country</th>
|
|
<th>Destination Name</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filteredData
|
|
.filter((entry) => entry.promotionId === promo.id)
|
|
.map((entry) => (
|
|
<tr key={entry.studentId}>
|
|
<td>{entry.studentId}</td>
|
|
<td>{entry.firstName}</td>
|
|
<td>{entry.lastName}</td>
|
|
<td>{entry.startDate || "N/A"}</td>
|
|
<td>{entry.endDate || "N/A"}</td>
|
|
<td>{entry.weeksCount || "0"}</td>
|
|
<td>{entry.destinationCountry || "N/A"}</td>
|
|
<td>{entry.destinationName || "N/A"}</td>
|
|
<td>{entry.mobilityStatus}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
))}
|
|
</section>
|
|
);
|
|
}
|