admin/PolyMPR
1
0
Fork 0
Code Issues 14 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

Select promotion in EditMobility

Browse Source
This commit is contained in:
Clayzxr
2025-01-27 13:41:55 +01:00
parent a50bfbe975
commit c9cb423ae2
1 changed files with 117 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
routes/(apps)/mobility/(_islands)/EditMobility.tsx
+116 -83
View File
@@ -3,10 +3,12 @@ import { useEffect, useState } from "preact/hooks";
export default function EditMobility() { export default function EditMobility() {
const [mobilityData, setMobilityData] = useState<MobilityData[]>([]); const [mobilityData, setMobilityData] = useState<MobilityData[]>([]);
const [promotions, setPromotions] = useState<Promotion[]>([]); const [promotions, setPromotions] = useState<Promotion[]>([]);
const [selectedPromotion, setSelectedPromotion] = useState<number | "all">("all");
const [isSaving, setIsSaving] = useState(false); const [isSaving, setIsSaving] = useState(false);
useEffect(() => { useEffect(() => {
async function fetchMobilityData() { async function fetchMobilityData() {
console.log("EditMobility: Fetching data from API...");
const response = await fetch("/mobility/api/insert-mobility"); const response = await fetch("/mobility/api/insert-mobility");
const data = await response.json(); const data = await response.json();
console.log("EditMobility: Data fetched successfully:", data); console.log("EditMobility: Data fetched successfully:", data);
@@ -52,7 +54,9 @@ export default function EditMobility() {
const handleSave = async () => { const handleSave = async () => {
setIsSaving(true); setIsSaving(true);
try { try {
console.log("EditMobility: Sending data to API...");
const response = await fetch("/mobility/api/insert-mobility", { const response = await fetch("/mobility/api/insert-mobility", {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
@@ -74,100 +78,129 @@ export default function EditMobility() {
} }
}; };
const filteredData =
selectedPromotion === "all"
? mobilityData
: mobilityData.filter((entry) => entry.promotionId === selectedPromotion);
const groupedData = promotions.map((promo) => ({ const groupedData = promotions.map((promo) => ({
promotion: promo.name, promotion: promo.name,
students: mobilityData.filter( students: filteredData.filter((entry) => entry.promotionId === promo.id),
(entry) => entry.promotionId === promo.id
),
})); }));
return ( return (
<div> <div>
<h2>Edit Mobility</h2> <h2>Edit Mobility</h2>
<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>
{groupedData.map((group) => ( {groupedData.map((group) => (
<div key={group.promotion}> <div key={group.promotion}>
<h3>Promotion: {group.promotion}</h3> {group.students.length > 0 && (
<table> <>
<thead> <h3>Promotion: {group.promotion}</h3>
<tr> <table>
<th>ID</th> <thead>
<th>First Name</th> <tr>
<th>Last Name</th> <th>ID</th>
<th>Start Date</th> <th>First Name</th>
<th>End Date</th> <th>Last Name</th>
<th>Weeks Count</th> <th>Start Date</th>
<th>Destination Country</th> <th>End Date</th>
<th>Destination Name</th> <th>Weeks Count</th>
<th>Status</th> <th>Destination Country</th>
</tr> <th>Destination Name</th>
</thead> <th>Status</th>
<tbody> </tr>
{group.students.map((entry) => ( </thead>
<tr key={entry.studentId}> <tbody>
<td>{entry.studentId}</td> {group.students.map((entry) => (
<td>{entry.firstName}</td> <tr key={entry.studentId}>
<td>{entry.lastName}</td> <td>{entry.studentId}</td>
<td> <td>{entry.firstName}</td>
<input <td>{entry.lastName}</td>
type="date" <td>
value={entry.startDate || ""} <input
onChange={(e) => type="date"
handleChange(entry.studentId, "startDate", e.target.value) value={entry.startDate || ""}
} onChange={(e) =>
/> handleChange(entry.studentId, "startDate", e.target.value)
</td> }
<td> />
<input </td>
type="date" <td>
value={entry.endDate || ""} <input
onChange={(e) => type="date"
handleChange(entry.studentId, "endDate", e.target.value) value={entry.endDate || ""}
} onChange={(e) =>
/> handleChange(entry.studentId, "endDate", e.target.value)
</td> }
<td>{entry.weeksCount || "0"}</td> />
<td> </td>
<input <td>{entry.weeksCount || "N/A"}</td>
type="text" <td>
value={entry.destinationCountry || ""} <input
onChange={(e) => type="text"
handleChange( value={entry.destinationCountry || ""}
entry.studentId, onChange={(e) =>
"destinationCountry", handleChange(
e.target.value entry.studentId,
) "destinationCountry",
} e.target.value
/> )
</td> }
<td> />
<input </td>
type="text" <td>
value={entry.destinationName || ""} <input
onChange={(e) => type="text"
handleChange(entry.studentId, "destinationName", e.target.value) value={entry.destinationName || ""}
} onChange={(e) =>
/> handleChange(entry.studentId, "destinationName", e.target.value)
</td> }
<td> />
<select </td>
value={entry.mobilityStatus} <td>
onChange={(e) => <select
handleChange(entry.studentId, "mobilityStatus", e.target.value) value={entry.mobilityStatus}
} onChange={(e) =>
> handleChange(entry.studentId, "mobilityStatus", e.target.value)
<option value="N/A">N/A</option> }
<option value="Planned">Planned</option> >
<option value="In Progress">In Progress</option> <option value="N/A">N/A</option>
<option value="Completed">Completed</option> <option value="Planned">Planned</option>
<option value="Validated">Validated</option> <option value="In Progress">In Progress</option>
</select> <option value="Completed">Completed</option>
</td> <option value="Validated">Validated</option>
</tr> </select>
))} </td>
</tbody> </tr>
</table> ))}
</tbody>
</table>
</>
)}
</div> </div>
))} ))}
<button onClick={handleSave} disabled={isSaving}> <button onClick={handleSave} disabled={isSaving}>
{isSaving ? "Saving..." : "Confirm"} {isSaving ? "Saving..." : "Confirm"}
</button> </button>