Tickets: vier Ticket-Dialoge auf Dialog (Esc, Sperre beim Speichern), Unterstuetzung als Feldblock

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

src/components/WorksheetTimesModal.jsx

@@ -1,7 +1,7 @@
-import { useState } from 'react'
-import { FaTimes } from 'react-icons/fa'
+import { useRef, useState } from 'react'
+import { useScrollIntoView } from '../hooks/useScrollIntoView'
 import { isoToGermanDate, timeToWoms, germanDateToIso, womsTimeToInput, minutesBetween, isGitWorksheet, needsTimeEntry } from '../lib/ticketForm'
-import { DateTimeInput, DurationSelect } from './ui'
+import { Button, DateTimeInput, Dialog, DurationSelect, Field } from './ui'
 import { roundUpToStep, isValidStep } from '../lib/timeSteps'
 import { parseSupporters, validateSupporters } from '../lib/support'
 import SupportersEditor from './SupportersEditor'
@@ -14,11 +14,14 @@ const formFromWorksheet = (worksheet) => ({
   endTime: womsTimeToInput(worksheet.endTime)
 })
 
+// Mitarbeiterliste der Seite (useEmployees laeuft dort einmal); der Editor ruft den Hook nicht selbst auf
+const NO_EMPLOYEES_STATE = { employees: [], loading: false, error: null }
+
 /**
  * Beginn, Ende und Arbeitszeit eines Arbeitsblatts nachtraeglich aendern.
  * Wer das darf, entscheidet canEditWorksheetTimes (lib/ticketForm).
  */
