Roostermaker: vak opdelen in subgroepen vanuit blok-bewerkpaneel

This commit is contained in:
bes-r 2026-06-14 15:08:12 +02:00
parent 5adddb03c1
commit d5c3778a32

View file

@ -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">