matthias/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

catalog search/sort, edit-page characteristics, preferred vendor per article

Browse Source
This commit is contained in:
Matthias Hochmeister
2026-03-27 13:45:13 +01:00
parent 35b3718e38
commit 6885cba3be
3 changed files with 55 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
frontend/src/pages/AusruestungsanfrageArtikelDetail.tsx
View File

@@ -5,7 +5,7 @@ import {
Autocomplete,
} from '@mui/material';
import {
ArrowBack, Edit as EditIcon, Delete as DeleteIcon,
ArrowBack, Delete as DeleteIcon,
Add as AddIcon,
} from '@mui/icons-material';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
@@ -32,12 +32,8 @@ function EigenschaftenEditor({ artikelId }: { artikelId: number | null }) {
const [newOptionen, setNewOptionen] = useState('');
const [newPflicht, setNewPflicht] = useState(false);
// Inline edit state
const [editingId, setEditingId] = useState<number | null>(null);
const [editName, setEditName] = useState('');
const [editTyp, setEditTyp] = useState<'options' | 'freitext'>('options');
const [editOptionen, setEditOptionen] = useState('');
const [editPflicht, setEditPflicht] = useState(false);
// Per-eigenschaft edit state
const [rowState, setRowState] = useState<Record<number, { name: string; typ: 'options' | 'freitext'; optionen: string; pflicht: boolean }>>({});
const { data: eigenschaften = [] } = useQuery({
queryKey: ['ausruestungsanfrage', 'eigenschaften', artikelId],
@@ -45,6 +41,14 @@ function EigenschaftenEditor({ artikelId }: { artikelId: number | null }) {
enabled: artikelId != null,
});
const getRow = (e: AusruestungEigenschaft) =>
rowState[e.id] ?? { name: e.name, typ: e.typ, optionen: e.optionen?.join(', ') || '', pflicht: e.pflicht };
const updateRow = (e: AusruestungEigenschaft, patch: Partial<{ name: string; typ: 'options' | 'freitext'; optionen: string; pflicht: boolean }>) => {
const current = rowState[e.id] ?? { name: e.name, typ: e.typ, optionen: e.optionen?.join(', ') || '', pflicht: e.pflicht };
setRowState(prev => ({ ...prev, [e.id]: { ...current, ...patch } }));
};
const upsertMut = useMutation({
mutationFn: (data: { eigenschaft_id?: number; name: string; typ: string; optionen?: string[]; pflicht?: boolean; sort_order?: number }) =>
ausruestungsanfrageApi.upsertArtikelEigenschaft(artikelId!, data),
@@ -54,101 +58,76 @@ function EigenschaftenEditor({ artikelId }: { artikelId: number | null }) {
setNewName('');
setNewOptionen('');
setNewPflicht(false);
setEditingId(null);
},
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'),
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage', 'eigenschaften', artikelId] }); showSuccess('Eigenschaft gelöscht'); },
onError: () => showError('Fehler beim Löschen'),
});
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,
});
upsertMut.mutate({ name: newName.trim(), typ: newTyp, optionen, pflicht: newPflicht, sort_order: eigenschaften.length });
};
const startEditEigenschaft = (e: AusruestungEigenschaft) => {
setEditingId(e.id);
setEditName(e.name);
setEditTyp(e.typ);
setEditOptionen(e.optionen?.join(', ') || '');
setEditPflicht(e.pflicht);
};
const handleSaveEdit = (e: AusruestungEigenschaft) => {
if (!editName.trim()) return;
const handleSaveRow = (e: AusruestungEigenschaft) => {
const row = getRow(e);
if (!row.name.trim()) return;
upsertMut.mutate({
eigenschaft_id: e.id,
name: editName.trim(),
typ: editTyp,
optionen: editTyp === 'options' ? editOptionen.split(',').map(s => s.trim()).filter(Boolean) : undefined,
pflicht: editPflicht,
name: row.name.trim(),
typ: row.typ,
optionen: row.typ === 'options' ? row.optionen.split(',').map(s => s.trim()).filter(Boolean) : undefined,
pflicht: row.pflicht,
sort_order: e.sort_order,
});
};
if (artikelId == null) return <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>Bitte speichern Sie den Artikel zuerst, bevor Sie Eigenschaften hinzufuegen.</Typography>;
if (artikelId == null) return <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>Bitte speichern Sie den Artikel zuerst, bevor Sie Eigenschaften hinzufügen.</Typography>;
return (
<Box sx={{ mt: 1 }}>
<Typography variant="subtitle2" sx={{ mb: 1 }}>Eigenschaften</Typography>
{eigenschaften.map(e => (
<Box key={e.id} sx={{ mb: 0.5, pl: 1, borderLeft: '2px solid', borderColor: 'divider' }}>
{editingId === e.id ? (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, p: 1, border: '1px dashed', borderColor: 'divider', borderRadius: 1 }}>
{eigenschaften.map(e => {
const row = getRow(e);
return (
<Box key={e.id} sx={{ mb: 1, pl: 1, borderLeft: '2px solid', borderColor: 'divider' }}>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, p: 1 }}>
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
<TextField size="small" label="Name" value={editName} onChange={ev => setEditName(ev.target.value)} sx={{ flexGrow: 1 }} />
<TextField size="small" label="Name" value={row.name} onChange={ev => updateRow(e, { name: ev.target.value })} sx={{ flexGrow: 1 }} />
<TextField
select size="small" label="Typ" value={editTyp}
onChange={ev => setEditTyp(ev.target.value as 'options' | 'freitext')}
select size="small" label="Typ" value={row.typ}
onChange={ev => updateRow(e, { typ: ev.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={editPflicht} onChange={ev => setEditPflicht(ev.target.checked)} />}
control={<Checkbox size="small" checked={row.pflicht} onChange={ev => updateRow(e, { pflicht: ev.target.checked })} />}
label="Pflicht"
/>
<Button size="small" variant="outlined" onClick={() => handleSaveRow(e)} disabled={!row.name.trim() || upsertMut.isPending}>
Speichern
</Button>
<IconButton size="small" color="error" onClick={() => deleteMut.mutate(e.id)}><DeleteIcon fontSize="small" /></IconButton>
</Box>
{editTyp === 'options' && (
<TextField size="small" label="Optionen (kommagetrennt)" value={editOptionen} onChange={ev => setEditOptionen(ev.target.value)} fullWidth />
{row.typ === 'options' && (
<TextField size="small" label="Optionen (kommagetrennt)" value={row.optionen} onChange={ev => updateRow(e, { optionen: ev.target.value })} fullWidth />
)}
<Box sx={{ display: 'flex', gap: 0.5 }}>
<Button size="small" variant="contained" onClick={() => handleSaveEdit(e)} disabled={!editName.trim() || upsertMut.isPending}>Speichern</Button>
<Button size="small" onClick={() => setEditingId(null)}>Abbrechen</Button>
</Box>
</Box>
) : (
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
<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" onClick={() => startEditEigenschaft(e)}><EditIcon fontSize="small" /></IconButton>
<IconButton size="small" color="error" onClick={() => deleteMut.mutate(e.id)}><DeleteIcon fontSize="small" /></IconButton>
</Box>
)}
</Box>
))}
</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}
select size="small" label="Typ" value={newTyp}
onChange={e => setNewTyp(e.target.value as 'options' | 'freitext')}
sx={{ minWidth: 120 }}
>
@@ -161,22 +140,10 @@ function EigenschaftenEditor({ artikelId }: { artikelId: number | null }) {
/>
</Box>
{newTyp === 'options' && (
<TextField
size="small"
label="Optionen (kommagetrennt)"
value={newOptionen}
onChange={e => setNewOptionen(e.target.value)}
placeholder="S, M, L, XL"
fullWidth
/>
<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 size="small" startIcon={<AddIcon />} onClick={handleAdd} disabled={!newName.trim() || upsertMut.isPending}>
Eigenschaft hinzufügen
</Button>
</Box>
</Box>
@@ -369,7 +336,7 @@ export default function AusruestungsanfrageArtikelDetail() {
setMainKat(val);
if (val) {
const subs = subKategorienOf(val as number);
setForm(f => ({ ...f, kategorie_id: subs.length === 0 ? (val as number) : null }));
setForm(f => ({ ...f, kategorie_id: val as number }));
} else {
setForm(f => ({ ...f, kategorie_id: null }));
}