Öffnungszeiten: Urlaub-Frage lässt offene Hinweis-Formulare stehen

„Ja, anlegen“ zeichnet nur noch die Hinweis-Liste neu (offene, ungespeicherte
Formulare und Zeilen bleiben), statt den ganzen Abschnitt zu ersetzen.

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

public/zeiten-ausnahmen.js

@@ -9,13 +9,14 @@
    „geschlossen“, ein „bitte prüfen“-Tag (Heiligabend, Silvester, nur ortsuebliche Feiertage) folgt dem Wochenplan.
    Ausnahmen: Betriebsurlaub (von–bis, Text) und Sondertag (Datum, geschlossen oder Zeiten), Geltung „alle Pläne“ oder ein Plan. Nach dem Speichern
    eines Urlaubs ab 2 Tagen fragt der Editor „Hinweis-Leiste dazu anlegen?“ (ctx.hinweisFrage); „Ja“ legt den Vorschlag (hinweisVorschlag) in
-   daten.hinweise an und speichert (danach werden Ausnahmen und die Hinweis-Liste neu gezeichnet). */
+   daten.hinweise an und speichert (danach werden die Ausnahmen neu gezeichnet und die Hinweis-Liste aufgefrischt, ohne offene Hinweis-Formulare anzufassen). */
 
 import { BUNDESLAENDER, datumKurz, datumLang, heuteBerlin, istTag } from './termine-view.js'
 import { abschnitt, allgemeinerFehler, editorZeile, feld, frage, gesperrt, h, neuerEintrag, zeigeFehler } from './termine-dom.js'
 import { MODI, ZEITEN_LIMITS, ZEITEN_MAX, hinweisVorschlag, neueZeitenId, tagFehler } from './zeiten-view.js'
 import { entfernenKnopf, nachSpeichern, stelleVon } from './zeiten-speichern.js'
 import { MODUS_WAHL, tagFelder, tagText } from './zeiten-plaene.js'
+import { hinweisListeErneuern } from './zeiten-leisten.js'
 
 const nachBeginn = (x, y) => (x.von < y.von ? -1 : x.von > y.von ? 1 : x.bis < y.bis ? -1 : x.bis > y.bis ? 1 : 0)
 const zeitraum = (a) => (a.von === a.bis ? datumKurz(a.von) : `${datumKurz(a.von)} – ${datumKurz(a.bis)}`)
@@ -196,7 +197,10 @@ function hinweisFrage(t) {
     }, { container: form })
     if (!ok || !sp.nochHier()) return
     ctx.hinweisFrage = null
-    nachSpeichern(t, `Die Hinweis-Leiste „${v.text}“ ist angelegt.`, '[data-werkzeug="urlaub-neu"]', () => t.zeichne(['ausnahmen', 'hinweise']))
+    nachSpeichern(t, `Die Hinweis-Leiste „${v.text}“ ist angelegt.`, '[data-werkzeug="urlaub-neu"]', () => {
+      t.zeichne(['ausnahmen'])
+      hinweisListeErneuern(t) // der neue Hinweis steht in der Liste; ein offenes, ungespeichertes Hinweis-Formular bleibt, wie es ist
+    })
   })
   return form
 }

public/zeiten-leisten.js

@@ -6,6 +6,8 @@
    tippt den Knopf an) und je Hinweis Text (<= 140), Art (Info, Urlaub, Aktion, Wichtig mit festen Farben wie auf der Website), optionaler Knopf (Link
    https oder Anrufen) und Zeitraum von–bis (Kalendertage, beide optional; „Aktion“ verlangt ein Enddatum). Der Browser prueft frueh (Aktion ohne Ende, Ende vor
    Beginn, leerer Text) und zeigt bei Link und Rufnummer nur einen Hinweis (linkOk): entschieden wird auf dem Server, sein Fehler steht am Feld.
