feat: widget icons, dark theme tables, breadcrumb removal, bookkeeping rework, personal equipment pages, PDF/order improvements
This commit is contained in:
Matthias Hochmeister
254
frontend/src/pages/AusruestungsanfrageZuweisung.tsx
Normal file
254
frontend/src/pages/AusruestungsanfrageZuweisung.tsx
Normal file
@@ -0,0 +1,254 @@
|
||||
import { useState, useMemo } from 'react';
|
||||
import {
|
||||
Box, Typography, Container, Button, Chip,
|
||||
TextField, Autocomplete, ToggleButton, ToggleButtonGroup,
|
||||
Stack, Divider, LinearProgress,
|
||||
} from '@mui/material';
|
||||
import { Assignment as AssignmentIcon } from '@mui/icons-material';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
||||
import { PageHeader } from '../components/templates';
|
||||
import { useNotification } from '../contexts/NotificationContext';
|
||||
import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
|
||||
import { vehiclesApi } from '../services/vehicles';
|
||||
import { membersService } from '../services/members';
|
||||
import type { AusruestungAnfragePosition } from '../types/ausruestungsanfrage.types';
|
||||
|
||||
type AssignmentTyp = 'ausruestung' | 'persoenlich' | 'keine';
|
||||
|
||||
interface PositionAssignment {
|
||||
typ: AssignmentTyp;
|
||||
fahrzeugId?: string;
|
||||
standort?: string;
|
||||
userId?: string;
|
||||
benutzerName?: string;
|
||||
groesse?: string;
|
||||
kategorie?: string;
|
||||
}
|
||||
|
||||
function getUnassignedPositions(positions: AusruestungAnfragePosition[]): AusruestungAnfragePosition[] {
|
||||
return positions.filter((p) => p.geliefert && !p.zuweisung_typ);
|
||||
}
|
||||
|
||||
export default function AusruestungsanfrageZuweisung() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { showSuccess, showError } = useNotification();
|
||||
const anfrageId = Number(id);
|
||||
|
||||
const { data: detail, isLoading, isError } = useQuery({
|
||||
queryKey: ['ausruestungsanfrage', 'request', anfrageId],
|
||||
queryFn: () => ausruestungsanfrageApi.getRequest(anfrageId),
|
||||
enabled: !isNaN(anfrageId),
|
||||
retry: 1,
|
||||
});
|
||||
|
||||
const unassigned = useMemo(() => {
|
||||
if (!detail) return [];
|
||||
return getUnassignedPositions(detail.positionen);
|
||||
}, [detail]);
|
||||
|
||||
const [assignments, setAssignments] = useState<Record<number, PositionAssignment>>({});
|
||||
|
||||
// Initialize assignments when unassigned positions load
|
||||
useMemo(() => {
|
||||
if (unassigned.length > 0 && Object.keys(assignments).length === 0) {
|
||||
const init: Record<number, PositionAssignment> = {};
|
||||
for (const p of unassigned) {
|
||||
init[p.id] = { typ: 'persoenlich' };
|
||||
}
|
||||
setAssignments(init);
|
||||
}
|
||||
}, [unassigned]);
|
||||
|
||||
const { data: vehicleList } = useQuery({
|
||||
queryKey: ['vehicles', 'sidebar'],
|
||||
queryFn: () => vehiclesApi.getAll(),
|
||||
staleTime: 2 * 60 * 1000,
|
||||
});
|
||||
|
||||
const { data: membersList } = useQuery({
|
||||
queryKey: ['members-list-compact'],
|
||||
queryFn: () => membersService.getMembers({ pageSize: 500 }),
|
||||
staleTime: 5 * 60 * 1000,
|
||||
});
|
||||
|
||||
const memberOptions = (membersList?.items ?? []).map((m) => ({
|
||||
id: m.id,
|
||||
name: [m.given_name, m.family_name].filter(Boolean).join(' ') || m.email,
|
||||
}));
|
||||
|
||||
const vehicleOptions = (vehicleList ?? []).map((v) => ({
|
||||
id: v.id,
|
||||
name: v.bezeichnung ?? v.kurzname,
|
||||
}));
|
||||
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const updateAssignment = (posId: number, patch: Partial<PositionAssignment>) => {
|
||||
setAssignments((prev) => ({
|
||||
...prev,
|
||||
[posId]: { ...prev[posId], ...patch },
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSkipAll = () => {
|
||||
const updated: Record<number, PositionAssignment> = {};
|
||||
for (const p of unassigned) {
|
||||
updated[p.id] = { typ: 'keine' };
|
||||
}
|
||||
setAssignments(updated);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!detail) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const anfrage = detail.anfrage;
|
||||
const payload = Object.entries(assignments).map(([posId, a]) => ({
|
||||
positionId: Number(posId),
|
||||
typ: a.typ,
|
||||
fahrzeugId: a.typ === 'ausruestung' ? a.fahrzeugId : undefined,
|
||||
standort: a.typ === 'ausruestung' ? a.standort : undefined,
|
||||
userId: a.typ === 'persoenlich' ? a.userId : undefined,
|
||||
benutzerName: a.typ === 'persoenlich' ? (a.benutzerName || anfrage.fuer_benutzer_name || anfrage.anfrager_name) : undefined,
|
||||
groesse: a.typ === 'persoenlich' ? a.groesse : undefined,
|
||||
kategorie: a.typ === 'persoenlich' ? a.kategorie : undefined,
|
||||
}));
|
||||
await ausruestungsanfrageApi.assignItems(anfrageId, payload);
|
||||
showSuccess('Gegenstände zugewiesen');
|
||||
navigate(`/ausruestungsanfrage/${id}`);
|
||||
} catch {
|
||||
showError('Fehler beim Zuweisen');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const backPath = `/ausruestungsanfrage/${id}`;
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<Container maxWidth="md">
|
||||
<PageHeader
|
||||
title="Gegenstände zuweisen"
|
||||
subtitle={detail?.anfrage.bezeichnung || undefined}
|
||||
backTo={backPath}
|
||||
/>
|
||||
|
||||
{isLoading ? (
|
||||
<LinearProgress />
|
||||
) : isError || !detail ? (
|
||||
<Typography color="error">Fehler beim Laden der Anfrage.</Typography>
|
||||
) : unassigned.length === 0 ? (
|
||||
<Typography color="text.secondary">Keine unzugewiesenen Positionen vorhanden.</Typography>
|
||||
) : (
|
||||
<>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
|
||||
Wähle für jeden gelieferten Gegenstand, wie er erfasst werden soll.
|
||||
</Typography>
|
||||
|
||||
<Stack spacing={3} divider={<Divider />}>
|
||||
{unassigned.map((pos) => {
|
||||
const a = assignments[pos.id] ?? { typ: 'persoenlich' as const };
|
||||
return (
|
||||
<Box key={pos.id}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
|
||||
<Typography variant="body2" fontWeight={600}>
|
||||
{pos.bezeichnung}
|
||||
</Typography>
|
||||
<Chip label={`${pos.menge}x`} size="small" variant="outlined" />
|
||||
</Box>
|
||||
|
||||
<ToggleButtonGroup
|
||||
value={a.typ}
|
||||
exclusive
|
||||
size="small"
|
||||
onChange={(_e, val) => val && updateAssignment(pos.id, { typ: val })}
|
||||
sx={{ mb: 1.5 }}
|
||||
>
|
||||
<ToggleButton value="ausruestung">Ausrüstung</ToggleButton>
|
||||
<ToggleButton value="persoenlich">Persönlich</ToggleButton>
|
||||
<ToggleButton value="keine">Nicht erfassen</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
|
||||
{a.typ === 'ausruestung' && (
|
||||
<Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>
|
||||
<Autocomplete
|
||||
size="small"
|
||||
options={vehicleOptions}
|
||||
getOptionLabel={(o) => o.name}
|
||||
value={vehicleOptions.find((v) => v.id === a.fahrzeugId) ?? null}
|
||||
onChange={(_e, v) => updateAssignment(pos.id, { fahrzeugId: v?.id })}
|
||||
renderInput={(params) => <TextField {...params} label="Fahrzeug" />}
|
||||
sx={{ minWidth: 200, flex: 1 }}
|
||||
/>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Standort"
|
||||
value={a.standort ?? ''}
|
||||
onChange={(e) => updateAssignment(pos.id, { standort: e.target.value })}
|
||||
sx={{ minWidth: 160, flex: 1 }}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{a.typ === 'persoenlich' && (
|
||||
<Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>
|
||||
<Autocomplete
|
||||
size="small"
|
||||
options={memberOptions}
|
||||
getOptionLabel={(o) => o.name}
|
||||
value={memberOptions.find((m) => m.id === a.userId) ?? null}
|
||||
onChange={(_e, v) => updateAssignment(pos.id, { userId: v?.id, benutzerName: v?.name })}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Benutzer"
|
||||
placeholder={detail.anfrage.fuer_benutzer_name || detail.anfrage.anfrager_name || ''}
|
||||
/>
|
||||
)}
|
||||
sx={{ minWidth: 200, flex: 1 }}
|
||||
/>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Größe"
|
||||
value={a.groesse ?? ''}
|
||||
onChange={(e) => updateAssignment(pos.id, { groesse: e.target.value })}
|
||||
sx={{ minWidth: 100 }}
|
||||
/>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Kategorie"
|
||||
value={a.kategorie ?? ''}
|
||||
onChange={(e) => updateAssignment(pos.id, { kategorie: e.target.value })}
|
||||
sx={{ minWidth: 140 }}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end', mt: 4 }}>
|
||||
<Button onClick={handleSkipAll} color="inherit">
|
||||
Alle überspringen
|
||||
</Button>
|
||||
<Button onClick={() => navigate(backPath)}>Abbrechen</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleSubmit}
|
||||
disabled={submitting}
|
||||
startIcon={<AssignmentIcon />}
|
||||
>
|
||||
Zuweisen
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</Container>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user