Workers P2: Einstellungs-Dialog für Admins

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

src/components/workers/WorkersSettingsDialog.jsx

@@ -0,0 +1,260 @@
+import { useEffect, useRef, useState } from 'react'
+import { useScrollIntoView } from '../../hooks/useScrollIntoView'
+import Button from '../ui/Button'
+import Dialog from '../ui/Dialog'
+import Field from '../ui/Field'
+import { BAD_REPLY_TEXT } from '../../lib/workersApi'
+import { ROOM_TITLES } from '../../lib/workersRoster'
+import { ROOM_CHOICES, formToPatch, settingsToForm, validateForm } from '../../lib/workersSettingsForm'
+
+const isRecord = (v) => v !== null && typeof v === 'object' && !Array.isArray(v)
+
+// Ein Feld mit Beschriftung. Bei einem Fehler trägt das Eingabeelement aria-invalid und verweist auf den Text darunter.
+// `tag` ist 'input', 'textarea' oder 'select'; zugleich der Klassenname der globalen Eingabe-Stile.
+function SettingField({ name, label, hint, tag: Tag = 'input', form, errors, onChange, children, ...rest }) {
+  const id = `wk-set-${name}`
+  const error = errors[name]
+  return (
+    <Field label={label} htmlFor={id} hint={hint}>
+      <Tag
+        id={id}
+        name={name}
+        className={Tag}
+        value={form[name]}
+        onChange={(e) => onChange(name, e.target.value)}
+        aria-invalid={error ? 'true' : undefined}
+        aria-describedby={error ? `${id}-error` : undefined}
+        {...rest}
+      >
+        {children}
+      </Tag>
+      {error && <div className="msg err" id={`${id}-error`}>{error}</div>}
+    </Field>
+  )
+}
+
+// Gruppe mit Überschrift (nur Haarlinie, keine Karte; Stil in workers.css)
+function Group({ title, children }) {
+  return (
+    <section className="wk-set-group">
+      <h4 className="wk-set-title">{title}</h4>
+      {children}
+    </section>
+  )
+}
+
+// Räume, die der Dienst als angeschlossen meldet, als Text (Ids ohne Titel bleiben als Id stehen)
+function connectedText(rooms) {
+  if (!Array.isArray(rooms) || rooms.length === 0) return 'keiner'
+  return rooms.map((id) => ROOM_TITLES[id] ?? String(id)).join(', ')
+}
+
+// Einstellungen der Hustler-Seite (nur für Admins). Lädt beim Öffnen, prüft live mit den Grenzen des Dienstes und
+// sendet nur den Patch mit den geänderten Feldern. Die Notbremse (Versand gestoppt) steht außerhalb des Formulars:
+// ihr Knopf sendet genau ein Feld und berührt weder Eingaben noch Patch.
+export default function WorkersSettingsDialog({ api, onClose, onSaved }) {
+  const [settings, setSettings] = useState(null)
+  const [form, setForm] = useState(null)
+  const [loadError, setLoadError] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [releasing, setReleasing] = useState(false)
+  const [releaseError, setReleaseError] = useState('')
+  const errorRef = useRef(null)
+  useScrollIntoView(errorRef, error)
+
+  // Einmal beim Öffnen laden; ein Schließen währenddessen verwirft die Antwort
+  useEffect(() => {
+    let alive = true
+    const load = async () => {
+      try {
+        const loaded = await api.settings()
+        if (!alive) return
+        if (!isRecord(loaded)) {
+          setLoadError(BAD_REPLY_TEXT)
+          return
+        }
+        setSettings(loaded)
+        setForm(settingsToForm(loaded))
+      } catch (err) {
+        if (alive) setLoadError(err?.message || BAD_REPLY_TEXT)
+      }
+    }
+    load()
+    return () => {
+      alive = false
+    }
+  }, [])
+
+  const ready = settings !== null && form !== null
+  const errors = ready ? validateForm(form).errors : {}
+  const patch = ready ? formToPatch(form, settings) : {}
+  const busy = saving || releasing
+  const canSave = ready && !busy && Object.keys(errors).length === 0 && Object.keys(patch).length > 0
+
+  const setField = (name, value) => setForm((f) => ({ ...f, [name]: value }))
+  const toggleRoom = (id, on) =>
+    setForm((f) => ({ ...f, activeRooms: on ? [...f.activeRooms.filter((r) => r !== id), id] : f.activeRooms.filter((r) => r !== id) }))
+
+  const submit = async (e) => {
+    e.preventDefault()
+    if (!canSave) return
+    setSaving(true)
+    setError('')
+    let saved
+    try {
+      saved = await api.saveSettings(patch)
+    } catch (err) {
+      setError(err?.message || 'Speichern fehlgeschlagen.')
+      setSaving(false)
+      return
+    }
+    if (onSaved) onSaved(saved)
+    onClose()
+  }
+
+  // Notbremse aufheben: genau ein Feld; die Antwort kommt in `settings`, die Eingaben im Formular bleiben stehen
+  const release = async () => {
+    if (busy) return
+    setReleasing(true)
+    setReleaseError('')
+    let answer
+    try {
+      answer = await api.saveSettings({ sendingHalted: false })
+    } catch (err) {
+      setReleaseError(err?.message || 'Freigeben fehlgeschlagen.')
+      setReleasing(false)
+      return
+    }
+    setSettings((prev) => ({ ...prev, ...(isRecord(answer) ? answer : {}) }))
+    setReleasing(false)
+    if (onSaved) onSaved(answer)
+  }
+
+  const halted = ready && settings.sendingHalted === true
+  const haltReason = typeof settings?.sendingHaltedReason === 'string' ? settings.sendingHaltedReason.trim() : ''
+  const fieldProps = { form, errors, onChange: setField }
+
+  return (
+    <Dialog
+      as="form"
+      wide
+      title="Hustler-Einstellungen"
+      busy={busy}
+      onClose={onClose}
+      onSubmit={submit}
+      footer={
+        <>
+          <span className="grow" />
+          <Button type="button" onClick={onClose} disabled={busy}>Abbrechen</Button>
+          <Button variant="primary" type="submit" disabled={!canSave}>{saving ? 'Speichert …' : 'Speichern'}</Button>
+        </>
+      }
+    >
+      {!ready && !loadError && <div className="loading">Wird geladen …</div>}
+      {!ready && loadError && <div className="msg err" role="alert">{loadError}</div>}
+      {ready && (
+        <>
+          {halted && (
+            <section className="wk-halt">
+              <h4 className="wk-set-title">Versand gestoppt</h4>
+              <p>{haltReason || 'Grund nicht angegeben'}</p>
+              {releaseError && <div className="msg err" role="alert">{releaseError}</div>}
+              <Button type="button" onClick={release} disabled={busy}>{releasing ? 'Wird freigegeben …' : 'Versand wieder freigeben'}</Button>
+            </section>
+          )}
+          {error && <div className="msg err" role="alert" ref={errorRef}>{error}</div>}
+
+          <Group title="Kosten">
+            <div className="field-row-3">
+              <SettingField {...fieldProps} name="dailyBudgetUsd" label="Tagesgrenze (USD)" inputMode="decimal" autoComplete="off" />
+              <SettingField {...fieldProps} name="monthlyBudgetUsd" label="Monatsgrenze (USD)" inputMode="decimal" autoComplete="off" />
+              <SettingField {...fieldProps} name="warnPct" label="Warnschwelle (%)" inputMode="numeric" autoComplete="off" />
+            </div>
+          </Group>
+
+          <Group title="Mails">
+            <div className="field-row">
+              <SettingField {...fieldProps} name="mailColdPerDay" label="Unverlangte Mails pro Tag" hint="Höchstens 3 (Spec §8.1)." inputMode="numeric" autoComplete="off" />
+              <SettingField {...fieldProps} name="mailReplyCapPerDay" label="Antwort-Mails pro Tag" inputMode="numeric" autoComplete="off" />
+            </div>
+            <div className="field-row">
+              <SettingField {...fieldProps} name="sendWindowStart" label="Sendefenster von" type="time" />
+              <SettingField {...fieldProps} name="sendWindowEnd" label="Sendefenster bis" type="time" />
+            </div>
+            <label className="check">
+              <input type="checkbox" checked={form.sendWeekdaysOnly === true} onChange={(e) => setField('sendWeekdaysOnly', e.target.checked)} /> nur werktags
+            </label>
+          </Group>
+
+          <Group title="Läufe">
+            <div className="field-row">
+              <SettingField {...fieldProps} name="runsPerNight" label="Läufe pro Nacht" inputMode="numeric" autoComplete="off" />
+              <SettingField {...fieldProps} name="candidatesPerRun" label="Kandidaten pro Lauf" inputMode="numeric" autoComplete="off" />
+            </div>
+          </Group>
+
+          <Group title="Räume">
+            <table className="table">
+              <tbody>
+                {ROOM_CHOICES.map((c) => (
+                  <tr key={c.id}>
+                    <td>{c.title}</td>
+                    <td>
+                      <label className="check">
+                        <input
+                          type="checkbox"
+                          aria-label={`${c.title}: aktiv`}
+                          checked={form.activeRooms.includes(c.id)}
+                          onChange={(e) => toggleRoom(c.id, e.target.checked)}
+                        /> aktiv
+                      </label>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            {errors.activeRooms && <div className="msg err">{errors.activeRooms}</div>}
+            <p className="muted">Angeschlossen (meldet der Dienst): {connectedText(settings.connectedRooms)}</p>
+          </Group>
+
+          <Group title="Regionen">
+            <SettingField {...fieldProps} name="regions" label="Regionen (eine je Zeile)" tag="textarea" rows={4} />
+          </Group>
+
+          <Group title="Vorschau">
+            <div className="field-row">
+              <SettingField {...fieldProps} name="previewGate" label="Freigabe vor dem Versand" hint="Welche Vorschau-Links erst über das Freigabe-Pult gehen." tag="select">
+                <option value="erste_n">nur die ersten N</option>
+                <option value="immer">immer</option>
+                <option value="nie">nie</option>
+              </SettingField>
+              <SettingField {...fieldProps} name="previewGateN" label="Anzahl N" inputMode="numeric" autoComplete="off" />
+            </div>
+            {typeof settings.previewsSent === 'number' && <p className="muted">Bisher verschickt: {settings.previewsSent}</p>}
+          </Group>
+
+          <Group title="Angebot">
+            <SettingField {...fieldProps} name="offerText" label="Angebotstext" tag="textarea" rows={4} hint="1 bis 400 Zeichen." />
+            {typeof settings.offerProductKey === 'string' && settings.offerProductKey && <p className="muted">Produkt: {settings.offerProductKey}</p>}
+          </Group>
+
+          <Group title="Fristen">
+            <div className="field-row">
+              <SettingField {...fieldProps} name="pultStaleDays" label="Pult veraltet nach (Tage)" inputMode="numeric" autoComplete="off" />
+              <SettingField {...fieldProps} name="retentionDays" label="Aufbewahrung (Tage)" inputMode="numeric" autoComplete="off" />
+            </div>
+            <div className="field-row">
+              <SettingField {...fieldProps} name="followupDays" label="Nachfassen nach (Tage)" inputMode="numeric" autoComplete="off" />
+              <SettingField {...fieldProps} name="previewReminderDays" label="Erinnerung nach (Tage)" inputMode="numeric" autoComplete="off" />
+            </div>
+            <div className="field-row">
+              <SettingField {...fieldProps} name="previewDeleteDays" label="Vorschau löschen nach (Tage)" inputMode="numeric" autoComplete="off" />
+              <SettingField {...fieldProps} name="reportEmail" label="Bericht an" inputMode="email" autoComplete="off" />
+            </div>
+          </Group>
+        </>
+      )}
+    </Dialog>
+  )
+}

tests/unit/workersComponents.test.mjs

@@ -24,3 +24,14 @@ test('WorkersKpis nutzt Stat und kpiTiles; WorkerList: Knopf je Worker mit data-
   // die Liste enthält keine Links: ein Klick wählt nur aus
   assert.doesNotMatch(l, /<a[\s>]|<Link[\s>]|href=/)
 })
+test('Einstellungs-Dialog: Dialog-Baustein, Formularlogik, kein paused, Admin-Beschriftungen, Notbremsen-Block', () => {
+  const s = read('WorkersSettingsDialog.jsx')
+  assert.match(s, /from '\.\.\/ui\/Dialog'/); assert.match(s, /formToPatch\(/); assert.match(s, /validateForm\(/); assert.match(s, /api\.saveSettings\(/)
+  assert.doesNotMatch(s, /paused/)
+  for (const t of ['Hustler-Einstellungen', 'Tagesgrenze (USD)', 'Monatsgrenze (USD)', 'Unverlangte Mails pro Tag', 'Angebotstext', 'Regionen', 'Speichern', 'Abbrechen']) assert.ok(s.includes(t), t)
+  assert.match(s, /disabled=\{/)
+  // H4/A21: Block „Versand gestoppt“ mit Freigabe, außerhalb des Formular-Patches
+  assert.match(s, /sendingHalted/); assert.ok(s.includes('Versand gestoppt')); assert.ok(s.includes('Versand wieder freigeben'))
+  assert.match(s, /api\.saveSettings\(\{ sendingHalted: false \}\)/); assert.match(s, /sendingHaltedReason/)
+  assert.doesNotMatch(s, /formToPatch\([^)]*sendingHalted/)
+})