feat: checklist multi-type assignments, tab layouts for Fahrzeuge/Ausruestung, admin cleanup
- Migration 074: convert checklist vorlage single FK fields to junction tables (vorlage_fahrzeug_typen, vorlage_fahrzeuge, vorlage_ausruestung_typen, vorlage_ausruestungen) - Backend checklist service: multi-type create/update/query with array fields - Backend cleanup service: add checklist-history and reset-checklist-history targets - Frontend types/service: singular FK fields replaced with arrays (fahrzeug_typ_ids, etc.) - Frontend Checklisten.tsx: multi-select Autocomplete pickers for all assignment types - Fahrzeuge.tsx/Ausruestung.tsx: add tab layout (Uebersicht + Einstellungen), inline type CRUD - FahrzeugEinstellungen/AusruestungEinstellungen: replaced with redirects to tab URLs - Sidebar: add Uebersicht sub-items, update Einstellungen paths to tab URLs - DataManagementTab: add checklist-history cleanup and reset sections Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Matthias Hochmeister
@@ -1,353 +1,4 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Alert,
|
||||
Autocomplete,
|
||||
Box,
|
||||
Button,
|
||||
Chip,
|
||||
CircularProgress,
|
||||
Container,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
Divider,
|
||||
IconButton,
|
||||
Paper,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TextField,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Add as AddIcon,
|
||||
Delete as DeleteIcon,
|
||||
Edit as EditIcon,
|
||||
Settings,
|
||||
} from '@mui/icons-material';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
||||
import { usePermissionContext } from '../contexts/PermissionContext';
|
||||
import { useNotification } from '../contexts/NotificationContext';
|
||||
import { fahrzeugTypenApi } from '../services/fahrzeugTypen';
|
||||
import { vehiclesApi } from '../services/vehicles';
|
||||
import type { FahrzeugTyp } from '../types/checklist.types';
|
||||
|
||||
import { Navigate } from 'react-router-dom';
|
||||
export default function FahrzeugEinstellungen() {
|
||||
const queryClient = useQueryClient();
|
||||
const { hasPermission } = usePermissionContext();
|
||||
const { showSuccess, showError } = useNotification();
|
||||
|
||||
const canEdit = hasPermission('checklisten:manage_templates');
|
||||
|
||||
const { data: fahrzeugTypen = [], isLoading } = useQuery({
|
||||
queryKey: ['fahrzeug-typen'],
|
||||
queryFn: fahrzeugTypenApi.getAll,
|
||||
});
|
||||
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [editing, setEditing] = useState<FahrzeugTyp | null>(null);
|
||||
const [form, setForm] = useState({ name: '', beschreibung: '', icon: '' });
|
||||
const [deleteError, setDeleteError] = useState<string | null>(null);
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: Partial<FahrzeugTyp>) => fahrzeugTypenApi.create(data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['fahrzeug-typen'] });
|
||||
setDialogOpen(false);
|
||||
showSuccess('Fahrzeugtyp erstellt');
|
||||
},
|
||||
onError: () => showError('Fehler beim Erstellen'),
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ id, data }: { id: number; data: Partial<FahrzeugTyp> }) =>
|
||||
fahrzeugTypenApi.update(id, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['fahrzeug-typen'] });
|
||||
setDialogOpen(false);
|
||||
showSuccess('Fahrzeugtyp aktualisiert');
|
||||
},
|
||||
onError: () => showError('Fehler beim Aktualisieren'),
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: number) => fahrzeugTypenApi.delete(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['fahrzeug-typen'] });
|
||||
setDeleteError(null);
|
||||
showSuccess('Fahrzeugtyp gelöscht');
|
||||
},
|
||||
onError: (err: any) => {
|
||||
const msg = err?.response?.data?.message || 'Fehler beim Löschen — Typ ist möglicherweise noch in Verwendung.';
|
||||
setDeleteError(msg);
|
||||
},
|
||||
});
|
||||
|
||||
const openCreate = () => {
|
||||
setEditing(null);
|
||||
setForm({ name: '', beschreibung: '', icon: '' });
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
const openEdit = (t: FahrzeugTyp) => {
|
||||
setEditing(t);
|
||||
setForm({ name: t.name, beschreibung: t.beschreibung ?? '', icon: t.icon ?? '' });
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!form.name.trim()) return;
|
||||
if (editing) {
|
||||
updateMutation.mutate({ id: editing.id, data: form });
|
||||
} else {
|
||||
createMutation.mutate(form);
|
||||
}
|
||||
};
|
||||
|
||||
const isSaving = createMutation.isPending || updateMutation.isPending;
|
||||
|
||||
if (!canEdit) {
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<Container maxWidth="lg">
|
||||
<Alert severity="error">Keine Berechtigung für diese Seite.</Alert>
|
||||
</Container>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<Container maxWidth="lg">
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 3 }}>
|
||||
<Settings color="action" />
|
||||
<Typography variant="h4" component="h1">
|
||||
Fahrzeug-Einstellungen
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||||
Fahrzeugtypen
|
||||
</Typography>
|
||||
|
||||
{deleteError && (
|
||||
<Alert severity="error" sx={{ mb: 2 }} onClose={() => setDeleteError(null)}>
|
||||
{deleteError}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
) : (
|
||||
<>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
|
||||
<Button variant="contained" startIcon={<AddIcon />} onClick={openCreate}>
|
||||
Neuer Fahrzeugtyp
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<TableContainer component={Paper}>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Name</TableCell>
|
||||
<TableCell>Beschreibung</TableCell>
|
||||
<TableCell>Icon</TableCell>
|
||||
<TableCell align="right">Aktionen</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{fahrzeugTypen.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={4} align="center">
|
||||
Keine Fahrzeugtypen vorhanden
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
fahrzeugTypen.map((t) => (
|
||||
<TableRow key={t.id} hover>
|
||||
<TableCell>{t.name}</TableCell>
|
||||
<TableCell>{t.beschreibung ?? '–'}</TableCell>
|
||||
<TableCell>{t.icon ?? '–'}</TableCell>
|
||||
<TableCell align="right">
|
||||
<IconButton size="small" onClick={() => openEdit(t)}>
|
||||
<EditIcon fontSize="small" />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="small"
|
||||
color="error"
|
||||
onClick={() => deleteMutation.mutate(t.id)}
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>
|
||||
{editing ? 'Fahrzeugtyp bearbeiten' : 'Neuer Fahrzeugtyp'}
|
||||
</DialogTitle>
|
||||
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 1 }}>
|
||||
<TextField
|
||||
label="Name *"
|
||||
fullWidth
|
||||
value={form.name}
|
||||
onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
|
||||
/>
|
||||
<TextField
|
||||
label="Beschreibung"
|
||||
fullWidth
|
||||
value={form.beschreibung}
|
||||
onChange={(e) => setForm((f) => ({ ...f, beschreibung: e.target.value }))}
|
||||
/>
|
||||
<TextField
|
||||
label="Icon"
|
||||
fullWidth
|
||||
value={form.icon}
|
||||
onChange={(e) => setForm((f) => ({ ...f, icon: e.target.value }))}
|
||||
placeholder="z.B. fire_truck"
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setDialogOpen(false)}>Abbrechen</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleSubmit}
|
||||
disabled={isSaving || !form.name.trim()}
|
||||
>
|
||||
{isSaving ? <CircularProgress size={20} /> : 'Speichern'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
<Divider sx={{ my: 4 }} />
|
||||
<VehicleTypeAssignment allTypes={fahrzeugTypen} />
|
||||
</Container>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Per-vehicle type assignment ────────────────────────────────────────────────
|
||||
|
||||
function VehicleTypeAssignment({ allTypes }: { allTypes: FahrzeugTyp[] }) {
|
||||
const { showSuccess, showError } = useNotification();
|
||||
const { data: vehicles = [], isLoading } = useQuery({
|
||||
queryKey: ['vehicles'],
|
||||
queryFn: vehiclesApi.getAll,
|
||||
});
|
||||
|
||||
const [assignDialog, setAssignDialog] = useState<{ vehicleId: string; vehicleName: string; current: FahrzeugTyp[] } | null>(null);
|
||||
const [selected, setSelected] = useState<FahrzeugTyp[]>([]);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// cache of per-vehicle types: vehicleId → FahrzeugTyp[]
|
||||
const [vehicleTypesMap, setVehicleTypesMap] = useState<Record<string, FahrzeugTyp[]>>({});
|
||||
|
||||
const openAssign = async (vehicleId: string, vehicleName: string) => {
|
||||
let current = vehicleTypesMap[vehicleId];
|
||||
if (!current) {
|
||||
try { current = await fahrzeugTypenApi.getTypesForVehicle(vehicleId); }
|
||||
catch { current = []; }
|
||||
setVehicleTypesMap((m) => ({ ...m, [vehicleId]: current }));
|
||||
}
|
||||
setSelected(current);
|
||||
setAssignDialog({ vehicleId, vehicleName, current });
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!assignDialog) return;
|
||||
try {
|
||||
setSaving(true);
|
||||
await fahrzeugTypenApi.setTypesForVehicle(assignDialog.vehicleId, selected.map((t) => t.id));
|
||||
setVehicleTypesMap((m) => ({ ...m, [assignDialog.vehicleId]: selected }));
|
||||
setAssignDialog(null);
|
||||
showSuccess('Typen gespeichert');
|
||||
} catch {
|
||||
showError('Fehler beim Speichern');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Typography variant="h6" sx={{ mb: 2 }}>Typzuweisung je Fahrzeug</Typography>
|
||||
{isLoading ? (
|
||||
<CircularProgress size={24} />
|
||||
) : (
|
||||
<TableContainer component={Paper}>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Fahrzeug</TableCell>
|
||||
<TableCell>Zugewiesene Typen</TableCell>
|
||||
<TableCell align="right">Aktionen</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{vehicles.map((v) => {
|
||||
const types = vehicleTypesMap[v.id];
|
||||
return (
|
||||
<TableRow key={v.id} hover>
|
||||
<TableCell>{v.bezeichnung ?? v.kurzname}</TableCell>
|
||||
<TableCell>
|
||||
{types === undefined ? (
|
||||
<Typography variant="body2" color="text.disabled">–</Typography>
|
||||
) : types.length === 0 ? (
|
||||
<Typography variant="body2" color="text.disabled">Keine</Typography>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
|
||||
{types.map((t) => <Chip key={t.id} label={t.name} size="small" variant="outlined" />)}
|
||||
</Box>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<IconButton size="small" onClick={() => openAssign(v.id, v.bezeichnung ?? v.kurzname ?? v.id)}>
|
||||
<EditIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)}
|
||||
|
||||
<Dialog open={!!assignDialog} onClose={() => setAssignDialog(null)} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>Typen für {assignDialog?.vehicleName}</DialogTitle>
|
||||
<DialogContent sx={{ mt: 1 }}>
|
||||
<Autocomplete
|
||||
multiple
|
||||
options={allTypes}
|
||||
getOptionLabel={(o) => o.name}
|
||||
value={selected}
|
||||
onChange={(_e, val) => setSelected(val)}
|
||||
isOptionEqualToValue={(a, b) => a.id === b.id}
|
||||
renderInput={(params) => <TextField {...params} label="Fahrzeugtypen" />}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setAssignDialog(null)}>Abbrechen</Button>
|
||||
<Button variant="contained" onClick={handleSave} disabled={saving}>
|
||||
{saving ? <CircularProgress size={20} /> : 'Speichern'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
return <Navigate to="/fahrzeuge?tab=1" replace />;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user