Terminplaner: Portal-Ansicht Einstellungen – Nachbesserungen

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

public/termine-dom.js

@@ -112,6 +112,51 @@ export const abschnitt = (titel, hinweis, ...inhalt) => h('section', { class: 'k
 /** Felder einer abgeschalteten Funktion: gesperrt (fieldset disabled sperrt alle Felder darin), sonst unveraendert. */
 export const gesperrt = (nurLesen, felder) => (nurLesen ? h('fieldset', { class: 'tm-gruppe-felder', disabled: true }, felder) : felder)
 
+/**
+ * Klappt unter einem Knopf einen Editor auf und zu (Bearbeiten, „+ Neu“). baue(schliessen) liefert den Editor (Element), der in box
+ * gesetzt wird. Fokus-Regel fuer alle Editoren: beim Oeffnen ins erste Feld, beim Schliessen ueber „Abbrechen“/„Schliessen“ (schliessen())
+ * zurueck auf den Knopf, beim erneuten Klick auf den Knopf bleibt er dort.
+ */
+export function editorUmschalter({ knopf, box, baue }) {
+  const zu = () => { box.replaceChildren(); knopf.setAttribute('aria-expanded', 'false') }
+  knopf.addEventListener('click', () => {
+    if (box.firstChild) { zu(); return }
+    knopf.setAttribute('aria-expanded', 'true')
+    const editor = baue(() => { zu(); knopf.focus() })
+    box.replaceChildren(editor)
+    editor.querySelector('input:not(:disabled), select:not(:disabled), textarea:not(:disabled)')?.focus()
+  })
+}
+
+/**
+ * Zeile einer Liste mit Editor darunter (Leistung, Person/Platz, Abwesenheit, Sonderoeffnung): Kurzfassung (haupt) mit Pille, Knoepfe
+ * (vorKnopf, z. B. Pfeile) und der Knopf „Bearbeiten“ (bei abgeschalteter Funktion „Ansehen“), der den Editor unter der Zeile oeffnet.
+ * attrs: Attribute der Zeile (data-id / data-tag, so findet der Reiter sie nach dem Neuzeichnen), label: Name fuer den Screenreader.
+ */
+export function editorZeile({ attrs, haupt, pille = null, vorKnopf = [], nurLesen, label, baue }) {
+  const box = h('div', { class: 'tm-editor-box' })
+  const knopf = h('button', {
+    type: 'button', class: 'kb-btn-outline tm-knopf', 'data-aktion': 'bearbeiten', 'aria-expanded': 'false', 'aria-label': `${nurLesen ? 'Ansehen' : 'Bearbeiten'}: ${label}`,
+  }, nurLesen ? 'Ansehen' : 'Bearbeiten')
+  editorUmschalter({ knopf, box, baue })
+  return h('li', { class: 'tm-eintrag', ...attrs },
+    h('div', { class: 'tm-kopf' }, h('div', { class: 'tm-haupt' }, haupt), pille),
+    h('div', { class: 'tm-aktionen' }, vorKnopf, knopf),
+    box)
+}
+
+/**
+ * „+ Neu“-Knopf mit Editor darunter. voll: die Obergrenze der Liste ist erreicht (Knopf gesperrt, grenzText erklaert es).
+ * => { leiste, box }: leiste (Knopf und Hinweis; null bei abgeschalteter Funktion) und box (Platz fuer den Editor) setzt der Aufrufer in den Reiter.
+ */
+export function neuerEintrag({ nurLesen, text, werkzeug, primaer = false, voll = false, grenzText = '', baue }) {
+  const box = h('div', { class: 'tm-formular-box' })
+  if (nurLesen) return { leiste: null, box }
+  const knopf = h('button', { type: 'button', class: primaer ? 'kb-btn-primary' : 'kb-btn-outline', 'data-werkzeug': werkzeug, 'aria-expanded': 'false', disabled: voll }, text)
+  editorUmschalter({ knopf, box, baue })
+  return { leiste: h('div', { class: 'tm-werkzeug-zeile' }, knopf, voll ? h('p', { class: 'tm-hinweis' }, grenzText) : null), box }
+}
+
 /** Link zum CSV-Export der Termine. */
 export const exportLink = (projectId, text) => h('a', { href: exportUrl(projectId), download: 'termine.csv' }, text)