rework from modal to page
This commit is contained in:
Matthias Hochmeister
386
frontend/src/pages/AusruestungsanfrageArtikelDetail.tsx
Normal file
386
frontend/src/pages/AusruestungsanfrageArtikelDetail.tsx
Normal file
@@ -0,0 +1,386 @@
|
||||
import { useState, useMemo, useCallback } from 'react';
|
||||
import {
|
||||
Box, Typography, Paper, Button, TextField, IconButton,
|
||||
Chip, MenuItem, Divider, Checkbox, FormControlLabel, LinearProgress,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
ArrowBack, Edit as EditIcon, Delete as DeleteIcon,
|
||||
Add as AddIcon,
|
||||
} from '@mui/icons-material';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useParams, 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 {
|
||||
AusruestungArtikel, AusruestungArtikelFormData,
|
||||
AusruestungEigenschaft, AusruestungKategorie,
|
||||
} from '../types/ausruestungsanfrage.types';
|
||||
|
||||
// ── EigenschaftenEditor ──
|
||||
|
||||
function EigenschaftenEditor({ artikelId }: { artikelId: number | null }) {
|
||||
const { showSuccess, showError } = useNotification();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const [newName, setNewName] = useState('');
|
||||
const [newTyp, setNewTyp] = useState<'options' | 'freitext'>('options');
|
||||
const [newOptionen, setNewOptionen] = useState('');
|
||||
const [newPflicht, setNewPflicht] = useState(false);
|
||||
|
||||
const { data: eigenschaften = [] } = useQuery({
|
||||
queryKey: ['ausruestungsanfrage', 'eigenschaften', artikelId],
|
||||
queryFn: () => ausruestungsanfrageApi.getArtikelEigenschaften(artikelId!),
|
||||
enabled: artikelId != null,
|
||||
});
|
||||
|
||||
const upsertMut = useMutation({
|
||||
mutationFn: (data: { eigenschaft_id?: number; name: string; typ: string; optionen?: string[]; pflicht?: boolean; sort_order?: number }) =>
|
||||
ausruestungsanfrageApi.upsertArtikelEigenschaft(artikelId!, data),
|
||||
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage', 'eigenschaften', artikelId] }); showSuccess('Eigenschaft gespeichert'); },
|
||||
onError: () => showError('Fehler beim Speichern'),
|
||||
});
|
||||
|
||||
const deleteMut = useMutation({
|
||||
mutationFn: (id: number) => ausruestungsanfrageApi.deleteArtikelEigenschaft(id),
|
||||
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage', 'eigenschaften', artikelId] }); showSuccess('Eigenschaft geloescht'); },
|
||||
onError: () => showError('Fehler beim Loeschen'),
|
||||
});
|
||||
|
||||
const handleAdd = () => {
|
||||
if (!newName.trim()) return;
|
||||
const optionen = newTyp === 'options' ? newOptionen.split(',').map(s => s.trim()).filter(Boolean) : undefined;
|
||||
upsertMut.mutate({
|
||||
name: newName.trim(),
|
||||
typ: newTyp,
|
||||
optionen,
|
||||
pflicht: newPflicht,
|
||||
sort_order: eigenschaften.length,
|
||||
});
|
||||
setNewName('');
|
||||
setNewOptionen('');
|
||||
setNewPflicht(false);
|
||||
};
|
||||
|
||||
if (artikelId == null) return <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>Bitte speichern Sie den Artikel zuerst, bevor Sie Eigenschaften hinzufuegen.</Typography>;
|
||||
|
||||
return (
|
||||
<Box sx={{ mt: 1 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 1 }}>Eigenschaften</Typography>
|
||||
{eigenschaften.map(e => (
|
||||
<Box key={e.id} sx={{ display: 'flex', gap: 1, alignItems: 'center', mb: 0.5, pl: 1, borderLeft: '2px solid', borderColor: 'divider' }}>
|
||||
<Typography variant="body2" sx={{ flexGrow: 1 }}>
|
||||
{e.name} ({e.typ === 'options' ? `Auswahl: ${e.optionen?.join(', ')}` : 'Freitext'})
|
||||
{e.pflicht && <Chip label="Pflicht" size="small" sx={{ ml: 0.5 }} />}
|
||||
</Typography>
|
||||
<IconButton size="small" color="error" onClick={() => deleteMut.mutate(e.id)}><DeleteIcon fontSize="small" /></IconButton>
|
||||
</Box>
|
||||
))}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, mt: 1, p: 1, border: '1px dashed', borderColor: 'divider', borderRadius: 1 }}>
|
||||
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
|
||||
<TextField size="small" label="Name" value={newName} onChange={e => setNewName(e.target.value)} sx={{ flexGrow: 1 }} />
|
||||
<TextField
|
||||
select
|
||||
size="small"
|
||||
label="Typ"
|
||||
value={newTyp}
|
||||
onChange={e => setNewTyp(e.target.value as 'options' | 'freitext')}
|
||||
sx={{ minWidth: 120 }}
|
||||
>
|
||||
<MenuItem value="options">Auswahl</MenuItem>
|
||||
<MenuItem value="freitext">Freitext</MenuItem>
|
||||
</TextField>
|
||||
<FormControlLabel
|
||||
control={<Checkbox size="small" checked={newPflicht} onChange={e => setNewPflicht(e.target.checked)} />}
|
||||
label="Pflicht"
|
||||
/>
|
||||
</Box>
|
||||
{newTyp === 'options' && (
|
||||
<TextField
|
||||
size="small"
|
||||
label="Optionen (kommagetrennt)"
|
||||
value={newOptionen}
|
||||
onChange={e => setNewOptionen(e.target.value)}
|
||||
placeholder="S, M, L, XL"
|
||||
fullWidth
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<AddIcon />}
|
||||
onClick={handleAdd}
|
||||
disabled={!newName.trim() || upsertMut.isPending}
|
||||
>
|
||||
Eigenschaft hinzufuegen
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// ══════════════════════════════════════════════════════════════════════════════
|
||||
// Main Component
|
||||
// ══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
export default function AusruestungsanfrageArtikelDetail() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const { showSuccess, showError } = useNotification();
|
||||
const { hasPermission } = usePermissionContext();
|
||||
|
||||
const isCreate = !id || id === 'neu';
|
||||
const artikelId = isCreate ? null : Number(id);
|
||||
const canManage = hasPermission('ausruestungsanfrage:manage_catalog');
|
||||
|
||||
// ── State ──
|
||||
const [editing, setEditing] = useState(isCreate);
|
||||
const [form, setForm] = useState<AusruestungArtikelFormData>({ bezeichnung: '' });
|
||||
const [mainKat, setMainKat] = useState<number | ''>('');
|
||||
|
||||
// ── Queries ──
|
||||
const { data: artikel, isLoading, isError } = useQuery<AusruestungArtikel>({
|
||||
queryKey: ['ausruestungsanfrage', 'item', artikelId],
|
||||
queryFn: () => ausruestungsanfrageApi.getItem(artikelId!),
|
||||
enabled: artikelId != null,
|
||||
retry: 1,
|
||||
});
|
||||
|
||||
const { data: kategorien = [] } = useQuery<AusruestungKategorie[]>({
|
||||
queryKey: ['ausruestungsanfrage', 'kategorien'],
|
||||
queryFn: () => ausruestungsanfrageApi.getKategorien(),
|
||||
});
|
||||
|
||||
const { data: eigenschaften = [] } = useQuery<AusruestungEigenschaft[]>({
|
||||
queryKey: ['ausruestungsanfrage', 'eigenschaften', artikelId],
|
||||
queryFn: () => ausruestungsanfrageApi.getArtikelEigenschaften(artikelId!),
|
||||
enabled: artikelId != null,
|
||||
});
|
||||
|
||||
const topKategorien = useMemo(() => kategorien.filter(k => !k.parent_id), [kategorien]);
|
||||
const subKategorienOf = useCallback((parentId: number) => kategorien.filter(k => k.parent_id === parentId), [kategorien]);
|
||||
const subKats = useMemo(() => mainKat ? subKategorienOf(mainKat as number) : [], [mainKat, subKategorienOf]);
|
||||
|
||||
const kategorieOptions = useMemo(() => {
|
||||
const map = new Map(kategorien.map(k => [k.id, k]));
|
||||
const getDisplayName = (k: AusruestungKategorie): string => {
|
||||
if (k.parent_id) {
|
||||
const parent = map.get(k.parent_id);
|
||||
if (parent) return `${parent.name} > ${k.name}`;
|
||||
}
|
||||
return k.name;
|
||||
};
|
||||
return kategorien.map(k => ({ id: k.id, name: getDisplayName(k) }));
|
||||
}, [kategorien]);
|
||||
|
||||
// ── Mutations ──
|
||||
const createMut = useMutation({
|
||||
mutationFn: (data: AusruestungArtikelFormData) => ausruestungsanfrageApi.createItem(data),
|
||||
onSuccess: (newItem) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
|
||||
showSuccess('Artikel erstellt');
|
||||
navigate(`/ausruestungsanfrage/artikel/${newItem.id}`, { replace: true });
|
||||
},
|
||||
onError: () => showError('Fehler beim Erstellen'),
|
||||
});
|
||||
|
||||
const updateMut = useMutation({
|
||||
mutationFn: ({ itemId, data }: { itemId: number; data: Partial<AusruestungArtikelFormData> }) =>
|
||||
ausruestungsanfrageApi.updateItem(itemId, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
|
||||
showSuccess('Artikel aktualisiert');
|
||||
setEditing(false);
|
||||
},
|
||||
onError: () => showError('Fehler beim Aktualisieren'),
|
||||
});
|
||||
|
||||
const deleteMut = useMutation({
|
||||
mutationFn: (itemId: number) => ausruestungsanfrageApi.deleteItem(itemId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
|
||||
showSuccess('Artikel geloescht');
|
||||
navigate('/ausruestungsanfrage?tab=2');
|
||||
},
|
||||
onError: () => showError('Fehler beim Loeschen'),
|
||||
});
|
||||
|
||||
// ── Edit helpers ──
|
||||
const startEditing = () => {
|
||||
if (!artikel) return;
|
||||
setForm({
|
||||
bezeichnung: artikel.bezeichnung,
|
||||
beschreibung: artikel.beschreibung,
|
||||
kategorie_id: artikel.kategorie_id ?? null,
|
||||
});
|
||||
const kat = kategorien.find(k => k.id === artikel.kategorie_id);
|
||||
if (kat?.parent_id) {
|
||||
setMainKat(kat.parent_id);
|
||||
} else {
|
||||
setMainKat(artikel.kategorie_id || '');
|
||||
}
|
||||
setEditing(true);
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (!form.bezeichnung.trim()) return;
|
||||
if (isCreate) {
|
||||
createMut.mutate(form);
|
||||
} else if (artikelId) {
|
||||
updateMut.mutate({ itemId: artikelId, data: form });
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
if (isCreate) {
|
||||
navigate('/ausruestungsanfrage?tab=2');
|
||||
} else {
|
||||
setEditing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getKategorieName = (katId?: number) => {
|
||||
if (!katId) return '-';
|
||||
return kategorieOptions.find(k => k.id === katId)?.name || '-';
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
{/* Header */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
||||
<IconButton onClick={() => navigate('/ausruestungsanfrage?tab=2')}>
|
||||
<ArrowBack />
|
||||
</IconButton>
|
||||
<Typography variant="h5" sx={{ flexGrow: 1 }}>
|
||||
{isCreate ? 'Neuer Katalogartikel' : (artikel?.bezeichnung ?? '...')}
|
||||
</Typography>
|
||||
{!isCreate && canManage && !editing && (
|
||||
<>
|
||||
<IconButton onClick={startEditing}><EditIcon /></IconButton>
|
||||
<IconButton color="error" onClick={() => { if (artikelId) deleteMut.mutate(artikelId); }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{!isCreate && isLoading ? (
|
||||
<LinearProgress />
|
||||
) : !isCreate && isError ? (
|
||||
<Typography color="error">Fehler beim Laden des Artikels.</Typography>
|
||||
) : editing ? (
|
||||
/* ── Edit / Create Mode ── */
|
||||
<Paper sx={{ p: 3 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<TextField
|
||||
label="Bezeichnung"
|
||||
required
|
||||
value={form.bezeichnung}
|
||||
onChange={e => setForm(f => ({ ...f, bezeichnung: e.target.value }))}
|
||||
fullWidth
|
||||
autoFocus
|
||||
/>
|
||||
<TextField
|
||||
label="Beschreibung"
|
||||
multiline
|
||||
rows={3}
|
||||
value={form.beschreibung ?? ''}
|
||||
onChange={e => setForm(f => ({ ...f, beschreibung: e.target.value }))}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
select
|
||||
label="Hauptkategorie"
|
||||
value={mainKat}
|
||||
onChange={e => {
|
||||
const val = e.target.value ? Number(e.target.value) : '';
|
||||
setMainKat(val);
|
||||
if (val) {
|
||||
const subs = subKategorienOf(val as number);
|
||||
setForm(f => ({ ...f, kategorie_id: subs.length === 0 ? (val as number) : null }));
|
||||
} else {
|
||||
setForm(f => ({ ...f, kategorie_id: null }));
|
||||
}
|
||||
}}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">Keine</MenuItem>
|
||||
{topKategorien.map(k => <MenuItem key={k.id} value={k.id}>{k.name}</MenuItem>)}
|
||||
</TextField>
|
||||
{mainKat && subKats.length > 0 && (
|
||||
<TextField
|
||||
select
|
||||
label="Unterkategorie"
|
||||
value={form.kategorie_id ?? ''}
|
||||
onChange={e => setForm(f => ({ ...f, kategorie_id: e.target.value ? Number(e.target.value) : (mainKat as number) }))}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value={mainKat as number}>Keine (nur Hauptkategorie)</MenuItem>
|
||||
{subKats.map(k => <MenuItem key={k.id} value={k.id}>{k.name}</MenuItem>)}
|
||||
</TextField>
|
||||
)}
|
||||
|
||||
{canManage && <EigenschaftenEditor artikelId={artikelId} />}
|
||||
|
||||
<Divider />
|
||||
<Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
|
||||
<Button onClick={handleCancel}>Abbrechen</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleSave}
|
||||
disabled={!form.bezeichnung.trim() || createMut.isPending || updateMut.isPending}
|
||||
>
|
||||
{isCreate ? 'Erstellen' : 'Speichern'}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
) : artikel ? (
|
||||
/* ── View Mode ── */
|
||||
<>
|
||||
<Paper sx={{ p: 3, mb: 3 }}>
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">Bezeichnung</Typography>
|
||||
<Typography variant="body1" fontWeight={500}>{artikel.bezeichnung}</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">Kategorie</Typography>
|
||||
<Typography variant="body1">{getKategorieName(artikel.kategorie_id)}</Typography>
|
||||
</Box>
|
||||
{artikel.beschreibung && (
|
||||
<Box sx={{ gridColumn: '1 / -1' }}>
|
||||
<Typography variant="caption" color="text.secondary">Beschreibung</Typography>
|
||||
<Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>{artikel.beschreibung}</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">Status</Typography>
|
||||
<Box><Chip label={artikel.aktiv ? 'Aktiv' : 'Inaktiv'} size="small" color={artikel.aktiv ? 'success' : 'default'} /></Box>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">Erstellt am</Typography>
|
||||
<Typography variant="body2">{new Date(artikel.erstellt_am).toLocaleDateString('de-AT')}</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{eigenschaften.length > 0 && (
|
||||
<Paper sx={{ p: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 1 }}>Eigenschaften ({eigenschaften.length})</Typography>
|
||||
{eigenschaften.map(e => (
|
||||
<Box key={e.id} sx={{ display: 'flex', gap: 1, alignItems: 'center', mb: 0.5, pl: 1, borderLeft: '2px solid', borderColor: 'divider' }}>
|
||||
<Typography variant="body2" sx={{ flexGrow: 1 }}>
|
||||
{e.name} ({e.typ === 'options' ? `Auswahl: ${e.optionen?.join(', ')}` : 'Freitext'})
|
||||
{e.pflicht && <Chip label="Pflicht" size="small" sx={{ ml: 0.5 }} />}
|
||||
</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Paper>
|
||||
)}
|
||||
</>
|
||||
) : null}
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user