81 lines
2.7 KiB
React
81 lines
2.7 KiB
React
import { useState } from 'react'
|
|
import { FaTimes } from 'react-icons/fa'
|
|
import { parseSupporters, supportMinutes } from '../lib/support'
|
|
import { stepLabel } from '../lib/timeSteps'
|
|
|
|
/* "Ich habe unterstuetzt": die eigene Unterstuetzung bei einem fremden Arbeitsblatt
|
|
eintragen, aendern oder entfernen. Andere Eintraege und die Zeiten bleiben unberuehrt. */
|
|
export default function OwnSupportModal({ worksheet, currentUserId, onClose, onSave }) {
|
|
const existing = parseSupporters(worksheet.supporters).find((s) => s.employeeId === currentUserId)
|
|
const [task, setTask] = useState(existing?.task || '')
|
|
const [saving, setSaving] = useState(false)
|
|
const [error, setError] = useState('')
|
|
|
|
const save = async (value) => {
|
|
setSaving(true)
|
|
setError('')
|
|
const result = await onSave(worksheet, value)
|
|
if (result?.success) {
|
|
onClose()
|
|
return
|
|
}
|
|
setError(result?.error || 'Speichern fehlgeschlagen')
|
|
setSaving(false)
|
|
}
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault()
|
|
if (!task.trim()) {
|
|
setError('Bitte angeben, wobei du unterstützt hast.')
|
|
return
|
|
}
|
|
save(task.trim())
|
|
}
|
|
|
|
return (
|
|
<div className="overlay">
|
|
<span className="overlay-close" onClick={onClose}>
|
|
<FaTimes />
|
|
</span>
|
|
<div className="overlay-content" style={{ maxWidth: 480 }}>
|
|
<h2 className="mb-2">Unterstützung eintragen</h2>
|
|
<p className="text-grey" style={{ fontSize: '14px', marginBottom: '16px' }}>
|
|
WSID {worksheet.wsid} · {worksheet.employeeName}
|
|
<br />Dir werden {stepLabel(supportMinutes(worksheet.totalTime))} angerechnet.
|
|
</p>
|
|
|
|
{error && (
|
|
<div className="bg-red text-white p-2 mb-2" style={{ borderRadius: '4px' }}>
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="form-group">
|
|
<label className="form-label" htmlFor="own-support-task">Wobei?</label>
|
|
<input
|
|
id="own-support-task"
|
|
className="form-control"
|
|
maxLength={200}
|
|
required
|
|
value={task}
|
|
onChange={(e) => setTask(e.target.value)}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
<div className="text-center mt-2 flex gap-2" style={{ justifyContent: 'center' }}>
|
|
<button type="submit" className="btn btn-dark" disabled={saving}>
|
|
{saving ? 'Speichert...' : 'Speichern'}
|
|
</button>
|
|
{existing && (
|
|
<button type="button" className="btn" disabled={saving} onClick={() => save(null)}>
|
|
Eintrag entfernen
|
|
</button>
|
|
)}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|