rework from modal to page
This commit is contained in:
Matthias Hochmeister
@@ -1,31 +1,27 @@
|
||||
import { useState, useMemo, useEffect, useCallback, useRef } from 'react';
|
||||
import { useState, useMemo, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
Box, Tab, Tabs, Typography, Grid, Button, Chip,
|
||||
Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper,
|
||||
Dialog, DialogTitle, DialogContent, DialogActions, TextField, IconButton,
|
||||
MenuItem, Select, FormControl, InputLabel, Autocomplete,
|
||||
Divider, Checkbox, FormControlLabel, Tooltip,
|
||||
MenuItem, Divider, Checkbox, FormControlLabel, Tooltip,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Add as AddIcon, Delete as DeleteIcon, Edit as EditIcon,
|
||||
Check as CheckIcon, Close as CloseIcon, Link as LinkIcon, Settings as SettingsIcon,
|
||||
Check as CheckIcon, Close as CloseIcon, Settings as SettingsIcon,
|
||||
} from '@mui/icons-material';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { useSearchParams, useNavigate } 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 { useAuth } from '../contexts/AuthContext';
|
||||
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, AusruestungEigenschaft,
|
||||
AusruestungArtikel, AusruestungArtikelFormData,
|
||||
AusruestungAnfrageStatus, AusruestungAnfrage,
|
||||
AusruestungOverview,
|
||||
} from '../types/ausruestungsanfrage.types';
|
||||
import type { Bestellung } from '../types/bestellung.types';
|
||||
|
||||
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -38,51 +34,6 @@ function formatOrderId(r: AusruestungAnfrage): string {
|
||||
|
||||
const ACTIVE_STATUSES: AusruestungAnfrageStatus[] = ['offen', 'genehmigt', 'bestellt'];
|
||||
|
||||
// ─── Eigenschaft Fields Component ────────────────────────────────────────────
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Category Management Dialog ──────────────────────────────────────────────
|
||||
|
||||
interface KategorieDialogProps {
|
||||
@@ -308,456 +259,6 @@ function EigenschaftenEditor({ artikelId }: EigenschaftenEditorProps) {
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Detail Modal ─────────────────────────────────────────────────────────────
|
||||
|
||||
interface DetailModalProps {
|
||||
requestId: number | null;
|
||||
onClose: () => void;
|
||||
showAdminActions?: boolean;
|
||||
showEditButton?: boolean;
|
||||
canEditAny?: boolean;
|
||||
currentUserId?: string;
|
||||
}
|
||||
|
||||
function DetailModal({ requestId, onClose, showAdminActions, showEditButton, canEditAny, currentUserId }: DetailModalProps) {
|
||||
const { showSuccess, showError } = useNotification();
|
||||
const queryClient = useQueryClient();
|
||||
const { hasPermission } = usePermissionContext();
|
||||
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [editBezeichnung, setEditBezeichnung] = useState('');
|
||||
const [editNotizen, setEditNotizen] = useState('');
|
||||
const [editItems, setEditItems] = useState<AusruestungAnfrageFormItem[]>([]);
|
||||
|
||||
// Admin action state
|
||||
const [actionDialog, setActionDialog] = useState<{ action: 'genehmigt' | 'abgelehnt' } | null>(null);
|
||||
const [adminNotizen, setAdminNotizen] = useState('');
|
||||
const [statusChangeValue, setStatusChangeValue] = useState('');
|
||||
const [linkDialog, setLinkDialog] = useState(false);
|
||||
const [selectedBestellung, setSelectedBestellung] = useState<Bestellung | null>(null);
|
||||
|
||||
const { data: detail, isLoading, isError } = useQuery<AusruestungAnfrageDetailResponse>({
|
||||
queryKey: ['ausruestungsanfrage', 'request', requestId],
|
||||
queryFn: () => ausruestungsanfrageApi.getRequest(requestId!),
|
||||
enabled: requestId != null,
|
||||
retry: 1,
|
||||
});
|
||||
|
||||
const { data: catalogItems = [] } = useQuery({
|
||||
queryKey: ['ausruestungsanfrage', 'items-for-edit'],
|
||||
queryFn: () => ausruestungsanfrageApi.getItems({ aktiv: true }),
|
||||
enabled: editing,
|
||||
});
|
||||
|
||||
const { data: bestellungen = [] } = useQuery({
|
||||
queryKey: ['bestellungen'],
|
||||
queryFn: () => bestellungApi.getOrders(),
|
||||
enabled: linkDialog,
|
||||
});
|
||||
|
||||
const updateMut = useMutation({
|
||||
mutationFn: (data: { bezeichnung?: string; notizen?: string; items?: AusruestungAnfrageFormItem[] }) =>
|
||||
ausruestungsanfrageApi.updateRequest(requestId!, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
|
||||
showSuccess('Anfrage aktualisiert');
|
||||
setEditing(false);
|
||||
},
|
||||
onError: () => showError('Fehler beim Aktualisieren'),
|
||||
});
|
||||
|
||||
const statusMut = useMutation({
|
||||
mutationFn: ({ status, notes }: { status: string; notes?: string }) =>
|
||||
ausruestungsanfrageApi.updateRequestStatus(requestId!, status, notes),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
|
||||
showSuccess('Status aktualisiert');
|
||||
setActionDialog(null);
|
||||
setAdminNotizen('');
|
||||
setStatusChangeValue('');
|
||||
},
|
||||
onError: () => showError('Fehler beim Aktualisieren'),
|
||||
});
|
||||
|
||||
const linkMut = useMutation({
|
||||
mutationFn: (bestellungId: number) => ausruestungsanfrageApi.linkToOrder(requestId!, bestellungId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
|
||||
showSuccess('Verknüpfung erstellt');
|
||||
setLinkDialog(false);
|
||||
setSelectedBestellung(null);
|
||||
},
|
||||
onError: () => showError('Fehler beim Verknüpfen'),
|
||||
});
|
||||
|
||||
const geliefertMut = useMutation({
|
||||
mutationFn: ({ positionId, geliefert }: { positionId: number; geliefert: boolean }) =>
|
||||
ausruestungsanfrageApi.updatePositionGeliefert(positionId, geliefert),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
|
||||
},
|
||||
onError: () => showError('Fehler beim Aktualisieren'),
|
||||
});
|
||||
|
||||
const startEditing = () => {
|
||||
if (!detail) return;
|
||||
setEditBezeichnung(detail.anfrage.bezeichnung || '');
|
||||
setEditNotizen(detail.anfrage.notizen || '');
|
||||
setEditItems(detail.positionen.map(p => ({
|
||||
artikel_id: p.artikel_id,
|
||||
bezeichnung: p.bezeichnung,
|
||||
menge: p.menge,
|
||||
notizen: p.notizen,
|
||||
eigenschaften: p.eigenschaften?.map(e => ({ eigenschaft_id: e.eigenschaft_id, wert: e.wert })),
|
||||
})));
|
||||
setEditing(true);
|
||||
};
|
||||
|
||||
const handleSaveEdit = () => {
|
||||
if (editItems.length === 0) return;
|
||||
updateMut.mutate({
|
||||
bezeichnung: editBezeichnung || undefined,
|
||||
notizen: editNotizen || undefined,
|
||||
items: editItems,
|
||||
});
|
||||
};
|
||||
|
||||
const addEditItem = () => {
|
||||
setEditItems(prev => [...prev, { bezeichnung: '', menge: 1 }]);
|
||||
};
|
||||
|
||||
const removeEditItem = (idx: number) => {
|
||||
setEditItems(prev => prev.filter((_, i) => i !== idx));
|
||||
};
|
||||
|
||||
const updateEditItem = (idx: number, field: string, value: unknown) => {
|
||||
setEditItems(prev => prev.map((item, i) => i === idx ? { ...item, [field]: value } : item));
|
||||
};
|
||||
|
||||
if (!requestId) return null;
|
||||
|
||||
const anfrage = detail?.anfrage;
|
||||
const canEdit = anfrage && (
|
||||
canEditAny ||
|
||||
(anfrage.anfrager_id === currentUserId && anfrage.status === 'offen')
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog open={requestId != null} onClose={onClose} maxWidth="md" fullWidth>
|
||||
<DialogTitle sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<span>
|
||||
Anfrage {anfrage ? formatOrderId(anfrage) : '...'}
|
||||
{anfrage?.bezeichnung && ` — ${anfrage.bezeichnung}`}
|
||||
</span>
|
||||
{anfrage && (
|
||||
<Chip
|
||||
label={AUSRUESTUNG_STATUS_LABELS[anfrage.status]}
|
||||
color={AUSRUESTUNG_STATUS_COLORS[anfrage.status]}
|
||||
size="small"
|
||||
/>
|
||||
)}
|
||||
</DialogTitle>
|
||||
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '20px !important' }}>
|
||||
{isLoading ? (
|
||||
<Typography color="text.secondary">Lade Details...</Typography>
|
||||
) : isError ? (
|
||||
<Typography color="error">Fehler beim Laden der Anfrage.</Typography>
|
||||
) : !detail ? (
|
||||
<Typography color="text.secondary">Anfrage nicht gefunden.</Typography>
|
||||
) : editing ? (
|
||||
/* ── Edit Mode ── */
|
||||
<>
|
||||
<TextField
|
||||
label="Bezeichnung (optional)"
|
||||
value={editBezeichnung}
|
||||
onChange={e => setEditBezeichnung(e.target.value)}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
label="Notizen (optional)"
|
||||
value={editNotizen}
|
||||
onChange={e => setEditNotizen(e.target.value)}
|
||||
multiline
|
||||
rows={2}
|
||||
fullWidth
|
||||
/>
|
||||
<Typography variant="subtitle2" sx={{ mt: 1 }}>Positionen</Typography>
|
||||
{editItems.map((item, idx) => (
|
||||
<Box key={idx} sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
|
||||
<Autocomplete
|
||||
freeSolo
|
||||
options={catalogItems}
|
||||
getOptionLabel={o => typeof o === 'string' ? o : o.bezeichnung}
|
||||
value={item.artikel_id ? catalogItems.find(c => c.id === item.artikel_id) || item.bezeichnung : item.bezeichnung}
|
||||
onChange={(_, v) => {
|
||||
if (typeof v === 'string') {
|
||||
updateEditItem(idx, 'bezeichnung', v);
|
||||
updateEditItem(idx, 'artikel_id', undefined);
|
||||
} else if (v) {
|
||||
setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, artikel_id: v.id, bezeichnung: v.bezeichnung } : it));
|
||||
}
|
||||
}}
|
||||
onInputChange={(_, val, reason) => {
|
||||
if (reason === 'input') {
|
||||
setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, bezeichnung: val, artikel_id: undefined } : it));
|
||||
}
|
||||
}}
|
||||
renderInput={params => <TextField {...params} label="Artikel" size="small" />}
|
||||
sx={{ flexGrow: 1 }}
|
||||
/>
|
||||
<TextField
|
||||
size="small"
|
||||
type="number"
|
||||
label="Menge"
|
||||
value={item.menge}
|
||||
onChange={e => updateEditItem(idx, 'menge', Math.max(1, Number(e.target.value)))}
|
||||
sx={{ width: 90 }}
|
||||
inputProps={{ min: 1 }}
|
||||
/>
|
||||
<IconButton size="small" onClick={() => removeEditItem(idx)}>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
<Button size="small" startIcon={<AddIcon />} onClick={addEditItem}>
|
||||
Position hinzufügen
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
/* ── View Mode ── */
|
||||
<>
|
||||
{/* Meta info */}
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1.5 }}>
|
||||
{(anfrage!.anfrager_name || anfrage!.fuer_benutzer_name) && (
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">Anfrage für</Typography>
|
||||
<Typography variant="body2" fontWeight={500}>
|
||||
{anfrage!.fuer_benutzer_name
|
||||
? `${anfrage!.fuer_benutzer_name} (erstellt von ${anfrage!.anfrager_name || 'Unbekannt'})`
|
||||
: anfrage!.anfrager_name}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">Erstellt am</Typography>
|
||||
<Typography variant="body2" fontWeight={500}>{new Date(anfrage!.erstellt_am).toLocaleDateString('de-AT')}</Typography>
|
||||
</Box>
|
||||
{anfrage!.bearbeitet_von_name && (
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">Bearbeitet von</Typography>
|
||||
<Typography variant="body2" fontWeight={500}>{anfrage!.bearbeitet_von_name}</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{anfrage!.notizen && (
|
||||
<Paper variant="outlined" sx={{ p: 1.5, bgcolor: 'action.hover' }}>
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 0.5 }}>Notizen</Typography>
|
||||
<Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>{anfrage!.notizen}</Typography>
|
||||
</Paper>
|
||||
)}
|
||||
{anfrage!.admin_notizen && (
|
||||
<Paper variant="outlined" sx={{ p: 1.5, bgcolor: 'warning.main', color: 'warning.contrastText', borderColor: 'warning.dark' }}>
|
||||
<Typography variant="caption" display="block" sx={{ mb: 0.5, opacity: 0.8 }}>Admin Notizen</Typography>
|
||||
<Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>{anfrage!.admin_notizen}</Typography>
|
||||
</Paper>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* Positionen */}
|
||||
<Typography variant="subtitle2">Positionen ({detail.positionen.length})</Typography>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{showAdminActions && <TableCell padding="checkbox">Geliefert</TableCell>}
|
||||
<TableCell>Artikel</TableCell>
|
||||
<TableCell align="right">Menge</TableCell>
|
||||
<TableCell>Details</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{detail.positionen.map(p => (
|
||||
<TableRow key={p.id} sx={p.geliefert ? { opacity: 0.5 } : undefined}>
|
||||
{showAdminActions && (
|
||||
<TableCell padding="checkbox">
|
||||
<Checkbox
|
||||
size="small"
|
||||
checked={p.geliefert}
|
||||
disabled={geliefertMut.isPending}
|
||||
onChange={(_, checked) => geliefertMut.mutate({ positionId: p.id, geliefert: checked })}
|
||||
/>
|
||||
</TableCell>
|
||||
)}
|
||||
<TableCell>
|
||||
<Typography variant="body2" fontWeight={500} sx={p.geliefert ? { textDecoration: 'line-through' } : undefined}>{p.bezeichnung}</Typography>
|
||||
{p.eigenschaften && p.eigenschaften.length > 0 && (
|
||||
<Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', mt: 0.5 }}>
|
||||
{p.eigenschaften.map(e => (
|
||||
<Chip key={e.eigenschaft_id} label={`${e.eigenschaft_name}: ${e.wert}`} size="small" variant="outlined" />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Typography variant="body2" fontWeight={600}>{p.menge}x</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{p.notizen && <Typography variant="caption" color="text.secondary">{p.notizen}</Typography>}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
{detail.linked_bestellungen && detail.linked_bestellungen.length > 0 && (
|
||||
<>
|
||||
<Divider />
|
||||
<Typography variant="subtitle2">Verknüpfte Bestellungen</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
|
||||
{detail.linked_bestellungen.map(b => (
|
||||
<Chip key={b.id} label={`#${b.id} ${b.bezeichnung}`} size="small" />
|
||||
))}
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
{editing ? (
|
||||
<>
|
||||
<Button onClick={() => setEditing(false)}>Abbrechen</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleSaveEdit}
|
||||
disabled={updateMut.isPending || editItems.length === 0 || editItems.some(i => !i.bezeichnung.trim())}
|
||||
>
|
||||
Speichern
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Admin actions */}
|
||||
{showAdminActions && anfrage && anfrage.status === 'offen' && (
|
||||
<>
|
||||
<Button
|
||||
color="success"
|
||||
variant="outlined"
|
||||
startIcon={<CheckIcon />}
|
||||
onClick={() => { setActionDialog({ action: 'genehmigt' }); setAdminNotizen(''); }}
|
||||
>
|
||||
Genehmigen
|
||||
</Button>
|
||||
<Button
|
||||
color="error"
|
||||
variant="outlined"
|
||||
startIcon={<CloseIcon />}
|
||||
onClick={() => { setActionDialog({ action: 'abgelehnt' }); setAdminNotizen(''); }}
|
||||
>
|
||||
Ablehnen
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{showAdminActions && anfrage && hasPermission('ausruestungsanfrage:approve') && (
|
||||
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
|
||||
<FormControl size="small" sx={{ minWidth: 140 }}>
|
||||
<InputLabel>Status ändern</InputLabel>
|
||||
<Select
|
||||
value={statusChangeValue}
|
||||
label="Status ändern"
|
||||
onChange={e => {
|
||||
const val = e.target.value;
|
||||
setStatusChangeValue(val);
|
||||
if (val) statusMut.mutate({ status: val });
|
||||
}}
|
||||
>
|
||||
{(Object.keys(AUSRUESTUNG_STATUS_LABELS) as AusruestungAnfrageStatus[])
|
||||
.filter(s => s !== anfrage.status)
|
||||
.map(s => (
|
||||
<MenuItem key={s} value={s}>{AUSRUESTUNG_STATUS_LABELS[s]}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
)}
|
||||
{showAdminActions && anfrage && anfrage.status === 'genehmigt' && hasPermission('ausruestungsanfrage:link_orders') && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<LinkIcon />}
|
||||
onClick={() => setLinkDialog(true)}
|
||||
>
|
||||
Verknüpfen
|
||||
</Button>
|
||||
)}
|
||||
{(showEditButton || canEditAny) && canEdit && !editing && (
|
||||
<Button startIcon={<EditIcon />} onClick={startEditing}>
|
||||
Bearbeiten
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={onClose}>Schließen</Button>
|
||||
</>
|
||||
)}
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* Approve/Reject sub-dialog */}
|
||||
<Dialog open={actionDialog != null} onClose={() => setActionDialog(null)} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>{actionDialog?.action === 'genehmigt' ? 'Anfrage genehmigen' : 'Anfrage ablehnen'}</DialogTitle>
|
||||
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '20px !important' }}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Admin Notizen (optional)"
|
||||
value={adminNotizen}
|
||||
onChange={e => setAdminNotizen(e.target.value)}
|
||||
multiline
|
||||
rows={2}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setActionDialog(null)}>Abbrechen</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color={actionDialog?.action === 'genehmigt' ? 'success' : 'error'}
|
||||
onClick={() => {
|
||||
if (!actionDialog) return;
|
||||
statusMut.mutate({ status: actionDialog.action, notes: adminNotizen || undefined });
|
||||
}}
|
||||
disabled={statusMut.isPending}
|
||||
>
|
||||
{actionDialog?.action === 'genehmigt' ? 'Genehmigen' : 'Ablehnen'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* Link to order sub-dialog */}
|
||||
<Dialog open={linkDialog} onClose={() => { setLinkDialog(false); setSelectedBestellung(null); }} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>Mit Bestellung verknüpfen</DialogTitle>
|
||||
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '20px !important' }}>
|
||||
<Autocomplete
|
||||
options={bestellungen}
|
||||
getOptionLabel={(o) => `#${o.id} – ${o.bezeichnung}`}
|
||||
value={selectedBestellung}
|
||||
onChange={(_, v) => setSelectedBestellung(v)}
|
||||
renderInput={params => <TextField {...params} label="Bestellung auswählen" />}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => { setLinkDialog(false); setSelectedBestellung(null); }}>Abbrechen</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
disabled={!selectedBestellung || linkMut.isPending}
|
||||
onClick={() => { if (selectedBestellung) linkMut.mutate(selectedBestellung.id); }}
|
||||
>
|
||||
Verknüpfen
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Catalog Tab ────────────────────────────────────────────────────────────
|
||||
|
||||
function KatalogTab() {
|
||||
@@ -784,11 +285,9 @@ function KatalogTab() {
|
||||
queryFn: () => ausruestungsanfrageApi.getKategorien(),
|
||||
});
|
||||
|
||||
// Split categories into top-level and children
|
||||
const topKategorien = useMemo(() => kategorien.filter(k => !k.parent_id), [kategorien]);
|
||||
const subKategorienOf = useCallback((parentId: number) => kategorien.filter(k => k.parent_id === parentId), [kategorien]);
|
||||
|
||||
// Build display names for hierarchical categories (e.g. "Kleidung > A-Uniform")
|
||||
const kategorieOptions = useMemo(() => {
|
||||
const map = new Map(kategorien.map(k => [k.id, k]));
|
||||
const getDisplayName = (k: { id: number; name: string; parent_id?: number | null }): string => {
|
||||
@@ -801,7 +300,6 @@ function KatalogTab() {
|
||||
return kategorien.map(k => ({ id: k.id, name: getDisplayName(k), isChild: !!k.parent_id }));
|
||||
}, [kategorien]);
|
||||
|
||||
// For artikel dialog: track main + sub category separately
|
||||
const [artikelMainKat, setArtikelMainKat] = useState<number | ''>('');
|
||||
const artikelSubKats = useMemo(() => artikelMainKat ? subKategorienOf(artikelMainKat as number) : [], [artikelMainKat, subKategorienOf]);
|
||||
|
||||
@@ -830,7 +328,6 @@ function KatalogTab() {
|
||||
const openEditArtikel = (a: AusruestungArtikel) => {
|
||||
setEditArtikel(a);
|
||||
setArtikelForm({ bezeichnung: a.bezeichnung, beschreibung: a.beschreibung, kategorie_id: a.kategorie_id ?? null });
|
||||
// Determine main category (could be the item's category or its parent)
|
||||
const kat = kategorien.find(k => k.id === a.kategorie_id);
|
||||
if (kat?.parent_id) {
|
||||
setArtikelMainKat(kat.parent_id);
|
||||
@@ -847,7 +344,6 @@ function KatalogTab() {
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* Filter */}
|
||||
<Box sx={{ display: 'flex', gap: 2, mb: 3, alignItems: 'center', flexWrap: 'wrap' }}>
|
||||
<TextField
|
||||
select
|
||||
@@ -869,7 +365,6 @@ function KatalogTab() {
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Catalog table */}
|
||||
{isLoading ? (
|
||||
<Typography color="text.secondary">Lade Katalog...</Typography>
|
||||
) : items.length === 0 ? (
|
||||
@@ -913,7 +408,6 @@ function KatalogTab() {
|
||||
</TableContainer>
|
||||
)}
|
||||
|
||||
{/* 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: '20px !important' }}>
|
||||
@@ -926,7 +420,6 @@ function KatalogTab() {
|
||||
onChange={e => {
|
||||
const val = e.target.value ? Number(e.target.value) : '';
|
||||
setArtikelMainKat(val);
|
||||
// If no subcategories, set kategorie_id to main; otherwise clear it
|
||||
if (val) {
|
||||
const subs = subKategorienOf(val as number);
|
||||
setArtikelForm(f => ({ ...f, kategorie_id: subs.length === 0 ? (val as number) : null }));
|
||||
@@ -961,10 +454,8 @@ function KatalogTab() {
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* Kategorie management dialog */}
|
||||
<KategorieDialog open={kategorieDialogOpen} onClose={() => setKategorieDialogOpen(false)} />
|
||||
|
||||
{/* FAB for new catalog item */}
|
||||
{canManage && (
|
||||
<ChatAwareFab onClick={openNewArtikel} aria-label="Artikel hinzufügen">
|
||||
<AddIcon />
|
||||
@@ -978,122 +469,17 @@ function KatalogTab() {
|
||||
|
||||
function MeineAnfragenTab() {
|
||||
const { hasPermission } = usePermissionContext();
|
||||
const { user } = useAuth();
|
||||
const queryClient = useQueryClient();
|
||||
const { showSuccess, showError } = useNotification();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const canCreate = hasPermission('ausruestungsanfrage:create_request');
|
||||
const canOrderForUser = hasPermission('ausruestungsanfrage:order_for_user');
|
||||
const canEditAny = hasPermission('ausruestungsanfrage:edit');
|
||||
|
||||
const [detailId, setDetailId] = useState<number | null>(null);
|
||||
const [statusFilter, setStatusFilter] = useState<AusruestungAnfrageStatus[]>(ACTIVE_STATUSES);
|
||||
const [createDialogOpen, setCreateDialogOpen] = useState(false);
|
||||
const [newBezeichnung, setNewBezeichnung] = useState('');
|
||||
const [newNotizen, setNewNotizen] = useState('');
|
||||
const [newFuerBenutzer, setNewFuerBenutzer] = useState<{ id: string; name: string } | string | null>(null);
|
||||
const [newItems, setNewItems] = useState<AusruestungAnfrageFormItem[]>([{ bezeichnung: '', menge: 1 }]);
|
||||
// Track loaded eigenschaften per item row (by artikel_id)
|
||||
const [itemEigenschaften, setItemEigenschaften] = useState<Record<number, AusruestungEigenschaft[]>>({});
|
||||
const itemEigenschaftenRef = useRef(itemEigenschaften);
|
||||
itemEigenschaftenRef.current = itemEigenschaften;
|
||||
// Track eigenschaft values per item row index
|
||||
const [itemEigenschaftValues, setItemEigenschaftValues] = useState<Record<number, Record<number, string>>>({});
|
||||
// Separate free-text items
|
||||
const [newFreeItems, setNewFreeItems] = useState<{ bezeichnung: string; menge: number }[]>([]);
|
||||
|
||||
const { data: requests = [], isLoading } = useQuery({
|
||||
queryKey: ['ausruestungsanfrage', 'myRequests'],
|
||||
queryFn: () => ausruestungsanfrageApi.getMyRequests(),
|
||||
});
|
||||
|
||||
const { data: catalogItems = [] } = useQuery({
|
||||
queryKey: ['ausruestungsanfrage', 'items-for-create'],
|
||||
queryFn: () => ausruestungsanfrageApi.getItems({ aktiv: true }),
|
||||
enabled: createDialogOpen,
|
||||
});
|
||||
|
||||
const { data: orderUsers = [] } = useQuery({
|
||||
queryKey: ['ausruestungsanfrage', 'orderUsers'],
|
||||
queryFn: () => ausruestungsanfrageApi.getOrderUsers(),
|
||||
enabled: createDialogOpen && canOrderForUser,
|
||||
});
|
||||
|
||||
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');
|
||||
setCreateDialogOpen(false);
|
||||
resetCreateForm();
|
||||
},
|
||||
onError: () => showError('Fehler beim Erstellen der Anfrage'),
|
||||
});
|
||||
|
||||
const resetCreateForm = () => {
|
||||
setNewBezeichnung('');
|
||||
setNewNotizen('');
|
||||
setNewFuerBenutzer(null);
|
||||
setNewItems([{ bezeichnung: '', menge: 1 }]);
|
||||
setNewFreeItems([]);
|
||||
setItemEigenschaften({});
|
||||
setItemEigenschaftValues({});
|
||||
};
|
||||
|
||||
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);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleCreateSubmit = () => {
|
||||
// Catalog items with eigenschaften
|
||||
const catalogValidItems = newItems.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 = newFreeItems
|
||||
.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 < newItems.length; idx++) {
|
||||
const item = newItems[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: newNotizen || undefined,
|
||||
bezeichnung: newBezeichnung || undefined,
|
||||
fuer_benutzer_id: typeof newFuerBenutzer === 'object' && newFuerBenutzer ? newFuerBenutzer.id : undefined,
|
||||
fuer_benutzer_name: typeof newFuerBenutzer === 'string' ? newFuerBenutzer : undefined,
|
||||
});
|
||||
};
|
||||
|
||||
const filteredRequests = useMemo(() => {
|
||||
if (statusFilter.length === 0) return requests;
|
||||
return requests.filter(r => statusFilter.includes(r.status));
|
||||
@@ -1128,11 +514,11 @@ function MeineAnfragenTab() {
|
||||
onChange={e => handleStatusFilterChange(e.target.value)}
|
||||
sx={{ minWidth: 200 }}
|
||||
>
|
||||
<MenuItem value="active">Aktive Anfragen</MenuItem>
|
||||
<MenuItem value="all">Alle</MenuItem>
|
||||
{(Object.keys(AUSRUESTUNG_STATUS_LABELS) as AusruestungAnfrageStatus[]).map(s => (
|
||||
<MenuItem key={s} value={s}>{AUSRUESTUNG_STATUS_LABELS[s]}</MenuItem>
|
||||
))}
|
||||
<MenuItem value="active">Aktive Anfragen</MenuItem>
|
||||
<MenuItem value="all">Alle</MenuItem>
|
||||
{(Object.keys(AUSRUESTUNG_STATUS_LABELS) as AusruestungAnfrageStatus[]).map(s => (
|
||||
<MenuItem key={s} value={s}>{AUSRUESTUNG_STATUS_LABELS[s]}</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
</Box>
|
||||
|
||||
@@ -1152,7 +538,7 @@ function MeineAnfragenTab() {
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{filteredRequests.map(r => (
|
||||
<TableRow key={r.id} hover sx={{ cursor: 'pointer' }} onClick={() => setDetailId(r.id)}>
|
||||
<TableRow key={r.id} hover sx={{ cursor: 'pointer' }} onClick={() => navigate('/ausruestungsanfrage/' + r.id)}>
|
||||
<TableCell>{formatOrderId(r)}</TableCell>
|
||||
<TableCell>{r.bezeichnung || '-'}</TableCell>
|
||||
<TableCell><Chip label={AUSRUESTUNG_STATUS_LABELS[r.status]} color={AUSRUESTUNG_STATUS_COLORS[r.status]} size="small" /></TableCell>
|
||||
@@ -1165,157 +551,8 @@ function MeineAnfragenTab() {
|
||||
</TableContainer>
|
||||
)}
|
||||
|
||||
{/* Detail Modal */}
|
||||
<DetailModal
|
||||
requestId={detailId}
|
||||
onClose={() => setDetailId(null)}
|
||||
showEditButton
|
||||
canEditAny={canEditAny}
|
||||
currentUserId={user?.id}
|
||||
/>
|
||||
|
||||
{/* Create Request Dialog */}
|
||||
<Dialog open={createDialogOpen} onClose={() => { setCreateDialogOpen(false); resetCreateForm(); }} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>Neue Bestellung</DialogTitle>
|
||||
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '20px !important' }}>
|
||||
<TextField
|
||||
label="Bezeichnung (optional)"
|
||||
value={newBezeichnung}
|
||||
onChange={e => setNewBezeichnung(e.target.value)}
|
||||
fullWidth
|
||||
/>
|
||||
{canOrderForUser && (
|
||||
<Autocomplete
|
||||
freeSolo
|
||||
options={orderUsers}
|
||||
getOptionLabel={o => typeof o === 'string' ? o : o.name}
|
||||
value={newFuerBenutzer}
|
||||
onChange={(_, v) => setNewFuerBenutzer(v)}
|
||||
onInputChange={(_, value, reason) => {
|
||||
if (reason === 'input') {
|
||||
// If user types a custom value that doesn't match any option, store as string
|
||||
const match = orderUsers.find(u => u.name === value);
|
||||
if (!match && value) {
|
||||
setNewFuerBenutzer(value);
|
||||
} else if (!value) {
|
||||
setNewFuerBenutzer(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={newNotizen}
|
||||
onChange={e => setNewNotizen(e.target.value)}
|
||||
multiline
|
||||
rows={2}
|
||||
fullWidth
|
||||
/>
|
||||
<Divider />
|
||||
<Typography variant="subtitle2">Aus Katalog</Typography>
|
||||
{newItems.map((item, idx) => (
|
||||
<Box key={`cat-${idx}`}>
|
||||
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
|
||||
<Autocomplete
|
||||
options={catalogItems}
|
||||
getOptionLabel={o => typeof o === 'string' ? o : o.bezeichnung}
|
||||
value={item.artikel_id ? catalogItems.find(c => c.id === item.artikel_id) || null : null}
|
||||
onChange={(_, v) => {
|
||||
if (v && typeof v !== 'string') {
|
||||
setNewItems(prev => prev.map((it, i) => i === idx ? { ...it, artikel_id: v.id, bezeichnung: v.bezeichnung } : it));
|
||||
loadEigenschaften(v.id);
|
||||
} else {
|
||||
setNewItems(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 => setNewItems(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={() => setNewItems(prev => prev.filter((_, i) => i !== idx))} disabled={newItems.length <= 1}>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
{/* Eigenschaft fields for this item */}
|
||||
{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={() => setNewItems(prev => [...prev, { bezeichnung: '', menge: 1 }])}>
|
||||
Katalogartikel hinzufügen
|
||||
</Button>
|
||||
|
||||
<Divider />
|
||||
<Typography variant="subtitle2">Freitext-Positionen</Typography>
|
||||
{newFreeItems.length === 0 ? (
|
||||
<Typography variant="body2" color="text.secondary">Keine Freitext-Positionen.</Typography>
|
||||
) : (
|
||||
newFreeItems.map((item, idx) => (
|
||||
<Box key={`free-${idx}`} sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Bezeichnung"
|
||||
value={item.bezeichnung}
|
||||
onChange={e => setNewFreeItems(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 => setNewFreeItems(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={() => setNewFreeItems(prev => prev.filter((_, i) => i !== idx))}>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
))
|
||||
)}
|
||||
<Button size="small" startIcon={<AddIcon />} onClick={() => setNewFreeItems(prev => [...prev, { bezeichnung: '', menge: 1 }])}>
|
||||
Freitext-Position hinzufügen
|
||||
</Button>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => { setCreateDialogOpen(false); resetCreateForm(); }}>Abbrechen</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleCreateSubmit}
|
||||
disabled={createMut.isPending || (newItems.every(i => !i.artikel_id) && newFreeItems.every(i => !i.bezeichnung.trim()))}
|
||||
>
|
||||
Anfrage erstellen
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* FAB for creating new request */}
|
||||
{canCreate && (
|
||||
<ChatAwareFab onClick={() => setCreateDialogOpen(true)} aria-label="Neue Anfrage erstellen">
|
||||
<ChatAwareFab onClick={() => navigate('/ausruestungsanfrage/neu')} aria-label="Neue Anfrage erstellen">
|
||||
<AddIcon />
|
||||
</ChatAwareFab>
|
||||
)}
|
||||
@@ -1326,12 +563,8 @@ function MeineAnfragenTab() {
|
||||
// ─── Admin All Requests Tab (merged with overview) ──────────────────────────
|
||||
|
||||
function AlleAnfragenTab() {
|
||||
const { hasPermission } = usePermissionContext();
|
||||
const { user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [statusFilter, setStatusFilter] = useState<string>('alle');
|
||||
const [detailId, setDetailId] = useState<number | null>(null);
|
||||
|
||||
const canEditAny = hasPermission('ausruestungsanfrage:edit');
|
||||
|
||||
const { data: requests = [], isLoading: requestsLoading, isError: requestsError } = useQuery({
|
||||
queryKey: ['ausruestungsanfrage', 'allRequests', statusFilter],
|
||||
@@ -1345,7 +578,6 @@ function AlleAnfragenTab() {
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* Summary cards — always visible */}
|
||||
<Grid container spacing={2} sx={{ mb: 3 }}>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<Paper variant="outlined" sx={{ p: 2, textAlign: 'center' }}>
|
||||
@@ -1409,7 +641,7 @@ function AlleAnfragenTab() {
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{requests.map(r => (
|
||||
<TableRow key={r.id} hover sx={{ cursor: 'pointer' }} onClick={() => setDetailId(r.id)}>
|
||||
<TableRow key={r.id} hover sx={{ cursor: 'pointer' }} onClick={() => navigate('/ausruestungsanfrage/' + r.id)}>
|
||||
<TableCell>{formatOrderId(r)}</TableCell>
|
||||
<TableCell>{r.bezeichnung || '-'}</TableCell>
|
||||
<TableCell>{r.fuer_benutzer_name || r.anfrager_name || r.anfrager_id}</TableCell>
|
||||
@@ -1427,15 +659,6 @@ function AlleAnfragenTab() {
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)}
|
||||
|
||||
<DetailModal
|
||||
requestId={detailId}
|
||||
onClose={() => setDetailId(null)}
|
||||
showAdminActions
|
||||
showEditButton
|
||||
canEditAny={canEditAny}
|
||||
currentUserId={user?.id}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1457,7 +680,6 @@ export default function Ausruestungsanfrage() {
|
||||
return t >= 0 && t < tabCount ? t : 0;
|
||||
});
|
||||
|
||||
// Sync tab from URL changes (e.g. sidebar navigation)
|
||||
useEffect(() => {
|
||||
const t = Number(searchParams.get('tab'));
|
||||
if (t >= 0 && t < tabCount) setActiveTab(t);
|
||||
|
||||
Reference in New Issue
Block a user