scope-balk: chips wrappen + persoonkeuze op eigen regel
This commit is contained in:
bes-r
parent
7f1ada1d48
commit
8361484749
2 changed files with 43 additions and 37 deletions
|
|
@ -2478,41 +2478,46 @@ export function RoosterScherm({ mode }) {
|
||||||
|
|
||||||
{schooljaar && (edit ? tab === "week" : true) && (
|
{schooljaar && (edit ? tab === "week" : true) && (
|
||||||
<div className="rooster-balk no-print scope-balk">
|
<div className="rooster-balk no-print scope-balk">
|
||||||
<span className="scope-label">Toon</span>
|
|
||||||
{(groepen.length > 0 || leerpleinen.length > 0) && (
|
{(groepen.length > 0 || leerpleinen.length > 0) && (
|
||||||
<div className="klas-strip">
|
<div className="scope-rij">
|
||||||
<button type="button" className={scopeType === "alles" ? "chip on" : "chip"} onClick={() => { setScopeType("alles"); setScopeId(""); }}>Alle</button>
|
<span className="scope-label">Toon</span>
|
||||||
{groepen.map((g) => (
|
<div className="klas-strip">
|
||||||
<button type="button" key={"g" + g.id} className={scopeType === "klas" && Number(scopeId) === g.id ? "chip on" : "chip"} onClick={() => { setScopeType("klas"); setScopeId(String(g.id)); }}>{g.naam}</button>
|
<button type="button" className={scopeType === "alles" ? "chip on" : "chip"} onClick={() => { setScopeType("alles"); setScopeId(""); }}>Alle</button>
|
||||||
))}
|
{groepen.map((g) => (
|
||||||
{leerpleinen.map((lp) => (
|
<button type="button" key={"g" + g.id} className={scopeType === "klas" && Number(scopeId) === g.id ? "chip on" : "chip"} onClick={() => { setScopeType("klas"); setScopeId(String(g.id)); }}>{g.naam}</button>
|
||||||
<button type="button" key={"lp" + lp.id} className={scopeType === "leerplein" && Number(scopeId) === lp.id ? "chip on chip-plein" : "chip chip-plein"} onClick={() => { setScopeType("leerplein"); setScopeId(String(lp.id)); }}>{lp.naam}</button>
|
))}
|
||||||
))}
|
{leerpleinen.map((lp) => (
|
||||||
|
<button type="button" key={"lp" + lp.id} className={scopeType === "leerplein" && Number(scopeId) === lp.id ? "chip on chip-plein" : "chip chip-plein"} onClick={() => { setScopeType("leerplein"); setScopeId(String(lp.id)); }}>{lp.naam}</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<select
|
<div className="scope-rij">
|
||||||
className={(scopeType === "leerling" || scopeType === "personeel") ? "scope-persoon on" : "scope-persoon"}
|
<span className="scope-label">of één persoon</span>
|
||||||
value={scopeType === "leerling" ? "l" + scopeId : scopeType === "personeel" ? "p" + scopeId : ""}
|
<select
|
||||||
onChange={(e) => {
|
className={(scopeType === "leerling" || scopeType === "personeel") ? "scope-persoon on" : "scope-persoon"}
|
||||||
const v = e.target.value;
|
value={scopeType === "leerling" ? "l" + scopeId : scopeType === "personeel" ? "p" + scopeId : ""}
|
||||||
if (!v) { setScopeType("alles"); setScopeId(""); }
|
onChange={(e) => {
|
||||||
else if (v[0] === "l") { setScopeType("leerling"); setScopeId(v.slice(1)); }
|
const v = e.target.value;
|
||||||
else { setScopeType("personeel"); setScopeId(v.slice(1)); }
|
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">
|
<option value="">👤 kies een leerling of medewerker…</option>
|
||||||
{leerlingen.map((l) => <option key={"l" + l.id} value={"l" + l.id}>{l.volledige_naam}</option>)}
|
{leerlingen.length > 0 && (
|
||||||
</optgroup>
|
<optgroup label="Leerlingen">
|
||||||
)}
|
{leerlingen.map((l) => <option key={"l" + l.id} value={"l" + l.id}>{l.volledige_naam}</option>)}
|
||||||
{medewerkers.length > 0 && (
|
</optgroup>
|
||||||
<optgroup label="Personeel">
|
)}
|
||||||
{medewerkers.map((m) => <option key={"p" + m.id} value={"p" + m.id}>{m.volledige_naam}</option>)}
|
{medewerkers.length > 0 && (
|
||||||
</optgroup>
|
<optgroup label="Personeel">
|
||||||
)}
|
{medewerkers.map((m) => <option key={"p" + m.id} value={"p" + m.id}>{m.volledige_naam}</option>)}
|
||||||
</select>
|
</optgroup>
|
||||||
{scopeType !== "alles" && scopeId && <span className="muted small scope-aantal">{zichtbareBlokken.length} blok(ken)</span>}
|
)}
|
||||||
|
</select>
|
||||||
|
{scopeType !== "alles" && scopeId && <span className="muted small scope-aantal">{zichtbareBlokken.length} blok(ken)</span>}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 { display: flex; align-items: center; gap: 5px; }
|
||||||
.split-vak-kop strong { min-width: 0; flex: 1; font-size: 12px; }
|
.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; }
|
.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: 1 1 auto; min-width: 0; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
|
.klas-strip { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
|
||||||
.klas-strip .chip { white-space: nowrap; flex: 0 0 auto; }
|
.klas-strip .chip { white-space: nowrap; flex: 0 0 auto; }
|
||||||
|
|
||||||
/* --- Blok-bewerker --- */
|
/* --- Blok-bewerker --- */
|
||||||
|
|
@ -271,11 +271,12 @@ 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; }
|
.modal-hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0 12px; }
|
||||||
.rooster-blok.klikbaar { cursor: pointer; }
|
.rooster-blok.klikbaar { cursor: pointer; }
|
||||||
.rooster-blok.klikbaar:hover { box-shadow: 0 0 0 2px var(--brand-soft); }
|
.rooster-blok.klikbaar:hover { box-shadow: 0 0 0 2px var(--brand-soft); }
|
||||||
.scope-balk { margin-top: -6px; align-items: center; gap: 8px; }
|
.scope-balk { margin-top: -6px; flex-direction: column; align-items: stretch; gap: 8px; }
|
||||||
.scope-label { color: var(--muted); font-size: 14px; flex: 0 0 auto; }
|
.scope-rij { display: flex; align-items: baseline; gap: 8px; }
|
||||||
.scope-persoon { flex: 0 0 auto; max-width: 200px; }
|
.scope-label { color: var(--muted); font-size: 14px; flex: 0 0 auto; min-width: 88px; padding-top: 4px; }
|
||||||
|
.scope-persoon { flex: 0 0 auto; max-width: 280px; }
|
||||||
.scope-persoon.on { border-color: var(--brand); color: var(--brand); font-weight: 600; }
|
.scope-persoon.on { border-color: var(--brand); color: var(--brand); font-weight: 600; }
|
||||||
.scope-aantal { flex: 0 0 auto; white-space: nowrap; }
|
.scope-aantal { flex: 0 0 auto; white-space: nowrap; align-self: center; }
|
||||||
|
|
||||||
/* --- Afdrukken --- */
|
/* --- Afdrukken --- */
|
||||||
.print-knop { margin-left: auto; background: #fff; }
|
.print-knop { margin-left: auto; background: #fff; }
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue