121 lines
4.4 KiB
JavaScript
121 lines
4.4 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
import { useAuth } from '../context/AuthContext';
|
|
|
|
const EMPTY_FORM = {
|
|
erlNummer: '',
|
|
seriennummer: '',
|
|
artikelNr: '',
|
|
bezeichnung: '',
|
|
defekt: '',
|
|
lagerstandortId: '',
|
|
zustaendig: '',
|
|
prio: 'mittel',
|
|
kommentar: '',
|
|
};
|
|
|
|
export default function DefektForm({ onAdd, showToast, lagerstandorte, colleagues }) {
|
|
const { user } = useAuth();
|
|
const ownName = user?.name || user?.email || '';
|
|
const [form, setForm] = useState({ ...EMPTY_FORM, zustaendig: ownName });
|
|
|
|
useEffect(() => {
|
|
if (ownName && !form.zustaendig) {
|
|
setForm((f) => ({ ...f, zustaendig: ownName }));
|
|
}
|
|
}, [ownName]);
|
|
|
|
function handleChange(e) {
|
|
const { name, value } = e.target;
|
|
setForm((prev) => ({ ...prev, [name]: value }));
|
|
}
|
|
|
|
async function handleSubmit(e) {
|
|
e.preventDefault();
|
|
|
|
if (!form.erlNummer.trim() || !form.seriennummer.trim() || !form.zustaendig.trim()) {
|
|
showToast('Bitte ERL, Seriennummer und Zuständig ausfüllen!', '#C62828');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await onAdd({
|
|
erlNummer: form.erlNummer.trim(),
|
|
seriennummer: form.seriennummer.trim(),
|
|
artikelNr: form.artikelNr.trim(),
|
|
bezeichnung: form.bezeichnung.trim(),
|
|
defekt: form.defekt.trim(),
|
|
lagerstandortId: form.lagerstandortId,
|
|
zustaendig: form.zustaendig.trim(),
|
|
prio: form.prio,
|
|
kommentar: form.kommentar.trim(),
|
|
});
|
|
showToast('Asset erfasst: ' + form.erlNummer.trim());
|
|
setForm({ ...EMPTY_FORM, zustaendig: ownName });
|
|
} catch {
|
|
showToast('Fehler beim Speichern!', '#C62828');
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="form-card">
|
|
<div className="form-header">Defekte Ware erfassen</div>
|
|
<form className="form-body" onSubmit={handleSubmit}>
|
|
<div className="form-group">
|
|
<label>ERL-Nummer (Logistik) *</label>
|
|
<input name="erlNummer" value={form.erlNummer} onChange={handleChange} placeholder="z.B. ERL-00001" />
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Seriennummer *</label>
|
|
<input name="seriennummer" value={form.seriennummer} onChange={handleChange} placeholder="z.B. SN-ABC123456" />
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Artikelnummer</label>
|
|
<input name="artikelNr" value={form.artikelNr} onChange={handleChange} placeholder="z.B. ART-20341" />
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Bezeichnung</label>
|
|
<input name="bezeichnung" value={form.bezeichnung} onChange={handleChange} placeholder="z.B. Hydraulikpumpe XL" />
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Defektbeschreibung</label>
|
|
<textarea name="defekt" value={form.defekt} onChange={handleChange} placeholder="Was genau ist defekt? Wie sieht der Schaden aus?" />
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Lagerstandort</label>
|
|
<select name="lagerstandortId" value={form.lagerstandortId} onChange={handleChange}>
|
|
<option value="">-- Standort wählen --</option>
|
|
{(lagerstandorte || []).map((ls) => (
|
|
<option key={ls.$id} value={ls.$id}>{ls.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Zuständig *</label>
|
|
<select name="zustaendig" value={form.zustaendig} onChange={handleChange}>
|
|
<option value="">-- Mitarbeiter wählen --</option>
|
|
{(colleagues || []).map((c) => (
|
|
<option key={c.userId} value={c.userName}>
|
|
{c.userName}{c.userName === ownName ? ' (Ich)' : ''}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Priorität *</label>
|
|
<select name="prio" value={form.prio} onChange={handleChange}>
|
|
<option value="niedrig">Niedrig</option>
|
|
<option value="mittel">Mittel</option>
|
|
<option value="hoch">Hoch</option>
|
|
<option value="kritisch">Kritisch</option>
|
|
</select>
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Kommentar</label>
|
|
<textarea name="kommentar" value={form.kommentar} onChange={handleChange} placeholder="*E-Mail Betreff* Notizen... (Betreff mit * markieren)" />
|
|
</div>
|
|
<button type="submit" className="btn-submit">Ware erfassen</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|