bes-r/roosterwijs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

scope-/filterbalk vereenvoudigd: chips + één persoon-keuzelijst

Browse source
This commit is contained in:
bes-r 2026-06-18 22:58:41 +02:00
parent 19862ae8aa
commit 7f1ada1d48
2 changed files with 30 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
frontend/src/pages.jsx
View file

@ -2478,22 +2478,7 @@ export function RoosterScherm({ mode }) {
{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 === "leerling" || scopeType === "personeel") && (
<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>}
<span className="scope-label">Toon</span>
{(groepen.length > 0 || leerpleinen.length > 0) && (
<div className="klas-strip">
<button type="button" className={scopeType === "alles" ? "chip on" : "chip"} onClick={() => { setScopeType("alles"); setScopeId(""); }}>Alle</button>
@ -2505,6 +2490,29 @@ export function RoosterScherm({ mode }) {
))}
</div>
)}
<select
className={(scopeType === "leerling" || scopeType === "personeel") ? "scope-persoon on" : "scope-persoon"}
value={scopeType === "leerling" ? "l" + scopeId : scopeType === "personeel" ? "p" + scopeId : ""}
onChange={(e) => {
const v = e.target.value;
if (!v) { setScopeType("alles"); setScopeId(""); }
else if (v[0] === "l") { setScopeType("leerling"); setScopeId(v.slice(1)); }
else { setScopeType("personeel"); setScopeId(v.slice(1)); }
}}
>
<option value="">👤 Eén persoon…</option>
{leerlingen.length > 0 && (
<optgroup label="Leerlingen">
{leerlingen.map((l) => <option key={"l" + l.id} value={"l" + l.id}>{l.volledige_naam}</option>)}
</optgroup>
)}
{medewerkers.length > 0 && (
<optgroup label="Personeel">
{medewerkers.map((m) => <option key={"p" + m.id} value={"p" + m.id}>{m.volledige_naam}</option>)}
</optgroup>
)}
</select>
{scopeType !== "alles" && scopeId && <span className="muted small scope-aantal">{zichtbareBlokken.length} blok(ken)</span>}
</div>
)}

8
frontend/src/styles.css
View file

@ -214,7 +214,7 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
.split-vak-kop { display: flex; align-items: center; gap: 5px; }
.split-vak-kop strong { min-width: 0; flex: 1; font-size: 12px; }
.split-vak-meta { display: flex; flex-direction: column; gap: 1px; color: var(--muted); font-size: 11px; margin-top: 2px; }
.klas-strip { display: flex; flex-wrap: nowrap; gap: 6px; flex-basis: 100%; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.klas-strip { display: flex; flex-wrap: nowrap; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.klas-strip .chip { white-space: nowrap; flex: 0 0 auto; }
/* --- Blok-bewerker --- */
@ -271,7 +271,11 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
.modal-hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0 12px; }
.rooster-blok.klikbaar { cursor: pointer; }
.rooster-blok.klikbaar:hover { box-shadow: 0 0 0 2px var(--brand-soft); }
.scope-balk { margin-top: -6px; }
.scope-balk { margin-top: -6px; align-items: center; gap: 8px; }
.scope-label { color: var(--muted); font-size: 14px; flex: 0 0 auto; }
.scope-persoon { flex: 0 0 auto; max-width: 200px; }
.scope-persoon.on { border-color: var(--brand); color: var(--brand); font-weight: 600; }
.scope-aantal { flex: 0 0 auto; white-space: nowrap; }
/* --- Afdrukken --- */
.print-knop { margin-left: auto; background: #fff; }