-export default function WorksheetTimesModal({ worksheet, currentUserId, onClose, onSave }) {
+export default function WorksheetTimesModal({ worksheet, currentUserId, onClose, onSave, employeesState = NO_EMPLOYEES_STATE }) {
   const isGit = isGitWorksheet(worksheet)
   const [formData, setFormData] = useState(() => formFromWorksheet(worksheet))
   // null = die Arbeitszeit folgt Beginn und Ende (aufgerundet auf 15 Minuten). Passte sie
@@ -33,6 +36,8 @@ export default function WorksheetTimesModal({ worksheet, currentUserId, onClose,
   const [supporters, setSupporters] = useState(() => parseSupporters(worksheet.supporters))
   const [saving, setSaving] = useState(false)
   const [error, setError] = useState('')
+  const errorRef = useRef(null)
+  useScrollIntoView(errorRef, error)
 
   const calculatedMinutes = minutesBetween(formData.startTime, formData.endTime)
   const calculatedTotal = calculatedMinutes === null ? null : roundUpToStep(calculatedMinutes)
@@ -85,82 +90,81 @@ export default function WorksheetTimesModal({ worksheet, currentUserId, onClose,
     setSaving(false)
   }
 
+  // Kurzer Titel: auf dem Handy laeuft ein langer unter das Schliessen-X
   return (
-    <div className="overlay">
-      <span className="overlay-close" onClick={onClose}>
-        <FaTimes />
-      </span>
-      <div className="overlay-content" style={{ maxWidth: 560 }}>
-        {/* Kurzer Titel: auf dem Handy laeuft ein langer unter das Schliessen-X */}
-        <h2 className="mb-2">{needsTimeEntry(worksheet) ? 'Zeit nachtragen' : 'Zeiten bearbeiten'}</h2>
-        <p className="text-grey" style={{ fontSize: '14px', marginBottom: '16px' }}>
-          WSID {worksheet.wsid}
-          {isGit && <><br />Das Ende ist der Zeitpunkt des Git-Pushs. Trag ein, wann die Arbeit begonnen hat.</>}
-        </p>
+    <Dialog
+      as="form"
+      title={needsTimeEntry(worksheet) ? 'Zeit nachtragen' : 'Zeiten bearbeiten'}
+      busy={saving}
+      onClose={onClose}
+      onSubmit={handleSubmit}
+      footer={
+        <>
+          <span className="grow" />
+          <Button variant="primary" type="submit" disabled={saving}>
+            {saving ? 'Speichert …' : 'Speichern'}
+          </Button>
+        </>
+      }
+    >
+      {error && (
+        <div className="msg err" role="alert" ref={errorRef}>
+          {error}
+        </div>
+      )}
 
-        {error && (
-          <div className="bg-red text-white p-2 mb-2" style={{ borderRadius: '4px' }}>
-            {error}
-          </div>
-        )}
+      <p className="muted">
+        WSID {worksheet.wsid}
+        {isGit && <><br />Das Ende ist der Zeitpunkt des Git-Pushs. Trag ein, wann die Arbeit begonnen hat.</>}
+      </p>
 
-        <form onSubmit={handleSubmit}>
-          <div className="form-group">
-            <label className="form-label" htmlFor="worksheet-times-start">Beginn</label>
-            <DateTimeInput
-              id="worksheet-times-start"
-              timeLabel="Uhrzeit Beginn"
-              required
-              timeRequired={isGit}
-              date={formData.startDate}
-              time={formData.startTime}
-              onDateChange={handleStartDateChange}
-              onTimeChange={(value) => handleChange('startTime', value)}
-            />
-          </div>
+      <Field label="Beginn" htmlFor="worksheet-times-start">
+        <DateTimeInput
+          id="worksheet-times-start"
+          timeLabel="Uhrzeit Beginn"
+          required
+          timeRequired={isGit}
+          date={formData.startDate}
+          time={formData.startTime}
+          onDateChange={handleStartDateChange}
+          onTimeChange={(value) => handleChange('startTime', value)}
+        />
+      </Field>
 
-          <div className="form-group">
-            <label className="form-label" htmlFor="worksheet-times-end">Ende</label>
-            <DateTimeInput
-              id="worksheet-times-end"
-              timeLabel="Uhrzeit Ende"
-              required
-              min={formData.startDate}
-              date={formData.endDate}
-              time={formData.endTime}
-              onDateChange={(value) => handleChange('endDate', value)}
-              onTimeChange={(value) => handleChange('endTime', value)}
-            />
-          </div>
+      <Field label="Ende" htmlFor="worksheet-times-end">
+        <DateTimeInput
+          id="worksheet-times-end"
+          timeLabel="Uhrzeit Ende"
+          required
+          min={formData.startDate}
+          date={formData.endDate}
+          time={formData.endTime}
+          onDateChange={(value) => handleChange('endDate', value)}
+          onTimeChange={(value) => handleChange('endTime', value)}
+        />
+      </Field>
 
-          <div className="form-group">
-            <label className="form-label" htmlFor="worksheet-times-total">Arbeitszeit</label>
-            <DurationSelect
-              id="worksheet-times-total"
-              value={totalTime}
-              onChange={(value) => setManualTotal(value)}
-            />
-            <small style={{ color: 'var(--text-2)', fontSize: '12px' }}>
-              {manualTotal === null && calculatedTotal !== null
-                ? '✓ Aus Beginn und Ende berechnet, aufgerundet auf 15 Minuten'
-                : 'Von Hand gewählt'}
-            </small>
-          </div>
+      <Field
+        label="Arbeitszeit"
+        htmlFor="worksheet-times-total"
+        hint={manualTotal === null && calculatedTotal !== null
+          ? 'Aus Beginn und Ende berechnet, aufgerundet auf 15 Minuten'
+          : 'Von Hand gewählt'}
+      >
+        <DurationSelect
+          id="worksheet-times-total"
+          value={totalTime}
+          onChange={(value) => setManualTotal(value)}
+        />
+      </Field>
 
-          <SupportersEditor
-            value={supporters}
-            onChange={setSupporters}
-            excludeUserId={currentUserId}
-            minutes={totalTime}
-          />
-
-          <div className="text-center mt-2">
-            <button type="submit" className="btn btn-dark" disabled={saving}>
-              {saving ? 'Speichert...' : 'Speichern'}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
+      <SupportersEditor
+        value={supporters}
+        onChange={setSupporters}
+        excludeUserId={currentUserId}
+        minutes={totalTime}
+        employeesState={employeesState}
+      />
+    </Dialog>
   )
 }