Roostermaker: vak opdelen in subgroepen vanuit blok-bewerkpaneel

frontend/src/pages.jsx

@@ -1250,7 +1250,12 @@ function BlokBewerker({ blok, ctx, onSluit, onKlaar }) {
   const [error, setError] = useState(null);
   const [subs, setSubs] = useState(subgroepen);
   const [nieuweSub, setNieuweSub] = useState("");
+  const [splitSubs, setSplitSubs] = useState([]);
+  const [splitNieuw, setSplitNieuw] = useState("");
+  const [verwijderOrig, setVerwijderOrig] = useState(true);
   const doelOpties = f.doel_type === "groep" ? groepen : f.doel_type === "subgroep" ? subs : leerlingen;
+  // Groep waaronder nieuwe split-subgroepen vallen: de groep van het blok zelf.
+  const splitGroep = blok.groep || null;
 
   async function maakSubgroep() {
     if (!nieuweSub.trim()) return;
@@ -1261,6 +1266,26 @@ function BlokBewerker({ blok, ctx, onSluit, onKlaar }) {
       setNieuweSub("");
     } catch (e) { setError(e.message); }
   }
+  const toggleSplit = (id) => setSplitSubs((d) => d.includes(id) ? d.filter((x) => x !== id) : [...d, id]);
+  async function maakSplitSub() {
+    if (!splitNieuw.trim()) return;
+    try {
+      const s = await createResource("subgroepen", { naam: splitNieuw.trim(), groep: splitGroep });
+      setSubs([...subs, s]);
+      setSplitSubs([...splitSubs, s.id]);
+      setSplitNieuw("");
+    } catch (e) { setError(e.message); }
+  }
+  async function opdelen() {
+    if (splitSubs.length === 0) return;
+    try {
+      for (const sid of splitSubs) {
+        await createResource("roosterblokken", { schooljaar: blok.schooljaar, tijdslot: blok.tijdslot, activiteit: f.activiteit, locatie: f.locatie || null, subgroep: sid, begeleiders: f.begeleiders, opmerkingen: f.opmerkingen });
+      }
+      if (verwijderOrig) await deleteResource("roosterblokken", blok.id);
+      await onKlaar();
+    } catch (e) { setError(e.message); }
+  }
   const toggleBeg = (id) => setF((s) => s.begeleiders.includes(id) ? { ...s, begeleiders: s.begeleiders.filter((x) => x !== id) } : { ...s, begeleiders: [...s.begeleiders, id] });
   const toggleKopie = (id) => setKopieDoelen((d) => d.includes(id) ? d.filter((x) => x !== id) : [...d, id]);
   const doelPayload = () => ({
@@ -1326,6 +1351,21 @@ function BlokBewerker({ blok, ctx, onSluit, onKlaar }) {
           <button className="btn primary" onClick={opslaan}>Opslaan</button>
           <button className="btn" onClick={verwijderen}>Verwijderen</button>
         </div>
+        <hr className="modal-hr" />
+        <div className="muted small">Dit vak opdelen in subgroepen (zelfde tijd):</div>
+        <div className="chips">
+          {subs.map((s) => <button type="button" key={s.id} className={splitSubs.includes(s.id) ? "chip on" : "chip"} onClick={() => toggleSplit(s.id)}>{s.naam}</button>)}
+          {subs.length === 0 && <span className="muted small">Nog geen subgroepen.</span>}
+        </div>
+        <div className="form-row">
+          <input placeholder="Nieuwe subgroep" value={splitNieuw} onChange={(e) => setSplitNieuw(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); maakSplitSub(); } }} />
+          <button type="button" className="btn" onClick={maakSplitSub}>+ Subgroep</button>
+        </div>
+        <label className="veld"><input type="checkbox" checked={verwijderOrig} onChange={(e) => setVerwijderOrig(e.target.checked)} /> oorspronkelijke blok verwijderen na opdelen</label>
+        <div className="form-row">
+          <button className="btn primary" disabled={splitSubs.length === 0} onClick={opdelen}>Opdelen in {splitSubs.length} subgroep(en)</button>
+        </div>
+
         <hr className="modal-hr" />
         <div className="muted small">Kopiëren naar andere tijden/dagen:</div>
         <div className="chips">