new features
This commit is contained in:
Matthias Hochmeister
794
frontend/src/pages/Ausruestungsanfrage.tsx
Normal file
794
frontend/src/pages/Ausruestungsanfrage.tsx
Normal file
@@ -0,0 +1,794 @@
|
||||
import { useState, useMemo } from 'react';
|
||||
import {
|
||||
Box, Tab, Tabs, Typography, Card, CardContent, CardActions, Grid, Button, Chip,
|
||||
Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper,
|
||||
Dialog, DialogTitle, DialogContent, DialogActions, TextField, IconButton,
|
||||
Badge, MenuItem, Select, FormControl, InputLabel, Autocomplete, Collapse,
|
||||
Divider, Tooltip,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Add as AddIcon, Delete as DeleteIcon, Edit as EditIcon, ShoppingCart,
|
||||
Check as CheckIcon, Close as CloseIcon, Link as LinkIcon,
|
||||
ExpandMore, ExpandLess,
|
||||
} from '@mui/icons-material';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
||||
import ChatAwareFab from '../components/shared/ChatAwareFab';
|
||||
import { useNotification } from '../contexts/NotificationContext';
|
||||
import { usePermissionContext } from '../contexts/PermissionContext';
|
||||
import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
|
||||
import { bestellungApi } from '../services/bestellung';
|
||||
import { AUSRUESTUNG_STATUS_LABELS, AUSRUESTUNG_STATUS_COLORS } from '../types/ausruestungsanfrage.types';
|
||||
import type { AusruestungArtikel, AusruestungArtikelFormData, AusruestungAnfrageFormItem, AusruestungAnfrageDetailResponse, AusruestungAnfrageStatus, AusruestungAnfrage, AusruestungOverview } from '../types/ausruestungsanfrage.types';
|
||||
import type { Bestellung } from '../types/bestellung.types';
|
||||
|
||||
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
||||
|
||||
function formatOrderId(r: AusruestungAnfrage): string {
|
||||
if (r.bestell_jahr && r.bestell_nummer) {
|
||||
return `${r.bestell_jahr}/${String(r.bestell_nummer).padStart(3, '0')}`;
|
||||
}
|
||||
return `#${r.id}`;
|
||||
}
|
||||
|
||||
// ─── Catalog Tab ────────────────────────────────────────────────────────────
|
||||
|
||||
interface DraftItem {
|
||||
artikel_id?: number;
|
||||
bezeichnung: string;
|
||||
menge: number;
|
||||
notizen?: string;
|
||||
}
|
||||
|
||||
function KatalogTab() {
|
||||
const { showSuccess, showError } = useNotification();
|
||||
const { hasPermission } = usePermissionContext();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const canManage = hasPermission('ausruestungsanfrage:manage_catalog');
|
||||
const canCreate = hasPermission('ausruestungsanfrage:create_request');
|
||||
|
||||
const [filterKategorie, setFilterKategorie] = useState<string>('');
|
||||
const [draft, setDraft] = useState<DraftItem[]>([]);
|
||||
const [customText, setCustomText] = useState('');
|
||||
const [submitOpen, setSubmitOpen] = useState(false);
|
||||
const [submitNotizen, setSubmitNotizen] = useState('');
|
||||
const [artikelDialogOpen, setArtikelDialogOpen] = useState(false);
|
||||
const [editArtikel, setEditArtikel] = useState<AusruestungArtikel | null>(null);
|
||||
const [artikelForm, setArtikelForm] = useState<AusruestungArtikelFormData>({ bezeichnung: '' });
|
||||
|
||||
const { data: items = [], isLoading } = useQuery({
|
||||
queryKey: ['ausruestungsanfrage', 'items', filterKategorie],
|
||||
queryFn: () => ausruestungsanfrageApi.getItems(filterKategorie ? { kategorie: filterKategorie } : undefined),
|
||||
});
|
||||
|
||||
const { data: categories = [] } = useQuery({
|
||||
queryKey: ['ausruestungsanfrage', 'categories'],
|
||||
queryFn: () => ausruestungsanfrageApi.getCategories(),
|
||||
});
|
||||
|
||||
const createItemMut = useMutation({
|
||||
mutationFn: (data: AusruestungArtikelFormData) => ausruestungsanfrageApi.createItem(data),
|
||||
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] }); showSuccess('Artikel erstellt'); setArtikelDialogOpen(false); },
|
||||
onError: () => showError('Fehler beim Erstellen'),
|
||||
});
|
||||
const updateItemMut = useMutation({
|
||||
mutationFn: ({ id, data }: { id: number; data: Partial<AusruestungArtikelFormData> }) => ausruestungsanfrageApi.updateItem(id, data),
|
||||
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] }); showSuccess('Artikel aktualisiert'); setArtikelDialogOpen(false); },
|
||||
onError: () => showError('Fehler beim Aktualisieren'),
|
||||
});
|
||||
const deleteItemMut = useMutation({
|
||||
mutationFn: (id: number) => ausruestungsanfrageApi.deleteItem(id),
|
||||
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] }); showSuccess('Artikel gelöscht'); },
|
||||
onError: () => showError('Fehler beim Löschen'),
|
||||
});
|
||||
const createRequestMut = useMutation({
|
||||
mutationFn: ({ items, notizen }: { items: AusruestungAnfrageFormItem[]; notizen?: string }) => ausruestungsanfrageApi.createRequest(items, notizen),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
|
||||
showSuccess('Anfrage gesendet');
|
||||
setDraft([]);
|
||||
setSubmitOpen(false);
|
||||
setSubmitNotizen('');
|
||||
},
|
||||
onError: () => showError('Fehler beim Senden der Anfrage'),
|
||||
});
|
||||
|
||||
const addToDraft = (item: AusruestungArtikel) => {
|
||||
setDraft(prev => {
|
||||
const existing = prev.find(d => d.artikel_id === item.id);
|
||||
if (existing) return prev.map(d => d.artikel_id === item.id ? { ...d, menge: d.menge + 1 } : d);
|
||||
return [...prev, { artikel_id: item.id, bezeichnung: item.bezeichnung, menge: 1 }];
|
||||
});
|
||||
};
|
||||
|
||||
const addCustomToDraft = () => {
|
||||
const text = customText.trim();
|
||||
if (!text) return;
|
||||
setDraft(prev => [...prev, { bezeichnung: text, menge: 1 }]);
|
||||
setCustomText('');
|
||||
};
|
||||
|
||||
const removeDraftItem = (idx: number) => setDraft(prev => prev.filter((_, i) => i !== idx));
|
||||
const updateDraftMenge = (idx: number, menge: number) => {
|
||||
if (menge < 1) return;
|
||||
setDraft(prev => prev.map((d, i) => i === idx ? { ...d, menge } : d));
|
||||
};
|
||||
|
||||
const openNewArtikel = () => {
|
||||
setEditArtikel(null);
|
||||
setArtikelForm({ bezeichnung: '' });
|
||||
setArtikelDialogOpen(true);
|
||||
};
|
||||
const openEditArtikel = (a: AusruestungArtikel) => {
|
||||
setEditArtikel(a);
|
||||
setArtikelForm({ bezeichnung: a.bezeichnung, beschreibung: a.beschreibung, kategorie: a.kategorie });
|
||||
setArtikelDialogOpen(true);
|
||||
};
|
||||
const saveArtikel = () => {
|
||||
if (!artikelForm.bezeichnung.trim()) return;
|
||||
if (editArtikel) updateItemMut.mutate({ id: editArtikel.id, data: artikelForm });
|
||||
else createItemMut.mutate(artikelForm);
|
||||
};
|
||||
|
||||
const handleSubmitRequest = () => {
|
||||
if (draft.length === 0) return;
|
||||
createRequestMut.mutate({
|
||||
items: draft.map(d => ({ artikel_id: d.artikel_id, bezeichnung: d.bezeichnung, menge: d.menge, notizen: d.notizen })),
|
||||
notizen: submitNotizen || undefined,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* Filter */}
|
||||
<Box sx={{ display: 'flex', gap: 2, mb: 3, alignItems: 'center', flexWrap: 'wrap' }}>
|
||||
<FormControl size="small" sx={{ minWidth: 200 }}>
|
||||
<InputLabel>Kategorie</InputLabel>
|
||||
<Select value={filterKategorie} label="Kategorie" onChange={e => setFilterKategorie(e.target.value)}>
|
||||
<MenuItem value="">Alle</MenuItem>
|
||||
{categories.map(c => <MenuItem key={c} value={c}>{c}</MenuItem>)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
{canCreate && (
|
||||
<Badge badgeContent={draft.length} color="primary">
|
||||
<Button startIcon={<ShoppingCart />} variant="outlined" onClick={() => draft.length > 0 && setSubmitOpen(true)} disabled={draft.length === 0}>
|
||||
Anfrage ({draft.length})
|
||||
</Button>
|
||||
</Badge>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Catalog grid */}
|
||||
{isLoading ? (
|
||||
<Typography color="text.secondary">Lade Katalog...</Typography>
|
||||
) : items.length === 0 ? (
|
||||
<Typography color="text.secondary">Keine Artikel vorhanden.</Typography>
|
||||
) : (
|
||||
<Grid container spacing={2}>
|
||||
{items.map(item => (
|
||||
<Grid item xs={12} sm={6} md={4} key={item.id}>
|
||||
<Card variant="outlined" sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
{item.bild_pfad ? (
|
||||
<Box sx={{ height: 160, backgroundImage: `url(${item.bild_pfad})`, backgroundSize: 'cover', backgroundPosition: 'center', borderBottom: '1px solid', borderColor: 'divider' }} />
|
||||
) : (
|
||||
<Box sx={{ height: 160, display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: 'action.hover', borderBottom: '1px solid', borderColor: 'divider' }}>
|
||||
<ShoppingCart sx={{ fontSize: 48, color: 'text.disabled' }} />
|
||||
</Box>
|
||||
)}
|
||||
<CardContent sx={{ flexGrow: 1 }}>
|
||||
<Typography variant="subtitle1" fontWeight={600}>{item.bezeichnung}</Typography>
|
||||
{item.beschreibung && <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>{item.beschreibung}</Typography>}
|
||||
{item.kategorie && (
|
||||
<Box sx={{ mt: 1 }}>
|
||||
<Chip label={item.kategorie} size="small" />
|
||||
</Box>
|
||||
)}
|
||||
</CardContent>
|
||||
<CardActions sx={{ justifyContent: 'space-between' }}>
|
||||
{canCreate && (
|
||||
<Button size="small" startIcon={<AddIcon />} onClick={() => addToDraft(item)}>Hinzufügen</Button>
|
||||
)}
|
||||
{canManage && (
|
||||
<Box>
|
||||
<IconButton size="small" onClick={() => openEditArtikel(item)}><EditIcon fontSize="small" /></IconButton>
|
||||
<IconButton size="small" color="error" onClick={() => deleteItemMut.mutate(item.id)}><DeleteIcon fontSize="small" /></IconButton>
|
||||
</Box>
|
||||
)}
|
||||
</CardActions>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
)}
|
||||
|
||||
{/* Free-text item + draft summary */}
|
||||
{canCreate && (
|
||||
<Paper variant="outlined" sx={{ mt: 3, p: 2 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 1 }}>
|
||||
{draft.length > 0 ? 'Anfrage-Entwurf' : 'Freitext-Position hinzufügen'}
|
||||
</Typography>
|
||||
{draft.map((d, idx) => (
|
||||
<Box key={idx} sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
|
||||
<Typography variant="body2" sx={{ flexGrow: 1 }}>{d.bezeichnung}</Typography>
|
||||
<TextField size="small" type="number" value={d.menge} onChange={e => updateDraftMenge(idx, Number(e.target.value))} sx={{ width: 70 }} inputProps={{ min: 1 }} />
|
||||
<IconButton size="small" onClick={() => removeDraftItem(idx)}><DeleteIcon fontSize="small" /></IconButton>
|
||||
</Box>
|
||||
))}
|
||||
{draft.length > 0 && <Divider sx={{ my: 1 }} />}
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<TextField size="small" placeholder="Eigener Artikel (Freitext)" value={customText} onChange={e => setCustomText(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') addCustomToDraft(); }} sx={{ flexGrow: 1 }} />
|
||||
<Button size="small" onClick={addCustomToDraft} disabled={!customText.trim()}>Hinzufügen</Button>
|
||||
</Box>
|
||||
{draft.length > 0 && (
|
||||
<Button variant="contained" sx={{ mt: 1.5 }} startIcon={<ShoppingCart />} onClick={() => setSubmitOpen(true)}>Anfrage absenden</Button>
|
||||
)}
|
||||
</Paper>
|
||||
)}
|
||||
|
||||
{/* Submit dialog */}
|
||||
<Dialog open={submitOpen} onClose={() => setSubmitOpen(false)} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>Anfrage absenden</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography variant="body2" sx={{ mb: 1 }}>Folgende Positionen werden angefragt:</Typography>
|
||||
{draft.map((d, idx) => (
|
||||
<Typography key={idx} variant="body2">- {d.menge}x {d.bezeichnung}</Typography>
|
||||
))}
|
||||
<TextField fullWidth label="Notizen (optional)" value={submitNotizen} onChange={e => setSubmitNotizen(e.target.value)} multiline rows={2} sx={{ mt: 2 }} />
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setSubmitOpen(false)}>Abbrechen</Button>
|
||||
<Button variant="contained" onClick={handleSubmitRequest} disabled={createRequestMut.isPending}>Absenden</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* Artikel create/edit dialog */}
|
||||
<Dialog open={artikelDialogOpen} onClose={() => setArtikelDialogOpen(false)} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>{editArtikel ? 'Artikel bearbeiten' : 'Neuer Artikel'}</DialogTitle>
|
||||
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: 2 }}>
|
||||
<TextField label="Bezeichnung" required value={artikelForm.bezeichnung} onChange={e => setArtikelForm(f => ({ ...f, bezeichnung: e.target.value }))} fullWidth />
|
||||
<TextField label="Beschreibung" multiline rows={2} value={artikelForm.beschreibung ?? ''} onChange={e => setArtikelForm(f => ({ ...f, beschreibung: e.target.value }))} />
|
||||
<Autocomplete
|
||||
freeSolo
|
||||
options={categories}
|
||||
value={artikelForm.kategorie ?? ''}
|
||||
onInputChange={(_, val) => setArtikelForm(f => ({ ...f, kategorie: val || undefined }))}
|
||||
renderInput={params => <TextField {...params} label="Kategorie" />}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setArtikelDialogOpen(false)}>Abbrechen</Button>
|
||||
<Button variant="contained" onClick={saveArtikel} disabled={!artikelForm.bezeichnung.trim() || createItemMut.isPending || updateItemMut.isPending}>
|
||||
Speichern
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* FAB for new catalog item */}
|
||||
{canManage && (
|
||||
<ChatAwareFab onClick={openNewArtikel} aria-label="Artikel hinzufügen">
|
||||
<AddIcon />
|
||||
</ChatAwareFab>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── My Requests Tab ────────────────────────────────────────────────────────
|
||||
|
||||
function MeineAnfragenTab() {
|
||||
const [expandedId, setExpandedId] = useState<number | null>(null);
|
||||
const { hasPermission } = usePermissionContext();
|
||||
const queryClient = useQueryClient();
|
||||
const { showSuccess, showError } = useNotification();
|
||||
|
||||
const canCreate = hasPermission('ausruestungsanfrage:create_request');
|
||||
|
||||
const [createDialogOpen, setCreateDialogOpen] = useState(false);
|
||||
const [newBezeichnung, setNewBezeichnung] = useState('');
|
||||
const [newBemerkung, setNewBemerkung] = useState('');
|
||||
const [selectedArtikel, setSelectedArtikel] = useState<AusruestungArtikel[]>([]);
|
||||
|
||||
const { data: requests = [], isLoading } = useQuery({
|
||||
queryKey: ['ausruestungsanfrage', 'myRequests'],
|
||||
queryFn: () => ausruestungsanfrageApi.getMyRequests(),
|
||||
});
|
||||
|
||||
const { data: detail } = useQuery<AusruestungAnfrageDetailResponse>({
|
||||
queryKey: ['ausruestungsanfrage', 'request', expandedId],
|
||||
queryFn: () => ausruestungsanfrageApi.getRequest(expandedId!),
|
||||
enabled: expandedId != null,
|
||||
});
|
||||
|
||||
const { data: catalogItems = [] } = useQuery({
|
||||
queryKey: ['ausruestungsanfrage', 'items-for-create'],
|
||||
queryFn: () => ausruestungsanfrageApi.getItems({ aktiv: true }),
|
||||
enabled: createDialogOpen,
|
||||
});
|
||||
|
||||
const createMut = useMutation({
|
||||
mutationFn: ({ items, notizen }: { items: AusruestungAnfrageFormItem[]; notizen?: string }) =>
|
||||
ausruestungsanfrageApi.createRequest(items, notizen),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
|
||||
showSuccess('Anfrage erstellt');
|
||||
setCreateDialogOpen(false);
|
||||
setNewBezeichnung('');
|
||||
setNewBemerkung('');
|
||||
setSelectedArtikel([]);
|
||||
},
|
||||
onError: () => showError('Fehler beim Erstellen der Anfrage'),
|
||||
});
|
||||
|
||||
const handleCreateSubmit = () => {
|
||||
const items: AusruestungAnfrageFormItem[] = [];
|
||||
|
||||
// Add selected catalog items
|
||||
for (const a of selectedArtikel) {
|
||||
items.push({ artikel_id: a.id, bezeichnung: a.bezeichnung, menge: 1 });
|
||||
}
|
||||
|
||||
// Add free-text item if provided
|
||||
const text = newBezeichnung.trim();
|
||||
if (text) {
|
||||
items.push({ bezeichnung: text, menge: 1 });
|
||||
}
|
||||
|
||||
if (items.length === 0) return;
|
||||
|
||||
createMut.mutate({ items, notizen: newBemerkung || undefined });
|
||||
};
|
||||
|
||||
if (isLoading) return <Typography color="text.secondary">Lade Anfragen...</Typography>;
|
||||
if (requests.length === 0 && !canCreate) return <Typography color="text.secondary">Keine Anfragen vorhanden.</Typography>;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{requests.length === 0 ? (
|
||||
<Typography color="text.secondary" sx={{ mb: 2 }}>Keine Anfragen vorhanden.</Typography>
|
||||
) : (
|
||||
<TableContainer component={Paper} variant="outlined">
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell width={40} />
|
||||
<TableCell>Anfrage</TableCell>
|
||||
<TableCell>Status</TableCell>
|
||||
<TableCell>Positionen</TableCell>
|
||||
<TableCell>Erstellt am</TableCell>
|
||||
<TableCell>Admin Notizen</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{requests.map(r => (
|
||||
<>
|
||||
<TableRow key={r.id} hover sx={{ cursor: 'pointer' }} onClick={() => setExpandedId(prev => prev === r.id ? null : r.id)}>
|
||||
<TableCell>{expandedId === r.id ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />}</TableCell>
|
||||
<TableCell>{formatOrderId(r)}</TableCell>
|
||||
<TableCell><Chip label={AUSRUESTUNG_STATUS_LABELS[r.status]} color={AUSRUESTUNG_STATUS_COLORS[r.status]} size="small" /></TableCell>
|
||||
<TableCell>{r.positionen_count ?? r.items_count ?? '-'}</TableCell>
|
||||
<TableCell>{new Date(r.erstellt_am).toLocaleDateString('de-AT')}</TableCell>
|
||||
<TableCell>{r.admin_notizen || '-'}</TableCell>
|
||||
</TableRow>
|
||||
{expandedId === r.id && (
|
||||
<TableRow key={`${r.id}-detail`}>
|
||||
<TableCell colSpan={6} sx={{ py: 0 }}>
|
||||
<Collapse in timeout="auto" unmountOnExit>
|
||||
<Box sx={{ p: 2 }}>
|
||||
{r.notizen && <Typography variant="body2" sx={{ mb: 1 }}>Notizen: {r.notizen}</Typography>}
|
||||
{detail ? (
|
||||
<>
|
||||
{detail.positionen.map(p => (
|
||||
<Typography key={p.id} variant="body2">- {p.menge}x {p.bezeichnung}{p.notizen ? ` (${p.notizen})` : ''}</Typography>
|
||||
))}
|
||||
{detail.linked_bestellungen && detail.linked_bestellungen.length > 0 && (
|
||||
<Box sx={{ mt: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary">Verknüpfte Bestellungen:</Typography>
|
||||
{detail.linked_bestellungen.map(b => (
|
||||
<Chip key={b.id} label={`#${b.id} ${b.bezeichnung}`} size="small" sx={{ ml: 0.5 }} />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Typography variant="body2" color="text.secondary">Lade Details...</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Collapse>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)}
|
||||
|
||||
{/* Create Request Dialog */}
|
||||
<Dialog open={createDialogOpen} onClose={() => setCreateDialogOpen(false)} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>Neue Ausrüstungsanfrage</DialogTitle>
|
||||
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: 2 }}>
|
||||
<TextField
|
||||
label="Bezeichnung"
|
||||
placeholder="Was wird benötigt?"
|
||||
value={newBezeichnung}
|
||||
onChange={e => setNewBezeichnung(e.target.value)}
|
||||
fullWidth
|
||||
/>
|
||||
<Autocomplete
|
||||
multiple
|
||||
options={catalogItems}
|
||||
getOptionLabel={o => o.bezeichnung}
|
||||
value={selectedArtikel}
|
||||
onChange={(_, v) => setSelectedArtikel(v)}
|
||||
renderInput={params => <TextField {...params} label="Aus Katalog auswählen (optional)" />}
|
||||
/>
|
||||
<TextField
|
||||
label="Bemerkung (optional)"
|
||||
value={newBemerkung}
|
||||
onChange={e => setNewBemerkung(e.target.value)}
|
||||
multiline
|
||||
rows={2}
|
||||
fullWidth
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setCreateDialogOpen(false)}>Abbrechen</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleCreateSubmit}
|
||||
disabled={createMut.isPending || (!newBezeichnung.trim() && selectedArtikel.length === 0)}
|
||||
>
|
||||
Anfrage erstellen
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* FAB for creating new request */}
|
||||
{canCreate && (
|
||||
<ChatAwareFab onClick={() => setCreateDialogOpen(true)} aria-label="Neue Anfrage erstellen">
|
||||
<AddIcon />
|
||||
</ChatAwareFab>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Admin All Requests Tab ─────────────────────────────────────────────────
|
||||
|
||||
function AlleAnfragenTab() {
|
||||
const { showSuccess, showError } = useNotification();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const [statusFilter, setStatusFilter] = useState<string>('');
|
||||
const [expandedId, setExpandedId] = useState<number | null>(null);
|
||||
const [actionDialog, setActionDialog] = useState<{ id: number; action: 'genehmigt' | 'abgelehnt' } | null>(null);
|
||||
const [adminNotizen, setAdminNotizen] = useState('');
|
||||
const [linkDialog, setLinkDialog] = useState<number | null>(null);
|
||||
const [selectedBestellung, setSelectedBestellung] = useState<Bestellung | null>(null);
|
||||
|
||||
const { data: requests = [], isLoading } = useQuery({
|
||||
queryKey: ['ausruestungsanfrage', 'requests', statusFilter],
|
||||
queryFn: () => ausruestungsanfrageApi.getRequests(statusFilter ? { status: statusFilter } : undefined),
|
||||
});
|
||||
|
||||
const { data: detail } = useQuery<AusruestungAnfrageDetailResponse>({
|
||||
queryKey: ['ausruestungsanfrage', 'request', expandedId],
|
||||
queryFn: () => ausruestungsanfrageApi.getRequest(expandedId!),
|
||||
enabled: expandedId != null,
|
||||
});
|
||||
|
||||
const { data: bestellungen = [] } = useQuery({
|
||||
queryKey: ['bestellungen'],
|
||||
queryFn: () => bestellungApi.getOrders(),
|
||||
enabled: linkDialog != null,
|
||||
});
|
||||
|
||||
const statusMut = useMutation({
|
||||
mutationFn: ({ id, status, notes }: { id: number; status: string; notes?: string }) => ausruestungsanfrageApi.updateRequestStatus(id, status, notes),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
|
||||
showSuccess('Status aktualisiert');
|
||||
setActionDialog(null);
|
||||
setAdminNotizen('');
|
||||
},
|
||||
onError: () => showError('Fehler beim Aktualisieren'),
|
||||
});
|
||||
|
||||
const linkMut = useMutation({
|
||||
mutationFn: ({ anfrageId, bestellungId }: { anfrageId: number; bestellungId: number }) => ausruestungsanfrageApi.linkToOrder(anfrageId, bestellungId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
|
||||
showSuccess('Verknüpfung erstellt');
|
||||
setLinkDialog(null);
|
||||
setSelectedBestellung(null);
|
||||
},
|
||||
onError: () => showError('Fehler beim Verknüpfen'),
|
||||
});
|
||||
|
||||
const handleAction = () => {
|
||||
if (!actionDialog) return;
|
||||
statusMut.mutate({ id: actionDialog.id, status: actionDialog.action, notes: adminNotizen || undefined });
|
||||
};
|
||||
|
||||
if (isLoading) return <Typography color="text.secondary">Lade Anfragen...</Typography>;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<FormControl size="small" sx={{ minWidth: 200, mb: 2 }}>
|
||||
<InputLabel>Status Filter</InputLabel>
|
||||
<Select value={statusFilter} label="Status Filter" onChange={e => setStatusFilter(e.target.value)}>
|
||||
<MenuItem value="">Alle</MenuItem>
|
||||
{(Object.keys(AUSRUESTUNG_STATUS_LABELS) as AusruestungAnfrageStatus[]).map(s => (
|
||||
<MenuItem key={s} value={s}>{AUSRUESTUNG_STATUS_LABELS[s]}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{requests.length === 0 ? (
|
||||
<Typography color="text.secondary">Keine Anfragen vorhanden.</Typography>
|
||||
) : (
|
||||
<TableContainer component={Paper} variant="outlined">
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell width={40} />
|
||||
<TableCell>Anfrage</TableCell>
|
||||
<TableCell>Anfrager</TableCell>
|
||||
<TableCell>Status</TableCell>
|
||||
<TableCell>Positionen</TableCell>
|
||||
<TableCell>Erstellt am</TableCell>
|
||||
<TableCell>Aktionen</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{requests.map(r => (
|
||||
<>
|
||||
<TableRow key={r.id} hover sx={{ cursor: 'pointer' }} onClick={() => setExpandedId(prev => prev === r.id ? null : r.id)}>
|
||||
<TableCell>{expandedId === r.id ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />}</TableCell>
|
||||
<TableCell>{formatOrderId(r)}</TableCell>
|
||||
<TableCell>{r.anfrager_name || r.anfrager_id}</TableCell>
|
||||
<TableCell><Chip label={AUSRUESTUNG_STATUS_LABELS[r.status]} color={AUSRUESTUNG_STATUS_COLORS[r.status]} size="small" /></TableCell>
|
||||
<TableCell>{r.positionen_count ?? r.items_count ?? '-'}</TableCell>
|
||||
<TableCell>{new Date(r.erstellt_am).toLocaleDateString('de-AT')}</TableCell>
|
||||
<TableCell onClick={e => e.stopPropagation()}>
|
||||
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||||
{r.status === 'offen' && (
|
||||
<>
|
||||
<Tooltip title="Genehmigen">
|
||||
<IconButton size="small" color="success" onClick={() => { setActionDialog({ id: r.id, action: 'genehmigt' }); setAdminNotizen(''); }}>
|
||||
<CheckIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Ablehnen">
|
||||
<IconButton size="small" color="error" onClick={() => { setActionDialog({ id: r.id, action: 'abgelehnt' }); setAdminNotizen(''); }}>
|
||||
<CloseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</>
|
||||
)}
|
||||
{r.status === 'genehmigt' && (
|
||||
<Tooltip title="Mit Bestellung verknüpfen">
|
||||
<IconButton size="small" color="primary" onClick={() => setLinkDialog(r.id)}>
|
||||
<LinkIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Box>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{expandedId === r.id && (
|
||||
<TableRow key={`${r.id}-detail`}>
|
||||
<TableCell colSpan={7} sx={{ py: 0 }}>
|
||||
<Collapse in timeout="auto" unmountOnExit>
|
||||
<Box sx={{ p: 2 }}>
|
||||
{r.notizen && <Typography variant="body2" sx={{ mb: 1 }}>Notizen: {r.notizen}</Typography>}
|
||||
{r.admin_notizen && <Typography variant="body2" sx={{ mb: 1 }}>Admin Notizen: {r.admin_notizen}</Typography>}
|
||||
{detail && detail.anfrage.id === r.id ? (
|
||||
<>
|
||||
{detail.positionen.map(p => (
|
||||
<Typography key={p.id} variant="body2">- {p.menge}x {p.bezeichnung}{p.notizen ? ` (${p.notizen})` : ''}</Typography>
|
||||
))}
|
||||
{detail.linked_bestellungen && detail.linked_bestellungen.length > 0 && (
|
||||
<Box sx={{ mt: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary">Verknüpfte Bestellungen:</Typography>
|
||||
{detail.linked_bestellungen.map(b => (
|
||||
<Chip key={b.id} label={`#${b.id} ${b.bezeichnung}`} size="small" sx={{ ml: 0.5 }} />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Typography variant="body2" color="text.secondary">Lade Details...</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Collapse>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)}
|
||||
|
||||
{/* Approve/Reject dialog */}
|
||||
<Dialog open={actionDialog != null} onClose={() => setActionDialog(null)} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>{actionDialog?.action === 'genehmigt' ? 'Anfrage genehmigen' : 'Anfrage ablehnen'}</DialogTitle>
|
||||
<DialogContent>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Admin Notizen (optional)"
|
||||
value={adminNotizen}
|
||||
onChange={e => setAdminNotizen(e.target.value)}
|
||||
multiline
|
||||
rows={2}
|
||||
sx={{ mt: 1 }}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setActionDialog(null)}>Abbrechen</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color={actionDialog?.action === 'genehmigt' ? 'success' : 'error'}
|
||||
onClick={handleAction}
|
||||
disabled={statusMut.isPending}
|
||||
>
|
||||
{actionDialog?.action === 'genehmigt' ? 'Genehmigen' : 'Ablehnen'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* Link to order dialog */}
|
||||
<Dialog open={linkDialog != null} onClose={() => { setLinkDialog(null); setSelectedBestellung(null); }} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>Mit Bestellung verknüpfen</DialogTitle>
|
||||
<DialogContent>
|
||||
<Autocomplete
|
||||
options={bestellungen}
|
||||
getOptionLabel={(o) => `#${o.id} – ${o.bezeichnung}`}
|
||||
value={selectedBestellung}
|
||||
onChange={(_, v) => setSelectedBestellung(v)}
|
||||
renderInput={params => <TextField {...params} label="Bestellung auswählen" sx={{ mt: 1 }} />}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => { setLinkDialog(null); setSelectedBestellung(null); }}>Abbrechen</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
disabled={!selectedBestellung || linkMut.isPending}
|
||||
onClick={() => { if (linkDialog && selectedBestellung) linkMut.mutate({ anfrageId: linkDialog, bestellungId: selectedBestellung.id }); }}
|
||||
>
|
||||
Verknüpfen
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Overview Tab ────────────────────────────────────────────────────────────
|
||||
|
||||
function UebersichtTab() {
|
||||
const { data: overview, isLoading } = useQuery<AusruestungOverview>({
|
||||
queryKey: ['ausruestungsanfrage', 'overview'],
|
||||
queryFn: () => ausruestungsanfrageApi.getOverview(),
|
||||
});
|
||||
|
||||
if (isLoading) return <Typography color="text.secondary">Lade Übersicht...</Typography>;
|
||||
if (!overview) return <Typography color="text.secondary">Keine Daten verfügbar.</Typography>;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Grid container spacing={2} sx={{ mb: 3 }}>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<Paper variant="outlined" sx={{ p: 2, textAlign: 'center' }}>
|
||||
<Typography variant="h4" fontWeight={700}>{overview.pending_count}</Typography>
|
||||
<Typography variant="body2" color="text.secondary">Offene Anfragen</Typography>
|
||||
</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<Paper variant="outlined" sx={{ p: 2, textAlign: 'center' }}>
|
||||
<Typography variant="h4" fontWeight={700}>{overview.approved_count}</Typography>
|
||||
<Typography variant="body2" color="text.secondary">Genehmigte Anfragen</Typography>
|
||||
</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<Paper variant="outlined" sx={{ p: 2, textAlign: 'center' }}>
|
||||
<Typography variant="h4" fontWeight={700}>{overview.total_items}</Typography>
|
||||
<Typography variant="body2" color="text.secondary">Artikel insgesamt</Typography>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{overview.items.length === 0 ? (
|
||||
<Typography color="text.secondary">Keine offenen/genehmigten Anfragen vorhanden.</Typography>
|
||||
) : (
|
||||
<TableContainer component={Paper} variant="outlined">
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Artikel</TableCell>
|
||||
<TableCell align="right">Gesamtmenge</TableCell>
|
||||
<TableCell align="right">Anfragen</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{overview.items.map(item => (
|
||||
<TableRow key={item.bezeichnung}>
|
||||
<TableCell>{item.bezeichnung}</TableCell>
|
||||
<TableCell align="right">{item.total_menge}</TableCell>
|
||||
<TableCell align="right">{item.anfrage_count}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Main Page ──────────────────────────────────────────────────────────────
|
||||
|
||||
export default function Ausruestungsanfrage() {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const { hasPermission } = usePermissionContext();
|
||||
|
||||
const canView = hasPermission('ausruestungsanfrage:view');
|
||||
const canCreate = hasPermission('ausruestungsanfrage:create_request');
|
||||
const canApprove = hasPermission('ausruestungsanfrage:approve_requests');
|
||||
const canViewOverview = hasPermission('ausruestungsanfrage:view_overview');
|
||||
|
||||
const tabCount = 1 + (canCreate ? 1 : 0) + (canApprove ? 1 : 0) + (canViewOverview ? 1 : 0);
|
||||
|
||||
const [activeTab, setActiveTab] = useState(() => {
|
||||
const t = Number(searchParams.get('tab'));
|
||||
return t >= 0 && t < tabCount ? t : 0;
|
||||
});
|
||||
|
||||
const handleTabChange = (_: React.SyntheticEvent, val: number) => {
|
||||
setActiveTab(val);
|
||||
setSearchParams({ tab: String(val) }, { replace: true });
|
||||
};
|
||||
|
||||
const tabIndex = useMemo(() => {
|
||||
const map: Record<string, number> = {};
|
||||
let next = 0;
|
||||
if (canCreate) { map.meine = next; next++; }
|
||||
if (canApprove) { map.alle = next; next++; }
|
||||
if (canViewOverview) { map.uebersicht = next; next++; }
|
||||
map.katalog = next;
|
||||
return map;
|
||||
}, [canCreate, canApprove, canViewOverview]);
|
||||
|
||||
if (!canView) {
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<Typography>Keine Berechtigung.</Typography>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<Typography variant="h5" fontWeight={700} sx={{ mb: 2 }}>Ausrüstungsanfragen</Typography>
|
||||
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
|
||||
<Tabs value={activeTab} onChange={handleTabChange} variant="scrollable" scrollButtons="auto">
|
||||
{canCreate && <Tab label="Meine Anfragen" />}
|
||||
{canApprove && <Tab label="Alle Anfragen" />}
|
||||
{canViewOverview && <Tab label="Übersicht" />}
|
||||
<Tab label="Katalog" />
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
{canCreate && activeTab === tabIndex.meine && <MeineAnfragenTab />}
|
||||
{canApprove && activeTab === tabIndex.alle && <AlleAnfragenTab />}
|
||||
{canViewOverview && activeTab === tabIndex.uebersicht && <UebersichtTab />}
|
||||
{activeTab === tabIndex.katalog && <KatalogTab />}
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user