108 lines
4.2 KiB
React
108 lines
4.2 KiB
React
import { useRef, useState } from 'react'
|
|
import { useScrollIntoView } from '../../hooks/useScrollIntoView'
|
|
import { Button, Dialog, Field } from '../ui'
|
|
|
|
const FIELDS = ['provider', 'purpose', 'cost', 'costInterval', 'startDate', 'termMonths', 'renewalMonths', 'noticeValue', 'noticeUnit', 'note']
|
|
const NUMBERS = ['termMonths', 'renewalMonths', 'noticeValue']
|
|
|
|
function toForm(contract) {
|
|
const form = { costInterval: 'month', noticeUnit: 'months' }
|
|
for (const key of FIELDS) {
|
|
if (contract?.[key] !== null && contract?.[key] !== undefined) form[key] = String(contract[key])
|
|
}
|
|
return form
|
|
}
|
|
|
|
/** Leere Felder werden null, damit die Fristenlogik "Fristen fehlen" erkennt. */
|
|
function toDoc(form) {
|
|
const doc = {}
|
|
for (const key of FIELDS) {
|
|
const raw = (form[key] ?? '').trim()
|
|
if (raw === '') doc[key] = null
|
|
else if (NUMBERS.includes(key)) doc[key] = parseInt(raw, 10)
|
|
else if (key === 'cost') doc[key] = parseFloat(raw.replace(',', '.'))
|
|
else doc[key] = raw
|
|
}
|
|
return doc
|
|
}
|
|
|
|
export default function ContractForm({ contract, onSave, onClose }) {
|
|
const [form, setForm] = useState(() => toForm(contract))
|
|
const [files, setFiles] = useState([])
|
|
const [saving, setSaving] = useState(false)
|
|
const [error, setError] = useState(null)
|
|
const errorRef = useRef(null)
|
|
useScrollIntoView(errorRef, error)
|
|
const set = (key) => (e) => setForm((f) => ({ ...f, [key]: e.target.value }))
|
|
|
|
const submit = async (e) => {
|
|
e.preventDefault()
|
|
setSaving(true)
|
|
setError(null)
|
|
try {
|
|
await onSave(toDoc(form), files)
|
|
onClose()
|
|
} catch (err) {
|
|
setError(err.message)
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
const input = (key, label, props = {}) => (
|
|
<Field label={label} htmlFor={`contract-${key}`}>
|
|
<input className="input" id={`contract-${key}`} name={key} value={form[key] || ''} onChange={set(key)} {...props} />
|
|
</Field>
|
|
)
|
|
|
|
return (
|
|
<Dialog
|
|
as="form"
|
|
wide
|
|
title={contract ? 'Vertrag bearbeiten' : 'Neuer Vertrag'}
|
|
busy={saving}
|
|
onClose={onClose}
|
|
onSubmit={submit}
|
|
footer={
|
|
<>
|
|
<span className="grow" />
|
|
<Button type="button" onClick={onClose} disabled={saving}>Abbrechen</Button>
|
|
<Button variant="primary" type="submit" disabled={saving}>{saving ? 'Speichert …' : 'Speichern'}</Button>
|
|
</>
|
|
}
|
|
>
|
|
{error && <div className="msg err" role="alert" ref={errorRef}>{error}</div>}
|
|
{input('provider', 'Anbieter', { required: true })}
|
|
{input('purpose', 'Wofür')}
|
|
<div className="field-row">
|
|
{input('cost', 'Kosten (€)', { inputMode: 'decimal' })}
|
|
<Field label="pro" htmlFor="contract-costInterval">
|
|
<select className="select" id="contract-costInterval" name="costInterval" value={form.costInterval} onChange={set('costInterval')}>
|
|
<option value="month">Monat</option>
|
|
<option value="year">Jahr</option>
|
|
</select>
|
|
</Field>
|
|
</div>
|
|
{input('startDate', 'Vertragsbeginn', { type: 'date' })}
|
|
<div className="field-row">
|
|
{input('termMonths', 'Laufzeit (Monate, 0 = jederzeit kündbar)', { type: 'number', min: 0 })}
|
|
{input('renewalMonths', 'Verlängert sich um (Monate, 0 = endet)', { type: 'number', min: 0 })}
|
|
</div>
|
|
<div className="field-row">
|
|
{input('noticeValue', 'Kündigungsfrist', { type: 'number', min: 0 })}
|
|
<Field label="Einheit" htmlFor="contract-noticeUnit">
|
|
<select className="select" id="contract-noticeUnit" name="noticeUnit" value={form.noticeUnit} onChange={set('noticeUnit')}>
|
|
<option value="months">Monate</option>
|
|
<option value="days">Tage</option>
|
|
</select>
|
|
</Field>
|
|
</div>
|
|
<Field label="Notiz" htmlFor="contract-note">
|
|
<textarea className="textarea" id="contract-note" name="note" rows={3} value={form.note || ''} onChange={set('note')} />
|
|
</Field>
|
|
<Field label="Dateien hinzufügen" htmlFor="contract-files">
|
|
<input type="file" className="legal-file" id="contract-files" multiple accept=".pdf,.html,.htm,.png,.jpg,.jpeg,.webp,.doc,.docx" onChange={(e) => setFiles([...e.target.files])} />
|
|
</Field>
|
|
</Dialog>
|
|
)
|
|
}
|