374 lines
14 KiB
TypeScript
374 lines
14 KiB
TypeScript
import React, { useEffect, useState, useCallback } from 'react';
|
|
import {
|
|
Alert,
|
|
Box,
|
|
Button,
|
|
CircularProgress,
|
|
Container,
|
|
FormControl,
|
|
Grid,
|
|
InputLabel,
|
|
MenuItem,
|
|
Paper,
|
|
Select,
|
|
TextField,
|
|
Typography,
|
|
} from '@mui/material';
|
|
import { ArrowBack, Save } from '@mui/icons-material';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
|
import { vehiclesApi } from '../services/vehicles';
|
|
import { toGermanDate, fromGermanDate } from '../utils/dateInput';
|
|
import {
|
|
FahrzeugStatus,
|
|
FahrzeugStatusLabel,
|
|
CreateFahrzeugPayload,
|
|
UpdateFahrzeugPayload,
|
|
} from '../types/vehicle.types';
|
|
import { usePermissions } from '../hooks/usePermissions';
|
|
|
|
// ── Form state shape ──────────────────────────────────────────────────────────
|
|
|
|
interface FormState {
|
|
bezeichnung: string;
|
|
kurzname: string;
|
|
amtliches_kennzeichen: string;
|
|
fahrgestellnummer: string;
|
|
baujahr: string; // kept as string for input, parsed on submit
|
|
hersteller: string;
|
|
typ_schluessel: string;
|
|
besatzung_soll: string;
|
|
status: FahrzeugStatus;
|
|
status_bemerkung: string;
|
|
standort: string;
|
|
bild_url: string;
|
|
paragraph57a_faellig_am: string; // ISO date 'YYYY-MM-DD' or ''
|
|
naechste_wartung_am: string; // ISO date 'YYYY-MM-DD' or ''
|
|
}
|
|
|
|
const EMPTY_FORM: FormState = {
|
|
bezeichnung: '',
|
|
kurzname: '',
|
|
amtliches_kennzeichen: '',
|
|
fahrgestellnummer: '',
|
|
baujahr: '',
|
|
hersteller: '',
|
|
typ_schluessel: '',
|
|
besatzung_soll: '',
|
|
status: FahrzeugStatus.Einsatzbereit,
|
|
status_bemerkung: '',
|
|
standort: 'Feuerwehrhaus',
|
|
bild_url: '',
|
|
paragraph57a_faellig_am: '',
|
|
naechste_wartung_am: '',
|
|
};
|
|
|
|
// ── Helpers ───────────────────────────────────────────────────────────────────
|
|
|
|
/** Convert a Date ISO string like '2026-03-15T00:00:00.000Z' to 'DD.MM.YYYY' */
|
|
function toDateInput(iso: string | null | undefined): string {
|
|
return toGermanDate(iso);
|
|
}
|
|
|
|
// ── Component ─────────────────────────────────────────────────────────────────
|
|
|
|
function FahrzeugForm() {
|
|
const { id } = useParams<{ id: string }>();
|
|
const navigate = useNavigate();
|
|
const { isAdmin } = usePermissions();
|
|
const isEditMode = Boolean(id);
|
|
|
|
// ── Permission guard: only admins may create or edit vehicles ──────────────
|
|
if (!isAdmin) {
|
|
return (
|
|
<DashboardLayout>
|
|
<Container maxWidth="lg">
|
|
<Box sx={{ textAlign: 'center', py: 8 }}>
|
|
<Typography variant="h5" gutterBottom>
|
|
Keine Berechtigung
|
|
</Typography>
|
|
<Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
|
|
Sie haben nicht die erforderlichen Rechte, um Fahrzeuge zu bearbeiten.
|
|
</Typography>
|
|
<Button variant="contained" onClick={() => navigate('/fahrzeuge')}>
|
|
Zurück zur Fahrzeugübersicht
|
|
</Button>
|
|
</Box>
|
|
</Container>
|
|
</DashboardLayout>
|
|
);
|
|
}
|
|
|
|
const [form, setForm] = useState<FormState>(EMPTY_FORM);
|
|
const [loading, setLoading] = useState(isEditMode);
|
|
const [saving, setSaving] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [saveError, setSaveError] = useState<string | null>(null);
|
|
const [fieldErrors, setFieldErrors] = useState<Partial<Record<keyof FormState, string>>>({});
|
|
|
|
const fetchVehicle = useCallback(async () => {
|
|
if (!id) return;
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
const vehicle = await vehiclesApi.getById(id);
|
|
setForm({
|
|
bezeichnung: vehicle.bezeichnung,
|
|
kurzname: vehicle.kurzname ?? '',
|
|
amtliches_kennzeichen: vehicle.amtliches_kennzeichen ?? '',
|
|
fahrgestellnummer: vehicle.fahrgestellnummer ?? '',
|
|
baujahr: vehicle.baujahr?.toString() ?? '',
|
|
hersteller: vehicle.hersteller ?? '',
|
|
typ_schluessel: vehicle.typ_schluessel ?? '',
|
|
besatzung_soll: vehicle.besatzung_soll ?? '',
|
|
status: vehicle.status,
|
|
status_bemerkung: vehicle.status_bemerkung ?? '',
|
|
standort: vehicle.standort,
|
|
bild_url: vehicle.bild_url ?? '',
|
|
paragraph57a_faellig_am: toDateInput(vehicle.paragraph57a_faellig_am),
|
|
naechste_wartung_am: toDateInput(vehicle.naechste_wartung_am),
|
|
});
|
|
} catch {
|
|
setError('Fahrzeug konnte nicht geladen werden.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [id]);
|
|
|
|
useEffect(() => {
|
|
if (isEditMode) fetchVehicle();
|
|
}, [isEditMode, fetchVehicle]);
|
|
|
|
const validate = (): boolean => {
|
|
const errors: Partial<Record<keyof FormState, string>> = {};
|
|
if (!form.bezeichnung.trim()) {
|
|
errors.bezeichnung = 'Bezeichnung ist erforderlich.';
|
|
}
|
|
setFieldErrors(errors);
|
|
return Object.keys(errors).length === 0;
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
if (!validate()) return;
|
|
|
|
try {
|
|
setSaving(true);
|
|
setSaveError(null);
|
|
|
|
if (isEditMode && id) {
|
|
const payload: UpdateFahrzeugPayload = {
|
|
bezeichnung: form.bezeichnung.trim() || undefined,
|
|
kurzname: form.kurzname.trim() || undefined,
|
|
amtliches_kennzeichen: form.amtliches_kennzeichen.trim() || undefined,
|
|
fahrgestellnummer: form.fahrgestellnummer.trim() || undefined,
|
|
baujahr: form.baujahr ? Number(form.baujahr) : undefined,
|
|
hersteller: form.hersteller.trim() || undefined,
|
|
typ_schluessel: form.typ_schluessel.trim() || undefined,
|
|
besatzung_soll: form.besatzung_soll.trim() || undefined,
|
|
status: form.status,
|
|
status_bemerkung: form.status_bemerkung.trim() || undefined,
|
|
standort: form.standort.trim() || 'Feuerwehrhaus',
|
|
bild_url: form.bild_url.trim() || undefined,
|
|
paragraph57a_faellig_am: form.paragraph57a_faellig_am ? fromGermanDate(form.paragraph57a_faellig_am) || undefined : undefined,
|
|
naechste_wartung_am: form.naechste_wartung_am ? fromGermanDate(form.naechste_wartung_am) || undefined : undefined,
|
|
};
|
|
await vehiclesApi.update(id, payload);
|
|
navigate(`/fahrzeuge/${id}`);
|
|
} else {
|
|
const payload: CreateFahrzeugPayload = {
|
|
bezeichnung: form.bezeichnung.trim(),
|
|
kurzname: form.kurzname.trim() || undefined,
|
|
amtliches_kennzeichen: form.amtliches_kennzeichen.trim() || undefined,
|
|
fahrgestellnummer: form.fahrgestellnummer.trim() || undefined,
|
|
baujahr: form.baujahr ? Number(form.baujahr) : undefined,
|
|
hersteller: form.hersteller.trim() || undefined,
|
|
typ_schluessel: form.typ_schluessel.trim() || undefined,
|
|
besatzung_soll: form.besatzung_soll.trim() || undefined,
|
|
status: form.status,
|
|
status_bemerkung: form.status_bemerkung.trim() || undefined,
|
|
standort: form.standort.trim() || 'Feuerwehrhaus',
|
|
bild_url: form.bild_url.trim() || undefined,
|
|
paragraph57a_faellig_am: form.paragraph57a_faellig_am ? fromGermanDate(form.paragraph57a_faellig_am) || undefined : undefined,
|
|
naechste_wartung_am: form.naechste_wartung_am ? fromGermanDate(form.naechste_wartung_am) || undefined : undefined,
|
|
};
|
|
const newVehicle = await vehiclesApi.create(payload);
|
|
navigate(`/fahrzeuge/${newVehicle.id}`);
|
|
}
|
|
} catch {
|
|
setSaveError(
|
|
isEditMode
|
|
? 'Fahrzeug konnte nicht gespeichert werden.'
|
|
: 'Fahrzeug konnte nicht erstellt werden.'
|
|
);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const f = (field: keyof FormState) => ({
|
|
value: form[field] as string,
|
|
onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
|
|
setForm((prev) => ({ ...prev, [field]: e.target.value })),
|
|
error: Boolean(fieldErrors[field]),
|
|
helperText: fieldErrors[field],
|
|
});
|
|
|
|
if (loading) {
|
|
return (
|
|
<DashboardLayout>
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
|
|
<CircularProgress />
|
|
</Box>
|
|
</DashboardLayout>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<DashboardLayout>
|
|
<Container maxWidth="md">
|
|
<Alert severity="error">{error}</Alert>
|
|
<Button startIcon={<ArrowBack />} onClick={() => navigate('/fahrzeuge')} sx={{ mt: 2 }}>
|
|
Zurück
|
|
</Button>
|
|
</Container>
|
|
</DashboardLayout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<DashboardLayout>
|
|
<Container maxWidth="md">
|
|
<Button
|
|
startIcon={<ArrowBack />}
|
|
onClick={() => (isEditMode && id ? navigate(`/fahrzeuge/${id}`) : navigate('/fahrzeuge'))}
|
|
sx={{ mb: 2 }}
|
|
size="small"
|
|
>
|
|
{isEditMode ? 'Zurück zur Detailansicht' : 'Fahrzeugübersicht'}
|
|
</Button>
|
|
|
|
<Typography variant="h4" gutterBottom>
|
|
{isEditMode ? 'Fahrzeug bearbeiten' : 'Neues Fahrzeug erfassen'}
|
|
</Typography>
|
|
|
|
{saveError && <Alert severity="error" sx={{ mb: 2 }}>{saveError}</Alert>}
|
|
|
|
<Paper variant="outlined" sx={{ p: 3 }}>
|
|
<Typography variant="h6" gutterBottom>Stammdaten</Typography>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12} sm={8}>
|
|
<TextField
|
|
label="Bezeichnung *"
|
|
fullWidth
|
|
{...f('bezeichnung')}
|
|
placeholder="z.B. HLF 20/16"
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={4}>
|
|
<TextField
|
|
label="Kurzname"
|
|
fullWidth
|
|
{...f('kurzname')}
|
|
placeholder="z.B. HLF 1"
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<TextField
|
|
label="Amtl. Kennzeichen"
|
|
fullWidth
|
|
{...f('amtliches_kennzeichen')}
|
|
placeholder="z.B. WN-FW 1"
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<Typography variant="h6" gutterBottom sx={{ mt: 3 }}>Status</Typography>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12} sm={4}>
|
|
<FormControl fullWidth>
|
|
<InputLabel>Status</InputLabel>
|
|
<Select
|
|
label="Status"
|
|
value={form.status}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, status: e.target.value as FahrzeugStatus }))}
|
|
>
|
|
{Object.values(FahrzeugStatus).map((s) => (
|
|
<MenuItem key={s} value={s}>{FahrzeugStatusLabel[s]}</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={12} sm={8}>
|
|
<TextField
|
|
label="Status-Bemerkung"
|
|
fullWidth
|
|
{...f('status_bemerkung')}
|
|
placeholder="z.B. Fahrzeug in Werkstatt bis 01.03."
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<Typography variant="h6" gutterBottom sx={{ mt: 3 }}>Prüf- und Wartungsfristen</Typography>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12} sm={6}>
|
|
<TextField
|
|
label="§57a fällig am"
|
|
fullWidth
|
|
placeholder="TT.MM.JJJJ"
|
|
value={form.paragraph57a_faellig_am}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, paragraph57a_faellig_am: e.target.value }))}
|
|
InputLabelProps={{ shrink: true }}
|
|
helperText="Periodische Begutachtung (§57a StVO)"
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<TextField
|
|
label="Nächste Wartung am"
|
|
fullWidth
|
|
placeholder="TT.MM.JJJJ"
|
|
value={form.naechste_wartung_am}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, naechste_wartung_am: e.target.value }))}
|
|
InputLabelProps={{ shrink: true }}
|
|
helperText="Nächster geplanter Servicetermin"
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<Typography variant="h6" gutterBottom sx={{ mt: 3 }}>Bild</Typography>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12}>
|
|
<TextField
|
|
label="Bild-URL"
|
|
fullWidth
|
|
{...f('bild_url')}
|
|
placeholder="https://..."
|
|
helperText="Direktlink zu einem Fahrzeugfoto (https://)"
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</Paper>
|
|
|
|
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 3 }}>
|
|
<Button
|
|
variant="outlined"
|
|
onClick={() => (isEditMode && id ? navigate(`/fahrzeuge/${id}`) : navigate('/fahrzeuge'))}
|
|
>
|
|
Abbrechen
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
startIcon={saving ? <CircularProgress size={16} /> : <Save />}
|
|
onClick={handleSubmit}
|
|
disabled={saving}
|
|
>
|
|
{isEditMode ? 'Änderungen speichern' : 'Fahrzeug erstellen'}
|
|
</Button>
|
|
</Box>
|
|
</Container>
|
|
</DashboardLayout>
|
|
);
|
|
}
|
|
|
|
export default FahrzeugForm;
|