Select promotion in EditMobility

routes/(apps)/mobility/(_islands)/EditMobility.tsx

@@ -3,10 +3,12 @@ import { useEffect, useState } from "preact/hooks";
 export default function EditMobility() {
   const [mobilityData, setMobilityData] = useState<MobilityData[]>([]);
   const [promotions, setPromotions] = useState<Promotion[]>([]);
+  const [selectedPromotion, setSelectedPromotion] = useState<number | "all">("all");
   const [isSaving, setIsSaving] = useState(false);
 
   useEffect(() => {
     async function fetchMobilityData() {
+      console.log("EditMobility: Fetching data from API...");
       const response = await fetch("/mobility/api/insert-mobility");
       const data = await response.json();
       console.log("EditMobility: Data fetched successfully:", data);
@@ -52,7 +54,9 @@ export default function EditMobility() {
 
   const handleSave = async () => {
     setIsSaving(true);
+
     try {
+      console.log("EditMobility: Sending data to API...");
       const response = await fetch("/mobility/api/insert-mobility", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -74,18 +78,44 @@ export default function EditMobility() {
     }
   };
 
+  const filteredData =
+    selectedPromotion === "all"
+      ? mobilityData
+      : mobilityData.filter((entry) => entry.promotionId === selectedPromotion);
+
   const groupedData = promotions.map((promo) => ({
     promotion: promo.name,
-    students: mobilityData.filter(
+    students: filteredData.filter((entry) => entry.promotionId === promo.id),
-      (entry) => entry.promotionId === promo.id
-    ),
   }));
 
   return (
     <div>
       <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) => (
         <div key={group.promotion}>
+          {group.students.length > 0 && (
+            <>
               <h3>Promotion: {group.promotion}</h3>
               <table>
                 <thead>
@@ -125,7 +155,7 @@ export default function EditMobility() {
                           }
                         />
                       </td>
-                  <td>{entry.weeksCount || "0"}</td>
+                      <td>{entry.weeksCount || "N/A"}</td>
                       <td>
                         <input
                           type="text"
@@ -166,8 +196,11 @@ export default function EditMobility() {
                   ))}
                 </tbody>
               </table>
+            </>
+          )}
         </div>
       ))}
+
       <button onClick={handleSave} disabled={isSaving}>
         {isSaving ? "Saving..." : "Confirm"}
       </button>