319 lines
14 KiB
TypeScript
319 lines
14 KiB
TypeScript
import { useState, useCallback, useRef } from 'react';
|
|
import {
|
|
Box, Typography, Paper, Button, TextField, IconButton,
|
|
Autocomplete, Divider, MenuItem,
|
|
} from '@mui/material';
|
|
import { ArrowBack, Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
|
import { useNotification } from '../contexts/NotificationContext';
|
|
import { usePermissionContext } from '../contexts/PermissionContext';
|
|
import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
|
|
import type {
|
|
AusruestungAnfrageFormItem,
|
|
AusruestungEigenschaft,
|
|
} from '../types/ausruestungsanfrage.types';
|
|
|
|
// ── EigenschaftFields ──
|
|
|
|
interface EigenschaftFieldsProps {
|
|
eigenschaften: AusruestungEigenschaft[];
|
|
values: Record<number, string>;
|
|
onChange: (eigenschaftId: number, wert: string) => void;
|
|
}
|
|
|
|
function EigenschaftFields({ eigenschaften, values, onChange }: EigenschaftFieldsProps) {
|
|
if (eigenschaften.length === 0) return null;
|
|
return (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, ml: 2, mt: 1, pl: 1.5, borderLeft: '2px solid', borderColor: 'divider' }}>
|
|
{eigenschaften.map(e => (
|
|
<Box key={e.id} sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
|
|
{e.typ === 'options' && e.optionen && e.optionen.length > 0 ? (
|
|
<TextField
|
|
select
|
|
size="small"
|
|
label={e.name}
|
|
value={values[e.id] || ''}
|
|
onChange={ev => onChange(e.id, ev.target.value)}
|
|
required={e.pflicht}
|
|
sx={{ minWidth: 160 }}
|
|
>
|
|
<MenuItem value="">—</MenuItem>
|
|
{e.optionen.map(opt => (
|
|
<MenuItem key={opt} value={opt}>{opt}</MenuItem>
|
|
))}
|
|
</TextField>
|
|
) : (
|
|
<TextField
|
|
size="small"
|
|
label={e.name}
|
|
value={values[e.id] || ''}
|
|
onChange={ev => onChange(e.id, ev.target.value)}
|
|
required={e.pflicht}
|
|
sx={{ minWidth: 160 }}
|
|
/>
|
|
)}
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
// ══════════════════════════════════════════════════════════════════════════════
|
|
// Component
|
|
// ══════════════════════════════════════════════════════════════════════════════
|
|
|
|
export default function AusruestungsanfrageNeu() {
|
|
const navigate = useNavigate();
|
|
const queryClient = useQueryClient();
|
|
const { showSuccess, showError } = useNotification();
|
|
const { hasPermission } = usePermissionContext();
|
|
|
|
const canOrderForUser = hasPermission('ausruestungsanfrage:order_for_user');
|
|
|
|
// ── Form state ──
|
|
const [bezeichnung, setBezeichnung] = useState('');
|
|
const [notizen, setNotizen] = useState('');
|
|
const [fuerBenutzer, setFuerBenutzer] = useState<{ id: string; name: string } | string | null>(null);
|
|
const [catalogItems, setCatalogItems] = useState<AusruestungAnfrageFormItem[]>([{ bezeichnung: '', menge: 1 }]);
|
|
const [freeItems, setFreeItems] = useState<{ bezeichnung: string; menge: number }[]>([]);
|
|
|
|
// Eigenschaften state
|
|
const [itemEigenschaften, setItemEigenschaften] = useState<Record<number, AusruestungEigenschaft[]>>({});
|
|
const itemEigenschaftenRef = useRef(itemEigenschaften);
|
|
itemEigenschaftenRef.current = itemEigenschaften;
|
|
const [itemEigenschaftValues, setItemEigenschaftValues] = useState<Record<number, Record<number, string>>>({});
|
|
|
|
// ── Queries ──
|
|
const { data: katalogArtikel = [] } = useQuery({
|
|
queryKey: ['ausruestungsanfrage', 'items-for-create'],
|
|
queryFn: () => ausruestungsanfrageApi.getItems({ aktiv: true }),
|
|
});
|
|
|
|
const { data: orderUsers = [] } = useQuery({
|
|
queryKey: ['ausruestungsanfrage', 'orderUsers'],
|
|
queryFn: () => ausruestungsanfrageApi.getOrderUsers(),
|
|
enabled: canOrderForUser,
|
|
});
|
|
|
|
// ── Mutations ──
|
|
const createMut = useMutation({
|
|
mutationFn: (args: { items: AusruestungAnfrageFormItem[]; notizen?: string; bezeichnung?: string; fuer_benutzer_id?: string; fuer_benutzer_name?: string }) =>
|
|
ausruestungsanfrageApi.createRequest(args.items, args.notizen, args.bezeichnung, args.fuer_benutzer_id, args.fuer_benutzer_name),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
|
|
showSuccess('Anfrage erstellt');
|
|
navigate('/ausruestungsanfrage');
|
|
},
|
|
onError: () => showError('Fehler beim Erstellen der Anfrage'),
|
|
});
|
|
|
|
// ── Eigenschaft loading ──
|
|
const loadEigenschaften = useCallback(async (artikelId: number) => {
|
|
if (itemEigenschaftenRef.current[artikelId]) return;
|
|
try {
|
|
const eigs = await ausruestungsanfrageApi.getArtikelEigenschaften(artikelId);
|
|
if (eigs && eigs.length > 0) {
|
|
setItemEigenschaften(prev => ({ ...prev, [artikelId]: eigs }));
|
|
}
|
|
} catch (err) {
|
|
console.warn('Failed to load eigenschaften for artikel', artikelId, err);
|
|
}
|
|
}, []);
|
|
|
|
// ── Submit ──
|
|
const handleSubmit = () => {
|
|
// Catalog items with eigenschaften
|
|
const catalogValidItems = catalogItems.filter(i => i.bezeichnung.trim() && i.artikel_id).map((item, idx) => {
|
|
const vals = itemEigenschaftValues[idx] || {};
|
|
const eigenschaften = Object.entries(vals)
|
|
.filter(([, wert]) => wert.trim())
|
|
.map(([eid, wert]) => ({ eigenschaft_id: Number(eid), wert }));
|
|
return { ...item, eigenschaften: eigenschaften.length > 0 ? eigenschaften : undefined };
|
|
});
|
|
|
|
// Free-text items
|
|
const freeValidItems = freeItems
|
|
.filter(i => i.bezeichnung.trim())
|
|
.map(i => ({ bezeichnung: i.bezeichnung, menge: i.menge }));
|
|
|
|
const allItems = [...catalogValidItems, ...freeValidItems];
|
|
if (allItems.length === 0) return;
|
|
|
|
// Check required eigenschaften for catalog items
|
|
for (let idx = 0; idx < catalogItems.length; idx++) {
|
|
const item = catalogItems[idx];
|
|
if (!item.bezeichnung.trim() || !item.artikel_id) continue;
|
|
if (itemEigenschaften[item.artikel_id]) {
|
|
for (const e of itemEigenschaften[item.artikel_id]) {
|
|
if (e.pflicht && !(itemEigenschaftValues[idx]?.[e.id]?.trim())) {
|
|
showError(`Pflichtfeld "${e.name}" für "${item.bezeichnung}" fehlt`);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
createMut.mutate({
|
|
items: allItems,
|
|
notizen: notizen || undefined,
|
|
bezeichnung: bezeichnung || undefined,
|
|
fuer_benutzer_id: typeof fuerBenutzer === 'object' && fuerBenutzer ? fuerBenutzer.id : undefined,
|
|
fuer_benutzer_name: typeof fuerBenutzer === 'string' ? fuerBenutzer : undefined,
|
|
});
|
|
};
|
|
|
|
const hasValidItems = catalogItems.some(i => !!i.artikel_id) || freeItems.some(i => i.bezeichnung.trim());
|
|
|
|
return (
|
|
<DashboardLayout>
|
|
{/* Header */}
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
|
<IconButton onClick={() => navigate('/ausruestungsanfrage')}>
|
|
<ArrowBack />
|
|
</IconButton>
|
|
<Typography variant="h5">Neue Bestellung</Typography>
|
|
</Box>
|
|
|
|
<Paper sx={{ p: 3 }}>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
|
<TextField
|
|
label="Bezeichnung (optional)"
|
|
value={bezeichnung}
|
|
onChange={e => setBezeichnung(e.target.value)}
|
|
fullWidth
|
|
/>
|
|
{canOrderForUser && (
|
|
<Autocomplete
|
|
freeSolo
|
|
options={orderUsers}
|
|
getOptionLabel={o => typeof o === 'string' ? o : o.name}
|
|
value={fuerBenutzer}
|
|
onChange={(_, v) => setFuerBenutzer(v)}
|
|
onInputChange={(_, value, reason) => {
|
|
if (reason === 'input') {
|
|
const match = orderUsers.find(u => u.name === value);
|
|
if (!match && value) {
|
|
setFuerBenutzer(value);
|
|
} else if (!value) {
|
|
setFuerBenutzer(null);
|
|
}
|
|
}
|
|
}}
|
|
isOptionEqualToValue={(option, value) => {
|
|
if (typeof option === 'string' || typeof value === 'string') return option === value;
|
|
return option.id === value.id;
|
|
}}
|
|
renderInput={params => <TextField {...params} label="Für wen (optional)" InputLabelProps={{ ...params.InputLabelProps, shrink: true }} placeholder="Mitglied auswählen oder Name eingeben..." />}
|
|
/>
|
|
)}
|
|
<TextField
|
|
label="Notizen (optional)"
|
|
value={notizen}
|
|
onChange={e => setNotizen(e.target.value)}
|
|
multiline
|
|
rows={2}
|
|
fullWidth
|
|
/>
|
|
|
|
<Divider />
|
|
<Typography variant="subtitle2">Aus Katalog</Typography>
|
|
{catalogItems.map((item, idx) => (
|
|
<Box key={`cat-${idx}`}>
|
|
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
|
|
<Autocomplete
|
|
options={katalogArtikel}
|
|
getOptionLabel={o => typeof o === 'string' ? o : o.bezeichnung}
|
|
value={item.artikel_id ? katalogArtikel.find(c => c.id === item.artikel_id) || null : null}
|
|
onChange={(_, v) => {
|
|
if (v && typeof v !== 'string') {
|
|
setCatalogItems(prev => prev.map((it, i) => i === idx ? { ...it, artikel_id: v.id, bezeichnung: v.bezeichnung } : it));
|
|
loadEigenschaften(v.id);
|
|
} else {
|
|
setCatalogItems(prev => prev.map((it, i) => i === idx ? { ...it, artikel_id: undefined, bezeichnung: '' } : it));
|
|
setItemEigenschaftValues(prev => { const n = { ...prev }; delete n[idx]; return n; });
|
|
}
|
|
}}
|
|
renderInput={params => <TextField {...params} label="Katalogartikel" size="small" />}
|
|
sx={{ flexGrow: 1 }}
|
|
/>
|
|
<TextField
|
|
size="small"
|
|
type="number"
|
|
label="Menge"
|
|
value={item.menge}
|
|
onChange={e => setCatalogItems(prev => prev.map((it, i) => i === idx ? { ...it, menge: Math.max(1, Number(e.target.value)) } : it))}
|
|
sx={{ width: 90 }}
|
|
inputProps={{ min: 1 }}
|
|
/>
|
|
<IconButton size="small" onClick={() => setCatalogItems(prev => prev.filter((_, i) => i !== idx))} disabled={catalogItems.length <= 1}>
|
|
<DeleteIcon fontSize="small" />
|
|
</IconButton>
|
|
</Box>
|
|
{item.artikel_id && itemEigenschaften[item.artikel_id] && itemEigenschaften[item.artikel_id].length > 0 && (
|
|
<EigenschaftFields
|
|
eigenschaften={itemEigenschaften[item.artikel_id]}
|
|
values={itemEigenschaftValues[idx] || {}}
|
|
onChange={(eid, wert) => setItemEigenschaftValues(prev => ({
|
|
...prev,
|
|
[idx]: { ...(prev[idx] || {}), [eid]: wert },
|
|
}))}
|
|
/>
|
|
)}
|
|
</Box>
|
|
))}
|
|
<Button size="small" startIcon={<AddIcon />} onClick={() => setCatalogItems(prev => [...prev, { bezeichnung: '', menge: 1 }])}>
|
|
Katalogartikel hinzufügen
|
|
</Button>
|
|
|
|
<Divider />
|
|
<Typography variant="subtitle2">Freitext-Positionen</Typography>
|
|
{freeItems.length === 0 ? (
|
|
<Typography variant="body2" color="text.secondary">Keine Freitext-Positionen.</Typography>
|
|
) : (
|
|
freeItems.map((item, idx) => (
|
|
<Box key={`free-${idx}`} sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
|
|
<TextField
|
|
size="small"
|
|
label="Bezeichnung"
|
|
value={item.bezeichnung}
|
|
onChange={e => setFreeItems(prev => prev.map((it, i) => i === idx ? { ...it, bezeichnung: e.target.value } : it))}
|
|
sx={{ flexGrow: 1 }}
|
|
/>
|
|
<TextField
|
|
size="small"
|
|
type="number"
|
|
label="Menge"
|
|
value={item.menge}
|
|
onChange={e => setFreeItems(prev => prev.map((it, i) => i === idx ? { ...it, menge: Math.max(1, Number(e.target.value)) } : it))}
|
|
sx={{ width: 90 }}
|
|
inputProps={{ min: 1 }}
|
|
/>
|
|
<IconButton size="small" onClick={() => setFreeItems(prev => prev.filter((_, i) => i !== idx))}>
|
|
<DeleteIcon fontSize="small" />
|
|
</IconButton>
|
|
</Box>
|
|
))
|
|
)}
|
|
<Button size="small" startIcon={<AddIcon />} onClick={() => setFreeItems(prev => [...prev, { bezeichnung: '', menge: 1 }])}>
|
|
Freitext-Position hinzufügen
|
|
</Button>
|
|
|
|
<Divider />
|
|
<Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
|
|
<Button onClick={() => navigate('/ausruestungsanfrage')}>Abbrechen</Button>
|
|
<Button
|
|
variant="contained"
|
|
onClick={handleSubmit}
|
|
disabled={createMut.isPending || !hasValidItems}
|
|
>
|
|
Anfrage erstellen
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Paper>
|
|
</DashboardLayout>
|
|
);
|
|
}
|