2566 lines
124 KiB
JavaScript
2566 lines
124 KiB
JavaScript
import { useEffect, useRef, useState } from "react";
|
||
import {
|
||
listResource,
|
||
createResource,
|
||
updateResource,
|
||
deleteResource,
|
||
getModules,
|
||
getLokaalinstelling,
|
||
setLokaalinstelling,
|
||
} from "./api.js";
|
||
|
||
const ROLLEN = [
|
||
{ value: "leerling", label: "Leerling" },
|
||
{ value: "leerkracht", label: "Leerkracht" },
|
||
{ value: "praktijkondersteuner", label: "Praktijkondersteuner" },
|
||
{ value: "klassenondersteuner", label: "Klassenondersteuner" },
|
||
];
|
||
|
||
// Korte aanduiding van een medewerkersrol (compact in de roostervakjes).
|
||
const ROL_AFK = { leerkracht: "LK", praktijkondersteuner: "PO", klassenondersteuner: "KO" };
|
||
|
||
// Automatisch een passend icoon bij een vak/activiteit op basis van de naam.
|
||
const VAK_ICONEN = [
|
||
[/reken|wiskund|getal/i, "🔢"],
|
||
[/taal|lees|spell|begrijpend|nederlands|woordenschat/i, "📖"],
|
||
[/engels|frans|duits|spaans/i, "🗣️"],
|
||
[/gym|beweg|sport|zwem|motoriek/i, "🤸"],
|
||
[/muziek|zang/i, "🎵"],
|
||
[/teken|kunst|knutsel|creatief|handvaardig|drama/i, "🎨"],
|
||
[/pauze|speel|buiten/i, "☕"],
|
||
[/eten|lunch|fruit/i, "🍎"],
|
||
[/natuur|biolog|wereld|aardrijk|geschied/i, "🌍"],
|
||
[/koken|huishoud/i, "🍳"],
|
||
[/techniek|bouw|hout/i, "🔧"],
|
||
[/computer|digit|ict|programmeer|media/i, "💻"],
|
||
[/therap|logop|fysio|sova|sociale|gedrag/i, "💬"],
|
||
[/stage|werk|prakt/i, "🧑🏭"],
|
||
[/kring|start|dag|inloop/i, "⭕"],
|
||
];
|
||
function vakIcoon(naam) {
|
||
if (!naam) return "📚";
|
||
for (const [re, icon] of VAK_ICONEN) if (re.test(naam)) return icon;
|
||
return "📚";
|
||
}
|
||
const BOVENGROEP_LABEL = "Bovenliggende groep";
|
||
const BOVENGROEP_LABEL_LC = "bovenliggende groep";
|
||
const BOVENGROEP_LABEL_MV = "Bovenliggende groepen";
|
||
|
||
const WEEKDAGEN = [
|
||
{ value: 0, label: "Maandag" },
|
||
{ value: 1, label: "Dinsdag" },
|
||
{ value: 2, label: "Woensdag" },
|
||
{ value: 3, label: "Donderdag" },
|
||
{ value: 4, label: "Vrijdag" },
|
||
];
|
||
|
||
const DAGTYPES = [
|
||
{ value: "studiedag", label: "Studiedag" },
|
||
{ value: "vrije_dag", label: "Vrije dag" },
|
||
{ value: "vakantie", label: "Vakantie" },
|
||
];
|
||
|
||
function useList(resource, query = "") {
|
||
const [items, setItems] = useState([]);
|
||
const [error, setError] = useState(null);
|
||
const [loading, setLoading] = useState(true);
|
||
async function reload() {
|
||
setLoading(true);
|
||
try {
|
||
setItems(await listResource(resource, query));
|
||
setError(null);
|
||
} catch (e) {
|
||
setError(e.message);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
useEffect(() => {
|
||
reload();
|
||
}, [resource, query]);
|
||
return { items, error, loading, reload, setError };
|
||
}
|
||
|
||
function Foutmelding({ msg }) {
|
||
if (!msg) return null;
|
||
return <div className="banner error">⚠ {msg}</div>;
|
||
}
|
||
|
||
/* ----------------------- Generieke eenvoudige catalogus ------------------- */
|
||
// Voor lijsten met alleen naam + omschrijving (Functies, Activiteiten, Locaties).
|
||
function CatalogusPage({ titel, uitleg, resource, kleur = false, telKolom, metTheorievak = false, metIcoon = false }) {
|
||
const { items, error, loading, reload, setError } = useList(resource);
|
||
const leeg = {
|
||
naam: "", omschrijving: "",
|
||
...(kleur ? { kleur: "#2563eb" } : {}),
|
||
...(metTheorievak ? { theorievak: false } : {}),
|
||
...(metIcoon ? { icoon: "" } : {}),
|
||
};
|
||
const [form, setForm] = useState(leeg);
|
||
const [editId, setEditId] = useState(null);
|
||
const kolommen = 3 + (telKolom ? 1 : 0) + (metTheorievak ? 1 : 0);
|
||
|
||
async function opslaan(e) {
|
||
e.preventDefault();
|
||
try {
|
||
if (editId) await updateResource(resource, editId, form);
|
||
else await createResource(resource, form);
|
||
setForm(leeg);
|
||
setEditId(null);
|
||
await reload();
|
||
} catch (err) {
|
||
setError(err.message);
|
||
}
|
||
}
|
||
async function verwijder(id) {
|
||
if (!confirm("Verwijderen?")) return;
|
||
try {
|
||
await deleteResource(resource, id);
|
||
await reload();
|
||
} catch (err) {
|
||
setError(err.message);
|
||
}
|
||
}
|
||
function bewerk(it) {
|
||
setEditId(it.id);
|
||
setForm({
|
||
naam: it.naam, omschrijving: it.omschrijving,
|
||
...(kleur ? { kleur: it.kleur } : {}),
|
||
...(metTheorievak ? { theorievak: it.theorievak } : {}),
|
||
...(metIcoon ? { icoon: it.icoon || "" } : {}),
|
||
});
|
||
}
|
||
|
||
return (
|
||
<section>
|
||
<h1>{titel}</h1>
|
||
{uitleg && <p className="muted">{uitleg}</p>}
|
||
<Foutmelding msg={error} />
|
||
<form className="form-row" onSubmit={opslaan}>
|
||
<input placeholder="Naam" value={form.naam} required onChange={(e) => setForm({ ...form, naam: e.target.value })} />
|
||
<input placeholder="Omschrijving (optioneel)" value={form.omschrijving} onChange={(e) => setForm({ ...form, omschrijving: e.target.value })} />
|
||
{kleur && (
|
||
<input type="color" value={form.kleur} title="Kleur" onChange={(e) => setForm({ ...form, kleur: e.target.value })} />
|
||
)}
|
||
{metIcoon && (
|
||
<input className="icoon-input" maxLength={4} placeholder="icoon" title="Optioneel emoji; leeg = automatisch" value={form.icoon || ""} onChange={(e) => setForm({ ...form, icoon: e.target.value })} />
|
||
)}
|
||
{metTheorievak && (
|
||
<label className="veld">
|
||
<input type="checkbox" checked={!!form.theorievak} onChange={(e) => setForm({ ...form, theorievak: e.target.checked })} />
|
||
theorievak
|
||
</label>
|
||
)}
|
||
<button className="btn primary" type="submit">{editId ? "Opslaan" : "Toevoegen"}</button>
|
||
{editId && (
|
||
<button type="button" className="btn" onClick={() => { setEditId(null); setForm(leeg); }}>Annuleren</button>
|
||
)}
|
||
</form>
|
||
{loading ? (
|
||
<p>Laden…</p>
|
||
) : (
|
||
<table className="grid">
|
||
<thead>
|
||
<tr>
|
||
<th>Naam</th>
|
||
<th>Omschrijving</th>
|
||
{metTheorievak && <th>Theorievak</th>}
|
||
{telKolom && <th>{telKolom}</th>}
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{items.map((it) => (
|
||
<tr key={it.id}>
|
||
<td>
|
||
{kleur && <span className="kleur-stip" style={{ background: it.kleur }} />}
|
||
{metIcoon && <span className="vak-icoon">{it.icoon || vakIcoon(it.naam)} </span>}
|
||
{it.naam}
|
||
</td>
|
||
<td className="muted">{it.omschrijving || "—"}</td>
|
||
{metTheorievak && <td>{it.theorievak ? "✓" : "—"}</td>}
|
||
{telKolom && <td>{it.aantal_personen ?? "—"}</td>}
|
||
<td className="row-actions">
|
||
<button className="link" onClick={() => bewerk(it)}>bewerken</button>
|
||
<button className="link danger" onClick={() => verwijder(it.id)}>verwijderen</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
{items.length === 0 && (
|
||
<tr><td colSpan={kolommen} className="muted">Nog niets.</td></tr>
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
export function FunctiesPage() {
|
||
return (
|
||
<CatalogusPage
|
||
titel="Functies"
|
||
uitleg="Beheer de functies die medewerkers kunnen hebben (bv. Directie, Logopedist). Medewerkers kunnen meerdere functies hebben."
|
||
resource="functies"
|
||
telKolom="Medewerkers"
|
||
/>
|
||
);
|
||
}
|
||
|
||
export function ActiviteitenPage() {
|
||
return (
|
||
<CatalogusPage
|
||
titel="Activiteiten / vakken"
|
||
uitleg="Wat er gedaan wordt: rekenen, gym, therapie, pauze … Elke activiteit heeft een kleur. Markeer theorievakken; die koppelen automatisch aan nieuwe leerkrachten."
|
||
resource="activiteiten"
|
||
kleur
|
||
metTheorievak
|
||
metIcoon
|
||
/>
|
||
);
|
||
}
|
||
|
||
export function LocatiesPage() {
|
||
return (
|
||
<CatalogusPage
|
||
titel="Locaties"
|
||
uitleg="Vrije locatie-labels (bijv. externe plekken). Voor lesruimtes met dubbele-boekingcheck: zie Lokalen."
|
||
resource="locaties"
|
||
/>
|
||
);
|
||
}
|
||
|
||
export function LokalenPage() {
|
||
const { items, error, loading, reload, setError } = useList("lokalen");
|
||
const leeg = { naam: "", omschrijving: "", capaciteit: "" };
|
||
const [form, setForm] = useState(leeg);
|
||
const [editId, setEditId] = useState(null);
|
||
const [blokkeren, setBlokkeren] = useState(false);
|
||
const [instError, setInstError] = useState(null);
|
||
|
||
useEffect(() => {
|
||
getLokaalinstelling().then((d) => setBlokkeren(!!d.dubbel_blokkeren)).catch(() => {});
|
||
}, []);
|
||
|
||
async function toggleBlokkeren(val) {
|
||
setBlokkeren(val);
|
||
try { await setLokaalinstelling({ dubbel_blokkeren: val }); setInstError(null); }
|
||
catch (err) { setInstError(err.message); setBlokkeren(!val); }
|
||
}
|
||
async function opslaan(e) {
|
||
e.preventDefault();
|
||
const payload = { naam: form.naam, omschrijving: form.omschrijving, capaciteit: form.capaciteit === "" ? null : Number(form.capaciteit) };
|
||
try {
|
||
if (editId) await updateResource("lokalen", editId, payload);
|
||
else await createResource("lokalen", payload);
|
||
setForm(leeg); setEditId(null); await reload();
|
||
} catch (err) { setError(err.message); }
|
||
}
|
||
async function verwijder(id) {
|
||
if (!confirm("Dit lokaal verwijderen?")) return;
|
||
try { await deleteResource("lokalen", id); await reload(); } catch (err) { setError(err.message); }
|
||
}
|
||
|
||
return (
|
||
<section>
|
||
<h1>Lokalen</h1>
|
||
<p className="muted">Lesruimtes die door lessen én interne stages gedeeld worden. Het systeem bewaakt dubbele boekingen per tijdslot.</p>
|
||
<Foutmelding msg={error} />
|
||
<Foutmelding msg={instError} />
|
||
<label className="veld" style={{ marginBottom: 12 }}>
|
||
<input type="checkbox" checked={blokkeren} onChange={(e) => toggleBlokkeren(e.target.checked)} />
|
||
{" "}Dubbele boeking hard blokkeren (anders alleen waarschuwen in het conflicten-overzicht)
|
||
</label>
|
||
<form className="form-card" onSubmit={opslaan}>
|
||
<div className="form-row">
|
||
<input placeholder="Naam" value={form.naam} required onChange={(e) => setForm({ ...form, naam: e.target.value })} />
|
||
<input placeholder="Omschrijving (optioneel)" value={form.omschrijving} onChange={(e) => setForm({ ...form, omschrijving: e.target.value })} />
|
||
<input type="number" min="1" placeholder="Capaciteit (optioneel)" value={form.capaciteit} onChange={(e) => setForm({ ...form, capaciteit: e.target.value })} />
|
||
<button className="btn primary" type="submit">{editId ? "Opslaan" : "Toevoegen"}</button>
|
||
{editId && <button type="button" className="btn" onClick={() => { setEditId(null); setForm(leeg); }}>Annuleren</button>}
|
||
</div>
|
||
</form>
|
||
{loading ? <p>Laden…</p> : (
|
||
<table className="grid">
|
||
<thead><tr><th>Naam</th><th>Capaciteit</th><th>Omschrijving</th><th></th></tr></thead>
|
||
<tbody>
|
||
{items.map((l) => (
|
||
<tr key={l.id}>
|
||
<td>{l.naam}</td>
|
||
<td className="muted">{l.capaciteit ?? "—"}</td>
|
||
<td className="muted">{l.omschrijving || "—"}</td>
|
||
<td className="row-actions">
|
||
<button className="link" onClick={() => { setEditId(l.id); setForm({ naam: l.naam, omschrijving: l.omschrijving || "", capaciteit: l.capaciteit ?? "" }); }}>bewerken</button>
|
||
<button className="link danger" onClick={() => verwijder(l.id)}>verwijderen</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
{items.length === 0 && <tr><td colSpan="4" className="muted">Nog geen lokalen.</td></tr>}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
/* --------------------------------- Groepen -------------------------------- */
|
||
export function GroepenPage() {
|
||
return <GroepsindelingPage />;
|
||
}
|
||
|
||
/* -------------------------------- Personen -------------------------------- */
|
||
const STAFF_ROLLEN = ROLLEN.filter((r) => r.value !== "leerling");
|
||
|
||
export function PersonenPage() {
|
||
const { items, error, loading, reload, setError } = useList("personen");
|
||
const [groepen, setGroepen] = useState([]);
|
||
const [functies, setFuncties] = useState([]);
|
||
const [vakken, setVakken] = useState([]);
|
||
const [subgroepen, setSubgroepen] = useState([]);
|
||
const [leerpleinen, setLeerpleinen] = useState([]);
|
||
// Twee losse flows: medewerker en leerling.
|
||
const [modus, setModus] = useState("leerling");
|
||
const leegMedewerker = { voornaam: "", achternaam: "", rol: "leerkracht", stamgroep: "", functies: [], vakken: [], begeleide_subgroepen: [], leerpleinen: [] };
|
||
const leegLeerling = { voornaam: "", achternaam: "", groep: "", geboortedatum: "" };
|
||
const [form, setForm] = useState(leegLeerling);
|
||
const [editId, setEditId] = useState(null);
|
||
const [filter, setFilter] = useState("");
|
||
const [nieuweFunctie, setNieuweFunctie] = useState("");
|
||
|
||
async function maakFunctie() {
|
||
const naam = nieuweFunctie.trim();
|
||
if (!naam) return;
|
||
try {
|
||
const f = await createResource("functies", { naam });
|
||
setFuncties((lijst) => [...lijst, f]);
|
||
setForm((prev) => ({ ...prev, functies: [...prev.functies, f.id] }));
|
||
setNieuweFunctie("");
|
||
} catch (e) { setError(e.message); }
|
||
}
|
||
|
||
function laadHulplijsten() {
|
||
listResource("groepen").then(setGroepen).catch(() => {});
|
||
listResource("functies").then(setFuncties).catch(() => {});
|
||
listResource("activiteiten").then(setVakken).catch(() => {});
|
||
listResource("subgroepen").then(setSubgroepen).catch(() => {});
|
||
listResource("leerpleinen").then(setLeerpleinen).catch(() => setLeerpleinen([]));
|
||
}
|
||
useEffect(() => { laadHulplijsten(); }, []);
|
||
|
||
// De bovenliggende-groep-koppeling loopt via de bestaande API.
|
||
async function syncLeerpleinen(persoonId, gekozenIds) {
|
||
const huidige = await listResource("leerpleinen").catch(() => []);
|
||
for (const lp of huidige) {
|
||
const inLijst = (lp.medewerkers || []).includes(persoonId);
|
||
const moet = gekozenIds.includes(lp.id);
|
||
if (moet && !inLijst) await updateResource("leerpleinen", lp.id, { medewerkers: [...lp.medewerkers, persoonId] });
|
||
else if (!moet && inLijst) await updateResource("leerpleinen", lp.id, { medewerkers: lp.medewerkers.filter((x) => x !== persoonId) });
|
||
}
|
||
listResource("leerpleinen").then(setLeerpleinen).catch(() => {});
|
||
}
|
||
|
||
function kiesModus(m) {
|
||
setModus(m);
|
||
setEditId(null);
|
||
setForm(m === "medewerker" ? leegMedewerker : leegLeerling);
|
||
}
|
||
function toggle(veld, id) {
|
||
setForm((f) => f[veld].includes(id) ? { ...f, [veld]: f[veld].filter((x) => x !== id) } : { ...f, [veld]: [...f[veld], id] });
|
||
}
|
||
|
||
async function opslaan(e) {
|
||
e.preventDefault();
|
||
const payload = modus === "medewerker"
|
||
? {
|
||
voornaam: form.voornaam, achternaam: form.achternaam, rol: form.rol,
|
||
stamgroep: form.stamgroep || null, functies: form.functies, vakken: form.vakken,
|
||
begeleide_subgroepen: form.begeleide_subgroepen,
|
||
}
|
||
: {
|
||
voornaam: form.voornaam, achternaam: form.achternaam, rol: "leerling",
|
||
groep: form.groep || null, geboortedatum: form.geboortedatum || null,
|
||
};
|
||
try {
|
||
const opgeslagen = editId
|
||
? await updateResource("personen", editId, payload)
|
||
: await createResource("personen", payload);
|
||
if (modus === "medewerker" && opgeslagen && opgeslagen.id) {
|
||
await syncLeerpleinen(opgeslagen.id, form.leerpleinen || []);
|
||
}
|
||
setForm(modus === "medewerker" ? leegMedewerker : leegLeerling);
|
||
setEditId(null);
|
||
await reload();
|
||
} catch (err) {
|
||
setError(err.message);
|
||
}
|
||
}
|
||
async function verwijder(id) {
|
||
if (!confirm("Deze persoon verwijderen?")) return;
|
||
try { await deleteResource("personen", id); await reload(); } catch (err) { setError(err.message); }
|
||
}
|
||
function bewerk(p) {
|
||
setEditId(p.id);
|
||
if (p.rol === "leerling") {
|
||
setModus("leerling");
|
||
setForm({ voornaam: p.voornaam, achternaam: p.achternaam, groep: p.groep || "", geboortedatum: p.geboortedatum || "" });
|
||
} else {
|
||
setModus("medewerker");
|
||
setForm({
|
||
voornaam: p.voornaam, achternaam: p.achternaam, rol: p.rol,
|
||
stamgroep: p.stamgroep || "",
|
||
functies: p.functies_namen.map((x) => x.id),
|
||
vakken: p.vakken_namen.map((x) => x.id),
|
||
begeleide_subgroepen: (p.begeleide_subgroepen_namen || []).map((x) => x.id),
|
||
leerpleinen: leerpleinen.filter((lp) => (lp.medewerkers || []).includes(p.id)).map((lp) => lp.id),
|
||
});
|
||
}
|
||
}
|
||
|
||
const zichtbaar = filter === "leerling" ? items.filter((p) => p.rol === "leerling")
|
||
: filter === "medewerker" ? items.filter((p) => p.rol !== "leerling")
|
||
: items;
|
||
|
||
return (
|
||
<section>
|
||
<h1>Personen</h1>
|
||
<p className="muted">Personeel en leerlingen staan los van elkaar. Kies wat je wilt toevoegen.</p>
|
||
<Foutmelding msg={error} />
|
||
|
||
<div className="tabbar">
|
||
<button className={modus === "leerling" ? "tab on" : "tab"} onClick={() => kiesModus("leerling")}>Leerling toevoegen</button>
|
||
<button className={modus === "medewerker" ? "tab on" : "tab"} onClick={() => kiesModus("medewerker")}>Medewerker toevoegen</button>
|
||
</div>
|
||
|
||
<form className="form-card" onSubmit={opslaan}>
|
||
<div className="form-row">
|
||
<input placeholder="Voornaam" value={form.voornaam} required onChange={(e) => setForm({ ...form, voornaam: e.target.value })} />
|
||
<input placeholder="Achternaam" value={form.achternaam} required onChange={(e) => setForm({ ...form, achternaam: e.target.value })} />
|
||
{modus === "leerling" ? (
|
||
<>
|
||
<select value={form.groep || ""} onChange={(e) => setForm({ ...form, groep: e.target.value })}>
|
||
<option value="">— groep —</option>
|
||
{groepen.map((g) => <option key={g.id} value={g.id}>{g.naam}</option>)}
|
||
</select>
|
||
<label className="veld">Geb. <input type="date" value={form.geboortedatum || ""} onChange={(e) => setForm({ ...form, geboortedatum: e.target.value })} /></label>
|
||
</>
|
||
) : (
|
||
<>
|
||
<select value={form.rol} onChange={(e) => setForm({ ...form, rol: e.target.value })}>
|
||
{STAFF_ROLLEN.map((r) => <option key={r.value} value={r.value}>{r.label}</option>)}
|
||
</select>
|
||
<select value={form.stamgroep || ""} onChange={(e) => setForm({ ...form, stamgroep: e.target.value })}>
|
||
<option value="">— stamgroep/plein —</option>
|
||
{groepen.map((g) => <option key={g.id} value={g.id}>{g.naam}</option>)}
|
||
</select>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{modus === "medewerker" && (
|
||
<>
|
||
<div className="leden-keuze">
|
||
<div className="muted small">Functies (klik om te kiezen, of typ een nieuwe):</div>
|
||
<div className="chips">
|
||
{functies.map((f) => <button type="button" key={f.id} className={form.functies.includes(f.id) ? "chip on" : "chip"} onClick={() => toggle("functies", f.id)}>{f.naam}</button>)}
|
||
{functies.length === 0 && <span className="muted small">Nog geen functies.</span>}
|
||
</div>
|
||
<div className="form-row" style={{ marginTop: 6 }}>
|
||
<input
|
||
placeholder="Nieuwe functie"
|
||
value={nieuweFunctie}
|
||
onChange={(e) => setNieuweFunctie(e.target.value)}
|
||
onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); maakFunctie(); } }}
|
||
/>
|
||
<button type="button" className="btn" onClick={maakFunctie}>+ Functie</button>
|
||
</div>
|
||
</div>
|
||
<div className="leden-keuze">
|
||
<div className="muted small">Vakken die gegeven kunnen worden{form.rol === "leerkracht" ? " (theorievakken worden automatisch gekoppeld)" : ""}:</div>
|
||
<div className="chips">
|
||
{vakken.map((a) => <button type="button" key={a.id} className={form.vakken.includes(a.id) ? "chip on" : "chip"} onClick={() => toggle("vakken", a.id)}>{a.naam}{a.theorievak ? " ●" : ""}</button>)}
|
||
{vakken.length === 0 && <span className="muted small">Nog geen vakken/activiteiten.</span>}
|
||
</div>
|
||
</div>
|
||
<div className="leden-keuze">
|
||
<div className="muted small">Subgroepen (begeleiding):</div>
|
||
<div className="chips">
|
||
{subgroepen.map((s) => <button type="button" key={s.id} className={form.begeleide_subgroepen.includes(s.id) ? "chip on" : "chip"} onClick={() => toggle("begeleide_subgroepen", s.id)}>{s.naam}</button>)}
|
||
{subgroepen.length === 0 && <span className="muted small">Nog geen subgroepen.</span>}
|
||
</div>
|
||
</div>
|
||
{leerpleinen.length > 0 && (
|
||
<div className="leden-keuze">
|
||
<div className="muted small">{BOVENGROEP_LABEL_MV}:</div>
|
||
<div className="chips">
|
||
{leerpleinen.map((lp) => <button type="button" key={lp.id} className={form.leerpleinen.includes(lp.id) ? "chip on" : "chip"} onClick={() => toggle("leerpleinen", lp.id)}>{lp.naam}</button>)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
<div className="form-row">
|
||
<button className="btn primary" type="submit">{editId ? "Opslaan" : "Toevoegen"}</button>
|
||
{editId && <button type="button" className="btn" onClick={() => kiesModus(modus)}>Annuleren</button>}
|
||
</div>
|
||
</form>
|
||
|
||
<div className="filterbar">
|
||
<span className="muted">Toon:</span>
|
||
<button className={filter === "" ? "chip on" : "chip"} onClick={() => setFilter("")}>Alle</button>
|
||
<button className={filter === "leerling" ? "chip on" : "chip"} onClick={() => setFilter("leerling")}>Leerlingen</button>
|
||
<button className={filter === "medewerker" ? "chip on" : "chip"} onClick={() => setFilter("medewerker")}>Medewerkers</button>
|
||
</div>
|
||
|
||
{loading ? <p>Laden…</p> : (
|
||
<table className="grid">
|
||
<thead><tr><th>Naam</th><th>Rol</th><th>Details</th><th></th></tr></thead>
|
||
<tbody>
|
||
{zichtbaar.map((p) => (
|
||
<tr key={p.id}>
|
||
<td>{p.volledige_naam}</td>
|
||
<td>{p.rol_label}</td>
|
||
<td className="muted small">
|
||
{p.rol === "leerling" ? (
|
||
<>
|
||
{p.groep_naam ? <span>🗂️ {p.groep_naam} </span> : null}
|
||
{p.geboortedatum ? <span>🎂 {p.geboortedatum}</span> : null}
|
||
{!p.groep_naam && !p.geboortedatum ? "—" : null}
|
||
</>
|
||
) : (
|
||
<>
|
||
{p.stamgroep_naam ? <div>🗂️ {p.stamgroep_naam}</div> : null}
|
||
{p.functies_namen.length ? <div>🪪 {p.functies_namen.map((x) => x.naam).join(", ")}</div> : null}
|
||
{p.vakken_namen.length ? <div>📚 {p.vakken_namen.map((x) => x.naam).join(", ")}</div> : null}
|
||
{!p.stamgroep_naam && !p.functies_namen.length && !p.vakken_namen.length ? "—" : null}
|
||
</>
|
||
)}
|
||
</td>
|
||
<td className="row-actions">
|
||
<button className="link" onClick={() => bewerk(p)}>bewerken</button>
|
||
<button className="link danger" onClick={() => verwijder(p.id)}>verwijderen</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
{zichtbaar.length === 0 && <tr><td colSpan="4" className="muted">Geen personen.</td></tr>}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
/* ------------------------------- Subgroepen ------------------------------- */
|
||
export function SubgroepenPage() {
|
||
return <GroepsindelingPage />;
|
||
}
|
||
|
||
/* ------------------------------- Tijdsloten ------------------------------- */
|
||
export function TijdslotenPage() {
|
||
const { items, error, loading, reload, setError } = useList("tijdsloten");
|
||
const [groepen, setGroepen] = useState([]);
|
||
const leeg = { naam: "", dag: 0, start_tijd: "08:30", eind_tijd: "10:00", volgorde: 1, groep: "" };
|
||
const [form, setForm] = useState(leeg);
|
||
const [editId, setEditId] = useState(null);
|
||
|
||
useEffect(() => { listResource("groepen").then(setGroepen).catch(() => {}); }, []);
|
||
|
||
async function opslaan(e) {
|
||
e.preventDefault();
|
||
try {
|
||
const payload = { ...form, groep: form.groep || null };
|
||
if (editId) await updateResource("tijdsloten", editId, payload);
|
||
else await createResource("tijdsloten", payload);
|
||
setForm(leeg);
|
||
setEditId(null);
|
||
await reload();
|
||
} catch (err) {
|
||
setError(err.message);
|
||
}
|
||
}
|
||
async function verwijder(id) {
|
||
if (!confirm("Dit tijdslot verwijderen?")) return;
|
||
try {
|
||
await deleteResource("tijdsloten", id);
|
||
await reload();
|
||
} catch (err) {
|
||
setError(err.message);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<section>
|
||
<h1>Tijdsloten</h1>
|
||
<p className="muted">Vaste tijden per schooldag. Laat de groep leeg voor de algemene tijden, of kies een groep voor afwijkende tijden.</p>
|
||
<Foutmelding msg={error} />
|
||
<form className="form-row" onSubmit={opslaan}>
|
||
<input placeholder="Naam (bv. Blok 1)" value={form.naam} required onChange={(e) => setForm({ ...form, naam: e.target.value })} />
|
||
<select value={form.dag} onChange={(e) => setForm({ ...form, dag: Number(e.target.value) })}>
|
||
{WEEKDAGEN.map((d) => <option key={d.value} value={d.value}>{d.label}</option>)}
|
||
</select>
|
||
<input type="time" value={form.start_tijd} onChange={(e) => setForm({ ...form, start_tijd: e.target.value })} />
|
||
<input type="time" value={form.eind_tijd} onChange={(e) => setForm({ ...form, eind_tijd: e.target.value })} />
|
||
<input type="number" min="0" style={{ width: 80 }} title="Volgorde" value={form.volgorde} onChange={(e) => setForm({ ...form, volgorde: Number(e.target.value) })} />
|
||
<select value={form.groep || ""} title="Groep (leeg = algemeen)" onChange={(e) => setForm({ ...form, groep: e.target.value })}>
|
||
<option value="">algemeen</option>
|
||
{groepen.map((g) => <option key={g.id} value={g.id}>{g.naam}</option>)}
|
||
</select>
|
||
<button className="btn primary" type="submit">{editId ? "Opslaan" : "Toevoegen"}</button>
|
||
{editId && <button type="button" className="btn" onClick={() => { setEditId(null); setForm(leeg); }}>Annuleren</button>}
|
||
</form>
|
||
{loading ? <p>Laden…</p> : (
|
||
<table className="grid">
|
||
<thead><tr><th>Dag</th><th>Tijd</th><th>Naam</th><th>Geldt voor</th><th></th></tr></thead>
|
||
<tbody>
|
||
{items.map((t) => (
|
||
<tr key={t.id}>
|
||
<td>{t.dag_label}</td>
|
||
<td>{t.start_tijd?.slice(0, 5)}–{t.eind_tijd?.slice(0, 5)}</td>
|
||
<td>{t.naam}</td>
|
||
<td className="muted">{t.groep_naam || "algemeen"}</td>
|
||
<td className="row-actions">
|
||
<button className="link" onClick={() => { setEditId(t.id); setForm({ naam: t.naam, dag: t.dag, start_tijd: t.start_tijd?.slice(0, 5), eind_tijd: t.eind_tijd?.slice(0, 5), volgorde: t.volgorde, groep: t.groep || "" }); }}>bewerken</button>
|
||
<button className="link danger" onClick={() => verwijder(t.id)}>verwijderen</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
{items.length === 0 && <tr><td colSpan="5" className="muted">Nog geen tijdsloten.</td></tr>}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
/* --------------------------- Schooljaar & kalender ------------------------ */
|
||
export function SchooljaarPage() {
|
||
const { items: jaren, error, loading, reload, setError } = useList("schooljaren");
|
||
const leeg = { naam: "", start_datum: "", eind_datum: "" };
|
||
const [form, setForm] = useState(leeg);
|
||
const [gekozen, setGekozen] = useState(null);
|
||
|
||
async function opslaan(e) {
|
||
e.preventDefault();
|
||
try {
|
||
await createResource("schooljaren", form);
|
||
setForm(leeg);
|
||
await reload();
|
||
} catch (err) {
|
||
setError(err.message);
|
||
}
|
||
}
|
||
async function verwijder(id) {
|
||
if (!confirm("Dit schooljaar (incl. kalender) verwijderen?")) return;
|
||
try {
|
||
await deleteResource("schooljaren", id);
|
||
if (gekozen === id) setGekozen(null);
|
||
await reload();
|
||
} catch (err) {
|
||
setError(err.message);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<section>
|
||
<h1>Schooljaar & kalender</h1>
|
||
<p className="muted">Schooljaren met studiedagen, vrije dagen en vakanties. Op die dagen vervallen de roosterblokken.</p>
|
||
<Foutmelding msg={error} />
|
||
<form className="form-row" onSubmit={opslaan}>
|
||
<input placeholder="Naam (bv. 2026-2027)" value={form.naam} required onChange={(e) => setForm({ ...form, naam: e.target.value })} />
|
||
<label className="veld">Start <input type="date" value={form.start_datum} required onChange={(e) => setForm({ ...form, start_datum: e.target.value })} /></label>
|
||
<label className="veld">Eind <input type="date" value={form.eind_datum} required onChange={(e) => setForm({ ...form, eind_datum: e.target.value })} /></label>
|
||
<button className="btn primary" type="submit">Toevoegen</button>
|
||
</form>
|
||
{loading ? <p>Laden…</p> : (
|
||
<table className="grid">
|
||
<thead><tr><th>Schooljaar</th><th>Periode</th><th></th></tr></thead>
|
||
<tbody>
|
||
{jaren.map((j) => (
|
||
<tr key={j.id} className={gekozen === j.id ? "rij-actief" : ""}>
|
||
<td>{j.naam}</td>
|
||
<td className="muted">{j.start_datum} t/m {j.eind_datum}</td>
|
||
<td className="row-actions">
|
||
<button className="link" onClick={() => setGekozen(gekozen === j.id ? null : j.id)}>
|
||
{gekozen === j.id ? "kalender verbergen" : "kalender beheren"}
|
||
</button>
|
||
<button className="link danger" onClick={() => verwijder(j.id)}>verwijderen</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
{jaren.length === 0 && <tr><td colSpan="3" className="muted">Nog geen schooljaren.</td></tr>}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
{gekozen && <Kalender schooljaarId={gekozen} />}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function Kalender({ schooljaarId }) {
|
||
const { items, error, reload, setError } = useList("kalenderdagen", `?schooljaar=${schooljaarId}`);
|
||
const leeg = { datum: "", type: "vrije_dag", omschrijving: "" };
|
||
const [form, setForm] = useState(leeg);
|
||
|
||
async function opslaan(e) {
|
||
e.preventDefault();
|
||
try {
|
||
await createResource("kalenderdagen", { ...form, schooljaar: schooljaarId });
|
||
setForm(leeg);
|
||
await reload();
|
||
} catch (err) {
|
||
setError(err.message);
|
||
}
|
||
}
|
||
async function verwijder(id) {
|
||
try {
|
||
await deleteResource("kalenderdagen", id);
|
||
await reload();
|
||
} catch (err) {
|
||
setError(err.message);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="subpaneel">
|
||
<h2>Kalender</h2>
|
||
<Foutmelding msg={error} />
|
||
<form className="form-row" onSubmit={opslaan}>
|
||
<input type="date" value={form.datum} required onChange={(e) => setForm({ ...form, datum: e.target.value })} />
|
||
<select value={form.type} onChange={(e) => setForm({ ...form, type: e.target.value })}>
|
||
{DAGTYPES.map((d) => <option key={d.value} value={d.value}>{d.label}</option>)}
|
||
</select>
|
||
<input placeholder="Omschrijving (bv. Kerstvakantie)" value={form.omschrijving} onChange={(e) => setForm({ ...form, omschrijving: e.target.value })} />
|
||
<button className="btn primary" type="submit">Dag toevoegen</button>
|
||
</form>
|
||
<table className="grid">
|
||
<thead><tr><th>Datum</th><th>Type</th><th>Omschrijving</th><th></th></tr></thead>
|
||
<tbody>
|
||
{items.map((d) => (
|
||
<tr key={d.id}>
|
||
<td>{d.datum}</td>
|
||
<td><span className={`tag dag-${d.type}`}>{d.type_label}</span></td>
|
||
<td className="muted">{d.omschrijving || "—"}</td>
|
||
<td className="row-actions"><button className="link danger" onClick={() => verwijder(d.id)}>verwijderen</button></td>
|
||
</tr>
|
||
))}
|
||
{items.length === 0 && <tr><td colSpan="4" className="muted">Nog geen bijzondere dagen.</td></tr>}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ------------------------------- Afwezigheid ------------------------------ */
|
||
export function AfwezigheidPage() {
|
||
const { items, error, loading, reload, setError } = useList("afwezigheden");
|
||
const [personen, setPersonen] = useState([]);
|
||
const leeg = { persoon: "", start_datum: "", eind_datum: "", reden: "" };
|
||
const [form, setForm] = useState(leeg);
|
||
|
||
useEffect(() => { listResource("personen").then(setPersonen).catch(() => {}); }, []);
|
||
|
||
async function opslaan(e) {
|
||
e.preventDefault();
|
||
try {
|
||
await createResource("afwezigheden", form);
|
||
setForm(leeg);
|
||
await reload();
|
||
} catch (err) { setError(err.message); }
|
||
}
|
||
async function verwijder(id) {
|
||
if (!confirm("Deze afwezigheid verwijderen?")) return;
|
||
try { await deleteResource("afwezigheden", id); await reload(); } catch (err) { setError(err.message); }
|
||
}
|
||
|
||
return (
|
||
<section>
|
||
<h1>Afwezigheid</h1>
|
||
<p className="muted">Leg vast wie wanneer afwezig is. In het rooster zie je dat terug bij de betrokken blokken.</p>
|
||
<Foutmelding msg={error} />
|
||
<form className="form-row" onSubmit={opslaan}>
|
||
<select value={form.persoon} required onChange={(e) => setForm({ ...form, persoon: e.target.value })}>
|
||
<option value="">— persoon —</option>
|
||
{personen.map((p) => <option key={p.id} value={p.id}>{p.volledige_naam} ({p.rol_label})</option>)}
|
||
</select>
|
||
<label className="veld">Van <input type="date" value={form.start_datum} required onChange={(e) => setForm({ ...form, start_datum: e.target.value })} /></label>
|
||
<label className="veld">T/m <input type="date" value={form.eind_datum} required onChange={(e) => setForm({ ...form, eind_datum: e.target.value })} /></label>
|
||
<input placeholder="Reden (optioneel)" value={form.reden} onChange={(e) => setForm({ ...form, reden: e.target.value })} />
|
||
<button className="btn primary" type="submit">Toevoegen</button>
|
||
</form>
|
||
{loading ? <p>Laden…</p> : (
|
||
<table className="grid">
|
||
<thead><tr><th>Persoon</th><th>Periode</th><th>Reden</th><th></th></tr></thead>
|
||
<tbody>
|
||
{items.map((a) => (
|
||
<tr key={a.id}>
|
||
<td>{a.persoon_naam}</td>
|
||
<td className="muted">{a.start_datum} t/m {a.eind_datum}</td>
|
||
<td className="muted">{a.reden || "—"}</td>
|
||
<td className="row-actions"><button className="link danger" onClick={() => verwijder(a.id)}>verwijderen</button></td>
|
||
</tr>
|
||
))}
|
||
{items.length === 0 && <tr><td colSpan="4" className="muted">Geen afwezigheden.</td></tr>}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
/* ----------------------------- Groepsindeling ----------------------------- */
|
||
// Gezamenlijk beheer: bovenliggende groep -> groep -> subgroep.
|
||
const SROL = { leerkracht: "LK", praktijkondersteuner: "PO", klassenondersteuner: "KO" };
|
||
|
||
function InlineAdd({ placeholder, onAdd, klein }) {
|
||
const [v, setV] = useState("");
|
||
return (
|
||
<form
|
||
className={klein ? "inline-add klein" : "inline-add"}
|
||
onSubmit={(e) => { e.preventDefault(); if (v.trim()) { onAdd(v.trim()); setV(""); } }}
|
||
>
|
||
<input placeholder={placeholder} value={v} onChange={(e) => setV(e.target.value)} />
|
||
<button className="btn klein" type="submit">+</button>
|
||
</form>
|
||
);
|
||
}
|
||
|
||
export function GroepsindelingPage() {
|
||
const [leerpleinen, setLeerpleinen] = useState([]);
|
||
const [groepen, setGroepen] = useState([]);
|
||
const [subgroepen, setSubgroepen] = useState([]);
|
||
const [leerlingen, setLeerlingen] = useState([]);
|
||
const [medewerkers, setMedewerkers] = useState([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState(null);
|
||
|
||
const [toon, setToon] = useState("allen"); // allen | leerling | personeel
|
||
const [selectie, setSelectie] = useState(new Set()); // persoon-ids
|
||
const [plaatsDoel, setPlaatsDoel] = useState(""); // "kind:id"
|
||
|
||
const dragRef = useRef(null);
|
||
const [ghost, setGhost] = useState(null);
|
||
const [hoverZone, setHoverZone] = useState(null);
|
||
|
||
async function laadAlles() {
|
||
setLoading(true);
|
||
try {
|
||
const [lp, gr, sg, ll, ps] = await Promise.all([
|
||
listResource("leerpleinen"),
|
||
listResource("groepen"),
|
||
listResource("subgroepen"),
|
||
listResource("personen", "?rol=leerling"),
|
||
listResource("personen"),
|
||
]);
|
||
setLeerpleinen(lp);
|
||
setGroepen(gr);
|
||
setSubgroepen(sg);
|
||
setLeerlingen(ll);
|
||
setMedewerkers(ps.filter((p) => p.rol !== "leerling"));
|
||
setError(null);
|
||
} catch (err) { setError(err.message); } finally { setLoading(false); }
|
||
}
|
||
useEffect(() => { laadAlles(); }, []);
|
||
|
||
const leerlingById = (id) => leerlingen.find((l) => l.id === id);
|
||
const medewerkerById = (id) => medewerkers.find((m) => m.id === id);
|
||
const isLeerlingId = (id) => leerlingen.some((l) => l.id === id);
|
||
const toonRol = (rol) => toon === "allen" || (toon === "leerling" ? rol === "leerling" : rol !== "leerling");
|
||
const groepLeerlingen = (gid) => leerlingen.filter((l) => l.groep === gid);
|
||
const groepMedewerkers = (gid) => medewerkers.filter((m) => m.stamgroep === gid);
|
||
const groepSubs = (gid) => subgroepen.filter((s) => s.groep === gid);
|
||
const lpGroepen = (lp) => groepen.filter((g) => (lp.groepen || []).includes(g.id));
|
||
const groepHeeftLeerplein = (gid) => leerpleinen.some((lp) => (lp.groepen || []).includes(gid));
|
||
|
||
const ingedeeldeLeerlingen = (() => {
|
||
const s = new Set();
|
||
leerlingen.forEach((l) => { if (l.groep) s.add(l.id); });
|
||
leerpleinen.forEach((lp) => (lp.leerlingen || []).forEach((id) => s.add(id)));
|
||
subgroepen.forEach((sg) => (sg.leden_namen || []).forEach((x) => s.add(x.id)));
|
||
return s;
|
||
})();
|
||
const ingedeeldeMedewerkers = (() => {
|
||
const s = new Set();
|
||
medewerkers.forEach((m) => { if (m.stamgroep) s.add(m.id); });
|
||
leerpleinen.forEach((lp) => (lp.medewerkers || []).forEach((id) => s.add(id)));
|
||
subgroepen.forEach((sg) => (sg.begeleiders_namen || []).forEach((x) => s.add(x.id)));
|
||
return s;
|
||
})();
|
||
const losseLeerlingen = leerlingen.filter((l) => !ingedeeldeLeerlingen.has(l.id));
|
||
const losseMedewerkers = medewerkers.filter((m) => !ingedeeldeMedewerkers.has(m.id));
|
||
|
||
const toggleSel = (id) => setSelectie((s) => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; });
|
||
const wisSelectie = () => setSelectie(new Set());
|
||
|
||
const containerOpties = [];
|
||
leerpleinen.forEach((lp) => {
|
||
containerOpties.push({ value: `leerplein:${lp.id}`, label: `${lp.naam} (bovenliggende groep)` });
|
||
lpGroepen(lp).forEach((g) => {
|
||
containerOpties.push({ value: `groep:${g.id}`, label: `${lp.naam} › ${g.naam} (groep)` });
|
||
groepSubs(g.id).forEach((s) => containerOpties.push({ value: `subgroep:${s.id}`, label: `${lp.naam} › ${g.naam} › ${s.naam} (subgroep)` }));
|
||
});
|
||
});
|
||
|
||
function startDrag(e, payload) {
|
||
e.preventDefault();
|
||
dragRef.current = payload;
|
||
const meerdere = selectie.has(payload.id) && selectie.size > 1;
|
||
setGhost({ x: e.clientX, y: e.clientY, label: meerdere ? `${selectie.size} personen` : payload.naam });
|
||
}
|
||
useEffect(() => {
|
||
function move(e) {
|
||
if (!dragRef.current) return;
|
||
const meerdere = selectie.has(dragRef.current.id) && selectie.size > 1;
|
||
setGhost({ x: e.clientX, y: e.clientY, label: meerdere ? `${selectie.size} personen` : dragRef.current.naam });
|
||
const el = document.elementFromPoint(e.clientX, e.clientY);
|
||
const z = el && el.closest("[data-drop-kind]");
|
||
setHoverZone(z ? `${z.dataset.dropKind}:${z.dataset.dropId}` : null);
|
||
}
|
||
async function up(e) {
|
||
if (!dragRef.current) return;
|
||
const el = document.elementFromPoint(e.clientX, e.clientY);
|
||
const z = el && el.closest("[data-drop-kind]");
|
||
const payload = dragRef.current;
|
||
dragRef.current = null;
|
||
setGhost(null);
|
||
setHoverZone(null);
|
||
if (z) {
|
||
const zone = { kind: z.dataset.dropKind, id: Number(z.dataset.dropId) };
|
||
if (selectie.has(payload.id) && selectie.size > 1) await plaatsSelectie(zone);
|
||
else await drop(zone, payload);
|
||
}
|
||
}
|
||
window.addEventListener("pointermove", move);
|
||
window.addEventListener("pointerup", up);
|
||
return () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); };
|
||
}, [leerpleinen, groepen, subgroepen, leerlingen, medewerkers, selectie]);
|
||
|
||
async function drop(zone, p) {
|
||
const { kind, id } = zone;
|
||
try {
|
||
if (kind === "groep") {
|
||
await updateResource("personen", p.id, p.rol === "leerling" ? { groep: id } : { stamgroep: id });
|
||
} else if (kind === "leerplein") {
|
||
const lp = leerpleinen.find((x) => x.id === id); if (!lp) return;
|
||
if (p.rol === "leerling") {
|
||
if (!(lp.leerlingen || []).includes(p.id)) await updateResource("leerpleinen", id, { leerlingen: [...(lp.leerlingen || []), p.id] });
|
||
} else if (!(lp.medewerkers || []).includes(p.id)) {
|
||
await updateResource("leerpleinen", id, { medewerkers: [...(lp.medewerkers || []), p.id] });
|
||
}
|
||
} else if (kind === "subgroep") {
|
||
const s = subgroepen.find((x) => x.id === id); if (!s) return;
|
||
if (p.rol === "leerling") {
|
||
const ids = s.leden_namen.map((x) => x.id);
|
||
if (!ids.includes(p.id)) await updateResource("subgroepen", id, { leden: [...ids, p.id] });
|
||
} else {
|
||
const ids = s.begeleiders_namen.map((x) => x.id);
|
||
if (!ids.includes(p.id)) await updateResource("subgroepen", id, { begeleiders: [...ids, p.id] });
|
||
}
|
||
}
|
||
await laadAlles();
|
||
} catch (e) { setError(e.message); }
|
||
}
|
||
async function plaatsSelectie(zone) {
|
||
const ids = [...selectie];
|
||
if (ids.length === 0) return;
|
||
const { kind, id } = zone;
|
||
const ll = ids.filter(isLeerlingId);
|
||
const mw = ids.filter((x) => !isLeerlingId(x));
|
||
try {
|
||
if (kind === "groep") {
|
||
for (const pid of ids) await updateResource("personen", pid, isLeerlingId(pid) ? { groep: id } : { stamgroep: id });
|
||
} else if (kind === "leerplein") {
|
||
const lp = leerpleinen.find((x) => x.id === id); if (!lp) return;
|
||
if (ll.length) await updateResource("leerpleinen", id, { leerlingen: [...new Set([...(lp.leerlingen || []), ...ll])] });
|
||
if (mw.length) await updateResource("leerpleinen", id, { medewerkers: [...new Set([...(lp.medewerkers || []), ...mw])] });
|
||
} else if (kind === "subgroep") {
|
||
const s = subgroepen.find((x) => x.id === id); if (!s) return;
|
||
if (ll.length) await updateResource("subgroepen", id, { leden: [...new Set([...s.leden_namen.map((x) => x.id), ...ll])] });
|
||
if (mw.length) await updateResource("subgroepen", id, { begeleiders: [...new Set([...s.begeleiders_namen.map((x) => x.id), ...mw])] });
|
||
}
|
||
wisSelectie();
|
||
setPlaatsDoel("");
|
||
await laadAlles();
|
||
} catch (e) { setError(e.message); }
|
||
}
|
||
const parseZone = (str) => { const [kind, id] = str.split(":"); return { kind, id: Number(id) }; };
|
||
|
||
async function haalWeg(container, p) {
|
||
const { kind, id } = container;
|
||
try {
|
||
if (kind === "groep") {
|
||
await updateResource("personen", p.id, p.rol === "leerling" ? { groep: null } : { stamgroep: null });
|
||
} else if (kind === "leerplein") {
|
||
const lp = leerpleinen.find((x) => x.id === id); if (!lp) return;
|
||
await updateResource("leerpleinen", id, p.rol === "leerling"
|
||
? { leerlingen: (lp.leerlingen || []).filter((x) => x !== p.id) }
|
||
: { medewerkers: (lp.medewerkers || []).filter((x) => x !== p.id) });
|
||
} else if (kind === "subgroep") {
|
||
const s = subgroepen.find((x) => x.id === id); if (!s) return;
|
||
await updateResource("subgroepen", id, p.rol === "leerling"
|
||
? { leden: s.leden_namen.map((x) => x.id).filter((x) => x !== p.id) }
|
||
: { begeleiders: s.begeleiders_namen.map((x) => x.id).filter((x) => x !== p.id) });
|
||
}
|
||
await laadAlles();
|
||
} catch (e) { setError(e.message); }
|
||
}
|
||
|
||
async function nieuweBovengroep(naam) { try { await createResource("leerpleinen", { naam }); await laadAlles(); } catch (e) { setError(e.message); } }
|
||
async function nieuweGroep(lp, naam) { try { const g = await createResource("groepen", { naam }); await updateResource("leerpleinen", lp.id, { groepen: [...(lp.groepen || []), g.id] }); await laadAlles(); } catch (e) { setError(e.message); } }
|
||
async function nieuweSubgroep(g, naam) { try { await createResource("subgroepen", { naam, groep: g.id }); await laadAlles(); } catch (e) { setError(e.message); } }
|
||
async function koppelGroep(g, lpId) { const lp = leerpleinen.find((x) => x.id === lpId); if (!lp) return; try { await updateResource("leerpleinen", lpId, { groepen: [...(lp.groepen || []), g.id] }); await laadAlles(); } catch (e) { setError(e.message); } }
|
||
async function hernoem(resource, id, huidig) { const naam = prompt("Nieuwe naam:", huidig); if (naam && naam.trim()) { try { await updateResource(resource, id, { naam: naam.trim() }); await laadAlles(); } catch (e) { setError(e.message); } } }
|
||
async function verwijder(resource, id, vraag) { if (!confirm(vraag)) return; try { await deleteResource(resource, id); await laadAlles(); } catch (e) { setError(e.message); } }
|
||
|
||
const zoneProps = (kind, id) => ({
|
||
"data-drop-kind": kind, "data-drop-id": id,
|
||
className: "dropzone" + (hoverZone === `${kind}:${id}` ? " over" : ""),
|
||
});
|
||
const chip = (p, rol, container) => {
|
||
if (!p || !toonRol(rol)) return null;
|
||
const sel = selectie.has(p.id);
|
||
return (
|
||
<span
|
||
key={(container ? container.kind + container.id : "pool") + "-" + p.id}
|
||
className={`chip-persoon ${rol === "leerling" ? "ll" : "mw"}${sel ? " geselecteerd" : ""}`}
|
||
onPointerDown={(e) => startDrag(e, { id: p.id, rol, naam: p.volledige_naam })}
|
||
title={p.volledige_naam}
|
||
>
|
||
<button type="button" className="chip-sel" title="(de)selecteer"
|
||
onPointerDown={(e) => e.stopPropagation()}
|
||
onClick={(e) => { e.stopPropagation(); toggleSel(p.id); }}
|
||
>{sel ? "☑" : "☐"}</button>
|
||
<span className="chip-naam">{p.volledige_naam}</span>
|
||
{rol !== "leerling" && SROL[p.rol] && <span className="chip-rol">{SROL[p.rol]}</span>}
|
||
{container && (
|
||
<button type="button" className="chip-x" title="Uit deze groep halen"
|
||
onPointerDown={(e) => e.stopPropagation()}
|
||
onClick={(e) => { e.stopPropagation(); haalWeg(container, { id: p.id, rol }); }}
|
||
>×</button>
|
||
)}
|
||
</span>
|
||
);
|
||
};
|
||
|
||
function subKaart(s) {
|
||
const leeg = s.begeleiders_namen.length + s.leden_namen.length === 0;
|
||
return (
|
||
<div className="subgroep-kaart" key={s.id}>
|
||
<div className="kaart-kop sub-kop">
|
||
<strong>{s.naam}</strong>
|
||
<span className="kaart-acties">
|
||
<button className="link small" onClick={() => hernoem("subgroepen", s.id, s.naam)}>naam</button>
|
||
<button className="link small danger" onClick={() => verwijder("subgroepen", s.id, `Subgroep '${s.naam}' verwijderen?`)}>×</button>
|
||
</span>
|
||
</div>
|
||
<div {...zoneProps("subgroep", s.id)}>
|
||
<div className="chip-rij">
|
||
{s.begeleiders_namen.map((b) => chip(medewerkerById(b.id) || { id: b.id, volledige_naam: b.naam, rol: "leerkracht" }, "medewerker", { kind: "subgroep", id: s.id }))}
|
||
{s.leden_namen.map((l) => chip(leerlingById(l.id) || { id: l.id, volledige_naam: l.naam }, "leerling", { kind: "subgroep", id: s.id }))}
|
||
{leeg && <span className="muted small">sleep hier personen heen</span>}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
function groepKaart(g) {
|
||
const orphan = !groepHeeftLeerplein(g.id);
|
||
const mws = groepMedewerkers(g.id);
|
||
const lls = groepLeerlingen(g.id);
|
||
return (
|
||
<div className="groep-kaart" key={g.id}>
|
||
<div className="kaart-kop groep-kop">
|
||
<strong>{g.naam}</strong>
|
||
<span className="kaart-acties">
|
||
<button className="link small" onClick={() => hernoem("groepen", g.id, g.naam)}>naam</button>
|
||
<button className="link small danger" onClick={() => verwijder("groepen", g.id, `Groep '${g.naam}' verwijderen? (roosterblokken van deze groep vervallen)`)}>×</button>
|
||
</span>
|
||
</div>
|
||
<div {...zoneProps("groep", g.id)}>
|
||
<div className="chip-rij">
|
||
{mws.map((m) => chip(m, "medewerker", { kind: "groep", id: g.id }))}
|
||
{lls.map((l) => chip(l, "leerling", { kind: "groep", id: g.id }))}
|
||
{mws.length + lls.length === 0 && <span className="muted small">sleep hier personen heen</span>}
|
||
</div>
|
||
</div>
|
||
{orphan && (
|
||
<div className="koppel-rij">
|
||
<select value="" onChange={(e) => e.target.value && koppelGroep(g, Number(e.target.value))}>
|
||
<option value="">koppel aan bovenliggende groep…</option>
|
||
{leerpleinen.map((lp) => <option key={lp.id} value={lp.id}>{lp.naam}</option>)}
|
||
</select>
|
||
</div>
|
||
)}
|
||
<div className="sub-lijst">
|
||
{groepSubs(g.id).map((s) => subKaart(s))}
|
||
<InlineAdd klein placeholder="+ subgroep" onAdd={(naam) => nieuweSubgroep(g, naam)} />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const orphanGroepen = groepen.filter((g) => !groepHeeftLeerplein(g.id));
|
||
|
||
return (
|
||
<section className="indeling">
|
||
<h1>Groepsindeling</h1>
|
||
<p className="muted">Sleep personen naar een bovenliggende groep, groep of subgroep. <span className="legenda ll">leerling</span> en <span className="legenda mw">personeel</span> hebben elk een eigen kleur. Vink meerdere personen aan om ze in één keer te plaatsen; × haalt iemand weer weg.</p>
|
||
<Foutmelding msg={error} />
|
||
<div className="indeling-toolbar no-print">
|
||
<span className="muted small">Tonen:</span>
|
||
<div className="segmented">
|
||
{[["allen", "Allen"], ["leerling", "Leerlingen"], ["personeel", "Personeel"]].map(([v, l]) => (
|
||
<button key={v} type="button" className={toon === v ? "seg on" : "seg"} onClick={() => setToon(v)}>{l}</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
{selectie.size > 0 && (
|
||
<div className="selectie-bar no-print">
|
||
<strong>{selectie.size}</strong> geselecteerd
|
||
<select value={plaatsDoel} onChange={(e) => setPlaatsDoel(e.target.value)}>
|
||
<option value="">— plaats in… —</option>
|
||
{containerOpties.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
|
||
</select>
|
||
<button className="btn primary klein" disabled={!plaatsDoel} onClick={() => plaatsDoel && plaatsSelectie(parseZone(plaatsDoel))}>Plaats</button>
|
||
<button className="btn klein" onClick={wisSelectie}>Wis selectie</button>
|
||
</div>
|
||
)}
|
||
{loading ? <p>Laden…</p> : (
|
||
<div className="indeling-layout">
|
||
<aside className="indeling-pool">
|
||
<h3>Nog niet ingedeeld</h3>
|
||
{toonRol("leerling") && (
|
||
<div className="pool-sectie">
|
||
<div className="pool-kop">Leerlingen</div>
|
||
<div className="chip-rij">
|
||
{losseLeerlingen.map((l) => chip(l, "leerling", null))}
|
||
{losseLeerlingen.length === 0 && <span className="muted small">— allemaal ingedeeld —</span>}
|
||
</div>
|
||
</div>
|
||
)}
|
||
{toonRol("medewerker") && (
|
||
<div className="pool-sectie">
|
||
<div className="pool-kop">Personeel</div>
|
||
<div className="chip-rij">
|
||
{losseMedewerkers.map((m) => chip(m, "medewerker", null))}
|
||
{losseMedewerkers.length === 0 && <span className="muted small">— allemaal ingedeeld —</span>}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</aside>
|
||
<div className="indeling-board">
|
||
<InlineAdd placeholder="Nieuwe bovenliggende groep…" onAdd={nieuweBovengroep} />
|
||
{leerpleinen.map((lp) => {
|
||
const mwIds = lp.medewerkers || [];
|
||
const llIds = lp.leerlingen || [];
|
||
return (
|
||
<div className="bovengroep-kaart" key={lp.id}>
|
||
<div className="kaart-kop bovengroep-kop">
|
||
<strong>{lp.naam}</strong>
|
||
<span className="kaart-acties">
|
||
<button className="link small" onClick={() => hernoem("leerpleinen", lp.id, lp.naam)}>naam</button>
|
||
<button className="link small danger" onClick={() => verwijder("leerpleinen", lp.id, `Bovenliggende groep '${lp.naam}' verwijderen?`)}>×</button>
|
||
</span>
|
||
</div>
|
||
<div {...zoneProps("leerplein", lp.id)}>
|
||
<div className="zone-kop">Direct in deze bovenliggende groep</div>
|
||
<div className="chip-rij">
|
||
{mwIds.map((id) => chip(medewerkerById(id), "medewerker", { kind: "leerplein", id: lp.id }))}
|
||
{llIds.map((id) => chip(leerlingById(id), "leerling", { kind: "leerplein", id: lp.id }))}
|
||
{mwIds.length + llIds.length === 0 && <span className="muted small">sleep hier personen heen</span>}
|
||
</div>
|
||
</div>
|
||
<div className="groep-lijst">
|
||
{lpGroepen(lp).map((g) => groepKaart(g))}
|
||
<InlineAdd klein placeholder="+ groep" onAdd={(naam) => nieuweGroep(lp, naam)} />
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
{leerpleinen.length === 0 && <div className="muted">Nog geen bovenliggende groepen. Maak er hierboven één aan.</div>}
|
||
{orphanGroepen.length > 0 && (
|
||
<div className="bovengroep-kaart los">
|
||
<div className="kaart-kop"><strong>Groepen zonder bovenliggende groep</strong></div>
|
||
<div className="groep-lijst">
|
||
{orphanGroepen.map((g) => groepKaart(g))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
{ghost && <div className="drag-ghost" style={{ left: ghost.x + 10, top: ghost.y + 10 }}>{ghost.label}</div>}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
|
||
/* ---------------------------------- Stage --------------------------------- */
|
||
// Module-scherm: interne en externe stages.
|
||
const OMVANGEN = [
|
||
{ value: "hele_dag", label: "Hele dag" },
|
||
{ value: "dagdeel", label: "Dagdeel" },
|
||
{ value: "blok", label: "Eén blok" },
|
||
];
|
||
const DAGDELEN = [
|
||
{ value: "ochtend", label: "Ochtend" },
|
||
{ value: "middag", label: "Middag" },
|
||
];
|
||
|
||
export function StagePage() {
|
||
const { items, error, loading, reload, setError } = useList("stages");
|
||
const [leerlingen, setLeerlingen] = useState([]);
|
||
const [medewerkers, setMedewerkers] = useState([]);
|
||
const [lokalen, setLokalen] = useState([]);
|
||
const [tijdsloten, setTijdsloten] = useState([]);
|
||
const leeg = { leerling: "", type: "intern", begeleider: "", lokaal: "", organisatie: "", omvang: "hele_dag", dag: "", dagdeel: "", tijdslot: "", omschrijving: "" };
|
||
const [form, setForm] = useState(leeg);
|
||
const [editId, setEditId] = useState(null);
|
||
|
||
useEffect(() => {
|
||
listResource("personen", "?rol=leerling").then(setLeerlingen).catch(() => {});
|
||
listResource("personen").then((ps) => setMedewerkers(ps.filter((p) => p.rol !== "leerling"))).catch(() => {});
|
||
listResource("tijdsloten").then(setTijdsloten).catch(() => {});
|
||
listResource("lokalen").then(setLokalen).catch(() => setLokalen([]));
|
||
}, []);
|
||
|
||
const isIntern = form.type === "intern";
|
||
const isBlok = form.omvang === "blok";
|
||
const isDagdeel = form.omvang === "dagdeel";
|
||
|
||
async function opslaan(e) {
|
||
e.preventDefault();
|
||
const payload = {
|
||
leerling: form.leerling, type: form.type, begeleider: form.begeleider,
|
||
lokaal: isIntern ? (form.lokaal || null) : null,
|
||
organisatie: isIntern ? "" : form.organisatie,
|
||
omvang: form.omvang,
|
||
dag: isBlok ? null : (form.dag === "" ? null : Number(form.dag)),
|
||
dagdeel: isDagdeel ? form.dagdeel : "",
|
||
tijdslot: isBlok ? (form.tijdslot || null) : null,
|
||
omschrijving: form.omschrijving,
|
||
};
|
||
try {
|
||
if (editId) await updateResource("stages", editId, payload);
|
||
else await createResource("stages", payload);
|
||
setForm(leeg);
|
||
setEditId(null);
|
||
await reload();
|
||
} catch (err) {
|
||
setError(err.message);
|
||
}
|
||
}
|
||
async function verwijder(id) {
|
||
if (!confirm("Deze stage verwijderen?")) return;
|
||
try { await deleteResource("stages", id); await reload(); } catch (err) { setError(err.message); }
|
||
}
|
||
|
||
const dagLabel = (v) => (WEEKDAGEN.find((d) => d.value === v) || {}).label || "—";
|
||
const tijdslotLabel = (id) => { const t = tijdsloten.find((x) => x.id === id); return t ? `${t.dag_label || ""} ${(t.start_tijd || "").slice(0, 5)} ${t.naam}` : "—"; };
|
||
function wanneerTekst(s) {
|
||
if (s.omvang === "blok") return `Blok: ${s.tijdslot_label || tijdslotLabel(s.tijdslot)}`;
|
||
if (s.omvang === "dagdeel") return `${dagLabel(s.dag)} — ${s.dagdeel_label || s.dagdeel}`;
|
||
return `${dagLabel(s.dag)} — hele dag`;
|
||
}
|
||
|
||
return (
|
||
<section>
|
||
<h1>Stage</h1>
|
||
<p className="muted">Interne en externe stages. Beide krijgen een begeleider; een interne stage gebruikt een lokaal (met dubbele-boekingcheck). Stel in per hele dag, dagdeel of los blok.</p>
|
||
<Foutmelding msg={error} />
|
||
<form className="form-card" onSubmit={opslaan}>
|
||
<div className="form-row">
|
||
<select value={form.leerling} required onChange={(e) => setForm({ ...form, leerling: e.target.value })}>
|
||
<option value="">— leerling —</option>
|
||
{leerlingen.map((l) => <option key={l.id} value={l.id}>{l.volledige_naam}</option>)}
|
||
</select>
|
||
<select value={form.type} onChange={(e) => setForm({ ...form, type: e.target.value })}>
|
||
<option value="intern">Interne stage</option>
|
||
<option value="extern">Externe stage</option>
|
||
</select>
|
||
<select value={form.begeleider} required onChange={(e) => setForm({ ...form, begeleider: e.target.value })}>
|
||
<option value="">— begeleider —</option>
|
||
{medewerkers.map((m) => <option key={m.id} value={m.id}>{m.volledige_naam}</option>)}
|
||
</select>
|
||
</div>
|
||
<div className="form-row">
|
||
{isIntern ? (
|
||
<select value={form.lokaal} required onChange={(e) => setForm({ ...form, lokaal: e.target.value })}>
|
||
<option value="">— lokaal —</option>
|
||
{lokalen.map((l) => <option key={l.id} value={l.id}>{l.naam}</option>)}
|
||
</select>
|
||
) : (
|
||
<input placeholder="Externe organisatie" value={form.organisatie} required onChange={(e) => setForm({ ...form, organisatie: e.target.value })} />
|
||
)}
|
||
</div>
|
||
<div className="form-row">
|
||
<label className="veld-kol">
|
||
<span className="veld-kop">Omvang</span>
|
||
<select value={form.omvang} onChange={(e) => setForm({ ...form, omvang: e.target.value })}>
|
||
{OMVANGEN.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
|
||
</select>
|
||
</label>
|
||
{isBlok ? (
|
||
<label className="veld-kol">
|
||
<span className="veld-kop">Roosterblok</span>
|
||
<select value={form.tijdslot} required onChange={(e) => setForm({ ...form, tijdslot: e.target.value })}>
|
||
<option value="">— roosterblok —</option>
|
||
{tijdsloten.map((t) => <option key={t.id} value={t.id}>{tijdslotLabel(t.id)}</option>)}
|
||
</select>
|
||
</label>
|
||
) : (
|
||
<label className="veld-kol">
|
||
<span className="veld-kop">Dag</span>
|
||
<select value={form.dag} required onChange={(e) => setForm({ ...form, dag: e.target.value })}>
|
||
<option value="">— dag —</option>
|
||
{WEEKDAGEN.map((d) => <option key={d.value} value={d.value}>{d.label}</option>)}
|
||
</select>
|
||
</label>
|
||
)}
|
||
{isDagdeel && (
|
||
<label className="veld-kol">
|
||
<span className="veld-kop">Dagdeel</span>
|
||
<select value={form.dagdeel} required onChange={(e) => setForm({ ...form, dagdeel: e.target.value })}>
|
||
<option value="">— kies dagdeel —</option>
|
||
{DAGDELEN.map((d) => <option key={d.value} value={d.value}>{d.label}</option>)}
|
||
</select>
|
||
</label>
|
||
)}
|
||
</div>
|
||
<div className="form-row">
|
||
<input placeholder="Opmerking (optioneel)" value={form.omschrijving} onChange={(e) => setForm({ ...form, omschrijving: e.target.value })} />
|
||
</div>
|
||
<div className="form-row">
|
||
<button className="btn primary" type="submit">{editId ? "Opslaan" : "Toevoegen"}</button>
|
||
{editId && <button type="button" className="btn" onClick={() => { setEditId(null); setForm(leeg); }}>Annuleren</button>}
|
||
</div>
|
||
</form>
|
||
{loading ? <p>Laden…</p> : (
|
||
<table className="grid">
|
||
<thead><tr><th>Leerling</th><th>Type</th><th>Begeleider</th><th>Waar</th><th>Wanneer</th><th></th></tr></thead>
|
||
<tbody>
|
||
{items.map((s) => (
|
||
<tr key={s.id}>
|
||
<td>{s.leerling_naam}</td>
|
||
<td>{s.type_label}</td>
|
||
<td>{s.begeleider_naam}</td>
|
||
<td className="muted">{s.type === "intern" ? (s.lokaal_naam || "—") : (s.organisatie || "—")}</td>
|
||
<td className="muted">{wanneerTekst(s)}</td>
|
||
<td className="row-actions">
|
||
<button className="link" onClick={() => { setEditId(s.id); setForm({ leerling: s.leerling, type: s.type, begeleider: s.begeleider, lokaal: s.lokaal || "", organisatie: s.organisatie || "", omvang: s.omvang || "hele_dag", dag: s.dag ?? "", dagdeel: s.dagdeel || "", tijdslot: s.tijdslot || "", omschrijving: s.omschrijving || "" }); }}>bewerken</button>
|
||
<button className="link danger" onClick={() => verwijder(s.id)}>verwijderen</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
{items.length === 0 && <tr><td colSpan="6" className="muted">Nog geen stages.</td></tr>}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
/* -------------------------------- Gebruikers ------------------------------ */
|
||
const GEBRUIKERSROLLEN = [
|
||
{ value: "beheerder", label: "Beheerder" },
|
||
{ value: "medewerker", label: "Medewerker" },
|
||
{ value: "ouder", label: "Ouder" },
|
||
{ value: "leerling", label: "Leerling" },
|
||
];
|
||
|
||
export function GebruikersPage() {
|
||
const { items, error, loading, reload, setError } = useList("gebruikers");
|
||
const [personen, setPersonen] = useState([]);
|
||
const leeg = { username: "", password: "", first_name: "", last_name: "", email: "", rol: "medewerker", persoon: "", is_staff: false, is_active: true };
|
||
const [form, setForm] = useState(leeg);
|
||
const [editId, setEditId] = useState(null);
|
||
|
||
useEffect(() => { listResource("personen").then(setPersonen).catch(() => {}); }, []);
|
||
|
||
async function opslaan(e) {
|
||
e.preventDefault();
|
||
const payload = {
|
||
username: form.username, first_name: form.first_name, last_name: form.last_name,
|
||
email: form.email, rol: form.rol, persoon: form.persoon || null,
|
||
is_staff: form.is_staff, is_active: form.is_active,
|
||
};
|
||
if (form.password) payload.password = form.password;
|
||
try {
|
||
if (editId) await updateResource("gebruikers", editId, payload);
|
||
else await createResource("gebruikers", payload);
|
||
setForm(leeg);
|
||
setEditId(null);
|
||
await reload();
|
||
} catch (err) { setError(err.message); }
|
||
}
|
||
async function verwijder(id) {
|
||
if (!confirm("Deze gebruiker verwijderen?")) return;
|
||
try { await deleteResource("gebruikers", id); await reload(); } catch (err) { setError(err.message); }
|
||
}
|
||
function bewerk(u) {
|
||
setEditId(u.id);
|
||
setForm({ username: u.username, password: "", first_name: u.first_name || "", last_name: u.last_name || "", email: u.email || "", rol: u.rol || "medewerker", persoon: u.persoon || "", is_staff: u.is_staff, is_active: u.is_active });
|
||
}
|
||
|
||
return (
|
||
<section>
|
||
<h1>Gebruikers</h1>
|
||
<p className="muted">Beheer inloggers en hun rol. Alleen beheerders kunnen dit scherm gebruiken.</p>
|
||
<Foutmelding msg={error} />
|
||
<form className="form-card" onSubmit={opslaan}>
|
||
<div className="form-row">
|
||
<input placeholder="Gebruikersnaam" value={form.username} required onChange={(e) => setForm({ ...form, username: e.target.value })} />
|
||
<input type="password" placeholder={editId ? "Wachtwoord (leeg = ongewijzigd)" : "Wachtwoord"} value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} />
|
||
<select value={form.rol} onChange={(e) => setForm({ ...form, rol: e.target.value })}>
|
||
{GEBRUIKERSROLLEN.map((r) => <option key={r.value} value={r.value}>{r.label}</option>)}
|
||
</select>
|
||
</div>
|
||
<div className="form-row">
|
||
<input placeholder="Voornaam" value={form.first_name} onChange={(e) => setForm({ ...form, first_name: e.target.value })} />
|
||
<input placeholder="Achternaam" value={form.last_name} onChange={(e) => setForm({ ...form, last_name: e.target.value })} />
|
||
<input type="email" placeholder="E-mail" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
|
||
</div>
|
||
<div className="form-row">
|
||
<select value={form.persoon || ""} onChange={(e) => setForm({ ...form, persoon: e.target.value })}>
|
||
<option value="">— koppel aan persoon (optioneel) —</option>
|
||
{personen.map((p) => <option key={p.id} value={p.id}>{p.volledige_naam} ({p.rol_label})</option>)}
|
||
</select>
|
||
<label className="veld"><input type="checkbox" checked={form.is_staff} onChange={(e) => setForm({ ...form, is_staff: e.target.checked })} /> beheerder (is_staff)</label>
|
||
<label className="veld"><input type="checkbox" checked={form.is_active} onChange={(e) => setForm({ ...form, is_active: e.target.checked })} /> actief</label>
|
||
</div>
|
||
<div className="form-row">
|
||
<button className="btn primary" type="submit">{editId ? "Opslaan" : "Toevoegen"}</button>
|
||
{editId && <button type="button" className="btn" onClick={() => { setEditId(null); setForm(leeg); }}>Annuleren</button>}
|
||
</div>
|
||
</form>
|
||
{loading ? <p>Laden…</p> : (
|
||
<table className="grid">
|
||
<thead><tr><th>Gebruiker</th><th>Rol</th><th>Persoon</th><th>Status</th><th></th></tr></thead>
|
||
<tbody>
|
||
{items.map((u) => (
|
||
<tr key={u.id}>
|
||
<td>{u.username}{(u.first_name || u.last_name) && <div className="muted small">{u.first_name} {u.last_name}</div>}</td>
|
||
<td>{u.rol_label || "—"}{u.is_staff && <span className="tag core"> beheer</span>}</td>
|
||
<td className="muted">{u.persoon_naam || "—"}</td>
|
||
<td className="muted small">{u.is_active ? "actief" : "inactief"}</td>
|
||
<td className="row-actions">
|
||
<button className="link" onClick={() => bewerk(u)}>bewerken</button>
|
||
<button className="link danger" onClick={() => verwijder(u.id)}>verwijderen</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
{items.length === 0 && <tr><td colSpan="5" className="muted">Geen gebruikers.</td></tr>}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
/* -------------------------------- Conflicten ------------------------------ */
|
||
function Conflicten({ schooljaar }) {
|
||
const [data, setData] = useState(null);
|
||
const [error, setError] = useState(null);
|
||
useEffect(() => {
|
||
if (!schooljaar) return;
|
||
listResource("conflicten", `?schooljaar=${schooljaar}`).then(setData).catch((e) => setError(e.message));
|
||
}, [schooljaar]);
|
||
if (!schooljaar) return <p className="muted">Kies eerst een schooljaar.</p>;
|
||
if (error) return <Foutmelding msg={error} />;
|
||
if (!data) return <p>Laden…</p>;
|
||
return (
|
||
<div>
|
||
<p className="muted">{data.aantal === 0 ? "Geen conflicten gevonden 🎉" : `${data.fouten} fout(en) en ${data.waarschuwingen} waarschuwing(en).`}</p>
|
||
{data.conflicten.map((c, i) => (
|
||
<div className={c.ernst === "fout" ? "conflict fout" : "conflict waarschuwing"} key={i}>
|
||
<div className="conflict-kop"><strong>{c.tijdslot}</strong> <span className="tag">{c.type}</span></div>
|
||
<div>{c.detail}</div>
|
||
<div className="muted small">Blokken: {c.blokken.join(", ")}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ------------------------------ Datumhulpjes ------------------------------ */
|
||
function pad2(n) { return String(n).padStart(2, "0"); }
|
||
function fmtISO(d) { return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`; }
|
||
function fmtDM(d) { return `${pad2(d.getDate())}-${pad2(d.getMonth() + 1)}`; }
|
||
function maandagVan(d) { const x = new Date(d); x.setHours(0, 0, 0, 0); const wd = (x.getDay() + 6) % 7; x.setDate(x.getDate() - wd); return x; }
|
||
function plusDagen(d, n) { const x = new Date(d); x.setDate(x.getDate() + n); return x; }
|
||
|
||
/* ------------------------- Rooster-scope (filter/print) ------------------- */
|
||
// Welke leerlingen raakt een blok (via groep, subgroep of individueel)?
|
||
export function leerlingenVanBlok(blok, ctx) {
|
||
if (blok.groep) return ctx.leerlingen.filter((l) => l.groep === blok.groep).map((l) => l.id);
|
||
if (blok.subgroep) {
|
||
const s = ctx.subgroepen.find((x) => x.id === blok.subgroep);
|
||
return s ? s.leden_namen.map((m) => m.id) : [];
|
||
}
|
||
if (blok.leerling) return [blok.leerling];
|
||
return [];
|
||
}
|
||
// Welke leerlingen vallen binnen een gekozen scope (klas/bovenliggende groep/leerling)?
|
||
export function scopeLeerlingen(scope, ctx) {
|
||
if (scope.type === "leerling") return [scope.id];
|
||
if (scope.type === "klas") return ctx.leerlingen.filter((l) => l.groep === scope.id).map((l) => l.id);
|
||
if (scope.type === "leerplein") {
|
||
const p = ctx.leerpleinen.find((x) => x.id === scope.id);
|
||
if (!p) return [];
|
||
const ids = new Set(p.leerlingen || []);
|
||
(p.groepen || []).forEach((g) => ctx.leerlingen.filter((l) => l.groep === g).forEach((l) => ids.add(l.id)));
|
||
(p.subgroepen || []).forEach((sid) => {
|
||
const s = ctx.subgroepen.find((x) => x.id === sid);
|
||
if (s) s.leden_namen.forEach((m) => ids.add(m.id));
|
||
});
|
||
return [...ids];
|
||
}
|
||
return [];
|
||
}
|
||
// Valt een blok binnen de gekozen scope?
|
||
export function blokInScope(blok, scope, ctx) {
|
||
if (scope.type === "alles" || !scope.id) return true;
|
||
if (scope.type === "personeel") return (blok.begeleiders || []).includes(scope.id);
|
||
const set = new Set(scopeLeerlingen(scope, ctx));
|
||
return leerlingenVanBlok(blok, ctx).some((id) => set.has(id));
|
||
}
|
||
|
||
function groepVanSubgroep(subgroepen, subgroepId) {
|
||
const sub = subgroepen.find((s) => s.id === subgroepId);
|
||
return sub ? sub.groep : null;
|
||
}
|
||
|
||
function bovenliggendeGroep(blok, subgroepen) {
|
||
if (blok.groep) return blok.groep;
|
||
if (blok.subgroep) return groepVanSubgroep(subgroepen, blok.subgroep);
|
||
return null;
|
||
}
|
||
|
||
/* ----------------------------- Blok bewerken/kopiëren --------------------- */
|
||
function BlokBewerker({ blok, ctx, onSluit, onKlaar }) {
|
||
const { activiteiten, locaties, lokalen, groepen, subgroepen, leerlingen, medewerkers, tijdsloten } = ctx;
|
||
const [f, setF] = useState({
|
||
tijdslot: blok.tijdslot,
|
||
activiteit: blok.activiteit,
|
||
locatie: blok.locatie || "",
|
||
lokaal: blok.lokaal || "",
|
||
doel_type: blok.doel_type,
|
||
doel: blok.groep || blok.subgroep || blok.leerling || "",
|
||
begeleiders: [...(blok.begeleiders || [])],
|
||
opmerkingen: blok.opmerkingen || "",
|
||
});
|
||
const [kopieDoelen, setKopieDoelen] = useState([]);
|
||
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 [subgroepGroepFilter, setSubgroepGroepFilter] = useState(() => (
|
||
blok.subgroep ? groepVanSubgroep(subgroepen, blok.subgroep) || "" : ""
|
||
));
|
||
const gekozenGroep = f.doel_type === "groep"
|
||
? (f.doel ? Number(f.doel) : null)
|
||
: f.doel_type === "subgroep"
|
||
? (subgroepGroepFilter || groepVanSubgroep(subs, Number(f.doel)))
|
||
: bovenliggendeGroep(blok, subs);
|
||
const subgroepOpties = gekozenGroep ? subs.filter((s) => s.groep === gekozenGroep) : subs;
|
||
const doelOpties = f.doel_type === "groep" ? groepen : f.doel_type === "subgroep" ? subgroepOpties : leerlingen;
|
||
const splitGroep = gekozenGroep || blok.groep || groepVanSubgroep(subs, blok.subgroep) || null;
|
||
const splitOpties = splitGroep ? subs.filter((s) => s.groep === splitGroep) : subs;
|
||
const splitGroepNaam = splitGroep ? (groepen.find((g) => g.id === splitGroep)?.naam || "groep") : "groep";
|
||
|
||
async function maakSubgroep() {
|
||
if (!nieuweSub.trim()) return;
|
||
try {
|
||
const s = await createResource("subgroepen", { naam: nieuweSub.trim(), groep: gekozenGroep || null });
|
||
setSubs([...subs, s]);
|
||
setSubgroepGroepFilter(s.groep || "");
|
||
setF({ ...f, doel_type: "subgroep", doel: s.id });
|
||
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: f.tijdslot, activiteit: f.activiteit, locatie: f.locatie || null, lokaal: f.lokaal || 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 = () => ({
|
||
groep: f.doel_type === "groep" ? f.doel : null,
|
||
subgroep: f.doel_type === "subgroep" ? f.doel : null,
|
||
leerling: f.doel_type === "leerling" ? f.doel : null,
|
||
});
|
||
async function opslaan() {
|
||
try { await updateResource("roosterblokken", blok.id, { tijdslot: f.tijdslot, activiteit: f.activiteit, locatie: f.locatie || null, lokaal: f.lokaal || null, ...doelPayload(), begeleiders: f.begeleiders, opmerkingen: f.opmerkingen }); await onKlaar(); }
|
||
catch (e) { setError(e.message); }
|
||
}
|
||
async function kopieer() {
|
||
try {
|
||
for (const ts of kopieDoelen) {
|
||
await createResource("roosterblokken", { schooljaar: blok.schooljaar, tijdslot: ts, activiteit: f.activiteit, locatie: f.locatie || null, lokaal: f.lokaal || null, ...doelPayload(), begeleiders: f.begeleiders, opmerkingen: f.opmerkingen });
|
||
}
|
||
await onKlaar();
|
||
} catch (e) { setError(e.message); }
|
||
}
|
||
async function verwijderen() {
|
||
if (!confirm("Dit blok (alle weken) verwijderen?")) return;
|
||
try { await deleteResource("roosterblokken", blok.id); await onKlaar(); } catch (e) { setError(e.message); }
|
||
}
|
||
return (
|
||
<div className="modal-overlay no-print" onClick={onSluit}>
|
||
<div className="modal rooster-modal" role="dialog" aria-modal="true" aria-label="Roosterblok bewerken" onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-kop">
|
||
<div>
|
||
<h2>{blok.activiteit_naam || "Roosterblok"}</h2>
|
||
<div className="muted small">{blok.doel_naam || "Bewerken en splitsen"}</div>
|
||
</div>
|
||
<button type="button" className="icon-btn" title="Sluiten" onClick={onSluit}>×</button>
|
||
</div>
|
||
<div className="blok-editor modal-editor">
|
||
<div className="blok-editor-kop">
|
||
<strong>Vak bewerken</strong>
|
||
<span className="muted small">Wijzig, splits of kopieer dit blok</span>
|
||
</div>
|
||
<Foutmelding msg={error} />
|
||
<div className="editor-grid">
|
||
<select value={f.tijdslot} title="Tijdslot" onChange={(e) => setF({ ...f, tijdslot: e.target.value })}>
|
||
{tijdsloten.map((t) => <option key={t.id} value={t.id}>{t.dag_label} {t.start_tijd?.slice(0, 5)} {t.naam}</option>)}
|
||
</select>
|
||
<select value={f.activiteit} title="Activiteit" onChange={(e) => setF({ ...f, activiteit: e.target.value })}>
|
||
{activiteiten.map((a) => <option key={a.id} value={a.id}>{a.naam}</option>)}
|
||
</select>
|
||
<select value={f.locatie} title="Locatie" onChange={(e) => setF({ ...f, locatie: e.target.value })}>
|
||
<option value="">— locatie —</option>
|
||
{locaties.map((l) => <option key={l.id} value={l.id}>{l.naam}</option>)}
|
||
</select>
|
||
<select value={f.lokaal} title="Lokaal" onChange={(e) => setF({ ...f, lokaal: e.target.value })}>
|
||
<option value="">— lokaal —</option>
|
||
{lokalen.map((l) => <option key={l.id} value={l.id}>{l.naam}</option>)}
|
||
</select>
|
||
<input placeholder="Opmerking" value={f.opmerkingen} onChange={(e) => setF({ ...f, opmerkingen: e.target.value })} />
|
||
</div>
|
||
|
||
<details className="editor-detail">
|
||
<summary>Doelgroep en begeleiding</summary>
|
||
<div className="editor-grid">
|
||
<select value={f.doel_type} onChange={(e) => {
|
||
setF({ ...f, doel_type: e.target.value, doel: "" });
|
||
if (e.target.value !== "subgroep") setSubgroepGroepFilter("");
|
||
}}>
|
||
<option value="groep">Groep</option>
|
||
<option value="subgroep">Subgroep</option>
|
||
<option value="leerling">Individuele leerling</option>
|
||
</select>
|
||
<select value={f.doel} onChange={(e) => setF({ ...f, doel: e.target.value })}>
|
||
<option value="">— kies {f.doel_type} —</option>
|
||
{doelOpties.map((o) => <option key={o.id} value={o.id}>{o.naam || o.volledige_naam}</option>)}
|
||
</select>
|
||
{f.doel_type === "subgroep" && (
|
||
<>
|
||
<select value={subgroepGroepFilter || ""} onChange={(e) => { setSubgroepGroepFilter(e.target.value ? Number(e.target.value) : ""); setF({ ...f, doel: "", doel_type: "subgroep" }); }}>
|
||
<option value="">— alle groepen —</option>
|
||
{groepen.map((g) => <option key={g.id} value={g.id}>{g.naam}</option>)}
|
||
</select>
|
||
<input placeholder="Nieuwe subgroep" value={nieuweSub} onChange={(e) => setNieuweSub(e.target.value)} />
|
||
<button type="button" className="btn icon-label" onClick={maakSubgroep} title="Subgroep aanmaken">＋ <span>Subgroep</span></button>
|
||
</>
|
||
)}
|
||
</div>
|
||
<div className="chips compact">
|
||
{medewerkers.map((m) => <button type="button" key={m.id} className={f.begeleiders.includes(m.id) ? "chip on" : "chip"} onClick={() => toggleBeg(m.id)} title={m.rol_label || "Begeleider"}>{m.volledige_naam}{m.rol_label ? ` · ${m.rol_label}` : ""}</button>)}
|
||
</div>
|
||
</details>
|
||
|
||
<div className="editor-actions">
|
||
<button type="button" className="btn primary icon-label" onClick={opslaan} title="Opslaan">✓ <span>Opslaan</span></button>
|
||
<button type="button" className="btn icon-label" onClick={verwijderen} title="Verwijderen">🗑 <span>Verwijderen</span></button>
|
||
</div>
|
||
|
||
<details className="editor-detail split-editor" open>
|
||
<summary>Splitsen onder {splitGroepNaam}</summary>
|
||
<div className="chips compact">
|
||
{splitOpties.map((s) => <button type="button" key={s.id} className={splitSubs.includes(s.id) ? "chip on" : "chip"} onClick={() => toggleSplit(s.id)}>{s.naam}</button>)}
|
||
{splitOpties.length === 0 && <span className="muted small">Nog geen subgroepen onder deze groep.</span>}
|
||
</div>
|
||
{splitSubs.length > 0 && (
|
||
<div className="split-preview">
|
||
<div className="split-preview-root">{splitGroepNaam}</div>
|
||
<div className="split-preview-children">
|
||
{splitSubs.map((sid) => {
|
||
const sub = splitOpties.find((s) => s.id === sid) || subs.find((s) => s.id === sid);
|
||
return <span key={sid}>{sub ? sub.naam : "Subgroep"}</span>;
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div className="editor-grid">
|
||
<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 icon-label" onClick={maakSplitSub} title="Subgroep toevoegen">＋ <span>Subgroep</span></button>
|
||
</div>
|
||
<label className="veld editor-check"><input type="checkbox" checked={verwijderOrig} onChange={(e) => setVerwijderOrig(e.target.checked)} /> oorspronkelijke blok verwijderen</label>
|
||
<button type="button" className="btn primary icon-label" disabled={splitSubs.length === 0} onClick={opdelen} title="Opdelen">✂ <span>{splitSubs.length}</span></button>
|
||
</details>
|
||
|
||
<details className="editor-detail">
|
||
<summary>Kopiëren</summary>
|
||
<div className="chips compact">
|
||
{tijdsloten.map((t) => <button type="button" key={t.id} className={kopieDoelen.includes(t.id) ? "chip on" : "chip"} onClick={() => toggleKopie(t.id)}>{t.dag_label} {t.start_tijd?.slice(0, 5)} {t.naam}</button>)}
|
||
</div>
|
||
<button type="button" className="btn icon-label" disabled={kopieDoelen.length === 0} onClick={kopieer} title="Kopiëren">⧉ <span>{kopieDoelen.length}</span></button>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ------------------------------- Groepsindeling --------------------------- */
|
||
// Verdeel een hoofdgroep (of bovenliggende groep) kolomsgewijs in subgroepen: per kolom
|
||
// de subgroep met haar verantwoordelijke(n) en de vakken die er gegeven worden.
|
||
function Groepsindeling({ groepen, leerpleinen, subgroepen, medewerkers, blokken, onWijzig }) {
|
||
const [type, setType] = useState("groep");
|
||
const [hoofdId, setHoofdId] = useState("");
|
||
const [nieuw, setNieuw] = useState({ naam: "", groep: "", begeleiders: [] });
|
||
const [error, setError] = useState(null);
|
||
|
||
const opties = type === "groep" ? groepen : leerpleinen;
|
||
const hid = hoofdId ? Number(hoofdId) : null;
|
||
const hoofd = opties.find((o) => o.id === hid);
|
||
|
||
let subs = [];
|
||
if (hid && type === "groep") subs = subgroepen.filter((s) => s.groep === hid);
|
||
if (hid && type === "leerplein" && hoofd) subs = subgroepen.filter((s) => (hoofd.subgroepen || []).includes(s.id));
|
||
const leerpleinGroepen = type === "leerplein" && hoofd
|
||
? groepen.filter((g) => (hoofd.groepen || []).includes(g.id))
|
||
: [];
|
||
const groepenMetSubgroepen = type === "leerplein"
|
||
? leerpleinGroepen.map((g) => ({ groep: g, subs: subgroepen.filter((s) => s.groep === g.id) }))
|
||
: [];
|
||
|
||
const vakkenVan = (subId) => [...new Set(blokken.filter((b) => b.subgroep === subId).map((b) => b.activiteit_naam))];
|
||
const toggleBeg = (id) => setNieuw((n) => n.begeleiders.includes(id) ? { ...n, begeleiders: n.begeleiders.filter((x) => x !== id) } : { ...n, begeleiders: [...n.begeleiders, id] });
|
||
|
||
async function voegToe(e) {
|
||
e.preventDefault();
|
||
try {
|
||
await createResource("subgroepen", { naam: nieuw.naam, groep: type === "groep" ? hid : nieuw.groep, begeleiders: nieuw.begeleiders });
|
||
setNieuw({ naam: "", groep: "", begeleiders: [] });
|
||
await onWijzig();
|
||
} catch (err) { setError(err.message); }
|
||
}
|
||
async function verwijderSub(id) {
|
||
if (!confirm("Deze subgroep verwijderen?")) return;
|
||
try { await deleteResource("subgroepen", id); await onWijzig(); } catch (err) { setError(err.message); }
|
||
}
|
||
|
||
return (
|
||
<div>
|
||
<p className="muted">Kies een hoofdgroep of bovenliggende groep en verdeel die in subgroepen. Per subgroep zie je de vakken en wie verantwoordelijk is.</p>
|
||
<Foutmelding msg={error} />
|
||
<div className="rooster-balk">
|
||
<label className="veld">Type
|
||
<select value={type} onChange={(e) => { setType(e.target.value); setHoofdId(""); setNieuw({ naam: "", groep: "", begeleiders: [] }); }}>
|
||
<option value="groep">Groep</option>
|
||
<option value="leerplein">{BOVENGROEP_LABEL}</option>
|
||
</select>
|
||
</label>
|
||
<select value={hoofdId} onChange={(e) => setHoofdId(e.target.value)}>
|
||
<option value="">— kies {type} —</option>
|
||
{opties.map((o) => <option key={o.id} value={o.id}>{o.naam}</option>)}
|
||
</select>
|
||
</div>
|
||
|
||
{hid && hoofd && (
|
||
<div className="indeling">
|
||
<div className="indeling-hoofd">{hoofd.naam} <span className="muted small">— {type}</span></div>
|
||
{type === "leerplein" ? (
|
||
<div className="indeling-groepen">
|
||
{groepenMetSubgroepen.map(({ groep, subs: groepSubs }) => (
|
||
<div className="indeling-groep" key={groep.id}>
|
||
<div className="indeling-groep-kop">{groep.naam}</div>
|
||
<div className="indeling-kolommen">
|
||
{groepSubs.map((s) => (
|
||
<div className="indeling-kolom" key={s.id}>
|
||
<div className="indeling-kop">{s.naam}</div>
|
||
<div className="small">Verantwoordelijke: {s.begeleiders_namen && s.begeleiders_namen.length ? s.begeleiders_namen.map((x) => x.naam).join(", ") : "geen"}</div>
|
||
<div className="small">Vakken: {vakkenVan(s.id).join(", ") || "nog geen vakken"}</div>
|
||
<div className="small muted">{s.aantal_leden} leerling(en)</div>
|
||
<button className="link danger small" onClick={() => verwijderSub(s.id)}>verwijderen</button>
|
||
</div>
|
||
))}
|
||
{groepSubs.length === 0 && <div className="muted small">Nog geen subgroepen onder {groep.naam}.</div>}
|
||
</div>
|
||
</div>
|
||
))}
|
||
{leerpleinGroepen.length === 0 && <div className="muted">Nog geen groepen onder {hoofd.naam}.</div>}
|
||
</div>
|
||
) : (
|
||
<div className="indeling-kolommen">
|
||
{subs.map((s) => (
|
||
<div className="indeling-kolom" key={s.id}>
|
||
<div className="indeling-kop">{s.naam}</div>
|
||
<div className="small">Verantwoordelijke: {s.begeleiders_namen && s.begeleiders_namen.length ? s.begeleiders_namen.map((x) => x.naam).join(", ") : "geen"}</div>
|
||
<div className="small">Vakken: {vakkenVan(s.id).join(", ") || "nog geen vakken"}</div>
|
||
<div className="small muted">{s.aantal_leden} leerling(en)</div>
|
||
<button className="link danger small" onClick={() => verwijderSub(s.id)}>verwijderen</button>
|
||
</div>
|
||
))}
|
||
{subs.length === 0 && <div className="muted">Nog geen subgroepen onder {hoofd.naam}.</div>}
|
||
</div>
|
||
)}
|
||
|
||
<form className="form-card" onSubmit={voegToe}>
|
||
<div className="muted small">Subgroep toevoegen onder {type === "groep" ? hoofd.naam : `een groep binnen deze ${BOVENGROEP_LABEL_LC}`}:</div>
|
||
<div className="form-row">
|
||
{type === "leerplein" && (
|
||
<select value={nieuw.groep || ""} required onChange={(e) => setNieuw({ ...nieuw, groep: e.target.value })}>
|
||
<option value="">— groep —</option>
|
||
{leerpleinGroepen.map((g) => <option key={g.id} value={g.id}>{g.naam}</option>)}
|
||
</select>
|
||
)}
|
||
<input placeholder="Naam subgroep" value={nieuw.naam} required onChange={(e) => setNieuw({ ...nieuw, naam: e.target.value })} />
|
||
<button className="btn primary" type="submit">+ Subgroep</button>
|
||
</div>
|
||
<div className="leden-keuze">
|
||
<div className="muted small">Verantwoordelijke(n):</div>
|
||
<div className="chips">
|
||
{medewerkers.map((m) => <button type="button" key={m.id} className={nieuw.begeleiders.includes(m.id) ? "chip on" : "chip"} onClick={() => toggleBeg(m.id)}>{m.volledige_naam}</button>)}
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ---------------------------------- Rooster ------------------------------- */
|
||
// Eén component met twee modi:
|
||
// - mode="view" -> Rooster (alleen-lezen weergave, om te bekijken/printen)
|
||
// - mode="edit" -> Roostermaker (volledige bewerking + drag-and-drop)
|
||
export function RoosterScherm({ mode }) {
|
||
const edit = mode === "edit";
|
||
const [printAan, setPrintAan] = useState(false);
|
||
const [schooljaren, setSchooljaren] = useState([]);
|
||
const [schooljaar, setSchooljaar] = useState("");
|
||
const [tijdsloten, setTijdsloten] = useState([]);
|
||
const [activiteiten, setActiviteiten] = useState([]);
|
||
const [locaties, setLocaties] = useState([]);
|
||
const [lokalen, setLokalen] = useState([]);
|
||
const [groepen, setGroepen] = useState([]);
|
||
const [subgroepen, setSubgroepen] = useState([]);
|
||
const [leerlingen, setLeerlingen] = useState([]);
|
||
const [medewerkers, setMedewerkers] = useState([]);
|
||
const [blokken, setBlokken] = useState([]);
|
||
const [kalender, setKalender] = useState([]);
|
||
const [afwezig, setAfwezig] = useState([]);
|
||
const [uitzonderingen, setUitzonderingen] = useState([]);
|
||
const [stages, setStages] = useState([]);
|
||
const [leerpleinen, setLeerpleinen] = useState([]);
|
||
const [maandag, setMaandag] = useState(() => maandagVan(new Date()));
|
||
const [toonForm, setToonForm] = useState(false);
|
||
const [tab, setTab] = useState("week");
|
||
const [error, setError] = useState(null);
|
||
// Scope-filter (ook voor gericht afdrukken): per klas/bovenliggende groep/leerling/personeel.
|
||
const [scopeType, setScopeType] = useState("alles");
|
||
const [scopeId, setScopeId] = useState("");
|
||
// Blok bewerken/kopiëren (alleen in de Roostermaker).
|
||
const [bewerkBlok, setBewerkBlok] = useState(null);
|
||
|
||
const leeg = { tijdslot: "", activiteit: "", locatie: "", lokaal: "", doel_type: "groep", doel: "", begeleiders: [], opmerkingen: "" };
|
||
const [form, setForm] = useState(leeg);
|
||
const [splitNieuwBlok, setSplitNieuwBlok] = useState(false);
|
||
const [splitNieuwDoelen, setSplitNieuwDoelen] = useState([]);
|
||
|
||
// Drag-and-drop via pointer events (werkt op muis én touch).
|
||
const dragRef = useRef(null);
|
||
const laadRef = useRef(() => {});
|
||
const [ghost, setGhost] = useState(null);
|
||
const [hoverSlot, setHoverSlot] = useState(null);
|
||
|
||
useEffect(() => {
|
||
listResource("schooljaren").then((j) => { setSchooljaren(j); if (j.length) setSchooljaar((s) => s || String(j[0].id)); }).catch((e) => setError(e.message));
|
||
listResource("tijdsloten").then(setTijdsloten).catch(() => {});
|
||
listResource("activiteiten").then(setActiviteiten).catch(() => {});
|
||
listResource("locaties").then(setLocaties).catch(() => {});
|
||
listResource("lokalen").then(setLokalen).catch(() => {});
|
||
listResource("groepen").then(setGroepen).catch(() => {});
|
||
listResource("subgroepen").then(setSubgroepen).catch(() => {});
|
||
listResource("personen", "?rol=leerling").then(setLeerlingen).catch(() => {});
|
||
listResource("personen").then((ps) => setMedewerkers(ps.filter((p) => p.rol !== "leerling"))).catch(() => {});
|
||
listResource("leerpleinen").then(setLeerpleinen).catch(() => {});
|
||
listResource("stages", "?actief=1").then(setStages).catch(() => setStages([]));
|
||
// Afdrukken alleen tonen als de print-module aanstaat.
|
||
getModules().then((ms) => setPrintAan(ms.some((m) => m.key === "printing" && m.enabled))).catch(() => {});
|
||
}, []);
|
||
|
||
// Scope-context + gefilterde blokken (voor weergave/afdrukken).
|
||
const scopeCtx = { leerlingen, subgroepen, leerpleinen };
|
||
const scope = { type: scopeType, id: scopeId ? Number(scopeId) : "" };
|
||
const zichtbareBlokken = blokken.filter((b) => blokInScope(b, scope, scopeCtx));
|
||
const scopeOpties = scopeType === "klas" ? groepen
|
||
: scopeType === "leerplein" ? leerpleinen
|
||
: scopeType === "leerling" ? leerlingen
|
||
: scopeType === "personeel" ? medewerkers
|
||
: [];
|
||
|
||
const weekDatums = [0, 1, 2, 3, 4].map((i) => plusDagen(maandag, i));
|
||
const vanISO = fmtISO(maandag);
|
||
const totISO = fmtISO(plusDagen(maandag, 6));
|
||
|
||
async function laadBlokken() {
|
||
if (!schooljaar) { setBlokken([]); return; }
|
||
try {
|
||
setBlokken(await listResource("roosterblokken", `?schooljaar=${schooljaar}`));
|
||
setKalender(await listResource("kalenderdagen", `?schooljaar=${schooljaar}`));
|
||
setError(null);
|
||
} catch (e) { setError(e.message); }
|
||
}
|
||
async function laadWeek() {
|
||
if (!schooljaar) return;
|
||
try {
|
||
setAfwezig(await listResource("afwezigheden", `?van=${vanISO}&tot=${totISO}`));
|
||
setUitzonderingen(await listResource("blok-uitzonderingen", `?schooljaar=${schooljaar}&van=${vanISO}&tot=${totISO}`));
|
||
} catch (e) { setError(e.message); }
|
||
}
|
||
async function herlaadNaBlokWijziging() {
|
||
try { setSubgroepen(await listResource("subgroepen")); } catch { /* blokken verversen blijft leidend */ }
|
||
await laadBlokken();
|
||
}
|
||
laadRef.current = laadBlokken;
|
||
useEffect(() => { laadBlokken(); }, [schooljaar]);
|
||
useEffect(() => { laadWeek(); }, [schooljaar, vanISO]);
|
||
|
||
// Listeners voor drag-and-drop, één keer opgezet.
|
||
useEffect(() => {
|
||
function move(e) {
|
||
if (!dragRef.current) return;
|
||
setGhost({ x: e.clientX, y: e.clientY, label: dragRef.current.activiteit_naam });
|
||
const el = document.elementFromPoint(e.clientX, e.clientY);
|
||
const cell = el && el.closest("[data-tijdslot]");
|
||
setHoverSlot(cell ? Number(cell.dataset.tijdslot) : null);
|
||
}
|
||
async function up(e) {
|
||
if (!dragRef.current) return;
|
||
const el = document.elementFromPoint(e.clientX, e.clientY);
|
||
const cell = el && el.closest("[data-tijdslot]");
|
||
const doel = cell ? Number(cell.dataset.tijdslot) : null;
|
||
const blok = dragRef.current;
|
||
dragRef.current = null;
|
||
setGhost(null);
|
||
setHoverSlot(null);
|
||
if (doel && doel !== blok.tijdslot) {
|
||
try { await updateResource("roosterblokken", blok.id, { tijdslot: doel }); await laadRef.current(); }
|
||
catch (err) { setError(err.message); }
|
||
}
|
||
}
|
||
window.addEventListener("pointermove", move);
|
||
window.addEventListener("pointerup", up);
|
||
return () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); };
|
||
}, []);
|
||
|
||
// Sneltoetsen (alleen in de Roostermaker).
|
||
useEffect(() => {
|
||
if (!edit) return;
|
||
function onKey(e) {
|
||
const t = e.target;
|
||
const typing = t && (t.tagName === "INPUT" || t.tagName === "SELECT" || t.tagName === "TEXTAREA" || t.isContentEditable);
|
||
if (e.key === "Escape") { setBewerkBlok(null); sluitNieuwBlok(); return; }
|
||
if (typing) return;
|
||
if (e.key === "n" || e.key === "N") { setTab("week"); setBewerkBlok(null); setToonForm((v) => { if (v) resetNieuweSplit(); return !v; }); }
|
||
else if (e.key === "ArrowLeft") { setMaandag((m) => plusDagen(m, -7)); }
|
||
else if (e.key === "ArrowRight") { setMaandag((m) => plusDagen(m, 7)); }
|
||
else if (e.key === "t" || e.key === "T") { setMaandag(maandagVan(new Date())); }
|
||
}
|
||
window.addEventListener("keydown", onKey);
|
||
return () => window.removeEventListener("keydown", onKey);
|
||
}, [edit]);
|
||
|
||
function startDrag(e, blok) {
|
||
e.preventDefault();
|
||
dragRef.current = blok;
|
||
setGhost({ x: e.clientX, y: e.clientY, label: blok.activiteit_naam });
|
||
setHoverSlot(blok.tijdslot);
|
||
}
|
||
|
||
function resetNieuweSplit() {
|
||
setSplitNieuwBlok(false);
|
||
setSplitNieuwDoelen([]);
|
||
}
|
||
function openNieuwBlok() {
|
||
setBewerkBlok(null);
|
||
setToonForm(true);
|
||
}
|
||
function sluitNieuwBlok() {
|
||
setToonForm(false);
|
||
resetNieuweSplit();
|
||
}
|
||
function toggleNieuwSplitDoel(id) {
|
||
setSplitNieuwDoelen((doelen) => doelen.includes(id) ? doelen.filter((x) => x !== id) : [...doelen, id]);
|
||
}
|
||
|
||
const doelOpties = form.doel_type === "groep" ? groepen : form.doel_type === "subgroep" ? subgroepen : leerlingen;
|
||
const splitNieuweOpties = form.doel_type === "groep" && form.doel
|
||
? subgroepen.filter((s) => s.groep === Number(form.doel))
|
||
: [];
|
||
const splitNieuweGroep = groepen.find((g) => g.id === Number(form.doel));
|
||
function toggleBegeleider(id) {
|
||
setForm((f) => f.begeleiders.includes(id) ? { ...f, begeleiders: f.begeleiders.filter((x) => x !== id) } : { ...f, begeleiders: [...f.begeleiders, id] });
|
||
}
|
||
async function opslaan(e) {
|
||
e.preventDefault();
|
||
const basis = { schooljaar, tijdslot: form.tijdslot, activiteit: form.activiteit, locatie: form.locatie || null, lokaal: form.lokaal || null, begeleiders: form.begeleiders, opmerkingen: form.opmerkingen };
|
||
try {
|
||
if (form.doel_type === "groep" && splitNieuwBlok && splitNieuwDoelen.length > 0) {
|
||
for (const subgroep of splitNieuwDoelen) {
|
||
await createResource("roosterblokken", { ...basis, groep: null, subgroep, leerling: null });
|
||
}
|
||
} else {
|
||
await createResource("roosterblokken", {
|
||
...basis,
|
||
groep: form.doel_type === "groep" ? form.doel : null,
|
||
subgroep: form.doel_type === "subgroep" ? form.doel : null,
|
||
leerling: form.doel_type === "leerling" ? form.doel : null,
|
||
});
|
||
}
|
||
setForm({ ...leeg, doel_type: form.doel_type });
|
||
sluitNieuwBlok();
|
||
await herlaadNaBlokWijziging();
|
||
} catch (err) { setError(err.message); }
|
||
}
|
||
async function verwijder(id) {
|
||
if (!confirm("Dit roosterblok (alle weken) verwijderen?")) return;
|
||
try { await deleteResource("roosterblokken", id); await laadBlokken(); } catch (err) { setError(err.message); }
|
||
}
|
||
async function laatVervallen(blok, iso) {
|
||
try { await createResource("blok-uitzonderingen", { roosterblok: blok.id, datum: iso, vervalt: true }); await laadWeek(); }
|
||
catch (err) { setError(err.message); }
|
||
}
|
||
async function herstel(uitId) {
|
||
try { await deleteResource("blok-uitzonderingen", uitId); await laadWeek(); } catch (err) { setError(err.message); }
|
||
}
|
||
async function dagVervallen(iso) {
|
||
try { await createResource("kalenderdagen", { schooljaar, datum: iso, type: "vrije_dag", omschrijving: "vervallen" }); await laadBlokken(); }
|
||
catch (err) { setError(err.message); }
|
||
}
|
||
async function dagHerstel(kalId) {
|
||
try { await deleteResource("kalenderdagen", kalId); await laadBlokken(); }
|
||
catch (err) { setError(err.message); }
|
||
}
|
||
|
||
// Hulpfuncties voor het effectieve rooster.
|
||
const kalenderOp = (iso) => kalender.find((k) => k.datum === iso);
|
||
const uitzOp = (blokId, iso) => uitzonderingen.find((u) => u.roosterblok === blokId && u.datum === iso);
|
||
// Op id vergelijken, niet op naam: twee personen kunnen dezelfde naam hebben.
|
||
const persoonAfwezig = (id, iso) => afwezig.some((a) => a.persoon === id && a.start_datum <= iso && a.eind_datum >= iso);
|
||
const rolAfk = (id) => { const m = medewerkers.find((x) => x.id === id); return m ? (ROL_AFK[m.rol] || "") : ""; };
|
||
// Stage: welke leerlingen zijn op een gegeven tijdslot op stage (en dus niet in de klas)?
|
||
const tijdslotById = (id) => tijdsloten.find((t) => t.id === id);
|
||
const leerlingNaam = (id) => { const l = leerlingen.find((x) => x.id === id); return l ? l.volledige_naam : "?"; };
|
||
function stageDektTijdslot(stage, t) {
|
||
if (!t) return false;
|
||
if (stage.omvang === "blok") return stage.tijdslot === t.id;
|
||
if (stage.dag === null || stage.dag === undefined || stage.dag !== t.dag) return false;
|
||
if (stage.omvang === "hele_dag") return true;
|
||
const isOchtend = (t.start_tijd || "") < "12:00";
|
||
return (stage.dagdeel === "ochtend" && isOchtend) || (stage.dagdeel === "middag" && !isOchtend);
|
||
}
|
||
function leerlingenOpStageBij(t) {
|
||
const set = new Set();
|
||
for (const st of stages) { if (stageDektTijdslot(st, t)) set.add(st.leerling); }
|
||
return set;
|
||
}
|
||
function stageNoot(b) {
|
||
const t = tijdslotById(b.tijdslot);
|
||
const opStage = leerlingenOpStageBij(t);
|
||
if (opStage.size === 0) return null;
|
||
if (b.doel_type === "leerling") {
|
||
return opStage.has(b.leerling) ? <div className="small rb-stage">📍 Op stage — niet in de klas</div> : null;
|
||
}
|
||
const namen = leerlingenVanBlok(b, scopeCtx).filter((id) => opStage.has(id)).map(leerlingNaam);
|
||
if (namen.length === 0) return null;
|
||
return <div className="small rb-stage">📍 Op stage: {namen.join(", ")}</div>;
|
||
}
|
||
const editorCtx = { activiteiten, locaties, lokalen, groepen, subgroepen, leerlingen, medewerkers, tijdsloten };
|
||
const isOpenBlok = (b) => edit && bewerkBlok && bewerkBlok.id === b.id;
|
||
const toggleOpenBlok = (b) => setBewerkBlok((huidig) => (huidig && huidig.id === b.id ? null : b));
|
||
function renderRoosterBlok(b, iso, kal) {
|
||
const uit = uitzOp(b.id, iso);
|
||
const vervallen = !!kal || (uit && uit.vervalt);
|
||
return (
|
||
<div
|
||
className={(vervallen ? "rooster-blok vervallen" : "rooster-blok") + (edit ? " klikbaar" : "") + (isOpenBlok(b) ? " open" : "")}
|
||
key={b.id}
|
||
style={{ borderLeftColor: b.activiteit_kleur }}
|
||
onClick={edit ? () => toggleOpenBlok(b) : undefined}
|
||
title={edit ? "Klik om te bewerken" : undefined}
|
||
>
|
||
<div className="rb-top">
|
||
{edit && <span className="rb-greep" onPointerDown={(e) => startDrag(e, b)} onClick={(e) => e.stopPropagation()} title="Sleep naar ander tijdslot">⠿</span>}
|
||
<strong>{b.activiteit_icoon || vakIcoon(b.activiteit_naam)} {b.activiteit_naam}</strong>
|
||
{edit && <button type="button" className="icon-btn" onClick={(e) => { e.stopPropagation(); toggleOpenBlok(b); }} title="Bewerken">✎</button>}
|
||
{edit && <button type="button" className="icon-btn danger rb-x" onClick={(e) => { e.stopPropagation(); verwijder(b.id); }} title="Blok verwijderen">×</button>}
|
||
</div>
|
||
<div className="small">Doel: {b.doel_naam} <span className="muted">({b.doel_type})</span></div>
|
||
{b.locatie_naam && <div className="small">Locatie: {b.locatie_naam}</div>}
|
||
{b.lokaal_naam && <div className="small">Lokaal: {b.lokaal_naam}</div>}
|
||
{b.begeleiders_namen.length > 0 && (
|
||
<div className="small muted">Begeleiding: {b.begeleiders_namen.map((x, idx) => (
|
||
<span key={x.id} className={persoonAfwezig(x.id, iso) ? "afwezig" : ""}>{idx > 0 ? ", " : ""}{x.naam}{rolAfk(x.id) ? ` (${rolAfk(x.id)})` : ""}</span>
|
||
))}</div>
|
||
)}
|
||
{stageNoot(b)}
|
||
{kal && <div className="small rb-status">Vervalt - {kal.type_label}</div>}
|
||
{!kal && uit && uit.vervalt && <div className="small rb-status">Vervalt {uit.opmerking ? `(${uit.opmerking})` : ""}{edit && <button type="button" className="icon-btn" title="Herstellen" onClick={(e) => { e.stopPropagation(); herstel(uit.id); }}>↺</button>}</div>}
|
||
{!kal && uit && !uit.vervalt && uit.vervanger_naam && <div className="small rb-verv">Vervanger: {uit.vervanger_naam}</div>}
|
||
{edit && !kal && !uit && (
|
||
<button type="button" className="icon-btn danger rb-verval no-print" title="Dit vak laten vervallen" onClick={(e) => { e.stopPropagation(); laatVervallen(b, iso); }}>⊘</button>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
function renderCompactBlok(b, iso, kal) {
|
||
const uit = uitzOp(b.id, iso);
|
||
const vervallen = !!kal || (uit && uit.vervalt);
|
||
return (
|
||
<div
|
||
className={(vervallen ? "split-vak vervallen" : "split-vak") + (edit ? " klikbaar" : "") + (isOpenBlok(b) ? " open" : "")}
|
||
key={b.id}
|
||
style={{ borderLeftColor: b.activiteit_kleur }}
|
||
onClick={edit ? () => toggleOpenBlok(b) : undefined}
|
||
title={edit ? "Klik om te bewerken" : undefined}
|
||
>
|
||
<div className="split-vak-kop">
|
||
{edit && <span className="rb-greep" onPointerDown={(e) => startDrag(e, b)} onClick={(e) => e.stopPropagation()} title="Sleep naar ander tijdslot">⠿</span>}
|
||
<strong>{b.activiteit_icoon || vakIcoon(b.activiteit_naam)} {b.activiteit_naam}</strong>
|
||
{edit && <button type="button" className="icon-btn" onClick={(e) => { e.stopPropagation(); toggleOpenBlok(b); }} title="Bewerken">✎</button>}
|
||
{edit && <button type="button" className="icon-btn danger" onClick={(e) => { e.stopPropagation(); verwijder(b.id); }} title="Blok verwijderen">×</button>}
|
||
</div>
|
||
<div className="split-vak-meta">
|
||
{b.locatie_naam && <span>{b.locatie_naam}</span>}
|
||
{b.lokaal_naam && <span>{b.lokaal_naam}</span>}
|
||
{b.begeleiders_namen.length > 0 && <span>{b.begeleiders_namen.map((x) => x.naam).join(", ")}</span>}
|
||
{vervallen && <span className="rb-status">Vervalt</span>}
|
||
</div>
|
||
{stageNoot(b)}
|
||
</div>
|
||
);
|
||
}
|
||
function renderSlotBlokken(slotBlokken, iso, kal) {
|
||
const losse = [];
|
||
const perGroep = new Map();
|
||
slotBlokken.forEach((b) => {
|
||
const gid = bovenliggendeGroep(b, subgroepen);
|
||
if (!gid) { losse.push(b); return; }
|
||
if (!perGroep.has(gid)) perGroep.set(gid, []);
|
||
perGroep.get(gid).push(b);
|
||
});
|
||
const out = losse.map((b) => renderRoosterBlok(b, iso, kal));
|
||
if (scopeType === "leerplein" && scopeId && perGroep.size > 0) {
|
||
const leerplein = leerpleinen.find((l) => l.id === Number(scopeId));
|
||
const kolommen = [...perGroep.entries()];
|
||
out.push(
|
||
<div className="blok-splitsing leerplein-splitsing" key={`leerplein-${scopeId}`}>
|
||
<div className="split-header">
|
||
<span className="split-icon">⤴</span>
|
||
<div className="split-title">
|
||
<strong>{leerplein ? leerplein.naam : BOVENGROEP_LABEL}</strong>
|
||
<span>{BOVENGROEP_LABEL} → groepen</span>
|
||
</div>
|
||
<span className="split-count">{kolommen.length}</span>
|
||
</div>
|
||
<div className="split-kolommen split-vertakking">
|
||
{kolommen.map(([gid, groepBlokken]) => {
|
||
const groep = groepen.find((g) => g.id === gid);
|
||
return (
|
||
<div className="split-kolom" key={gid}>
|
||
<div className="split-kop split-node-kop">{groep ? groep.naam : "Groep"}</div>
|
||
<div className="split-vakken">{groepBlokken.map((b) => renderCompactBlok(b, iso, kal))}</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
return out;
|
||
}
|
||
perGroep.forEach((groepBlokken, gid) => {
|
||
const heeftSplitsing = groepBlokken.some((b) => b.subgroep);
|
||
if (!heeftSplitsing) {
|
||
groepBlokken.forEach((b) => out.push(renderRoosterBlok(b, iso, kal)));
|
||
return;
|
||
}
|
||
const groep = groepen.find((g) => g.id === gid);
|
||
const heleGroep = groepBlokken.filter((b) => b.groep === gid);
|
||
const subIds = [...new Set(groepBlokken.filter((b) => b.subgroep).map((b) => b.subgroep))];
|
||
const kolomAantal = subIds.length + (heleGroep.length > 0 ? 1 : 0);
|
||
out.push(
|
||
<div className="blok-splitsing" key={`split-${gid}`}>
|
||
<div className="split-header">
|
||
<span className="split-icon">⤴</span>
|
||
<div className="split-title">
|
||
<strong>{groep ? groep.naam : "Groep"}</strong>
|
||
<span>Groep → subgroepen</span>
|
||
</div>
|
||
<span className="split-count">{kolomAantal}</span>
|
||
</div>
|
||
<div className="split-kolommen split-vertakking">
|
||
{heleGroep.length > 0 && (
|
||
<div className="split-kolom">
|
||
<div className="split-kop split-node-kop">Hele groep</div>
|
||
<div className="split-vakken">{heleGroep.map((b) => renderCompactBlok(b, iso, kal))}</div>
|
||
</div>
|
||
)}
|
||
{subIds.map((sid) => {
|
||
const sub = subgroepen.find((s) => s.id === sid);
|
||
const blocks = groepBlokken.filter((b) => b.subgroep === sid);
|
||
return (
|
||
<div className="split-kolom" key={sid}>
|
||
<div className="split-kop split-node-kop">{sub ? sub.naam : "Subgroep"}</div>
|
||
<div className="split-vakken">{blocks.map((b) => renderCompactBlok(b, iso, kal))}</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
});
|
||
return out;
|
||
}
|
||
|
||
return (
|
||
<section className="rooster-scherm">
|
||
<h1>{edit ? "Roostermaker" : "Rooster"}</h1>
|
||
<p className="muted no-print">
|
||
{edit
|
||
? "Sleep een blok naar een ander tijdslot om het te verplaatsen. Vrije dagen, afwezigheid en uitzonderingen worden meegenomen."
|
||
: "Bekijk het weekrooster. Vrije dagen, afwezigheid en uitzonderingen zijn verwerkt."}
|
||
</p>
|
||
<Foutmelding msg={error} />
|
||
|
||
<div className="rooster-balk no-print">
|
||
<label className="veld">Schooljaar
|
||
<select value={schooljaar} onChange={(e) => setSchooljaar(e.target.value)}>
|
||
<option value="">— kies —</option>
|
||
{schooljaren.map((j) => <option key={j.id} value={j.id}>{j.naam}</option>)}
|
||
</select>
|
||
</label>
|
||
{schooljaar && (
|
||
<div className="week-nav">
|
||
<button className="btn" onClick={() => setMaandag(plusDagen(maandag, -7))}>‹ vorige</button>
|
||
<button className="btn" onClick={() => setMaandag(maandagVan(new Date()))}>deze week</button>
|
||
<button className="btn" onClick={() => setMaandag(plusDagen(maandag, 7))}>volgende ›</button>
|
||
<span className="week-label">week van {fmtDM(maandag)}</span>
|
||
</div>
|
||
)}
|
||
{edit && schooljaar && tab === "week" && <button className="btn primary icon-label" title="Vak toevoegen" onClick={toonForm ? sluitNieuwBlok : openNieuwBlok}>{toonForm ? "×" : "＋"} <span>{toonForm ? "Sluiten" : "Vak"}</span></button>}
|
||
{printAan && schooljaar && (edit ? tab === "week" : true) && (
|
||
<button className="btn print-knop icon-label" title="Rooster afdrukken" onClick={() => window.print()}>🖨 <span>Print</span></button>
|
||
)}
|
||
</div>
|
||
|
||
{schooljaar && (edit ? tab === "week" : true) && (
|
||
<div className="rooster-balk no-print scope-balk">
|
||
<label className="veld">Toon
|
||
<select value={scopeType} onChange={(e) => { setScopeType(e.target.value); setScopeId(""); }}>
|
||
<option value="alles">Alles</option>
|
||
<option value="klas">Per klas</option>
|
||
<option value="leerplein">Per {BOVENGROEP_LABEL_LC}</option>
|
||
<option value="leerling">Per leerling</option>
|
||
<option value="personeel">Per personeel</option>
|
||
</select>
|
||
</label>
|
||
{scopeType !== "alles" && (
|
||
<select value={scopeId} onChange={(e) => setScopeId(e.target.value)}>
|
||
<option value="">— kies —</option>
|
||
{scopeOpties.map((o) => <option key={o.id} value={o.id}>{o.naam || o.volledige_naam}</option>)}
|
||
</select>
|
||
)}
|
||
{scopeType !== "alles" && scopeId && <span className="muted small">{zichtbareBlokken.length} blok(ken)</span>}
|
||
{edit && groepen.length > 0 && (
|
||
<div className="klas-strip">
|
||
<button type="button" className={scopeType === "alles" ? "chip on" : "chip"} onClick={() => { setScopeType("alles"); setScopeId(""); }}>Alle</button>
|
||
{groepen.map((g) => (
|
||
<button
|
||
type="button"
|
||
key={g.id}
|
||
className={scopeType === "klas" && Number(scopeId) === g.id ? "chip on" : "chip"}
|
||
onClick={() => { setScopeType("klas"); setScopeId(String(g.id)); }}
|
||
>
|
||
{g.naam}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{edit && (
|
||
<div className="tabbar no-print">
|
||
<button className={tab === "week" ? "tab on" : "tab"} title="Weekrooster" onClick={() => setTab("week")}>▦ Week</button>
|
||
<button className={tab === "conflicten" ? "tab on" : "tab"} title="Conflicten" onClick={() => setTab("conflicten")}>⚠ Conflicten</button>
|
||
<button className={tab === "schooljaar" ? "tab on" : "tab"} title="Schooljaar" onClick={() => setTab("schooljaar")}>◷ Jaar</button>
|
||
<button className={tab === "instellingen" ? "tab on" : "tab"} title="Instellingen" onClick={() => setTab("instellingen")}>⚙ Instellingen</button>
|
||
</div>
|
||
)}
|
||
{edit && tab === "week" && (
|
||
<p className="muted small no-print sneltoets-hint">Sneltoetsen: <b>N</b> nieuw blok · <b>←</b>/<b>→</b> week · <b>T</b> deze week · <b>Esc</b> sluiten</p>
|
||
)}
|
||
|
||
{edit && schooljaar && tab === "week" && toonForm && (
|
||
<div className="modal-overlay no-print" onClick={sluitNieuwBlok}>
|
||
<form className="modal rooster-modal" role="dialog" aria-modal="true" aria-label="Vak toevoegen" onSubmit={opslaan} onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-kop">
|
||
<div>
|
||
<h2>Vak toevoegen</h2>
|
||
<div className="muted small">Maak één blok of splits direct over subgroepen.</div>
|
||
</div>
|
||
<button type="button" className="icon-btn" title="Sluiten" onClick={sluitNieuwBlok}>×</button>
|
||
</div>
|
||
<div className="blok-editor modal-editor">
|
||
<div className="blok-editor-kop">
|
||
<strong>Basis</strong>
|
||
<span className="muted small">Tijd, vak en doel</span>
|
||
</div>
|
||
<div className="editor-grid">
|
||
<select value={form.tijdslot} required onChange={(e) => setForm({ ...form, tijdslot: e.target.value })}>
|
||
<option value="">— tijdslot —</option>
|
||
{tijdsloten.map((t) => <option key={t.id} value={t.id}>{t.dag_label} {t.start_tijd?.slice(0, 5)} {t.naam}</option>)}
|
||
</select>
|
||
<select value={form.activiteit} required onChange={(e) => setForm({ ...form, activiteit: e.target.value })}>
|
||
<option value="">— activiteit —</option>
|
||
{activiteiten.map((a) => <option key={a.id} value={a.id}>{a.naam}</option>)}
|
||
</select>
|
||
<select value={form.locatie} onChange={(e) => setForm({ ...form, locatie: e.target.value })}>
|
||
<option value="">— locatie (optioneel) —</option>
|
||
{locaties.map((l) => <option key={l.id} value={l.id}>{l.naam}</option>)}
|
||
</select>
|
||
<select value={form.lokaal} onChange={(e) => setForm({ ...form, lokaal: e.target.value })}>
|
||
<option value="">— lokaal (optioneel) —</option>
|
||
{lokalen.map((l) => <option key={l.id} value={l.id}>{l.naam}</option>)}
|
||
</select>
|
||
<input placeholder="Opmerking (optioneel)" value={form.opmerkingen} onChange={(e) => setForm({ ...form, opmerkingen: e.target.value })} />
|
||
</div>
|
||
|
||
<details className="editor-detail" open>
|
||
<summary>Doelgroep</summary>
|
||
<div className="editor-grid">
|
||
<select value={form.doel_type} onChange={(e) => { setForm({ ...form, doel_type: e.target.value, doel: "" }); resetNieuweSplit(); }}>
|
||
<option value="groep">Groep</option>
|
||
<option value="subgroep">Subgroep</option>
|
||
<option value="leerling">Individuele leerling</option>
|
||
</select>
|
||
<select value={form.doel} required onChange={(e) => { setForm({ ...form, doel: e.target.value }); resetNieuweSplit(); }}>
|
||
<option value="">— kies {form.doel_type} —</option>
|
||
{doelOpties.map((o) => <option key={o.id} value={o.id}>{o.naam || o.volledige_naam}</option>)}
|
||
</select>
|
||
</div>
|
||
</details>
|
||
|
||
{form.doel_type === "groep" && form.doel && (
|
||
<details className="editor-detail split-editor" open>
|
||
<summary>Groep direct splitsen</summary>
|
||
<label className="veld editor-check">
|
||
<input type="checkbox" checked={splitNieuwBlok} onChange={(e) => { setSplitNieuwBlok(e.target.checked); if (!e.target.checked) setSplitNieuwDoelen([]); }} />
|
||
blok onder subgroepen plaatsen
|
||
</label>
|
||
{splitNieuwBlok && (
|
||
<>
|
||
<div className="chips compact">
|
||
{splitNieuweOpties.map((s) => <button type="button" key={s.id} className={splitNieuwDoelen.includes(s.id) ? "chip on" : "chip"} onClick={() => toggleNieuwSplitDoel(s.id)}>{s.naam}</button>)}
|
||
{splitNieuweOpties.length === 0 && <span className="muted small">Nog geen subgroepen onder deze groep.</span>}
|
||
</div>
|
||
{splitNieuwDoelen.length > 0 && (
|
||
<div className="split-preview">
|
||
<div className="split-preview-root">{splitNieuweGroep?.naam || "Groep"}</div>
|
||
<div className="split-preview-children">
|
||
{splitNieuwDoelen.map((sid) => <span key={sid}>{splitNieuweOpties.find((s) => s.id === sid)?.naam || "Subgroep"}</span>)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</details>
|
||
)}
|
||
|
||
<details className="editor-detail" open>
|
||
<summary>Begeleiders</summary>
|
||
<div className="chips compact">
|
||
{medewerkers.map((m) => <button type="button" key={m.id} className={form.begeleiders.includes(m.id) ? "chip on" : "chip"} onClick={() => toggleBegeleider(m.id)}>{m.volledige_naam}{m.rol_label ? ` · ${m.rol_label}` : ""}</button>)}
|
||
{medewerkers.length === 0 && <span className="muted small">Nog geen medewerkers.</span>}
|
||
</div>
|
||
</details>
|
||
|
||
<div className="editor-actions">
|
||
<button className="btn primary icon-label" type="submit" disabled={splitNieuwBlok && splitNieuwDoelen.length === 0}>＋ <span>{splitNieuwBlok ? `${splitNieuwDoelen.length} blok(ken)` : "Vak toevoegen"}</span></button>
|
||
<button type="button" className="btn" onClick={sluitNieuwBlok}>Annuleren</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
)}
|
||
|
||
{schooljaar && tab === "week" && (
|
||
<div className="rooster-grid">
|
||
{WEEKDAGEN.map((d, i) => {
|
||
const datum = weekDatums[i];
|
||
const iso = fmtISO(datum);
|
||
const kal = kalenderOp(iso);
|
||
const slots = tijdsloten.filter((t) => t.dag === d.value).sort((a, b) => a.volgorde - b.volgorde);
|
||
return (
|
||
<div className={kal ? "rooster-kolom vrij" : "rooster-kolom"} key={d.value}>
|
||
<div className="rooster-dag">
|
||
{d.label} <span className="muted">{fmtDM(datum)}</span>
|
||
{kal && <div className={`tag dag-${kal.type}`}>{kal.type_label}{kal.omschrijving ? `: ${kal.omschrijving}` : ""}</div>}
|
||
{edit && (kal
|
||
? <button type="button" className="icon-btn no-print dag-actie" title="Weer lesdag maken" onClick={() => dagHerstel(kal.id)}>↺</button>
|
||
: <button type="button" className="icon-btn danger no-print dag-actie" title="Dag laten vervallen" onClick={() => dagVervallen(iso)}>⊘</button>
|
||
)}
|
||
</div>
|
||
{slots.length === 0 && <div className="muted small">—</div>}
|
||
{slots.map((t) => {
|
||
const slotBlokken = zichtbareBlokken.filter((b) => b.tijdslot === t.id);
|
||
return (
|
||
<div
|
||
className={hoverSlot === t.id ? "slot-cel hover" : "slot-cel"}
|
||
data-tijdslot={t.id}
|
||
key={t.id}
|
||
>
|
||
<div className="slot-tijd">{t.start_tijd?.slice(0, 5)} {t.naam}</div>
|
||
{renderSlotBlokken(slotBlokken, iso, kal)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{schooljaar && tab === "conflicten" && <Conflicten schooljaar={schooljaar} />}
|
||
|
||
{tab === "schooljaar" && (
|
||
<div className="instellingen">
|
||
<p className="muted">Maak hier snel een schooljaar aan en beheer de kalender (studiedagen, vrije dagen, vakanties).</p>
|
||
<SchooljaarPage />
|
||
</div>
|
||
)}
|
||
|
||
{tab === "instellingen" && (
|
||
<div className="instellingen">
|
||
<p className="muted">Bouwstenen van het rooster — beheer ze hier zonder het Rooster te verlaten.</p>
|
||
<TijdslotenPage />
|
||
<ActiviteitenPage />
|
||
<LokalenPage />
|
||
<LocatiesPage />
|
||
</div>
|
||
)}
|
||
|
||
{edit && bewerkBlok && (
|
||
<BlokBewerker
|
||
blok={bewerkBlok}
|
||
ctx={editorCtx}
|
||
onSluit={() => setBewerkBlok(null)}
|
||
onKlaar={async () => { setBewerkBlok(null); await herlaadNaBlokWijziging(); }}
|
||
/>
|
||
)}
|
||
{edit && ghost && <div className="drag-ghost" style={{ left: ghost.x + 10, top: ghost.y + 10 }}>{ghost.label}</div>}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
// Twee schermen op basis van dezelfde component.
|
||
export function RoosterWeergavePage() { return <RoosterScherm mode="view" />; }
|
||
export function RoostermakerPage() { return <RoosterScherm mode="edit" />; }
|
||
|
||
/* -------------------------------- Urenoverzicht --------------------------- */
|
||
export function UrenPage() {
|
||
const [schooljaren, setSchooljaren] = useState([]);
|
||
const [schooljaar, setSchooljaar] = useState("");
|
||
const [data, setData] = useState(null);
|
||
const [error, setError] = useState(null);
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
useEffect(() => {
|
||
listResource("schooljaren")
|
||
.then((j) => { setSchooljaren(j); if (j.length) setSchooljaar(String(j[0].id)); })
|
||
.catch((e) => setError(e.message));
|
||
}, []);
|
||
useEffect(() => {
|
||
if (!schooljaar) { setData(null); return; }
|
||
setLoading(true);
|
||
listResource("urenoverzicht", `?schooljaar=${schooljaar}`)
|
||
.then((d) => { setData(d); setError(null); })
|
||
.catch((e) => setError(e.message))
|
||
.finally(() => setLoading(false));
|
||
}, [schooljaar]);
|
||
|
||
return (
|
||
<section>
|
||
<h1>Urenoverzicht</h1>
|
||
<p className="muted">Lesuren per groep en per leerling over het hele schooljaar. Vrije dagen, vakanties en studiedagen tellen niet mee; vervallen blokken zijn afgetrokken. Stage-uren tellen mee bij de leerling.</p>
|
||
<Foutmelding msg={error} />
|
||
<div className="form-row">
|
||
<select value={schooljaar} onChange={(e) => setSchooljaar(e.target.value)}>
|
||
<option value="">— schooljaar —</option>
|
||
{schooljaren.map((j) => <option key={j.id} value={j.id}>{j.naam}</option>)}
|
||
</select>
|
||
</div>
|
||
{loading ? <p>Laden…</p> : data && (
|
||
<>
|
||
<h2>Per groep</h2>
|
||
<table className="grid">
|
||
<thead><tr><th>Groep</th><th>Vak</th><th>Uren (schooljaar)</th></tr></thead>
|
||
<tbody>
|
||
{data.per_groep.length === 0 && <tr><td colSpan="3" className="muted">Geen lesblokken gevonden.</td></tr>}
|
||
{data.per_groep.flatMap((g) => [
|
||
...g.vakken.map((v, i) => (
|
||
<tr key={g.groep + "-" + v.vak}>
|
||
<td>{i === 0 ? <strong>{g.groep}</strong> : ""}</td>
|
||
<td>{vakIcoon(v.vak)} {v.vak}</td>
|
||
<td>{v.uren} u</td>
|
||
</tr>
|
||
)),
|
||
<tr key={g.groep + "-tot"} className="uren-totaal">
|
||
<td></td><td><em>totaal</em></td><td><strong>{g.totaal} u</strong></td>
|
||
</tr>,
|
||
])}
|
||
</tbody>
|
||
</table>
|
||
<h2>Per leerling</h2>
|
||
<table className="grid">
|
||
<thead><tr><th>Leerling</th><th>Groep</th><th>Vakken</th><th>Stage</th><th>Totaal</th></tr></thead>
|
||
<tbody>
|
||
{data.per_leerling.length === 0 && <tr><td colSpan="5" className="muted">Geen leerlingen met uren.</td></tr>}
|
||
{data.per_leerling.map((l) => (
|
||
<tr key={l.leerling}>
|
||
<td>{l.leerling}</td>
|
||
<td className="muted">{l.groep || "—"}</td>
|
||
<td className="muted small">{l.vakken.map((v) => `${v.vak} ${v.uren}u`).join(", ") || "—"}</td>
|
||
<td>{l.stage_uren ? `${l.stage_uren} u` : "—"}</td>
|
||
<td><strong>{l.totaal} u</strong></td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</>
|
||
)}
|
||
</section>
|
||
);
|
||
}
|