+   Ein anderer Abschnitt kann einen Hinweis anlegen (Urlaub-Frage der Ausnahmen): hinweisListeErneuern(t) zeichnet dann nur die Liste neu und laesst offene Formulare dieses
+   Abschnitts samt ungespeicherter Eingaben stehen.
    Kontakt-Leiste: Ein/Aus, Telefon, Adresse, WhatsApp (Nummer, Starttext, Haken „Datenschutzerklaerung“). Der Server speichert Rufnummern als Ziffern mit
    Laendervorwahl; der Editor zeigt die gespeicherte Nummer aus der Antwort (+49 …) im Feld und in der Meldung, damit der Kunde sieht, was gilt.
    R12: den Zeitpunkt der WhatsApp-Bestaetigung (kontakt.whatsapp.bestaetigtAt) setzt nur der Kunde selbst. In der Kundenansicht ist der Haken gesperrt und der
@@ -48,25 +50,14 @@ function zeitraumText(x) {
 
 const nachBeginn = (a, b) => (tagOder(a.von) < tagOder(b.von) ? -1 : tagOder(a.von) > tagOder(b.von) ? 1 : 0)
 
-export function hinweise(t) {
+/** Eine Zeile der Hinweis-Liste (laufend, geplant oder vergangen) mit ihrem Bearbeiten-Formular unter dem Knopf. */
+function hinweisReihe(t, x, heute) {
   const { ctx } = t
-  const alle = (Array.isArray(ctx.stand.daten.hinweise) ? ctx.stand.daten.hinweise : []).filter((x) => istObjekt(x) && typeof x.id === 'string')
+  const vorbei = tagOder(x.bis) !== '' && x.bis < heute
-  const heute = heuteBerlin()
-  const vorbei = (x) => tagOder(x.bis) !== '' && x.bis < heute
-  const kommend = alle.filter((x) => !vorbei(x)).sort(nachBeginn)
-  const alt = alle.filter(vorbei).sort(nachBeginn).reverse()
-  const voll = alle.length >= ZEITEN_LIMITS.hinweise
-
-  const neu = neuerEintrag({
-    nurLesen: ctx.nurLesen, text: 'Hinweis-Leiste anlegen', werkzeug: 'hinweis-neu', primaer: true, voll, grenzText: `Mehr als ${ZEITEN_LIMITS.hinweise} Hinweise sind nicht möglich.`,
-    baue: (schliessen) => formular(t, { a: null, schliessen }),
-  })
-
-  const reihe = (x) => {
   const art = HINWEIS_ARTEN.includes(x.art) ? x.art : 'info'
   const knopf = istObjekt(x.knopf) && KNOPF_ARTEN.includes(x.knopf.art) ? x.knopf : null
   const von = tagOder(x.von)
-    const zustand = vorbei(x) ? ['vorbei', 'off'] : von && von > heute ? ['geplant', 'wait'] : ['läuft', 'ok']
+  const zustand = vorbei ? ['vorbei', 'off'] : von && von > heute ? ['geplant', 'wait'] : ['läuft', 'ok']
   const text = typeof x.text === 'string' ? x.text : ''
   return editorZeile({
     attrs: { 'data-id': x.id },
@@ -81,18 +72,69 @@ export function hinweise(t) {
     pille: h('span', { class: `tm-pille tm-pille-${zustand[1]}` }, zustand[0]),
     baue: (schliessen) => formular(t, { a: x, schliessen }),
   })
-  }
+}
 
-  return abschnitt('Hinweis-Leiste',
+/**
-    'Eine Leiste ganz oben auf deiner Website – zum Beispiel für Betriebsurlaub, eine Aktion oder etwas Wichtiges. Die Leiste erscheint nur in dem Zeitraum, den du einstellst. Gelten mehrere gleichzeitig, zeigt die Website nur einen: zuerst „Wichtig“, dann „Urlaub“, „Aktion“ und „Info“.',
+ * Die Liste der Hinweise: [Liste der laufenden und geplanten (oder „Keine Hinweise eingetragen.“), eingeklappte Liste der vergangenen]. vorhanden (Map ID => <li>):
-    h('div', { class: 'zt-werkzeuge' }, neu.leiste),
+ * Zeilen, die schon in der Seite stehen, werden wiederverwendet (samt ihrem offenen Formular) statt neu gebaut; nur für den Fall, dass sich an diesen Hinweisen nichts geändert hat.
-    neu.box,
+ */
+function hinweisListe(t, vorhanden = new Map()) {
+  const alle = (Array.isArray(t.ctx.stand.daten.hinweise) ? t.ctx.stand.daten.hinweise : []).filter((x) => istObjekt(x) && typeof x.id === 'string')
+  const heute = heuteBerlin()
+  const vorbei = (x) => tagOder(x.bis) !== '' && x.bis < heute
+  const reihe = (x) => vorhanden.get(x.id) ?? hinweisReihe(t, x, heute)
+  const kommend = alle.filter((x) => !vorbei(x)).sort(nachBeginn)
+  const alt = alle.filter(vorbei).sort(nachBeginn).reverse()
+  return {
+    voll: alle.length >= ZEITEN_LIMITS.hinweise,
+    teile: [
       kommend.length
         ? h('ul', { class: 'tm-eintraege', 'aria-label': 'Laufende und geplante Hinweise' }, kommend.map(reihe))
         : h('p', { class: 'tm-leer' }, 'Keine Hinweise eingetragen.'),
       alt.length
         ? h('details', { class: 'tm-details' }, h('summary', null, `Vergangene Hinweise (${alt.length})`), h('ul', { class: 'tm-eintraege' }, alt.map(reihe)))
-      : null)
+        : null,
+    ],
+  }
+}
+
+const GRENZ_TEXT = `Mehr als ${ZEITEN_LIMITS.hinweise} Hinweise sind nicht möglich.`
+
+export function hinweise(t) {
+  const { ctx } = t
+  const { voll, teile } = hinweisListe(t)
+  const neu = neuerEintrag({
+    nurLesen: ctx.nurLesen, text: 'Hinweis-Leiste anlegen', werkzeug: 'hinweis-neu', primaer: true, voll, grenzText: GRENZ_TEXT,
+    baue: (schliessen) => formular(t, { a: null, schliessen }),
+  })
+  return abschnitt('Hinweis-Leiste',
+    'Eine Leiste ganz oben auf deiner Website – zum Beispiel für Betriebsurlaub, eine Aktion oder etwas Wichtiges. Die Leiste erscheint nur in dem Zeitraum, den du einstellst. Gelten mehrere gleichzeitig, zeigt die Website nur einen: zuerst „Wichtig“, dann „Urlaub“, „Aktion“ und „Info“.',
+    h('div', { class: 'zt-werkzeuge' }, neu.leiste),
+    neu.box,
+    h('div', { class: 'zt-hinweis-liste' }, teile))
+}
+
+/**
+ * Nur die Liste der Hinweise neu zeichnen, ohne den Abschnitt anzufassen: für den Fall, dass ein anderer Abschnitt einen Hinweis angelegt hat (die Frage „Hinweis-Leiste dazu
+ * anlegen?“ der Ausnahmen). Offene, ungespeicherte Formulare bleiben stehen: das Formular „Neuer Hinweis“ liegt nicht in der Liste, und die Zeilen der bisherigen Hinweise werden
+ * mit ihrem offenen Bearbeiten-Formular wiederverwendet. Der Knopf „Hinweis-Leiste anlegen“ folgt der Obergrenze. => false, wenn es den Abschnitt (noch) nicht gibt.
+ */
+export function hinweisListeErneuern(t) {
+  const el = t.wurzel.querySelector('[data-abschnitt="hinweise"]')
+  const platz = el?.querySelector('.zt-hinweis-liste')
+  if (!platz) return false
+  const vorhanden = new Map([...platz.querySelectorAll('li[data-id]')].map((li) => [li.getAttribute('data-id'), li]))
+  const { voll, teile } = hinweisListe(t, vorhanden)
+  platz.replaceChildren(...teile)
+  const knopf = el.querySelector('[data-werkzeug="hinweis-neu"]')
+  if (knopf) {
+    knopf.disabled = voll
+    const zeile = knopf.parentNode
+    const grenze = zeile.querySelector('p')
+    if (voll && !grenze) zeile.append(h('p', { class: 'tm-hinweis' }, GRENZ_TEXT))
+    else if (!voll && grenze) grenze.remove()
+  }
+  return true
 }
 
 /**

public/zeiten.css

@@ -94,6 +94,7 @@
 .zt-muster-knopf { padding: 3px 12px; border-radius: 999px; border: 1.5px solid currentColor; font-size: 13px; font-weight: 700; }
 .zt-knopf-felder { margin-top: 0; }
 .zt-hinweis-form .zt-tag { margin-top: 0; }
+.zt-hinweis-liste { min-width: 0; }
 .zt-whatsapp { margin-top: 10px; padding: 0 14px 10px; border-radius: 12px; border: 1px solid var(--kb-border); background: rgba(255, 255, 255, 0.02); }
 .zt-google-text {
   display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; white-space: pre; overflow: auto;

test/zeitenEditor.test.js

@@ -1493,6 +1493,73 @@ test('Urlaub-Frage „Ja, anlegen“: der neue Hinweis steht danach auch in der
   assert.ok(fx.finde(abschnitt(fx, root, 'hinweise'), 'li[data-id="h_vorschlag"]'), 'die Hinweis-Liste zeigt ihn')
 }))
 
+test('Urlaub-Frage „Ja, anlegen“ lässt offene, ungespeicherte Hinweis-Formulare stehen (neuer Hinweis und Bearbeiten) und zeigt den neuen Hinweis trotzdem in der Liste', mitDom({}, async (fx) => {
+  const { root } = await oeffne(fx, { start: stand(daten({ hinweise: [hinweisAktion] })) })
+  // ein neuer Hinweis wird getippt, aber nicht gespeichert; an der Aktion wird etwas geändert, aber nicht gespeichert
+  await fx.klick(fx.finde(root, '[data-werkzeug="hinweis-neu"]'))
+  const neuForm = neuerHinweis(fx, root)
+  await fx.setze(hinweisFeld(fx, neuForm, 'text'), 'Noch nicht gespeichert')
+  const zeile = fx.finde(root, 'li[data-id="h_aktion001"]')
+  await fx.klick(fx.finde(zeile, '[data-aktion="bearbeiten"]'))
+  const bearbeiten = fx.finde(zeile, 'form[aria-label="Hinweis bearbeiten"]')
+  await fx.setze(hinweisFeld(fx, bearbeiten, 'text'), '30 % auf alle Torten')
+
+  // Betriebsurlaub speichern und die Frage mit „Ja, anlegen“ beantworten
+  await fx.klick(fx.finde(root, '[data-werkzeug="urlaub-neu"]'))
+  const form = urlaubsformular(fx, root)
+  const von = tagPlus(HEUTE, 20)
+  const bis = tagPlus(HEUTE, 25)
+  await fx.setze(feldIn(fx, form, 'von'), von)
+  await fx.setze(feldIn(fx, form, 'bis'), bis)
+  const urlaub = { id: 'x_urlaub03', art: 'urlaub', von, bis, text: '', modus: 'zu', fenster: [], plan: null }
+  fx.antworten.push(antwort(daten({ ausnahmen: [urlaub], hinweise: [hinweisAktion] }), 4))
+  await fx.klick(fx.finde(form, 'button[type="submit"]'))
+  const vorschlag = { id: 'h_vorschlag', art: 'urlaub', text: 'Betriebsurlaub', knopf: null, von: tagPlus(von, -7), bis }
+  fx.antworten.push(antwort(daten({ ausnahmen: [urlaub], hinweise: [hinweisAktion, vorschlag] }), 5))
+  await fx.klick(fx.finde(fx.finde(root, '[data-frage="hinweis"]'), '[data-aktion="hinweis-ja"]'))
+  assert.deepEqual(puts(fx)[1].body.daten.hinweise.map((x) => x.id).slice(0, 1), ['h_aktion001'])
+  assert.equal(puts(fx)[1].body.daten.hinweise.length, 2, 'nur der Vorschlag kommt dazu, getippte Entwürfe gehen nicht mit hinaus')
+
+  // der neue Hinweis steht in der Liste, in der Reihenfolge nach Beginn
+  const liste = abschnitt(fx, root, 'hinweise')
+  assert.deepEqual(fx.alle(fx.finde(liste, 'ul[aria-label="Laufende und geplante Hinweise"]'), 'li[data-id]').map((li) => li.getAttribute('data-id')), ['h_aktion001', 'h_vorschlag'])
+  // die offenen Formulare sind dieselben Elemente mit ihren Eingaben
+  assert.ok(neuerHinweis(fx, root) === neuForm, 'das Formular „Neuer Hinweis“ steht noch') // ok statt equal: ein Fehlschlag soll keine DOM-Knoten ausgeben
+  assert.equal(hinweisFeld(fx, neuForm, 'text')?.value, 'Noch nicht gespeichert')
+  assert.ok(fx.finde(root, 'li[data-id="h_aktion001"]') === zeile, 'dieselbe Zeile')
+  assert.ok(fx.finde(zeile, 'form[aria-label="Hinweis bearbeiten"]') === bearbeiten, 'dasselbe Bearbeiten-Formular')
+  assert.equal(hinweisFeld(fx, bearbeiten, 'text')?.value, '30 % auf alle Torten')
+
+  // und das offene Formular lässt sich danach speichern: es beruht auf dem neuen Stand (Vorschlag ist dabei)
+  fx.antworten.push(antwort(daten({ hinweise: [hinweisAktion, vorschlag, { id: 'h_getippt1', art: 'info', text: 'Noch nicht gespeichert', knopf: null, von: null, bis: null }] }), 6))
+  await fx.klick(fx.finde(neuForm, 'button[type="submit"]'))
+  const h = puts(fx)[2].body.daten.hinweise
+  assert.deepEqual(h.map((x) => x.text), [hinweisAktion.text, 'Betriebsurlaub', 'Noch nicht gespeichert'])
+}))
+
+test('Urlaub-Frage „Ja, anlegen“ bringt die Hinweis-Liste auf 20: „Hinweis-Leiste anlegen“ ist danach gesperrt und sagt warum (ohne den Abschnitt neu zu zeichnen)', mitDom({}, async (fx) => {
+  const viele = Array.from({ length: ZEITEN_LIMITS.hinweise - 1 }, (_, i) => ({ id: `h_viele${String(i).padStart(3, '0')}`, art: 'info', text: `Hinweis ${i}`, knopf: null, von: null, bis: null }))
+  const { root } = await oeffne(fx, { start: stand(daten({ hinweise: viele })) })
+  const liste = abschnitt(fx, root, 'hinweise')
+  assert.equal(fx.finde(liste, '[data-werkzeug="hinweis-neu"]').disabled, false)
+  await fx.klick(fx.finde(root, '[data-werkzeug="urlaub-neu"]'))
+  const form = urlaubsformular(fx, root)
+  const von = tagPlus(HEUTE, 20)
+  const bis = tagPlus(HEUTE, 25)
+  await fx.setze(feldIn(fx, form, 'von'), von)
+  await fx.setze(feldIn(fx, form, 'bis'), bis)
+  const urlaub = { id: 'x_urlaub04', art: 'urlaub', von, bis, text: '', modus: 'zu', fenster: [], plan: null }
+  fx.antworten.push(antwort(daten({ ausnahmen: [urlaub], hinweise: viele }), 4))
+  await fx.klick(fx.finde(form, 'button[type="submit"]'))
+  const vorschlag = { id: 'h_vorschlag', art: 'urlaub', text: 'Betriebsurlaub', knopf: null, von: tagPlus(von, -7), bis }
+  fx.antworten.push(antwort(daten({ ausnahmen: [urlaub], hinweise: [...viele, vorschlag] }), 5))
+  await fx.klick(fx.finde(fx.finde(root, '[data-frage="hinweis"]'), '[data-aktion="hinweis-ja"]'))
+  assert.ok(abschnitt(fx, root, 'hinweise') === liste, 'der Abschnitt ist dasselbe Element')
+  assert.equal(fx.finde(liste, '[data-werkzeug="hinweis-neu"]').disabled, true)
+  assert.match(fx.text(liste), /Mehr als 20 Hinweise sind nicht möglich/)
+  assert.ok(fx.finde(liste, 'li[data-id="h_vorschlag"]'))
+}))
+
 test('Hinweise abgeschaltet (nur ansehen): Liste ja, aber kein Knopf zum Anlegen und alle Felder gesperrt', mitDom({}, async (fx) => {
   const { root } = await oeffne(fx, { state: 'disabled', start: stand(daten({ hinweise: [hinweisAktion] }), { state: 'disabled' }) })
   const liste = abschnitt(fx, root, 'hinweise')