rework from modal to page
This commit is contained in:
Matthias Hochmeister
@@ -28,8 +28,13 @@ import VeranstaltungKategorien from './pages/VeranstaltungKategorien';
|
|||||||
import Wissen from './pages/Wissen';
|
import Wissen from './pages/Wissen';
|
||||||
import Bestellungen from './pages/Bestellungen';
|
import Bestellungen from './pages/Bestellungen';
|
||||||
import BestellungDetail from './pages/BestellungDetail';
|
import BestellungDetail from './pages/BestellungDetail';
|
||||||
|
import BestellungNeu from './pages/BestellungNeu';
|
||||||
import Ausruestungsanfrage from './pages/Ausruestungsanfrage';
|
import Ausruestungsanfrage from './pages/Ausruestungsanfrage';
|
||||||
|
import AusruestungsanfrageDetail from './pages/AusruestungsanfrageDetail';
|
||||||
|
import AusruestungsanfrageNeu from './pages/AusruestungsanfrageNeu';
|
||||||
import Issues from './pages/Issues';
|
import Issues from './pages/Issues';
|
||||||
|
import IssueDetail from './pages/IssueDetail';
|
||||||
|
import IssueNeu from './pages/IssueNeu';
|
||||||
import AdminDashboard from './pages/AdminDashboard';
|
import AdminDashboard from './pages/AdminDashboard';
|
||||||
import AdminSettings from './pages/AdminSettings';
|
import AdminSettings from './pages/AdminSettings';
|
||||||
import NotFound from './pages/NotFound';
|
import NotFound from './pages/NotFound';
|
||||||
@@ -228,6 +233,14 @@ function App() {
|
|||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
<Route
|
||||||
|
path="/bestellungen/neu"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<BestellungNeu />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
<Route
|
<Route
|
||||||
path="/bestellungen/:id"
|
path="/bestellungen/:id"
|
||||||
element={
|
element={
|
||||||
@@ -244,6 +257,22 @@ function App() {
|
|||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
<Route
|
||||||
|
path="/ausruestungsanfrage/neu"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<AusruestungsanfrageNeu />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="/ausruestungsanfrage/:id"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<AusruestungsanfrageDetail />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
<Route
|
<Route
|
||||||
path="/issues"
|
path="/issues"
|
||||||
element={
|
element={
|
||||||
@@ -252,6 +281,22 @@ function App() {
|
|||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
<Route
|
||||||
|
path="/issues/neu"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<IssueNeu />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="/issues/:id"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<IssueDetail />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
<Route
|
<Route
|
||||||
path="/admin"
|
path="/admin"
|
||||||
element={
|
element={
|
||||||
|
|||||||
@@ -1,31 +1,27 @@
|
|||||||
import { useState, useMemo, useEffect, useCallback, useRef } from 'react';
|
import { useState, useMemo, useEffect, useCallback } from 'react';
|
||||||
import {
|
import {
|
||||||
Box, Tab, Tabs, Typography, Grid, Button, Chip,
|
Box, Tab, Tabs, Typography, Grid, Button, Chip,
|
||||||
Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper,
|
Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper,
|
||||||
Dialog, DialogTitle, DialogContent, DialogActions, TextField, IconButton,
|
Dialog, DialogTitle, DialogContent, DialogActions, TextField, IconButton,
|
||||||
MenuItem, Select, FormControl, InputLabel, Autocomplete,
|
MenuItem, Divider, Checkbox, FormControlLabel, Tooltip,
|
||||||
Divider, Checkbox, FormControlLabel, Tooltip,
|
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import {
|
import {
|
||||||
Add as AddIcon, Delete as DeleteIcon, Edit as EditIcon,
|
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';
|
} from '@mui/icons-material';
|
||||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
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 DashboardLayout from '../components/dashboard/DashboardLayout';
|
||||||
import ChatAwareFab from '../components/shared/ChatAwareFab';
|
import ChatAwareFab from '../components/shared/ChatAwareFab';
|
||||||
import { useNotification } from '../contexts/NotificationContext';
|
import { useNotification } from '../contexts/NotificationContext';
|
||||||
import { usePermissionContext } from '../contexts/PermissionContext';
|
import { usePermissionContext } from '../contexts/PermissionContext';
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
|
import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
|
||||||
import { bestellungApi } from '../services/bestellung';
|
|
||||||
import { AUSRUESTUNG_STATUS_LABELS, AUSRUESTUNG_STATUS_COLORS } from '../types/ausruestungsanfrage.types';
|
import { AUSRUESTUNG_STATUS_LABELS, AUSRUESTUNG_STATUS_COLORS } from '../types/ausruestungsanfrage.types';
|
||||||
import type {
|
import type {
|
||||||
AusruestungArtikel, AusruestungArtikelFormData, AusruestungAnfrageFormItem,
|
AusruestungArtikel, AusruestungArtikelFormData,
|
||||||
AusruestungAnfrageDetailResponse, AusruestungAnfrageStatus, AusruestungAnfrage,
|
AusruestungAnfrageStatus, AusruestungAnfrage,
|
||||||
AusruestungOverview, AusruestungEigenschaft,
|
AusruestungOverview,
|
||||||
} from '../types/ausruestungsanfrage.types';
|
} from '../types/ausruestungsanfrage.types';
|
||||||
import type { Bestellung } from '../types/bestellung.types';
|
|
||||||
|
|
||||||
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
@@ -38,51 +34,6 @@ function formatOrderId(r: AusruestungAnfrage): string {
|
|||||||
|
|
||||||
const ACTIVE_STATUSES: AusruestungAnfrageStatus[] = ['offen', 'genehmigt', 'bestellt'];
|
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 ──────────────────────────────────────────────
|
// ─── Category Management Dialog ──────────────────────────────────────────────
|
||||||
|
|
||||||
interface KategorieDialogProps {
|
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 ────────────────────────────────────────────────────────────
|
// ─── Catalog Tab ────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
function KatalogTab() {
|
function KatalogTab() {
|
||||||
@@ -784,11 +285,9 @@ function KatalogTab() {
|
|||||||
queryFn: () => ausruestungsanfrageApi.getKategorien(),
|
queryFn: () => ausruestungsanfrageApi.getKategorien(),
|
||||||
});
|
});
|
||||||
|
|
||||||
// Split categories into top-level and children
|
|
||||||
const topKategorien = useMemo(() => kategorien.filter(k => !k.parent_id), [kategorien]);
|
const topKategorien = useMemo(() => kategorien.filter(k => !k.parent_id), [kategorien]);
|
||||||
const subKategorienOf = useCallback((parentId: number) => kategorien.filter(k => k.parent_id === parentId), [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 kategorieOptions = useMemo(() => {
|
||||||
const map = new Map(kategorien.map(k => [k.id, k]));
|
const map = new Map(kategorien.map(k => [k.id, k]));
|
||||||
const getDisplayName = (k: { id: number; name: string; parent_id?: number | null }): string => {
|
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 }));
|
return kategorien.map(k => ({ id: k.id, name: getDisplayName(k), isChild: !!k.parent_id }));
|
||||||
}, [kategorien]);
|
}, [kategorien]);
|
||||||
|
|
||||||
// For artikel dialog: track main + sub category separately
|
|
||||||
const [artikelMainKat, setArtikelMainKat] = useState<number | ''>('');
|
const [artikelMainKat, setArtikelMainKat] = useState<number | ''>('');
|
||||||
const artikelSubKats = useMemo(() => artikelMainKat ? subKategorienOf(artikelMainKat as number) : [], [artikelMainKat, subKategorienOf]);
|
const artikelSubKats = useMemo(() => artikelMainKat ? subKategorienOf(artikelMainKat as number) : [], [artikelMainKat, subKategorienOf]);
|
||||||
|
|
||||||
@@ -830,7 +328,6 @@ function KatalogTab() {
|
|||||||
const openEditArtikel = (a: AusruestungArtikel) => {
|
const openEditArtikel = (a: AusruestungArtikel) => {
|
||||||
setEditArtikel(a);
|
setEditArtikel(a);
|
||||||
setArtikelForm({ bezeichnung: a.bezeichnung, beschreibung: a.beschreibung, kategorie_id: a.kategorie_id ?? null });
|
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);
|
const kat = kategorien.find(k => k.id === a.kategorie_id);
|
||||||
if (kat?.parent_id) {
|
if (kat?.parent_id) {
|
||||||
setArtikelMainKat(kat.parent_id);
|
setArtikelMainKat(kat.parent_id);
|
||||||
@@ -847,7 +344,6 @@ function KatalogTab() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Box>
|
<Box>
|
||||||
{/* Filter */}
|
|
||||||
<Box sx={{ display: 'flex', gap: 2, mb: 3, alignItems: 'center', flexWrap: 'wrap' }}>
|
<Box sx={{ display: 'flex', gap: 2, mb: 3, alignItems: 'center', flexWrap: 'wrap' }}>
|
||||||
<TextField
|
<TextField
|
||||||
select
|
select
|
||||||
@@ -869,7 +365,6 @@ function KatalogTab() {
|
|||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{/* Catalog table */}
|
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<Typography color="text.secondary">Lade Katalog...</Typography>
|
<Typography color="text.secondary">Lade Katalog...</Typography>
|
||||||
) : items.length === 0 ? (
|
) : items.length === 0 ? (
|
||||||
@@ -913,7 +408,6 @@ function KatalogTab() {
|
|||||||
</TableContainer>
|
</TableContainer>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Artikel create/edit dialog */}
|
|
||||||
<Dialog open={artikelDialogOpen} onClose={() => setArtikelDialogOpen(false)} maxWidth="sm" fullWidth>
|
<Dialog open={artikelDialogOpen} onClose={() => setArtikelDialogOpen(false)} maxWidth="sm" fullWidth>
|
||||||
<DialogTitle>{editArtikel ? 'Artikel bearbeiten' : 'Neuer Artikel'}</DialogTitle>
|
<DialogTitle>{editArtikel ? 'Artikel bearbeiten' : 'Neuer Artikel'}</DialogTitle>
|
||||||
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '20px !important' }}>
|
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '20px !important' }}>
|
||||||
@@ -926,7 +420,6 @@ function KatalogTab() {
|
|||||||
onChange={e => {
|
onChange={e => {
|
||||||
const val = e.target.value ? Number(e.target.value) : '';
|
const val = e.target.value ? Number(e.target.value) : '';
|
||||||
setArtikelMainKat(val);
|
setArtikelMainKat(val);
|
||||||
// If no subcategories, set kategorie_id to main; otherwise clear it
|
|
||||||
if (val) {
|
if (val) {
|
||||||
const subs = subKategorienOf(val as number);
|
const subs = subKategorienOf(val as number);
|
||||||
setArtikelForm(f => ({ ...f, kategorie_id: subs.length === 0 ? (val as number) : null }));
|
setArtikelForm(f => ({ ...f, kategorie_id: subs.length === 0 ? (val as number) : null }));
|
||||||
@@ -961,10 +454,8 @@ function KatalogTab() {
|
|||||||
</DialogActions>
|
</DialogActions>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|
||||||
{/* Kategorie management dialog */}
|
|
||||||
<KategorieDialog open={kategorieDialogOpen} onClose={() => setKategorieDialogOpen(false)} />
|
<KategorieDialog open={kategorieDialogOpen} onClose={() => setKategorieDialogOpen(false)} />
|
||||||
|
|
||||||
{/* FAB for new catalog item */}
|
|
||||||
{canManage && (
|
{canManage && (
|
||||||
<ChatAwareFab onClick={openNewArtikel} aria-label="Artikel hinzufügen">
|
<ChatAwareFab onClick={openNewArtikel} aria-label="Artikel hinzufügen">
|
||||||
<AddIcon />
|
<AddIcon />
|
||||||
@@ -978,122 +469,17 @@ function KatalogTab() {
|
|||||||
|
|
||||||
function MeineAnfragenTab() {
|
function MeineAnfragenTab() {
|
||||||
const { hasPermission } = usePermissionContext();
|
const { hasPermission } = usePermissionContext();
|
||||||
const { user } = useAuth();
|
const navigate = useNavigate();
|
||||||
const queryClient = useQueryClient();
|
|
||||||
const { showSuccess, showError } = useNotification();
|
|
||||||
|
|
||||||
const canCreate = hasPermission('ausruestungsanfrage:create_request');
|
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 [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({
|
const { data: requests = [], isLoading } = useQuery({
|
||||||
queryKey: ['ausruestungsanfrage', 'myRequests'],
|
queryKey: ['ausruestungsanfrage', 'myRequests'],
|
||||||
queryFn: () => ausruestungsanfrageApi.getMyRequests(),
|
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(() => {
|
const filteredRequests = useMemo(() => {
|
||||||
if (statusFilter.length === 0) return requests;
|
if (statusFilter.length === 0) return requests;
|
||||||
return requests.filter(r => statusFilter.includes(r.status));
|
return requests.filter(r => statusFilter.includes(r.status));
|
||||||
@@ -1152,7 +538,7 @@ function MeineAnfragenTab() {
|
|||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{filteredRequests.map(r => (
|
{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>{formatOrderId(r)}</TableCell>
|
||||||
<TableCell>{r.bezeichnung || '-'}</TableCell>
|
<TableCell>{r.bezeichnung || '-'}</TableCell>
|
||||||
<TableCell><Chip label={AUSRUESTUNG_STATUS_LABELS[r.status]} color={AUSRUESTUNG_STATUS_COLORS[r.status]} size="small" /></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>
|
</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 && (
|
{canCreate && (
|
||||||
<ChatAwareFab onClick={() => setCreateDialogOpen(true)} aria-label="Neue Anfrage erstellen">
|
<ChatAwareFab onClick={() => navigate('/ausruestungsanfrage/neu')} aria-label="Neue Anfrage erstellen">
|
||||||
<AddIcon />
|
<AddIcon />
|
||||||
</ChatAwareFab>
|
</ChatAwareFab>
|
||||||
)}
|
)}
|
||||||
@@ -1326,12 +563,8 @@ function MeineAnfragenTab() {
|
|||||||
// ─── Admin All Requests Tab (merged with overview) ──────────────────────────
|
// ─── Admin All Requests Tab (merged with overview) ──────────────────────────
|
||||||
|
|
||||||
function AlleAnfragenTab() {
|
function AlleAnfragenTab() {
|
||||||
const { hasPermission } = usePermissionContext();
|
const navigate = useNavigate();
|
||||||
const { user } = useAuth();
|
|
||||||
const [statusFilter, setStatusFilter] = useState<string>('alle');
|
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({
|
const { data: requests = [], isLoading: requestsLoading, isError: requestsError } = useQuery({
|
||||||
queryKey: ['ausruestungsanfrage', 'allRequests', statusFilter],
|
queryKey: ['ausruestungsanfrage', 'allRequests', statusFilter],
|
||||||
@@ -1345,7 +578,6 @@ function AlleAnfragenTab() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Box>
|
<Box>
|
||||||
{/* Summary cards — always visible */}
|
|
||||||
<Grid container spacing={2} sx={{ mb: 3 }}>
|
<Grid container spacing={2} sx={{ mb: 3 }}>
|
||||||
<Grid item xs={6} sm={3}>
|
<Grid item xs={6} sm={3}>
|
||||||
<Paper variant="outlined" sx={{ p: 2, textAlign: 'center' }}>
|
<Paper variant="outlined" sx={{ p: 2, textAlign: 'center' }}>
|
||||||
@@ -1409,7 +641,7 @@ function AlleAnfragenTab() {
|
|||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{requests.map(r => (
|
{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>{formatOrderId(r)}</TableCell>
|
||||||
<TableCell>{r.bezeichnung || '-'}</TableCell>
|
<TableCell>{r.bezeichnung || '-'}</TableCell>
|
||||||
<TableCell>{r.fuer_benutzer_name || r.anfrager_name || r.anfrager_id}</TableCell>
|
<TableCell>{r.fuer_benutzer_name || r.anfrager_name || r.anfrager_id}</TableCell>
|
||||||
@@ -1427,15 +659,6 @@ function AlleAnfragenTab() {
|
|||||||
</Table>
|
</Table>
|
||||||
</TableContainer>
|
</TableContainer>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<DetailModal
|
|
||||||
requestId={detailId}
|
|
||||||
onClose={() => setDetailId(null)}
|
|
||||||
showAdminActions
|
|
||||||
showEditButton
|
|
||||||
canEditAny={canEditAny}
|
|
||||||
currentUserId={user?.id}
|
|
||||||
/>
|
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -1457,7 +680,6 @@ export default function Ausruestungsanfrage() {
|
|||||||
return t >= 0 && t < tabCount ? t : 0;
|
return t >= 0 && t < tabCount ? t : 0;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Sync tab from URL changes (e.g. sidebar navigation)
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const t = Number(searchParams.get('tab'));
|
const t = Number(searchParams.get('tab'));
|
||||||
if (t >= 0 && t < tabCount) setActiveTab(t);
|
if (t >= 0 && t < tabCount) setActiveTab(t);
|
||||||
|
|||||||
487
frontend/src/pages/AusruestungsanfrageDetail.tsx
Normal file
487
frontend/src/pages/AusruestungsanfrageDetail.tsx
Normal file
@@ -0,0 +1,487 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import {
|
||||||
|
Box, Typography, Paper, Button, Chip, IconButton,
|
||||||
|
Table, TableBody, TableCell, TableHead, TableRow,
|
||||||
|
Dialog, DialogTitle, DialogContent, DialogActions, TextField,
|
||||||
|
MenuItem, Select, FormControl, InputLabel, Autocomplete,
|
||||||
|
Checkbox, LinearProgress,
|
||||||
|
} from '@mui/material';
|
||||||
|
import {
|
||||||
|
ArrowBack, Add as AddIcon, Delete as DeleteIcon, Edit as EditIcon,
|
||||||
|
Check as CheckIcon, Close as CloseIcon, Link as LinkIcon,
|
||||||
|
} 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 { 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 {
|
||||||
|
AusruestungAnfrage, AusruestungAnfrageDetailResponse,
|
||||||
|
AusruestungAnfrageFormItem, AusruestungAnfrageStatus,
|
||||||
|
} 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}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ══════════════════════════════════════════════════════════════════════════════
|
||||||
|
// Component
|
||||||
|
// ══════════════════════════════════════════════════════════════════════════════
|
||||||
|
|
||||||
|
export default function AusruestungsanfrageDetail() {
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const { showSuccess, showError } = useNotification();
|
||||||
|
const { hasPermission } = usePermissionContext();
|
||||||
|
const { user } = useAuth();
|
||||||
|
|
||||||
|
const requestId = Number(id);
|
||||||
|
|
||||||
|
// ── State ──
|
||||||
|
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);
|
||||||
|
|
||||||
|
// Permissions
|
||||||
|
const showAdminActions = hasPermission('ausruestungsanfrage:approve');
|
||||||
|
const canEditAny = hasPermission('ausruestungsanfrage:edit');
|
||||||
|
const canLink = hasPermission('ausruestungsanfrage:link_orders');
|
||||||
|
|
||||||
|
// ── Queries ──
|
||||||
|
const { data: detail, isLoading, isError } = useQuery<AusruestungAnfrageDetailResponse>({
|
||||||
|
queryKey: ['ausruestungsanfrage', 'request', requestId],
|
||||||
|
queryFn: () => ausruestungsanfrageApi.getRequest(requestId),
|
||||||
|
enabled: !isNaN(requestId),
|
||||||
|
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,
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Mutations ──
|
||||||
|
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'),
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Edit helpers ──
|
||||||
|
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));
|
||||||
|
};
|
||||||
|
|
||||||
|
const anfrage = detail?.anfrage;
|
||||||
|
const canEdit = anfrage && (
|
||||||
|
canEditAny ||
|
||||||
|
(anfrage.anfrager_id === user?.id && anfrage.status === 'offen')
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DashboardLayout>
|
||||||
|
{/* Header */}
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
||||||
|
<IconButton onClick={() => navigate('/ausruestungsanfrage')}>
|
||||||
|
<ArrowBack />
|
||||||
|
</IconButton>
|
||||||
|
<Typography variant="h5" sx={{ flexGrow: 1 }}>
|
||||||
|
Anfrage {anfrage ? formatOrderId(anfrage) : '...'}
|
||||||
|
{anfrage?.bezeichnung && ` — ${anfrage.bezeichnung}`}
|
||||||
|
</Typography>
|
||||||
|
{anfrage && (
|
||||||
|
<Chip
|
||||||
|
label={AUSRUESTUNG_STATUS_LABELS[anfrage.status]}
|
||||||
|
color={AUSRUESTUNG_STATUS_COLORS[anfrage.status]}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{isLoading ? (
|
||||||
|
<LinearProgress />
|
||||||
|
) : isError ? (
|
||||||
|
<Typography color="error">Fehler beim Laden der Anfrage.</Typography>
|
||||||
|
) : !detail ? (
|
||||||
|
<Typography color="text.secondary">Anfrage nicht gefunden.</Typography>
|
||||||
|
) : editing ? (
|
||||||
|
/* ── Edit Mode ── */
|
||||||
|
<Paper sx={{ p: 3 }}>
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||||
|
<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>
|
||||||
|
<Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end', mt: 2 }}>
|
||||||
|
<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>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Paper>
|
||||||
|
) : (
|
||||||
|
/* ── View Mode ── */
|
||||||
|
<>
|
||||||
|
<Paper sx={{ p: 3, mb: 3 }}>
|
||||||
|
{/* Meta info */}
|
||||||
|
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1.5, mb: 2 }}>
|
||||||
|
{(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', mb: 1.5 }}>
|
||||||
|
<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', mb: 1.5 }}>
|
||||||
|
<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>
|
||||||
|
)}
|
||||||
|
</Paper>
|
||||||
|
|
||||||
|
{/* Positionen */}
|
||||||
|
<Paper sx={{ p: 3, mb: 3 }}>
|
||||||
|
<Typography variant="subtitle2" sx={{ mb: 1 }}>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>
|
||||||
|
</Paper>
|
||||||
|
|
||||||
|
{/* Linked Bestellungen */}
|
||||||
|
{detail.linked_bestellungen && detail.linked_bestellungen.length > 0 && (
|
||||||
|
<Paper sx={{ p: 3, mb: 3 }}>
|
||||||
|
<Typography variant="subtitle2" sx={{ mb: 1 }}>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>
|
||||||
|
</Paper>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Action buttons */}
|
||||||
|
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
|
||||||
|
{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 && (
|
||||||
|
<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>
|
||||||
|
)}
|
||||||
|
{showAdminActions && anfrage && anfrage.status === 'genehmigt' && canLink && (
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
startIcon={<LinkIcon />}
|
||||||
|
onClick={() => setLinkDialog(true)}
|
||||||
|
>
|
||||||
|
Verknüpfen
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{canEdit && !editing && (
|
||||||
|
<Button startIcon={<EditIcon />} onClick={startEditing}>
|
||||||
|
Bearbeiten
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
|
</DashboardLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
318
frontend/src/pages/AusruestungsanfrageNeu.tsx
Normal file
318
frontend/src/pages/AusruestungsanfrageNeu.tsx
Normal file
@@ -0,0 +1,318 @@
|
|||||||
|
import { useState, useCallback, useRef } from 'react';
|
||||||
|
import {
|
||||||
|
Box, Typography, Paper, Button, TextField, IconButton,
|
||||||
|
Autocomplete, Divider, MenuItem,
|
||||||
|
} from '@mui/material';
|
||||||
|
import { ArrowBack, Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';
|
||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
||||||
|
import { useNotification } from '../contexts/NotificationContext';
|
||||||
|
import { usePermissionContext } from '../contexts/PermissionContext';
|
||||||
|
import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
|
||||||
|
import type {
|
||||||
|
AusruestungAnfrageFormItem,
|
||||||
|
AusruestungEigenschaft,
|
||||||
|
} from '../types/ausruestungsanfrage.types';
|
||||||
|
|
||||||
|
// ── EigenschaftFields ──
|
||||||
|
|
||||||
|
interface EigenschaftFieldsProps {
|
||||||
|
eigenschaften: AusruestungEigenschaft[];
|
||||||
|
values: Record<number, string>;
|
||||||
|
onChange: (eigenschaftId: number, wert: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function EigenschaftFields({ eigenschaften, values, onChange }: EigenschaftFieldsProps) {
|
||||||
|
if (eigenschaften.length === 0) return null;
|
||||||
|
return (
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, ml: 2, mt: 1, pl: 1.5, borderLeft: '2px solid', borderColor: 'divider' }}>
|
||||||
|
{eigenschaften.map(e => (
|
||||||
|
<Box key={e.id} sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
|
||||||
|
{e.typ === 'options' && e.optionen && e.optionen.length > 0 ? (
|
||||||
|
<TextField
|
||||||
|
select
|
||||||
|
size="small"
|
||||||
|
label={e.name}
|
||||||
|
value={values[e.id] || ''}
|
||||||
|
onChange={ev => onChange(e.id, ev.target.value)}
|
||||||
|
required={e.pflicht}
|
||||||
|
sx={{ minWidth: 160 }}
|
||||||
|
>
|
||||||
|
<MenuItem value="">—</MenuItem>
|
||||||
|
{e.optionen.map(opt => (
|
||||||
|
<MenuItem key={opt} value={opt}>{opt}</MenuItem>
|
||||||
|
))}
|
||||||
|
</TextField>
|
||||||
|
) : (
|
||||||
|
<TextField
|
||||||
|
size="small"
|
||||||
|
label={e.name}
|
||||||
|
value={values[e.id] || ''}
|
||||||
|
onChange={ev => onChange(e.id, ev.target.value)}
|
||||||
|
required={e.pflicht}
|
||||||
|
sx={{ minWidth: 160 }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ══════════════════════════════════════════════════════════════════════════════
|
||||||
|
// Component
|
||||||
|
// ══════════════════════════════════════════════════════════════════════════════
|
||||||
|
|
||||||
|
export default function AusruestungsanfrageNeu() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const { showSuccess, showError } = useNotification();
|
||||||
|
const { hasPermission } = usePermissionContext();
|
||||||
|
|
||||||
|
const canOrderForUser = hasPermission('ausruestungsanfrage:order_for_user');
|
||||||
|
|
||||||
|
// ── Form state ──
|
||||||
|
const [bezeichnung, setBezeichnung] = useState('');
|
||||||
|
const [notizen, setNotizen] = useState('');
|
||||||
|
const [fuerBenutzer, setFuerBenutzer] = useState<{ id: string; name: string } | string | null>(null);
|
||||||
|
const [catalogItems, setCatalogItems] = useState<AusruestungAnfrageFormItem[]>([{ bezeichnung: '', menge: 1 }]);
|
||||||
|
const [freeItems, setFreeItems] = useState<{ bezeichnung: string; menge: number }[]>([]);
|
||||||
|
|
||||||
|
// Eigenschaften state
|
||||||
|
const [itemEigenschaften, setItemEigenschaften] = useState<Record<number, AusruestungEigenschaft[]>>({});
|
||||||
|
const itemEigenschaftenRef = useRef(itemEigenschaften);
|
||||||
|
itemEigenschaftenRef.current = itemEigenschaften;
|
||||||
|
const [itemEigenschaftValues, setItemEigenschaftValues] = useState<Record<number, Record<number, string>>>({});
|
||||||
|
|
||||||
|
// ── Queries ──
|
||||||
|
const { data: katalogArtikel = [] } = useQuery({
|
||||||
|
queryKey: ['ausruestungsanfrage', 'items-for-create'],
|
||||||
|
queryFn: () => ausruestungsanfrageApi.getItems({ aktiv: true }),
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: orderUsers = [] } = useQuery({
|
||||||
|
queryKey: ['ausruestungsanfrage', 'orderUsers'],
|
||||||
|
queryFn: () => ausruestungsanfrageApi.getOrderUsers(),
|
||||||
|
enabled: canOrderForUser,
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Mutations ──
|
||||||
|
const createMut = useMutation({
|
||||||
|
mutationFn: (args: { items: AusruestungAnfrageFormItem[]; notizen?: string; bezeichnung?: string; fuer_benutzer_id?: string; fuer_benutzer_name?: string }) =>
|
||||||
|
ausruestungsanfrageApi.createRequest(args.items, args.notizen, args.bezeichnung, args.fuer_benutzer_id, args.fuer_benutzer_name),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
|
||||||
|
showSuccess('Anfrage erstellt');
|
||||||
|
navigate('/ausruestungsanfrage');
|
||||||
|
},
|
||||||
|
onError: () => showError('Fehler beim Erstellen der Anfrage'),
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Eigenschaft loading ──
|
||||||
|
const loadEigenschaften = useCallback(async (artikelId: number) => {
|
||||||
|
if (itemEigenschaftenRef.current[artikelId]) return;
|
||||||
|
try {
|
||||||
|
const eigs = await ausruestungsanfrageApi.getArtikelEigenschaften(artikelId);
|
||||||
|
if (eigs && eigs.length > 0) {
|
||||||
|
setItemEigenschaften(prev => ({ ...prev, [artikelId]: eigs }));
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.warn('Failed to load eigenschaften for artikel', artikelId, err);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// ── Submit ──
|
||||||
|
const handleSubmit = () => {
|
||||||
|
// Catalog items with eigenschaften
|
||||||
|
const catalogValidItems = catalogItems.filter(i => i.bezeichnung.trim() && i.artikel_id).map((item, idx) => {
|
||||||
|
const vals = itemEigenschaftValues[idx] || {};
|
||||||
|
const eigenschaften = Object.entries(vals)
|
||||||
|
.filter(([, wert]) => wert.trim())
|
||||||
|
.map(([eid, wert]) => ({ eigenschaft_id: Number(eid), wert }));
|
||||||
|
return { ...item, eigenschaften: eigenschaften.length > 0 ? eigenschaften : undefined };
|
||||||
|
});
|
||||||
|
|
||||||
|
// Free-text items
|
||||||
|
const freeValidItems = freeItems
|
||||||
|
.filter(i => i.bezeichnung.trim())
|
||||||
|
.map(i => ({ bezeichnung: i.bezeichnung, menge: i.menge }));
|
||||||
|
|
||||||
|
const allItems = [...catalogValidItems, ...freeValidItems];
|
||||||
|
if (allItems.length === 0) return;
|
||||||
|
|
||||||
|
// Check required eigenschaften for catalog items
|
||||||
|
for (let idx = 0; idx < catalogItems.length; idx++) {
|
||||||
|
const item = catalogItems[idx];
|
||||||
|
if (!item.bezeichnung.trim() || !item.artikel_id) continue;
|
||||||
|
if (itemEigenschaften[item.artikel_id]) {
|
||||||
|
for (const e of itemEigenschaften[item.artikel_id]) {
|
||||||
|
if (e.pflicht && !(itemEigenschaftValues[idx]?.[e.id]?.trim())) {
|
||||||
|
showError(`Pflichtfeld "${e.name}" für "${item.bezeichnung}" fehlt`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
createMut.mutate({
|
||||||
|
items: allItems,
|
||||||
|
notizen: notizen || undefined,
|
||||||
|
bezeichnung: bezeichnung || undefined,
|
||||||
|
fuer_benutzer_id: typeof fuerBenutzer === 'object' && fuerBenutzer ? fuerBenutzer.id : undefined,
|
||||||
|
fuer_benutzer_name: typeof fuerBenutzer === 'string' ? fuerBenutzer : undefined,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const hasValidItems = catalogItems.some(i => !!i.artikel_id) || freeItems.some(i => i.bezeichnung.trim());
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DashboardLayout>
|
||||||
|
{/* Header */}
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
||||||
|
<IconButton onClick={() => navigate('/ausruestungsanfrage')}>
|
||||||
|
<ArrowBack />
|
||||||
|
</IconButton>
|
||||||
|
<Typography variant="h5">Neue Bestellung</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Paper sx={{ p: 3 }}>
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||||
|
<TextField
|
||||||
|
label="Bezeichnung (optional)"
|
||||||
|
value={bezeichnung}
|
||||||
|
onChange={e => setBezeichnung(e.target.value)}
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
{canOrderForUser && (
|
||||||
|
<Autocomplete
|
||||||
|
freeSolo
|
||||||
|
options={orderUsers}
|
||||||
|
getOptionLabel={o => typeof o === 'string' ? o : o.name}
|
||||||
|
value={fuerBenutzer}
|
||||||
|
onChange={(_, v) => setFuerBenutzer(v)}
|
||||||
|
onInputChange={(_, value, reason) => {
|
||||||
|
if (reason === 'input') {
|
||||||
|
const match = orderUsers.find(u => u.name === value);
|
||||||
|
if (!match && value) {
|
||||||
|
setFuerBenutzer(value);
|
||||||
|
} else if (!value) {
|
||||||
|
setFuerBenutzer(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
isOptionEqualToValue={(option, value) => {
|
||||||
|
if (typeof option === 'string' || typeof value === 'string') return option === value;
|
||||||
|
return option.id === value.id;
|
||||||
|
}}
|
||||||
|
renderInput={params => <TextField {...params} label="Für wen (optional)" InputLabelProps={{ ...params.InputLabelProps, shrink: true }} placeholder="Mitglied auswählen oder Name eingeben..." />}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<TextField
|
||||||
|
label="Notizen (optional)"
|
||||||
|
value={notizen}
|
||||||
|
onChange={e => setNotizen(e.target.value)}
|
||||||
|
multiline
|
||||||
|
rows={2}
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
<Typography variant="subtitle2">Aus Katalog</Typography>
|
||||||
|
{catalogItems.map((item, idx) => (
|
||||||
|
<Box key={`cat-${idx}`}>
|
||||||
|
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
|
||||||
|
<Autocomplete
|
||||||
|
options={katalogArtikel}
|
||||||
|
getOptionLabel={o => typeof o === 'string' ? o : o.bezeichnung}
|
||||||
|
value={item.artikel_id ? katalogArtikel.find(c => c.id === item.artikel_id) || null : null}
|
||||||
|
onChange={(_, v) => {
|
||||||
|
if (v && typeof v !== 'string') {
|
||||||
|
setCatalogItems(prev => prev.map((it, i) => i === idx ? { ...it, artikel_id: v.id, bezeichnung: v.bezeichnung } : it));
|
||||||
|
loadEigenschaften(v.id);
|
||||||
|
} else {
|
||||||
|
setCatalogItems(prev => prev.map((it, i) => i === idx ? { ...it, artikel_id: undefined, bezeichnung: '' } : it));
|
||||||
|
setItemEigenschaftValues(prev => { const n = { ...prev }; delete n[idx]; return n; });
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
renderInput={params => <TextField {...params} label="Katalogartikel" size="small" />}
|
||||||
|
sx={{ flexGrow: 1 }}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
size="small"
|
||||||
|
type="number"
|
||||||
|
label="Menge"
|
||||||
|
value={item.menge}
|
||||||
|
onChange={e => setCatalogItems(prev => prev.map((it, i) => i === idx ? { ...it, menge: Math.max(1, Number(e.target.value)) } : it))}
|
||||||
|
sx={{ width: 90 }}
|
||||||
|
inputProps={{ min: 1 }}
|
||||||
|
/>
|
||||||
|
<IconButton size="small" onClick={() => setCatalogItems(prev => prev.filter((_, i) => i !== idx))} disabled={catalogItems.length <= 1}>
|
||||||
|
<DeleteIcon fontSize="small" />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
{item.artikel_id && itemEigenschaften[item.artikel_id] && itemEigenschaften[item.artikel_id].length > 0 && (
|
||||||
|
<EigenschaftFields
|
||||||
|
eigenschaften={itemEigenschaften[item.artikel_id]}
|
||||||
|
values={itemEigenschaftValues[idx] || {}}
|
||||||
|
onChange={(eid, wert) => setItemEigenschaftValues(prev => ({
|
||||||
|
...prev,
|
||||||
|
[idx]: { ...(prev[idx] || {}), [eid]: wert },
|
||||||
|
}))}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
<Button size="small" startIcon={<AddIcon />} onClick={() => setCatalogItems(prev => [...prev, { bezeichnung: '', menge: 1 }])}>
|
||||||
|
Katalogartikel hinzufügen
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
<Typography variant="subtitle2">Freitext-Positionen</Typography>
|
||||||
|
{freeItems.length === 0 ? (
|
||||||
|
<Typography variant="body2" color="text.secondary">Keine Freitext-Positionen.</Typography>
|
||||||
|
) : (
|
||||||
|
freeItems.map((item, idx) => (
|
||||||
|
<Box key={`free-${idx}`} sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
|
||||||
|
<TextField
|
||||||
|
size="small"
|
||||||
|
label="Bezeichnung"
|
||||||
|
value={item.bezeichnung}
|
||||||
|
onChange={e => setFreeItems(prev => prev.map((it, i) => i === idx ? { ...it, bezeichnung: e.target.value } : it))}
|
||||||
|
sx={{ flexGrow: 1 }}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
size="small"
|
||||||
|
type="number"
|
||||||
|
label="Menge"
|
||||||
|
value={item.menge}
|
||||||
|
onChange={e => setFreeItems(prev => prev.map((it, i) => i === idx ? { ...it, menge: Math.max(1, Number(e.target.value)) } : it))}
|
||||||
|
sx={{ width: 90 }}
|
||||||
|
inputProps={{ min: 1 }}
|
||||||
|
/>
|
||||||
|
<IconButton size="small" onClick={() => setFreeItems(prev => prev.filter((_, i) => i !== idx))}>
|
||||||
|
<DeleteIcon fontSize="small" />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
<Button size="small" startIcon={<AddIcon />} onClick={() => setFreeItems(prev => [...prev, { bezeichnung: '', menge: 1 }])}>
|
||||||
|
Freitext-Position hinzufügen
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
<Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
|
||||||
|
<Button onClick={() => navigate('/ausruestungsanfrage')}>Abbrechen</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={handleSubmit}
|
||||||
|
disabled={createMut.isPending || !hasValidItems}
|
||||||
|
>
|
||||||
|
Anfrage erstellen
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Paper>
|
||||||
|
</DashboardLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
232
frontend/src/pages/BestellungNeu.tsx
Normal file
232
frontend/src/pages/BestellungNeu.tsx
Normal file
@@ -0,0 +1,232 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Typography,
|
||||||
|
Paper,
|
||||||
|
Button,
|
||||||
|
TextField,
|
||||||
|
IconButton,
|
||||||
|
Autocomplete,
|
||||||
|
Tooltip,
|
||||||
|
} from '@mui/material';
|
||||||
|
import {
|
||||||
|
ArrowBack,
|
||||||
|
Add as AddIcon,
|
||||||
|
RemoveCircleOutline as RemoveIcon,
|
||||||
|
} from '@mui/icons-material';
|
||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
||||||
|
import { useNotification } from '../contexts/NotificationContext';
|
||||||
|
import { bestellungApi } from '../services/bestellung';
|
||||||
|
import type { BestellungFormData, BestellpositionFormData, LieferantFormData, Lieferant } from '../types/bestellung.types';
|
||||||
|
|
||||||
|
const emptyOrderForm: BestellungFormData = { bezeichnung: '', lieferant_id: undefined, besteller_id: '', budget: undefined, notizen: '', positionen: [] };
|
||||||
|
const emptyVendorForm: LieferantFormData = { name: '', kontakt_name: '', email: '', telefon: '', adresse: '', website: '', notizen: '' };
|
||||||
|
const emptyPosition: BestellpositionFormData = { bezeichnung: '', menge: 1, einheit: 'Stk' };
|
||||||
|
|
||||||
|
export default function BestellungNeu() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const { showSuccess, showError } = useNotification();
|
||||||
|
|
||||||
|
const [orderForm, setOrderForm] = useState<BestellungFormData>({ ...emptyOrderForm });
|
||||||
|
const [inlineVendorOpen, setInlineVendorOpen] = useState(false);
|
||||||
|
const [inlineVendorForm, setInlineVendorForm] = useState<LieferantFormData>({ ...emptyVendorForm });
|
||||||
|
|
||||||
|
// ── Queries ──
|
||||||
|
const { data: vendors = [] } = useQuery({
|
||||||
|
queryKey: ['lieferanten'],
|
||||||
|
queryFn: bestellungApi.getVendors,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: orderUsers = [] } = useQuery({
|
||||||
|
queryKey: ['bestellungen', 'order-users'],
|
||||||
|
queryFn: bestellungApi.getOrderUsers,
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Mutations ──
|
||||||
|
const createOrder = useMutation({
|
||||||
|
mutationFn: (data: BestellungFormData) => bestellungApi.createOrder(data),
|
||||||
|
onSuccess: (created) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['bestellungen'] });
|
||||||
|
showSuccess('Bestellung erstellt');
|
||||||
|
navigate(`/bestellungen/${created.id}`);
|
||||||
|
},
|
||||||
|
onError: (error: any) => showError(error?.response?.data?.message || 'Fehler beim Erstellen der Bestellung'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const createVendor = useMutation({
|
||||||
|
mutationFn: (data: LieferantFormData) => bestellungApi.createVendor(data),
|
||||||
|
onSuccess: (newVendor: Lieferant) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['lieferanten'] });
|
||||||
|
showSuccess('Lieferant erstellt');
|
||||||
|
setOrderForm((f) => ({ ...f, lieferant_id: newVendor.id }));
|
||||||
|
setInlineVendorOpen(false);
|
||||||
|
setInlineVendorForm({ ...emptyVendorForm });
|
||||||
|
},
|
||||||
|
onError: () => showError('Fehler beim Erstellen des Lieferanten'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
if (!orderForm.bezeichnung.trim()) return;
|
||||||
|
createOrder.mutate(orderForm);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DashboardLayout>
|
||||||
|
{/* ── Header ── */}
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
||||||
|
<IconButton onClick={() => navigate('/bestellungen')}>
|
||||||
|
<ArrowBack />
|
||||||
|
</IconButton>
|
||||||
|
<Typography variant="h5" fontWeight={700}>Neue Bestellung</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* ── Form ── */}
|
||||||
|
<Paper sx={{ p: 3, display: 'flex', flexDirection: 'column', gap: 2.5 }}>
|
||||||
|
<TextField
|
||||||
|
label="Bezeichnung"
|
||||||
|
required
|
||||||
|
InputLabelProps={{ shrink: true }}
|
||||||
|
value={orderForm.bezeichnung}
|
||||||
|
onChange={(e) => setOrderForm((f) => ({ ...f, bezeichnung: e.target.value }))}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Lieferant + inline create */}
|
||||||
|
<Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
|
||||||
|
<Autocomplete
|
||||||
|
options={vendors}
|
||||||
|
getOptionLabel={(o) => o.name}
|
||||||
|
value={vendors.find((v) => v.id === orderForm.lieferant_id) || null}
|
||||||
|
onChange={(_e, v) => setOrderForm((f) => ({ ...f, lieferant_id: v?.id }))}
|
||||||
|
renderInput={(params) => <TextField {...params} label="Lieferant" />}
|
||||||
|
sx={{ flexGrow: 1 }}
|
||||||
|
/>
|
||||||
|
<Tooltip title="Neuen Lieferant anlegen">
|
||||||
|
<IconButton
|
||||||
|
onClick={() => setInlineVendorOpen(!inlineVendorOpen)}
|
||||||
|
color={inlineVendorOpen ? 'primary' : 'default'}
|
||||||
|
sx={{ mt: 1 }}
|
||||||
|
>
|
||||||
|
<AddIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</Box>
|
||||||
|
{inlineVendorOpen && (
|
||||||
|
<Paper variant="outlined" sx={{ p: 2, display: 'flex', flexDirection: 'column', gap: 1.5 }}>
|
||||||
|
<Typography variant="subtitle2">Neuer Lieferant</Typography>
|
||||||
|
<TextField size="small" label="Name *" value={inlineVendorForm.name} onChange={(e) => setInlineVendorForm((f) => ({ ...f, name: e.target.value }))} />
|
||||||
|
<TextField size="small" label="Kontakt-Name" value={inlineVendorForm.kontakt_name || ''} onChange={(e) => setInlineVendorForm((f) => ({ ...f, kontakt_name: e.target.value }))} />
|
||||||
|
<TextField size="small" label="E-Mail" value={inlineVendorForm.email || ''} onChange={(e) => setInlineVendorForm((f) => ({ ...f, email: e.target.value }))} />
|
||||||
|
<TextField size="small" label="Telefon" value={inlineVendorForm.telefon || ''} onChange={(e) => setInlineVendorForm((f) => ({ ...f, telefon: e.target.value }))} />
|
||||||
|
<Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
|
||||||
|
<Button size="small" onClick={() => { setInlineVendorOpen(false); setInlineVendorForm({ ...emptyVendorForm }); }}>Abbrechen</Button>
|
||||||
|
<Button size="small" variant="contained" onClick={() => createVendor.mutate(inlineVendorForm)} disabled={!inlineVendorForm.name.trim() || createVendor.isPending}>Anlegen</Button>
|
||||||
|
</Box>
|
||||||
|
</Paper>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Autocomplete
|
||||||
|
options={orderUsers}
|
||||||
|
getOptionLabel={(o) => o.name}
|
||||||
|
value={orderUsers.find((u) => u.id === orderForm.besteller_id) || null}
|
||||||
|
onChange={(_e, v) => setOrderForm((f) => ({ ...f, besteller_id: v?.id || '' }))}
|
||||||
|
renderInput={(params) => <TextField {...params} label="Besteller" />}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
label="Budget"
|
||||||
|
type="number"
|
||||||
|
InputLabelProps={{ shrink: true }}
|
||||||
|
value={orderForm.budget ?? ''}
|
||||||
|
onChange={(e) => setOrderForm((f) => ({ ...f, budget: e.target.value ? Number(e.target.value) : undefined }))}
|
||||||
|
inputProps={{ min: 0, step: 0.01 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
label="Notizen"
|
||||||
|
multiline
|
||||||
|
rows={3}
|
||||||
|
value={orderForm.notizen || ''}
|
||||||
|
onChange={(e) => setOrderForm((f) => ({ ...f, notizen: e.target.value }))}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* ── Positionen ── */}
|
||||||
|
<Typography variant="subtitle2" sx={{ mt: 1 }}>Positionen</Typography>
|
||||||
|
{(orderForm.positionen || []).map((pos, idx) => (
|
||||||
|
<Box key={idx} sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
|
||||||
|
<TextField
|
||||||
|
label="Bezeichnung"
|
||||||
|
size="small"
|
||||||
|
required
|
||||||
|
InputLabelProps={{ shrink: true }}
|
||||||
|
value={pos.bezeichnung}
|
||||||
|
onChange={(e) => {
|
||||||
|
const next = [...(orderForm.positionen || [])];
|
||||||
|
next[idx] = { ...next[idx], bezeichnung: e.target.value };
|
||||||
|
setOrderForm((f) => ({ ...f, positionen: next }));
|
||||||
|
}}
|
||||||
|
sx={{ flexGrow: 1 }}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Menge"
|
||||||
|
size="small"
|
||||||
|
type="number"
|
||||||
|
InputLabelProps={{ shrink: true }}
|
||||||
|
value={pos.menge}
|
||||||
|
onChange={(e) => {
|
||||||
|
const next = [...(orderForm.positionen || [])];
|
||||||
|
next[idx] = { ...next[idx], menge: Math.max(1, Number(e.target.value) || 1) };
|
||||||
|
setOrderForm((f) => ({ ...f, positionen: next }));
|
||||||
|
}}
|
||||||
|
sx={{ width: 90 }}
|
||||||
|
inputProps={{ min: 1 }}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Einheit"
|
||||||
|
size="small"
|
||||||
|
InputLabelProps={{ shrink: true }}
|
||||||
|
value={pos.einheit || 'Stk'}
|
||||||
|
onChange={(e) => {
|
||||||
|
const next = [...(orderForm.positionen || [])];
|
||||||
|
next[idx] = { ...next[idx], einheit: e.target.value };
|
||||||
|
setOrderForm((f) => ({ ...f, positionen: next }));
|
||||||
|
}}
|
||||||
|
sx={{ width: 100 }}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
size="small"
|
||||||
|
color="error"
|
||||||
|
onClick={() => {
|
||||||
|
const next = (orderForm.positionen || []).filter((_, i) => i !== idx);
|
||||||
|
setOrderForm((f) => ({ ...f, positionen: next }));
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<RemoveIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
startIcon={<AddIcon />}
|
||||||
|
onClick={() => setOrderForm((f) => ({ ...f, positionen: [...(f.positionen || []), { ...emptyPosition }] }))}
|
||||||
|
>
|
||||||
|
Position hinzufügen
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{/* ── Submit ── */}
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 2 }}>
|
||||||
|
<Button onClick={() => navigate('/bestellungen')}>Abbrechen</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={handleSubmit}
|
||||||
|
disabled={!orderForm.bezeichnung.trim() || createOrder.isPending}
|
||||||
|
>
|
||||||
|
Erstellen
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Paper>
|
||||||
|
</DashboardLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -24,9 +24,8 @@ import {
|
|||||||
FormControl,
|
FormControl,
|
||||||
InputLabel,
|
InputLabel,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
Autocomplete,
|
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import { Add as AddIcon, Edit as EditIcon, Delete as DeleteIcon, RemoveCircleOutline as RemoveIcon } from '@mui/icons-material';
|
import { Add as AddIcon, Edit as EditIcon, Delete as DeleteIcon } from '@mui/icons-material';
|
||||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||||
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
||||||
@@ -35,7 +34,7 @@ import { useNotification } from '../contexts/NotificationContext';
|
|||||||
import { usePermissionContext } from '../contexts/PermissionContext';
|
import { usePermissionContext } from '../contexts/PermissionContext';
|
||||||
import { bestellungApi } from '../services/bestellung';
|
import { bestellungApi } from '../services/bestellung';
|
||||||
import { BESTELLUNG_STATUS_LABELS, BESTELLUNG_STATUS_COLORS } from '../types/bestellung.types';
|
import { BESTELLUNG_STATUS_LABELS, BESTELLUNG_STATUS_COLORS } from '../types/bestellung.types';
|
||||||
import type { BestellungStatus, BestellungFormData, BestellpositionFormData, LieferantFormData, Lieferant } from '../types/bestellung.types';
|
import type { BestellungStatus, LieferantFormData, Lieferant } from '../types/bestellung.types';
|
||||||
|
|
||||||
// ── Helpers ──
|
// ── Helpers ──
|
||||||
|
|
||||||
@@ -61,9 +60,7 @@ const ALL_STATUSES: BestellungStatus[] = ['entwurf', 'erstellt', 'bestellt', 'te
|
|||||||
|
|
||||||
// ── Empty form data ──
|
// ── Empty form data ──
|
||||||
|
|
||||||
const emptyOrderForm: BestellungFormData = { bezeichnung: '', lieferant_id: undefined, besteller_id: '', budget: undefined, notizen: '', positionen: [] };
|
|
||||||
const emptyVendorForm: LieferantFormData = { name: '', kontakt_name: '', email: '', telefon: '', adresse: '', website: '', notizen: '' };
|
const emptyVendorForm: LieferantFormData = { name: '', kontakt_name: '', email: '', telefon: '', adresse: '', website: '', notizen: '' };
|
||||||
const emptyPosition: BestellpositionFormData = { bezeichnung: '', menge: 1, einheit: 'Stk' };
|
|
||||||
|
|
||||||
// ══════════════════════════════════════════════════════════════════════════════
|
// ══════════════════════════════════════════════════════════════════════════════
|
||||||
// Component
|
// Component
|
||||||
@@ -88,10 +85,6 @@ export default function Bestellungen() {
|
|||||||
|
|
||||||
// ── State ──
|
// ── State ──
|
||||||
const [statusFilter, setStatusFilter] = useState<string>('');
|
const [statusFilter, setStatusFilter] = useState<string>('');
|
||||||
const [orderDialogOpen, setOrderDialogOpen] = useState(false);
|
|
||||||
const [orderForm, setOrderForm] = useState<BestellungFormData>({ ...emptyOrderForm });
|
|
||||||
const [inlineVendorOpen, setInlineVendorOpen] = useState(false);
|
|
||||||
const [inlineVendorForm, setInlineVendorForm] = useState<LieferantFormData>({ ...emptyVendorForm });
|
|
||||||
|
|
||||||
const [vendorDialogOpen, setVendorDialogOpen] = useState(false);
|
const [vendorDialogOpen, setVendorDialogOpen] = useState(false);
|
||||||
const [vendorForm, setVendorForm] = useState<LieferantFormData>({ ...emptyVendorForm });
|
const [vendorForm, setVendorForm] = useState<LieferantFormData>({ ...emptyVendorForm });
|
||||||
@@ -110,37 +103,13 @@ export default function Bestellungen() {
|
|||||||
queryFn: bestellungApi.getVendors,
|
queryFn: bestellungApi.getVendors,
|
||||||
});
|
});
|
||||||
|
|
||||||
const { data: orderUsers = [] } = useQuery({
|
|
||||||
queryKey: ['bestellungen', 'order-users'],
|
|
||||||
queryFn: bestellungApi.getOrderUsers,
|
|
||||||
});
|
|
||||||
|
|
||||||
// ── Mutations ──
|
// ── Mutations ──
|
||||||
const createOrder = useMutation({
|
|
||||||
mutationFn: (data: BestellungFormData) => bestellungApi.createOrder(data),
|
|
||||||
onSuccess: (created) => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['bestellungen'] });
|
|
||||||
showSuccess('Bestellung erstellt');
|
|
||||||
setOrderDialogOpen(false);
|
|
||||||
setOrderForm({ ...emptyOrderForm });
|
|
||||||
navigate(`/bestellungen/${created.id}`);
|
|
||||||
},
|
|
||||||
onError: (error: any) => showError(error?.response?.data?.message || 'Fehler beim Erstellen der Bestellung'),
|
|
||||||
});
|
|
||||||
|
|
||||||
const createVendor = useMutation({
|
const createVendor = useMutation({
|
||||||
mutationFn: (data: LieferantFormData) => bestellungApi.createVendor(data),
|
mutationFn: (data: LieferantFormData) => bestellungApi.createVendor(data),
|
||||||
onSuccess: (newVendor) => {
|
onSuccess: () => {
|
||||||
queryClient.invalidateQueries({ queryKey: ['lieferanten'] });
|
queryClient.invalidateQueries({ queryKey: ['lieferanten'] });
|
||||||
showSuccess('Lieferant erstellt');
|
showSuccess('Lieferant erstellt');
|
||||||
// If inline vendor creation during order creation, auto-select the new vendor
|
|
||||||
if (inlineVendorOpen) {
|
|
||||||
setOrderForm((f) => ({ ...f, lieferant_id: newVendor.id }));
|
|
||||||
setInlineVendorOpen(false);
|
|
||||||
setInlineVendorForm({ ...emptyVendorForm });
|
|
||||||
} else {
|
|
||||||
closeVendorDialog();
|
closeVendorDialog();
|
||||||
}
|
|
||||||
},
|
},
|
||||||
onError: () => showError('Fehler beim Erstellen des Lieferanten'),
|
onError: () => showError('Fehler beim Erstellen des Lieferanten'),
|
||||||
});
|
});
|
||||||
@@ -188,11 +157,6 @@ export default function Bestellungen() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleOrderSave() {
|
|
||||||
if (!orderForm.bezeichnung.trim()) return;
|
|
||||||
createOrder.mutate(orderForm);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Render ──
|
// ── Render ──
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -271,7 +235,7 @@ export default function Bestellungen() {
|
|||||||
</TableContainer>
|
</TableContainer>
|
||||||
|
|
||||||
{hasPermission('bestellungen:create') && (
|
{hasPermission('bestellungen:create') && (
|
||||||
<ChatAwareFab onClick={() => setOrderDialogOpen(true)} aria-label="Neue Bestellung">
|
<ChatAwareFab onClick={() => navigate('/bestellungen/neu')} aria-label="Neue Bestellung">
|
||||||
<AddIcon />
|
<AddIcon />
|
||||||
</ChatAwareFab>
|
</ChatAwareFab>
|
||||||
)}
|
)}
|
||||||
@@ -330,135 +294,6 @@ export default function Bestellungen() {
|
|||||||
)}
|
)}
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
{/* ── Create Order Dialog ── */}
|
|
||||||
<Dialog open={orderDialogOpen} onClose={() => setOrderDialogOpen(false)} maxWidth="md" fullWidth>
|
|
||||||
<DialogTitle>Neue Bestellung</DialogTitle>
|
|
||||||
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '16px !important' }}>
|
|
||||||
<TextField
|
|
||||||
label="Bezeichnung"
|
|
||||||
required
|
|
||||||
InputLabelProps={{ shrink: true }}
|
|
||||||
value={orderForm.bezeichnung}
|
|
||||||
onChange={(e) => setOrderForm((f) => ({ ...f, bezeichnung: e.target.value }))}
|
|
||||||
/>
|
|
||||||
<Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
|
|
||||||
<Autocomplete
|
|
||||||
options={vendors}
|
|
||||||
getOptionLabel={(o) => o.name}
|
|
||||||
value={vendors.find((v) => v.id === orderForm.lieferant_id) || null}
|
|
||||||
onChange={(_e, v) => setOrderForm((f) => ({ ...f, lieferant_id: v?.id }))}
|
|
||||||
renderInput={(params) => <TextField {...params} label="Lieferant" />}
|
|
||||||
sx={{ flexGrow: 1 }}
|
|
||||||
/>
|
|
||||||
<Tooltip title="Neuen Lieferant anlegen">
|
|
||||||
<IconButton
|
|
||||||
onClick={() => setInlineVendorOpen(!inlineVendorOpen)}
|
|
||||||
color={inlineVendorOpen ? 'primary' : 'default'}
|
|
||||||
sx={{ mt: 1 }}
|
|
||||||
>
|
|
||||||
<AddIcon />
|
|
||||||
</IconButton>
|
|
||||||
</Tooltip>
|
|
||||||
</Box>
|
|
||||||
{inlineVendorOpen && (
|
|
||||||
<Paper variant="outlined" sx={{ p: 2, display: 'flex', flexDirection: 'column', gap: 1.5 }}>
|
|
||||||
<Typography variant="subtitle2">Neuer Lieferant</Typography>
|
|
||||||
<TextField size="small" label="Name *" value={inlineVendorForm.name} onChange={(e) => setInlineVendorForm(f => ({ ...f, name: e.target.value }))} />
|
|
||||||
<TextField size="small" label="Kontakt-Name" value={inlineVendorForm.kontakt_name || ''} onChange={(e) => setInlineVendorForm(f => ({ ...f, kontakt_name: e.target.value }))} />
|
|
||||||
<TextField size="small" label="E-Mail" value={inlineVendorForm.email || ''} onChange={(e) => setInlineVendorForm(f => ({ ...f, email: e.target.value }))} />
|
|
||||||
<TextField size="small" label="Telefon" value={inlineVendorForm.telefon || ''} onChange={(e) => setInlineVendorForm(f => ({ ...f, telefon: e.target.value }))} />
|
|
||||||
<Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
|
|
||||||
<Button size="small" onClick={() => { setInlineVendorOpen(false); setInlineVendorForm({ ...emptyVendorForm }); }}>Abbrechen</Button>
|
|
||||||
<Button size="small" variant="contained" onClick={() => createVendor.mutate(inlineVendorForm)} disabled={!inlineVendorForm.name.trim() || createVendor.isPending}>Anlegen</Button>
|
|
||||||
</Box>
|
|
||||||
</Paper>
|
|
||||||
)}
|
|
||||||
<Autocomplete
|
|
||||||
options={orderUsers}
|
|
||||||
getOptionLabel={(o) => o.name}
|
|
||||||
value={orderUsers.find((u) => u.id === orderForm.besteller_id) || null}
|
|
||||||
onChange={(_e, v) => setOrderForm((f) => ({ ...f, besteller_id: v?.id || '' }))}
|
|
||||||
renderInput={(params) => <TextField {...params} label="Besteller" />}
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
label="Notizen"
|
|
||||||
multiline
|
|
||||||
rows={3}
|
|
||||||
value={orderForm.notizen || ''}
|
|
||||||
onChange={(e) => setOrderForm((f) => ({ ...f, notizen: e.target.value }))}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* ── Dynamic Items List ── */}
|
|
||||||
<Typography variant="subtitle2" sx={{ mt: 1 }}>Positionen</Typography>
|
|
||||||
{(orderForm.positionen || []).map((pos, idx) => (
|
|
||||||
<Box key={idx} sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
|
|
||||||
<TextField
|
|
||||||
label="Bezeichnung"
|
|
||||||
size="small"
|
|
||||||
required
|
|
||||||
InputLabelProps={{ shrink: true }}
|
|
||||||
value={pos.bezeichnung}
|
|
||||||
onChange={(e) => {
|
|
||||||
const next = [...(orderForm.positionen || [])];
|
|
||||||
next[idx] = { ...next[idx], bezeichnung: e.target.value };
|
|
||||||
setOrderForm((f) => ({ ...f, positionen: next }));
|
|
||||||
}}
|
|
||||||
sx={{ flexGrow: 1 }}
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
label="Menge"
|
|
||||||
size="small"
|
|
||||||
type="number"
|
|
||||||
InputLabelProps={{ shrink: true }}
|
|
||||||
value={pos.menge}
|
|
||||||
onChange={(e) => {
|
|
||||||
const next = [...(orderForm.positionen || [])];
|
|
||||||
next[idx] = { ...next[idx], menge: Math.max(1, Number(e.target.value) || 1) };
|
|
||||||
setOrderForm((f) => ({ ...f, positionen: next }));
|
|
||||||
}}
|
|
||||||
sx={{ width: 90 }}
|
|
||||||
inputProps={{ min: 1 }}
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
label="Einheit"
|
|
||||||
size="small"
|
|
||||||
InputLabelProps={{ shrink: true }}
|
|
||||||
value={pos.einheit || 'Stk'}
|
|
||||||
onChange={(e) => {
|
|
||||||
const next = [...(orderForm.positionen || [])];
|
|
||||||
next[idx] = { ...next[idx], einheit: e.target.value };
|
|
||||||
setOrderForm((f) => ({ ...f, positionen: next }));
|
|
||||||
}}
|
|
||||||
sx={{ width: 100 }}
|
|
||||||
/>
|
|
||||||
<IconButton
|
|
||||||
size="small"
|
|
||||||
color="error"
|
|
||||||
onClick={() => {
|
|
||||||
const next = (orderForm.positionen || []).filter((_, i) => i !== idx);
|
|
||||||
setOrderForm((f) => ({ ...f, positionen: next }));
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<RemoveIcon />
|
|
||||||
</IconButton>
|
|
||||||
</Box>
|
|
||||||
))}
|
|
||||||
<Button
|
|
||||||
size="small"
|
|
||||||
startIcon={<AddIcon />}
|
|
||||||
onClick={() => setOrderForm((f) => ({ ...f, positionen: [...(f.positionen || []), { ...emptyPosition }] }))}
|
|
||||||
>
|
|
||||||
Position hinzufügen
|
|
||||||
</Button>
|
|
||||||
</DialogContent>
|
|
||||||
<DialogActions>
|
|
||||||
<Button onClick={() => setOrderDialogOpen(false)}>Abbrechen</Button>
|
|
||||||
<Button variant="contained" onClick={handleOrderSave} disabled={!orderForm.bezeichnung.trim() || createOrder.isPending}>
|
|
||||||
Erstellen
|
|
||||||
</Button>
|
|
||||||
</DialogActions>
|
|
||||||
</Dialog>
|
|
||||||
|
|
||||||
{/* ── Create/Edit Vendor Dialog ── */}
|
{/* ── Create/Edit Vendor Dialog ── */}
|
||||||
<Dialog open={vendorDialogOpen} onClose={closeVendorDialog} maxWidth="sm" fullWidth>
|
<Dialog open={vendorDialogOpen} onClose={closeVendorDialog} maxWidth="sm" fullWidth>
|
||||||
<DialogTitle>{editingVendor ? 'Lieferant bearbeiten' : 'Neuer Lieferant'}</DialogTitle>
|
<DialogTitle>{editingVendor ? 'Lieferant bearbeiten' : 'Neuer Lieferant'}</DialogTitle>
|
||||||
|
|||||||
445
frontend/src/pages/IssueDetail.tsx
Normal file
445
frontend/src/pages/IssueDetail.tsx
Normal file
@@ -0,0 +1,445 @@
|
|||||||
|
import { useState, useMemo } from 'react';
|
||||||
|
import {
|
||||||
|
Box, Typography, Paper, Chip, IconButton, Button, Dialog, DialogTitle,
|
||||||
|
DialogContent, DialogActions, TextField, MenuItem, Select, FormControl,
|
||||||
|
InputLabel, Divider, CircularProgress, Autocomplete, Grid, Card, CardContent,
|
||||||
|
} from '@mui/material';
|
||||||
|
import {
|
||||||
|
ArrowBack, Delete as DeleteIcon,
|
||||||
|
BugReport, FiberNew, HelpOutline, Send as SendIcon,
|
||||||
|
Circle as CircleIcon, Refresh as RefreshIcon,
|
||||||
|
} 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 { useAuth } from '../contexts/AuthContext';
|
||||||
|
import { issuesApi } from '../services/issues';
|
||||||
|
import type { Issue, IssueComment, UpdateIssuePayload, AssignableMember, IssueStatusDef, IssuePriorityDef } from '../types/issue.types';
|
||||||
|
|
||||||
|
// ── Helpers (copied from Issues.tsx) ──
|
||||||
|
|
||||||
|
const formatDate = (iso?: string) =>
|
||||||
|
iso ? new Date(iso).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : '-';
|
||||||
|
|
||||||
|
const formatIssueId = (issue: Issue) =>
|
||||||
|
`${new Date(issue.created_at).getFullYear()}/${issue.id}`;
|
||||||
|
|
||||||
|
const STATUS_COLORS: Record<string, string> = {
|
||||||
|
offen: 'info', in_bearbeitung: 'warning', erledigt: 'success', abgelehnt: 'error',
|
||||||
|
};
|
||||||
|
const STATUS_LABELS: Record<string, string> = {
|
||||||
|
offen: 'Offen', in_bearbeitung: 'In Bearbeitung', erledigt: 'Erledigt', abgelehnt: 'Abgelehnt',
|
||||||
|
};
|
||||||
|
const PRIO_COLORS: Record<string, string> = {
|
||||||
|
hoch: '#d32f2f', mittel: '#ed6c02', niedrig: '#9e9e9e',
|
||||||
|
};
|
||||||
|
const PRIO_LABELS: Record<string, string> = {
|
||||||
|
hoch: 'Hoch', mittel: 'Mittel', niedrig: 'Niedrig',
|
||||||
|
};
|
||||||
|
|
||||||
|
function getStatusLabel(statuses: IssueStatusDef[], key: string) {
|
||||||
|
return statuses.find(s => s.schluessel === key)?.bezeichnung ?? STATUS_LABELS[key] ?? key;
|
||||||
|
}
|
||||||
|
function getStatusColor(statuses: IssueStatusDef[], key: string): any {
|
||||||
|
return statuses.find(s => s.schluessel === key)?.farbe ?? STATUS_COLORS[key] ?? 'default';
|
||||||
|
}
|
||||||
|
function getPrioColor(priorities: IssuePriorityDef[], key: string) {
|
||||||
|
return priorities.find(p => p.schluessel === key)?.farbe ?? PRIO_COLORS[key] ?? '#9e9e9e';
|
||||||
|
}
|
||||||
|
function getPrioLabel(priorities: IssuePriorityDef[], key: string) {
|
||||||
|
return priorities.find(p => p.schluessel === key)?.bezeichnung ?? PRIO_LABELS[key] ?? key;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ICON_MAP: Record<string, JSX.Element> = {
|
||||||
|
BugReport: <BugReport fontSize="small" />,
|
||||||
|
FiberNew: <FiberNew fontSize="small" />,
|
||||||
|
HelpOutline: <HelpOutline fontSize="small" />,
|
||||||
|
};
|
||||||
|
|
||||||
|
function getTypIcon(iconName: string | null, farbe: string | null): JSX.Element {
|
||||||
|
const icon = ICON_MAP[iconName || ''] || <HelpOutline fontSize="small" />;
|
||||||
|
const colorProp = farbe === 'error' ? 'error' : farbe === 'info' ? 'info' : farbe === 'action' ? 'action' : 'action';
|
||||||
|
return <Box component="span" sx={{ display: 'inline-flex', color: `${colorProp}.main` }}>{icon}</Box>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ══════════════════════════════════════════════════════════════════════════════
|
||||||
|
// Component
|
||||||
|
// ══════════════════════════════════════════════════════════════════════════════
|
||||||
|
|
||||||
|
export default function IssueDetail() {
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const { showSuccess, showError } = useNotification();
|
||||||
|
const { hasPermission } = usePermissionContext();
|
||||||
|
const { user } = useAuth();
|
||||||
|
|
||||||
|
const issueId = Number(id);
|
||||||
|
const userId = user?.id || '';
|
||||||
|
const hasEdit = hasPermission('issues:edit');
|
||||||
|
const hasChangeStatus = hasPermission('issues:change_status');
|
||||||
|
const hasDeletePerm = hasPermission('issues:delete');
|
||||||
|
|
||||||
|
// ── State ──
|
||||||
|
const [reopenOpen, setReopenOpen] = useState(false);
|
||||||
|
const [reopenComment, setReopenComment] = useState('');
|
||||||
|
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||||
|
const [commentText, setCommentText] = useState('');
|
||||||
|
|
||||||
|
// ── Queries ──
|
||||||
|
const { data: issue, isLoading, isError } = useQuery({
|
||||||
|
queryKey: ['issues', issueId],
|
||||||
|
queryFn: () => issuesApi.getIssue(issueId),
|
||||||
|
enabled: !isNaN(issueId),
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: comments = [], isLoading: commentsLoading } = useQuery({
|
||||||
|
queryKey: ['issues', issueId, 'comments'],
|
||||||
|
queryFn: () => issuesApi.getComments(issueId),
|
||||||
|
enabled: !isNaN(issueId),
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: statuses = [] } = useQuery({
|
||||||
|
queryKey: ['issue-statuses'],
|
||||||
|
queryFn: issuesApi.getStatuses,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: priorities = [] } = useQuery({
|
||||||
|
queryKey: ['issue-priorities'],
|
||||||
|
queryFn: issuesApi.getPriorities,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: members = [] } = useQuery({
|
||||||
|
queryKey: ['issue-members'],
|
||||||
|
queryFn: issuesApi.getMembers,
|
||||||
|
enabled: hasEdit,
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Permissions ──
|
||||||
|
const isOwner = issue?.erstellt_von === userId;
|
||||||
|
const isAssignee = issue?.zugewiesen_an === userId;
|
||||||
|
const canDelete = hasDeletePerm || isOwner;
|
||||||
|
const canComment = isOwner || isAssignee || hasChangeStatus || hasEdit;
|
||||||
|
const canChangeStatus = hasEdit || hasChangeStatus || isAssignee;
|
||||||
|
const ownerOnlyErledigt = isOwner && !canChangeStatus;
|
||||||
|
|
||||||
|
const allowedStatuses = useMemo(() => {
|
||||||
|
if (!issue) return [];
|
||||||
|
const active = statuses.filter(s => s.aktiv);
|
||||||
|
if (hasEdit) return active.filter(s => !s.benoetigt_typ_freigabe || issue.typ_erlaubt_abgelehnt);
|
||||||
|
if (hasChangeStatus || isAssignee) return active.filter(s => !s.benoetigt_typ_freigabe || issue.typ_erlaubt_abgelehnt);
|
||||||
|
if (isOwner) return active.filter(s => s.schluessel === issue.status || s.ist_abschluss);
|
||||||
|
return active.filter(s => s.schluessel === issue.status);
|
||||||
|
}, [statuses, hasEdit, hasChangeStatus, isAssignee, isOwner, issue]);
|
||||||
|
|
||||||
|
const currentStatusDef = statuses.find(s => s.schluessel === issue?.status);
|
||||||
|
const isTerminal = currentStatusDef?.ist_abschluss ?? (issue?.status === 'erledigt');
|
||||||
|
const showReopenButton = ownerOnlyErledigt && isTerminal;
|
||||||
|
const initialStatusKey = statuses.find(s => s.ist_initial)?.schluessel ?? 'offen';
|
||||||
|
|
||||||
|
// ── Mutations ──
|
||||||
|
const updateMut = useMutation({
|
||||||
|
mutationFn: (data: UpdateIssuePayload) => issuesApi.updateIssue(issueId, data),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['issues'] });
|
||||||
|
showSuccess('Issue aktualisiert');
|
||||||
|
},
|
||||||
|
onError: () => showError('Fehler beim Aktualisieren'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteMut = useMutation({
|
||||||
|
mutationFn: () => issuesApi.deleteIssue(issueId),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['issues'] });
|
||||||
|
showSuccess('Issue gelöscht');
|
||||||
|
navigate('/issues');
|
||||||
|
},
|
||||||
|
onError: () => showError('Fehler beim Löschen'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const addCommentMut = useMutation({
|
||||||
|
mutationFn: (inhalt: string) => issuesApi.addComment(issueId, inhalt),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['issues', issueId, 'comments'] });
|
||||||
|
setCommentText('');
|
||||||
|
},
|
||||||
|
onError: () => showError('Kommentar konnte nicht erstellt werden'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleReopen = () => {
|
||||||
|
updateMut.mutate({ status: initialStatusKey, kommentar: reopenComment.trim() }, {
|
||||||
|
onSuccess: () => {
|
||||||
|
setReopenOpen(false);
|
||||||
|
setReopenComment('');
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['issues'] });
|
||||||
|
showSuccess('Issue wiedereröffnet');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// ── Loading / Error / 404 ──
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<DashboardLayout>
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}><CircularProgress /></Box>
|
||||||
|
</DashboardLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isError || !issue) {
|
||||||
|
return (
|
||||||
|
<DashboardLayout>
|
||||||
|
<Box sx={{ p: 3 }}>
|
||||||
|
<Button startIcon={<ArrowBack />} onClick={() => navigate('/issues')} sx={{ mb: 2 }}>
|
||||||
|
Zurück
|
||||||
|
</Button>
|
||||||
|
<Typography color="error">Issue nicht gefunden.</Typography>
|
||||||
|
</Box>
|
||||||
|
</DashboardLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DashboardLayout>
|
||||||
|
<Box sx={{ p: 3 }}>
|
||||||
|
{/* Header */}
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 3 }}>
|
||||||
|
<IconButton onClick={() => navigate('/issues')}>
|
||||||
|
<ArrowBack />
|
||||||
|
</IconButton>
|
||||||
|
<Box sx={{ flex: 1 }}>
|
||||||
|
<Typography variant="h5">
|
||||||
|
{formatIssueId(issue)} — {issue.titel}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
<Chip
|
||||||
|
label={getStatusLabel(statuses, issue.status)}
|
||||||
|
color={getStatusColor(statuses, issue.status)}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Info cards */}
|
||||||
|
<Grid container spacing={2} sx={{ mb: 3 }}>
|
||||||
|
<Grid item xs={6} sm={4} md={2}>
|
||||||
|
<Card variant="outlined">
|
||||||
|
<CardContent sx={{ py: 1.5, '&:last-child': { pb: 1.5 } }}>
|
||||||
|
<Typography variant="caption" color="text.secondary">Typ</Typography>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 0.5 }}>
|
||||||
|
{getTypIcon(issue.typ_icon, issue.typ_farbe)}
|
||||||
|
<Typography variant="body2">{issue.typ_name}</Typography>
|
||||||
|
</Box>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6} sm={4} md={2}>
|
||||||
|
<Card variant="outlined">
|
||||||
|
<CardContent sx={{ py: 1.5, '&:last-child': { pb: 1.5 } }}>
|
||||||
|
<Typography variant="caption" color="text.secondary">Priorität</Typography>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 0.5 }}>
|
||||||
|
<CircleIcon sx={{ fontSize: 10, color: getPrioColor(priorities, issue.prioritaet) }} />
|
||||||
|
<Typography variant="body2">{getPrioLabel(priorities, issue.prioritaet)}</Typography>
|
||||||
|
</Box>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6} sm={4} md={2}>
|
||||||
|
<Card variant="outlined">
|
||||||
|
<CardContent sx={{ py: 1.5, '&:last-child': { pb: 1.5 } }}>
|
||||||
|
<Typography variant="caption" color="text.secondary">Erstellt von</Typography>
|
||||||
|
<Typography variant="body2" sx={{ mt: 0.5 }}>{issue.erstellt_von_name || '-'}</Typography>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6} sm={4} md={2}>
|
||||||
|
<Card variant="outlined">
|
||||||
|
<CardContent sx={{ py: 1.5, '&:last-child': { pb: 1.5 } }}>
|
||||||
|
<Typography variant="caption" color="text.secondary">Zugewiesen an</Typography>
|
||||||
|
<Typography variant="body2" sx={{ mt: 0.5 }}>{issue.zugewiesen_an_name || '-'}</Typography>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6} sm={4} md={2}>
|
||||||
|
<Card variant="outlined">
|
||||||
|
<CardContent sx={{ py: 1.5, '&:last-child': { pb: 1.5 } }}>
|
||||||
|
<Typography variant="caption" color="text.secondary">Erstellt am</Typography>
|
||||||
|
<Typography variant="body2" sx={{ mt: 0.5 }}>{formatDate(issue.created_at)}</Typography>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
{issue.beschreibung && (
|
||||||
|
<Paper variant="outlined" sx={{ p: 2, mb: 3 }}>
|
||||||
|
<Typography variant="subtitle2" gutterBottom>Beschreibung</Typography>
|
||||||
|
<Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>{issue.beschreibung}</Typography>
|
||||||
|
</Paper>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Controls row */}
|
||||||
|
<Box sx={{ display: 'flex', gap: 1, mb: 2, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||||
|
{/* Status control */}
|
||||||
|
{showReopenButton ? (
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
variant="outlined"
|
||||||
|
startIcon={<RefreshIcon />}
|
||||||
|
onClick={() => setReopenOpen(true)}
|
||||||
|
>
|
||||||
|
Wiedereröffnen
|
||||||
|
</Button>
|
||||||
|
) : canChangeStatus || isOwner ? (
|
||||||
|
<FormControl size="small" sx={{ minWidth: 160 }}>
|
||||||
|
<InputLabel>Status</InputLabel>
|
||||||
|
<Select
|
||||||
|
value={issue.status}
|
||||||
|
label="Status"
|
||||||
|
onChange={(e) => updateMut.mutate({ status: e.target.value })}
|
||||||
|
>
|
||||||
|
{allowedStatuses.map(s => (
|
||||||
|
<MenuItem key={s.schluessel} value={s.schluessel}>{s.bezeichnung}</MenuItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{/* Priority control */}
|
||||||
|
{hasEdit && (
|
||||||
|
<FormControl size="small" sx={{ minWidth: 140 }}>
|
||||||
|
<InputLabel>Priorität</InputLabel>
|
||||||
|
<Select
|
||||||
|
value={issue.prioritaet}
|
||||||
|
label="Priorität"
|
||||||
|
onChange={(e) => updateMut.mutate({ prioritaet: e.target.value })}
|
||||||
|
>
|
||||||
|
{priorities.filter(p => p.aktiv).map(p => (
|
||||||
|
<MenuItem key={p.schluessel} value={p.schluessel}>{p.bezeichnung}</MenuItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Assignment */}
|
||||||
|
{hasEdit && (
|
||||||
|
<Autocomplete
|
||||||
|
size="small"
|
||||||
|
sx={{ minWidth: 200 }}
|
||||||
|
options={members}
|
||||||
|
getOptionLabel={(o: AssignableMember) => o.name}
|
||||||
|
value={members.find((m: AssignableMember) => m.id === issue.zugewiesen_an) || null}
|
||||||
|
onChange={(_e, val) => updateMut.mutate({ zugewiesen_an: val?.id || null })}
|
||||||
|
renderInput={(params) => <TextField {...params} label="Zugewiesen an" size="small" />}
|
||||||
|
isOptionEqualToValue={(o, v) => o.id === v.id}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Delete button */}
|
||||||
|
{canDelete && (
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
color="error"
|
||||||
|
startIcon={<DeleteIcon />}
|
||||||
|
onClick={() => setDeleteOpen(true)}
|
||||||
|
sx={{ mb: 2 }}
|
||||||
|
>
|
||||||
|
Löschen
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Divider sx={{ my: 2 }} />
|
||||||
|
|
||||||
|
{/* Comments section */}
|
||||||
|
<Typography variant="subtitle2" gutterBottom>Kommentare</Typography>
|
||||||
|
{commentsLoading ? (
|
||||||
|
<CircularProgress size={20} />
|
||||||
|
) : comments.length === 0 ? (
|
||||||
|
<Typography variant="body2" color="text.secondary">Noch keine Kommentare</Typography>
|
||||||
|
) : (
|
||||||
|
comments.map((c: IssueComment) => (
|
||||||
|
<Box key={c.id} sx={{ mb: 1.5, p: 1.5, bgcolor: 'action.hover', borderRadius: 1 }}>
|
||||||
|
<Typography variant="caption" color="text.secondary">
|
||||||
|
{c.autor_name || 'Unbekannt'} - {formatDate(c.created_at)}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body2" sx={{ mt: 0.5, whiteSpace: 'pre-wrap' }}>{c.inhalt}</Typography>
|
||||||
|
</Box>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
{canComment && (
|
||||||
|
<Box sx={{ display: 'flex', gap: 1, mt: 1 }}>
|
||||||
|
<TextField
|
||||||
|
size="small"
|
||||||
|
fullWidth
|
||||||
|
placeholder="Kommentar schreiben..."
|
||||||
|
value={commentText}
|
||||||
|
onChange={(e) => setCommentText(e.target.value)}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter' && !e.shiftKey && commentText.trim()) {
|
||||||
|
e.preventDefault();
|
||||||
|
addCommentMut.mutate(commentText.trim());
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
multiline
|
||||||
|
maxRows={4}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
color="primary"
|
||||||
|
disabled={!commentText.trim() || addCommentMut.isPending}
|
||||||
|
onClick={() => addCommentMut.mutate(commentText.trim())}
|
||||||
|
>
|
||||||
|
<SendIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Reopen Dialog */}
|
||||||
|
<Dialog open={reopenOpen} onClose={() => setReopenOpen(false)} maxWidth="sm" fullWidth>
|
||||||
|
<DialogTitle>Issue wiedereröffnen</DialogTitle>
|
||||||
|
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '20px !important' }}>
|
||||||
|
<TextField
|
||||||
|
label="Kommentar (Pflicht)"
|
||||||
|
required
|
||||||
|
multiline
|
||||||
|
rows={3}
|
||||||
|
fullWidth
|
||||||
|
value={reopenComment}
|
||||||
|
onChange={(e) => setReopenComment(e.target.value)}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={() => setReopenOpen(false)}>Abbrechen</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
disabled={!reopenComment.trim() || updateMut.isPending}
|
||||||
|
onClick={handleReopen}
|
||||||
|
>
|
||||||
|
Wiedereröffnen
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Delete Confirmation Dialog */}
|
||||||
|
<Dialog open={deleteOpen} onClose={() => setDeleteOpen(false)} maxWidth="xs" fullWidth>
|
||||||
|
<DialogTitle>Issue löschen</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<Typography>Soll dieses Issue wirklich gelöscht werden?</Typography>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={() => setDeleteOpen(false)}>Abbrechen</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="error"
|
||||||
|
disabled={deleteMut.isPending}
|
||||||
|
onClick={() => deleteMut.mutate()}
|
||||||
|
>
|
||||||
|
Löschen
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
</DashboardLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
120
frontend/src/pages/IssueNeu.tsx
Normal file
120
frontend/src/pages/IssueNeu.tsx
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import {
|
||||||
|
Box, Typography, Paper, Button, TextField, MenuItem, Select, FormControl,
|
||||||
|
InputLabel, IconButton,
|
||||||
|
} from '@mui/material';
|
||||||
|
import { ArrowBack } from '@mui/icons-material';
|
||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
||||||
|
import { useNotification } from '../contexts/NotificationContext';
|
||||||
|
import { issuesApi } from '../services/issues';
|
||||||
|
import type { CreateIssuePayload } from '../types/issue.types';
|
||||||
|
|
||||||
|
export default function IssueNeu() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const { showSuccess, showError } = useNotification();
|
||||||
|
|
||||||
|
const [form, setForm] = useState<CreateIssuePayload>({ titel: '', prioritaet: '' });
|
||||||
|
|
||||||
|
const { data: types = [] } = useQuery({
|
||||||
|
queryKey: ['issue-types'],
|
||||||
|
queryFn: issuesApi.getTypes,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: priorities = [] } = useQuery({
|
||||||
|
queryKey: ['issue-priorities'],
|
||||||
|
queryFn: issuesApi.getPriorities,
|
||||||
|
});
|
||||||
|
|
||||||
|
const defaultTypId = types.find(t => t.aktiv)?.id;
|
||||||
|
const defaultPriority = priorities.find(p => p.aktiv)?.schluessel ?? 'mittel';
|
||||||
|
|
||||||
|
const createMut = useMutation({
|
||||||
|
mutationFn: (data: CreateIssuePayload) => issuesApi.createIssue(data),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['issues'] });
|
||||||
|
showSuccess('Issue erstellt');
|
||||||
|
navigate('/issues');
|
||||||
|
},
|
||||||
|
onError: () => showError('Fehler beim Erstellen'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
createMut.mutate({
|
||||||
|
...form,
|
||||||
|
typ_id: form.typ_id ?? defaultTypId,
|
||||||
|
prioritaet: form.prioritaet || defaultPriority,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DashboardLayout>
|
||||||
|
<Box sx={{ p: 3 }}>
|
||||||
|
{/* Header */}
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 3 }}>
|
||||||
|
<IconButton onClick={() => navigate('/issues')}>
|
||||||
|
<ArrowBack />
|
||||||
|
</IconButton>
|
||||||
|
<Typography variant="h5">Neues Issue</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Paper variant="outlined" sx={{ p: 3, maxWidth: 600 }}>
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||||
|
<TextField
|
||||||
|
label="Titel"
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
value={form.titel}
|
||||||
|
onChange={(e) => setForm({ ...form, titel: e.target.value })}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Beschreibung"
|
||||||
|
multiline
|
||||||
|
rows={4}
|
||||||
|
fullWidth
|
||||||
|
value={form.beschreibung || ''}
|
||||||
|
onChange={(e) => setForm({ ...form, beschreibung: e.target.value })}
|
||||||
|
/>
|
||||||
|
<FormControl fullWidth>
|
||||||
|
<InputLabel>Typ</InputLabel>
|
||||||
|
<Select
|
||||||
|
value={form.typ_id ?? defaultTypId ?? ''}
|
||||||
|
label="Typ"
|
||||||
|
onChange={(e) => setForm({ ...form, typ_id: Number(e.target.value) })}
|
||||||
|
>
|
||||||
|
{types.filter(t => t.aktiv).map(t => (
|
||||||
|
<MenuItem key={t.id} value={t.id}>{t.name}</MenuItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
<FormControl fullWidth>
|
||||||
|
<InputLabel>Priorität</InputLabel>
|
||||||
|
<Select
|
||||||
|
value={form.prioritaet || defaultPriority}
|
||||||
|
label="Priorität"
|
||||||
|
onChange={(e) => setForm({ ...form, prioritaet: e.target.value })}
|
||||||
|
>
|
||||||
|
{priorities.filter(p => p.aktiv).map(p => (
|
||||||
|
<MenuItem key={p.schluessel} value={p.schluessel}>{p.bezeichnung}</MenuItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 1 }}>
|
||||||
|
<Button onClick={() => navigate('/issues')}>Abbrechen</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
disabled={!form.titel.trim() || createMut.isPending}
|
||||||
|
onClick={handleSubmit}
|
||||||
|
>
|
||||||
|
Erstellen
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Paper>
|
||||||
|
</Box>
|
||||||
|
</DashboardLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -3,24 +3,24 @@ import {
|
|||||||
Box, Tab, Tabs, Typography, Table, TableBody, TableCell, TableContainer,
|
Box, Tab, Tabs, Typography, Table, TableBody, TableCell, TableContainer,
|
||||||
TableHead, TableRow, Paper, Chip, IconButton, Button, Dialog, DialogTitle,
|
TableHead, TableRow, Paper, Chip, IconButton, Button, Dialog, DialogTitle,
|
||||||
DialogContent, DialogActions, TextField, MenuItem, Select, FormControl,
|
DialogContent, DialogActions, TextField, MenuItem, Select, FormControl,
|
||||||
InputLabel, Collapse, Divider, CircularProgress, FormControlLabel, Switch,
|
InputLabel, CircularProgress, FormControlLabel, Switch,
|
||||||
Autocomplete,
|
Autocomplete,
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import {
|
import {
|
||||||
Add as AddIcon, Delete as DeleteIcon, ExpandMore, ExpandLess,
|
Add as AddIcon, Delete as DeleteIcon,
|
||||||
BugReport, FiberNew, HelpOutline, Send as SendIcon,
|
BugReport, FiberNew, HelpOutline,
|
||||||
Circle as CircleIcon, Edit as EditIcon, Refresh as RefreshIcon,
|
Circle as CircleIcon, Edit as EditIcon,
|
||||||
DragIndicator, Check as CheckIcon, Close as CloseIcon,
|
DragIndicator, Check as CheckIcon, Close as CloseIcon,
|
||||||
} from '@mui/icons-material';
|
} from '@mui/icons-material';
|
||||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
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 DashboardLayout from '../components/dashboard/DashboardLayout';
|
||||||
import ChatAwareFab from '../components/shared/ChatAwareFab';
|
import ChatAwareFab from '../components/shared/ChatAwareFab';
|
||||||
import { useNotification } from '../contexts/NotificationContext';
|
import { useNotification } from '../contexts/NotificationContext';
|
||||||
import { usePermissionContext } from '../contexts/PermissionContext';
|
import { usePermissionContext } from '../contexts/PermissionContext';
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
import { issuesApi } from '../services/issues';
|
import { issuesApi } from '../services/issues';
|
||||||
import type { Issue, IssueComment, IssueTyp, CreateIssuePayload, UpdateIssuePayload, IssueFilters, AssignableMember, IssueStatusDef, IssuePriorityDef } from '../types/issue.types';
|
import type { Issue, IssueTyp, IssueFilters, AssignableMember, IssueStatusDef, IssuePriorityDef } from '../types/issue.types';
|
||||||
|
|
||||||
// ── Helpers ──
|
// ── Helpers ──
|
||||||
|
|
||||||
@@ -76,154 +76,49 @@ function TabPanel({ children, value, index }: TabPanelProps) {
|
|||||||
return <Box sx={{ pt: 3 }}>{children}</Box>;
|
return <Box sx={{ pt: 3 }}>{children}</Box>;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── Comment Section ──
|
// ── Issue Table ──
|
||||||
|
|
||||||
function CommentSection({ issueId, canComment }: { issueId: number; canComment: boolean }) {
|
function IssueTable({
|
||||||
const queryClient = useQueryClient();
|
issues,
|
||||||
const { showError } = useNotification();
|
statuses,
|
||||||
const [text, setText] = useState('');
|
priorities,
|
||||||
|
}: {
|
||||||
const { data: comments = [], isLoading } = useQuery({
|
issues: Issue[];
|
||||||
queryKey: ['issues', issueId, 'comments'],
|
statuses: IssueStatusDef[];
|
||||||
queryFn: () => issuesApi.getComments(issueId),
|
priorities: IssuePriorityDef[];
|
||||||
});
|
}) {
|
||||||
|
const navigate = useNavigate();
|
||||||
const addMut = useMutation({
|
|
||||||
mutationFn: (inhalt: string) => issuesApi.addComment(issueId, inhalt),
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['issues', issueId, 'comments'] });
|
|
||||||
setText('');
|
|
||||||
},
|
|
||||||
onError: () => showError('Kommentar konnte nicht erstellt werden'),
|
|
||||||
});
|
|
||||||
|
|
||||||
|
if (issues.length === 0) {
|
||||||
return (
|
return (
|
||||||
<Box sx={{ mt: 2 }}>
|
<Typography color="text.secondary" sx={{ py: 4, textAlign: 'center' }}>
|
||||||
<Typography variant="subtitle2" gutterBottom>Kommentare</Typography>
|
Keine Issues vorhanden
|
||||||
{isLoading ? (
|
|
||||||
<CircularProgress size={20} />
|
|
||||||
) : comments.length === 0 ? (
|
|
||||||
<Typography variant="body2" color="text.secondary">Noch keine Kommentare</Typography>
|
|
||||||
) : (
|
|
||||||
comments.map((c: IssueComment) => (
|
|
||||||
<Box key={c.id} sx={{ mb: 1.5, p: 1.5, bgcolor: 'action.hover', borderRadius: 1 }}>
|
|
||||||
<Typography variant="caption" color="text.secondary">
|
|
||||||
{c.autor_name || 'Unbekannt'} - {formatDate(c.created_at)}
|
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="body2" sx={{ mt: 0.5, whiteSpace: 'pre-wrap' }}>{c.inhalt}</Typography>
|
|
||||||
</Box>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
{canComment && (
|
|
||||||
<Box sx={{ display: 'flex', gap: 1, mt: 1 }}>
|
|
||||||
<TextField
|
|
||||||
size="small"
|
|
||||||
fullWidth
|
|
||||||
placeholder="Kommentar schreiben..."
|
|
||||||
value={text}
|
|
||||||
onChange={(e) => setText(e.target.value)}
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (e.key === 'Enter' && !e.shiftKey && text.trim()) {
|
|
||||||
e.preventDefault();
|
|
||||||
addMut.mutate(text.trim());
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
multiline
|
|
||||||
maxRows={4}
|
|
||||||
/>
|
|
||||||
<IconButton
|
|
||||||
color="primary"
|
|
||||||
disabled={!text.trim() || addMut.isPending}
|
|
||||||
onClick={() => addMut.mutate(text.trim())}
|
|
||||||
>
|
|
||||||
<SendIcon />
|
|
||||||
</IconButton>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── Issue Row ──
|
|
||||||
|
|
||||||
function IssueRow({
|
|
||||||
issue,
|
|
||||||
userId,
|
|
||||||
hasEdit,
|
|
||||||
hasChangeStatus,
|
|
||||||
hasDelete,
|
|
||||||
members,
|
|
||||||
statuses,
|
|
||||||
priorities,
|
|
||||||
onDelete,
|
|
||||||
}: {
|
|
||||||
issue: Issue;
|
|
||||||
userId: string;
|
|
||||||
hasEdit: boolean;
|
|
||||||
hasChangeStatus: boolean;
|
|
||||||
hasDelete: boolean;
|
|
||||||
members: AssignableMember[];
|
|
||||||
statuses: IssueStatusDef[];
|
|
||||||
priorities: IssuePriorityDef[];
|
|
||||||
onDelete: (id: number) => void;
|
|
||||||
}) {
|
|
||||||
const [expanded, setExpanded] = useState(false);
|
|
||||||
const [reopenOpen, setReopenOpen] = useState(false);
|
|
||||||
const [reopenComment, setReopenComment] = useState('');
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
const { showSuccess, showError } = useNotification();
|
|
||||||
|
|
||||||
const isOwner = issue.erstellt_von === userId;
|
|
||||||
const isAssignee = issue.zugewiesen_an === userId;
|
|
||||||
const canDelete = hasDelete || isOwner;
|
|
||||||
const canComment = isOwner || isAssignee || hasChangeStatus || hasEdit;
|
|
||||||
|
|
||||||
// Determine status change capability
|
|
||||||
const canChangeStatus = hasEdit || hasChangeStatus || isAssignee;
|
|
||||||
const ownerOnlyErledigt = isOwner && !canChangeStatus;
|
|
||||||
|
|
||||||
// Build allowed statuses from dynamic list
|
|
||||||
const allowedStatuses = useMemo(() => {
|
|
||||||
const active = statuses.filter(s => s.aktiv);
|
|
||||||
if (hasEdit) return active.filter(s => !s.benoetigt_typ_freigabe || issue.typ_erlaubt_abgelehnt);
|
|
||||||
if (hasChangeStatus || isAssignee) return active.filter(s => !s.benoetigt_typ_freigabe || issue.typ_erlaubt_abgelehnt);
|
|
||||||
if (isOwner) return active.filter(s => s.schluessel === issue.status || s.ist_abschluss);
|
|
||||||
return active.filter(s => s.schluessel === issue.status);
|
|
||||||
}, [statuses, hasEdit, hasChangeStatus, isAssignee, isOwner, issue.status, issue.typ_erlaubt_abgelehnt]);
|
|
||||||
|
|
||||||
const updateMut = useMutation({
|
|
||||||
mutationFn: (data: UpdateIssuePayload) => issuesApi.updateIssue(issue.id, data),
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['issues'] });
|
|
||||||
showSuccess('Issue aktualisiert');
|
|
||||||
},
|
|
||||||
onError: () => showError('Fehler beim Aktualisieren'),
|
|
||||||
});
|
|
||||||
|
|
||||||
// Owner on erledigt issue: show reopen button instead of status select
|
|
||||||
const currentStatusDef = statuses.find(s => s.schluessel === issue.status);
|
|
||||||
const isTerminal = currentStatusDef?.ist_abschluss ?? (issue.status === 'erledigt');
|
|
||||||
const showReopenButton = ownerOnlyErledigt && isTerminal;
|
|
||||||
|
|
||||||
const initialStatusKey = statuses.find(s => s.ist_initial)?.schluessel ?? 'offen';
|
|
||||||
|
|
||||||
const handleReopen = () => {
|
|
||||||
updateMut.mutate({ status: initialStatusKey, kommentar: reopenComment.trim() }, {
|
|
||||||
onSuccess: () => {
|
|
||||||
setReopenOpen(false);
|
|
||||||
setReopenComment('');
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['issues'] });
|
|
||||||
showSuccess('Issue wiedereröffnet');
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<TableContainer component={Paper} variant="outlined">
|
||||||
|
<Table size="small">
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>ID</TableCell>
|
||||||
|
<TableCell>Titel</TableCell>
|
||||||
|
<TableCell>Typ</TableCell>
|
||||||
|
<TableCell>Priorität</TableCell>
|
||||||
|
<TableCell>Status</TableCell>
|
||||||
|
<TableCell>Erstellt von</TableCell>
|
||||||
|
<TableCell>Zugewiesen an</TableCell>
|
||||||
|
<TableCell>Erstellt am</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{issues.map((issue) => (
|
||||||
<TableRow
|
<TableRow
|
||||||
|
key={issue.id}
|
||||||
hover
|
hover
|
||||||
sx={{ cursor: 'pointer', '& > *': { borderBottom: expanded ? 'unset' : undefined } }}
|
sx={{ cursor: 'pointer' }}
|
||||||
onClick={() => setExpanded(!expanded)}
|
onClick={() => navigate(`/issues/${issue.id}`)}
|
||||||
>
|
>
|
||||||
<TableCell sx={{ width: 80 }}>{formatIssueId(issue)}</TableCell>
|
<TableCell sx={{ width: 80 }}>{formatIssueId(issue)}</TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
@@ -251,202 +146,7 @@ function IssueRow({
|
|||||||
<TableCell>{issue.erstellt_von_name || '-'}</TableCell>
|
<TableCell>{issue.erstellt_von_name || '-'}</TableCell>
|
||||||
<TableCell>{issue.zugewiesen_an_name || '-'}</TableCell>
|
<TableCell>{issue.zugewiesen_an_name || '-'}</TableCell>
|
||||||
<TableCell>{formatDate(issue.created_at)}</TableCell>
|
<TableCell>{formatDate(issue.created_at)}</TableCell>
|
||||||
<TableCell>
|
|
||||||
<IconButton size="small" onClick={(e) => { e.stopPropagation(); setExpanded(!expanded); }}>
|
|
||||||
{expanded ? <ExpandLess /> : <ExpandMore />}
|
|
||||||
</IconButton>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
<TableRow>
|
|
||||||
<TableCell colSpan={9} sx={{ py: 0 }}>
|
|
||||||
<Collapse in={expanded} timeout="auto" unmountOnExit>
|
|
||||||
<Box sx={{ p: 2 }}>
|
|
||||||
{issue.beschreibung && (
|
|
||||||
<Typography variant="body2" sx={{ mb: 2, whiteSpace: 'pre-wrap' }}>
|
|
||||||
{issue.beschreibung}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Box sx={{ display: 'flex', gap: 1, mb: 2, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
||||||
{/* Status control */}
|
|
||||||
{showReopenButton ? (
|
|
||||||
<Button
|
|
||||||
size="small"
|
|
||||||
variant="outlined"
|
|
||||||
startIcon={<RefreshIcon />}
|
|
||||||
onClick={(e) => { e.stopPropagation(); setReopenOpen(true); }}
|
|
||||||
>
|
|
||||||
Wiedereröffnen
|
|
||||||
</Button>
|
|
||||||
) : canChangeStatus || isOwner ? (
|
|
||||||
<FormControl size="small" sx={{ minWidth: 160 }}>
|
|
||||||
<InputLabel>Status</InputLabel>
|
|
||||||
<Select
|
|
||||||
value={issue.status}
|
|
||||||
label="Status"
|
|
||||||
onChange={(e) => updateMut.mutate({ status: e.target.value })}
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
{allowedStatuses.map(s => (
|
|
||||||
<MenuItem key={s.schluessel} value={s.schluessel}>{s.bezeichnung}</MenuItem>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
{/* Priority control — only with issues:edit */}
|
|
||||||
{hasEdit && (
|
|
||||||
<FormControl size="small" sx={{ minWidth: 140 }}>
|
|
||||||
<InputLabel>Priorität</InputLabel>
|
|
||||||
<Select
|
|
||||||
value={issue.prioritaet}
|
|
||||||
label="Priorität"
|
|
||||||
onChange={(e) => updateMut.mutate({ prioritaet: e.target.value })}
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
{priorities.filter(p => p.aktiv).map(p => (
|
|
||||||
<MenuItem key={p.schluessel} value={p.schluessel}>{p.bezeichnung}</MenuItem>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Assignment — only with issues:edit */}
|
|
||||||
{hasEdit && (
|
|
||||||
<Autocomplete
|
|
||||||
size="small"
|
|
||||||
sx={{ minWidth: 200 }}
|
|
||||||
options={members}
|
|
||||||
getOptionLabel={(o) => o.name}
|
|
||||||
value={members.find(m => m.id === issue.zugewiesen_an) || null}
|
|
||||||
onChange={(_e, val) => updateMut.mutate({ zugewiesen_an: val?.id || null })}
|
|
||||||
renderInput={(params) => <TextField {...params} label="Zugewiesen an" size="small" />}
|
|
||||||
onClick={(e: React.MouseEvent) => e.stopPropagation()}
|
|
||||||
isOptionEqualToValue={(o, v) => o.id === v.id}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{canDelete && (
|
|
||||||
<Button
|
|
||||||
size="small"
|
|
||||||
color="error"
|
|
||||||
startIcon={<DeleteIcon />}
|
|
||||||
onClick={(e) => { e.stopPropagation(); onDelete(issue.id); }}
|
|
||||||
sx={{ mb: 1 }}
|
|
||||||
>
|
|
||||||
Löschen
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Divider sx={{ my: 1 }} />
|
|
||||||
<CommentSection issueId={issue.id} canComment={canComment} />
|
|
||||||
</Box>
|
|
||||||
</Collapse>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
|
|
||||||
{/* Reopen Dialog */}
|
|
||||||
<Dialog open={reopenOpen} onClose={() => setReopenOpen(false)} maxWidth="sm" fullWidth>
|
|
||||||
<DialogTitle>Issue wiedereröffnen</DialogTitle>
|
|
||||||
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '20px !important' }}>
|
|
||||||
<TextField
|
|
||||||
label="Kommentar (Pflicht)"
|
|
||||||
required
|
|
||||||
multiline
|
|
||||||
rows={3}
|
|
||||||
fullWidth
|
|
||||||
value={reopenComment}
|
|
||||||
onChange={(e) => setReopenComment(e.target.value)}
|
|
||||||
autoFocus
|
|
||||||
/>
|
|
||||||
</DialogContent>
|
|
||||||
<DialogActions>
|
|
||||||
<Button onClick={() => setReopenOpen(false)}>Abbrechen</Button>
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
disabled={!reopenComment.trim() || updateMut.isPending}
|
|
||||||
onClick={handleReopen}
|
|
||||||
>
|
|
||||||
Wiedereröffnen
|
|
||||||
</Button>
|
|
||||||
</DialogActions>
|
|
||||||
</Dialog>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Issue Table ──
|
|
||||||
|
|
||||||
function IssueTable({
|
|
||||||
issues,
|
|
||||||
userId,
|
|
||||||
hasEdit,
|
|
||||||
hasChangeStatus,
|
|
||||||
hasDelete,
|
|
||||||
members,
|
|
||||||
statuses,
|
|
||||||
priorities,
|
|
||||||
}: {
|
|
||||||
issues: Issue[];
|
|
||||||
userId: string;
|
|
||||||
hasEdit: boolean;
|
|
||||||
hasChangeStatus: boolean;
|
|
||||||
hasDelete: boolean;
|
|
||||||
members: AssignableMember[];
|
|
||||||
statuses: IssueStatusDef[];
|
|
||||||
priorities: IssuePriorityDef[];
|
|
||||||
}) {
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
const { showSuccess, showError } = useNotification();
|
|
||||||
|
|
||||||
const deleteMut = useMutation({
|
|
||||||
mutationFn: (id: number) => issuesApi.deleteIssue(id),
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['issues'] });
|
|
||||||
showSuccess('Issue gelöscht');
|
|
||||||
},
|
|
||||||
onError: () => showError('Fehler beim Löschen'),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (issues.length === 0) {
|
|
||||||
return (
|
|
||||||
<Typography color="text.secondary" sx={{ py: 4, textAlign: 'center' }}>
|
|
||||||
Keine Issues vorhanden
|
|
||||||
</Typography>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TableContainer component={Paper} variant="outlined">
|
|
||||||
<Table size="small">
|
|
||||||
<TableHead>
|
|
||||||
<TableRow>
|
|
||||||
<TableCell>ID</TableCell>
|
|
||||||
<TableCell>Titel</TableCell>
|
|
||||||
<TableCell>Typ</TableCell>
|
|
||||||
<TableCell>Priorität</TableCell>
|
|
||||||
<TableCell>Status</TableCell>
|
|
||||||
<TableCell>Erstellt von</TableCell>
|
|
||||||
<TableCell>Zugewiesen an</TableCell>
|
|
||||||
<TableCell>Erstellt am</TableCell>
|
|
||||||
<TableCell />
|
|
||||||
</TableRow>
|
|
||||||
</TableHead>
|
|
||||||
<TableBody>
|
|
||||||
{issues.map((issue) => (
|
|
||||||
<IssueRow
|
|
||||||
key={issue.id}
|
|
||||||
issue={issue}
|
|
||||||
userId={userId}
|
|
||||||
hasEdit={hasEdit}
|
|
||||||
hasChangeStatus={hasChangeStatus}
|
|
||||||
hasDelete={hasDelete}
|
|
||||||
members={members}
|
|
||||||
statuses={statuses}
|
|
||||||
priorities={priorities}
|
|
||||||
onDelete={(id) => deleteMut.mutate(id)}
|
|
||||||
/>
|
|
||||||
))}
|
))}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
@@ -854,15 +554,12 @@ function IssueSettings() {
|
|||||||
|
|
||||||
export default function Issues() {
|
export default function Issues() {
|
||||||
const [searchParams, setSearchParams] = useSearchParams();
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
const { showSuccess, showError } = useNotification();
|
const navigate = useNavigate();
|
||||||
const { hasPermission } = usePermissionContext();
|
const { hasPermission } = usePermissionContext();
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
const canViewAll = hasPermission('issues:view_all');
|
const canViewAll = hasPermission('issues:view_all');
|
||||||
const hasEdit = hasPermission('issues:edit');
|
const hasEdit = hasPermission('issues:edit');
|
||||||
const hasChangeStatus = hasPermission('issues:change_status');
|
|
||||||
const hasDeletePerm = hasPermission('issues:delete');
|
|
||||||
const hasEditSettings = hasPermission('issues:edit_settings');
|
const hasEditSettings = hasPermission('issues:edit_settings');
|
||||||
const canCreate = hasPermission('issues:create');
|
const canCreate = hasPermission('issues:create');
|
||||||
const userId = user?.id || '';
|
const userId = user?.id || '';
|
||||||
@@ -884,8 +581,6 @@ export default function Issues() {
|
|||||||
const [showDoneMine, setShowDoneMine] = useState(false);
|
const [showDoneMine, setShowDoneMine] = useState(false);
|
||||||
const [showDoneAssigned, setShowDoneAssigned] = useState(false);
|
const [showDoneAssigned, setShowDoneAssigned] = useState(false);
|
||||||
const [filters, setFilters] = useState<IssueFilters>({});
|
const [filters, setFilters] = useState<IssueFilters>({});
|
||||||
const [createOpen, setCreateOpen] = useState(false);
|
|
||||||
const [form, setForm] = useState<CreateIssuePayload>({ titel: '', prioritaet: 'mittel' });
|
|
||||||
|
|
||||||
// Fetch all issues for mine/assigned tabs
|
// Fetch all issues for mine/assigned tabs
|
||||||
const { data: issues = [], isLoading } = useQuery({
|
const { data: issues = [], isLoading } = useQuery({
|
||||||
@@ -922,20 +617,6 @@ export default function Issues() {
|
|||||||
enabled: hasEdit,
|
enabled: hasEdit,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Default priority: first active, sorted by sort_order
|
|
||||||
const defaultPriority = issuePriorities.find(p => p.aktiv)?.schluessel ?? 'mittel';
|
|
||||||
|
|
||||||
const createMut = useMutation({
|
|
||||||
mutationFn: (data: CreateIssuePayload) => issuesApi.createIssue(data),
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['issues'] });
|
|
||||||
showSuccess('Issue erstellt');
|
|
||||||
setCreateOpen(false);
|
|
||||||
setForm({ titel: '', prioritaet: defaultPriority });
|
|
||||||
},
|
|
||||||
onError: () => showError('Fehler beim Erstellen'),
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleTabChange = (_: unknown, newValue: number) => {
|
const handleTabChange = (_: unknown, newValue: number) => {
|
||||||
setSearchParams({ tab: String(newValue) });
|
setSearchParams({ tab: String(newValue) });
|
||||||
};
|
};
|
||||||
@@ -950,9 +631,6 @@ export default function Issues() {
|
|||||||
const assignedIssues = issues.filter((i: Issue) => i.zugewiesen_an === userId);
|
const assignedIssues = issues.filter((i: Issue) => i.zugewiesen_an === userId);
|
||||||
const assignedFiltered = showDoneAssigned ? assignedIssues : assignedIssues.filter((i: Issue) => !isDone(i));
|
const assignedFiltered = showDoneAssigned ? assignedIssues : assignedIssues.filter((i: Issue) => !isDone(i));
|
||||||
|
|
||||||
// Default typ_id to first active type
|
|
||||||
const defaultTypId = types.find(t => t.aktiv)?.id;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DashboardLayout>
|
<DashboardLayout>
|
||||||
<Box sx={{ p: 3 }}>
|
<Box sx={{ p: 3 }}>
|
||||||
@@ -972,7 +650,7 @@ export default function Issues() {
|
|||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}><CircularProgress /></Box>
|
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}><CircularProgress /></Box>
|
||||||
) : (
|
) : (
|
||||||
<IssueTable issues={myIssuesFiltered} userId={userId} hasEdit={hasEdit} hasChangeStatus={hasChangeStatus} hasDelete={hasDeletePerm} members={members} statuses={issueStatuses} priorities={issuePriorities} />
|
<IssueTable issues={myIssuesFiltered} statuses={issueStatuses} priorities={issuePriorities} />
|
||||||
)}
|
)}
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
@@ -986,7 +664,7 @@ export default function Issues() {
|
|||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}><CircularProgress /></Box>
|
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}><CircularProgress /></Box>
|
||||||
) : (
|
) : (
|
||||||
<IssueTable issues={assignedFiltered} userId={userId} hasEdit={hasEdit} hasChangeStatus={hasChangeStatus} hasDelete={hasDeletePerm} members={members} statuses={issueStatuses} priorities={issuePriorities} />
|
<IssueTable issues={assignedFiltered} statuses={issueStatuses} priorities={issuePriorities} />
|
||||||
)}
|
)}
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
@@ -997,7 +675,7 @@ export default function Issues() {
|
|||||||
{isFilteredLoading ? (
|
{isFilteredLoading ? (
|
||||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}><CircularProgress /></Box>
|
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}><CircularProgress /></Box>
|
||||||
) : (
|
) : (
|
||||||
<IssueTable issues={filteredIssues} userId={userId} hasEdit={hasEdit} hasChangeStatus={hasChangeStatus} hasDelete={hasDeletePerm} members={members} statuses={issueStatuses} priorities={issuePriorities} />
|
<IssueTable issues={filteredIssues} statuses={issueStatuses} priorities={issuePriorities} />
|
||||||
)}
|
)}
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
)}
|
)}
|
||||||
@@ -1010,69 +688,12 @@ export default function Issues() {
|
|||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{/* Create Issue Dialog */}
|
|
||||||
<Dialog open={createOpen} onClose={() => setCreateOpen(false)} maxWidth="sm" fullWidth>
|
|
||||||
<DialogTitle>Neues Issue erstellen</DialogTitle>
|
|
||||||
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '20px !important' }}>
|
|
||||||
<TextField
|
|
||||||
label="Titel"
|
|
||||||
required
|
|
||||||
fullWidth
|
|
||||||
value={form.titel}
|
|
||||||
onChange={(e) => setForm({ ...form, titel: e.target.value })}
|
|
||||||
autoFocus
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
label="Beschreibung"
|
|
||||||
multiline
|
|
||||||
rows={4}
|
|
||||||
fullWidth
|
|
||||||
value={form.beschreibung || ''}
|
|
||||||
onChange={(e) => setForm({ ...form, beschreibung: e.target.value })}
|
|
||||||
/>
|
|
||||||
<FormControl fullWidth>
|
|
||||||
<InputLabel>Typ</InputLabel>
|
|
||||||
<Select
|
|
||||||
value={form.typ_id ?? defaultTypId ?? ''}
|
|
||||||
label="Typ"
|
|
||||||
onChange={(e) => setForm({ ...form, typ_id: Number(e.target.value) })}
|
|
||||||
>
|
|
||||||
{types.filter(t => t.aktiv).map(t => (
|
|
||||||
<MenuItem key={t.id} value={t.id}>{t.name}</MenuItem>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
<FormControl fullWidth>
|
|
||||||
<InputLabel>Priorität</InputLabel>
|
|
||||||
<Select
|
|
||||||
value={form.prioritaet || defaultPriority}
|
|
||||||
label="Priorität"
|
|
||||||
onChange={(e) => setForm({ ...form, prioritaet: e.target.value })}
|
|
||||||
>
|
|
||||||
{issuePriorities.filter(p => p.aktiv).map(p => (
|
|
||||||
<MenuItem key={p.schluessel} value={p.schluessel}>{p.bezeichnung}</MenuItem>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
</DialogContent>
|
|
||||||
<DialogActions>
|
|
||||||
<Button onClick={() => setCreateOpen(false)}>Abbrechen</Button>
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
disabled={!form.titel.trim() || createMut.isPending}
|
|
||||||
onClick={() => createMut.mutate({ ...form, typ_id: form.typ_id ?? defaultTypId })}
|
|
||||||
>
|
|
||||||
Erstellen
|
|
||||||
</Button>
|
|
||||||
</DialogActions>
|
|
||||||
</Dialog>
|
|
||||||
|
|
||||||
{/* FAB */}
|
{/* FAB */}
|
||||||
{canCreate && activeTab === 'mine' && (
|
{canCreate && (
|
||||||
<ChatAwareFab
|
<ChatAwareFab
|
||||||
color="primary"
|
color="primary"
|
||||||
aria-label="Neues Issue"
|
aria-label="Neues Issue"
|
||||||
onClick={() => setCreateOpen(true)}
|
onClick={() => navigate('/issues/neu')}
|
||||||
>
|
>
|
||||||
<AddIcon />
|
<AddIcon />
|
||||||
</ChatAwareFab>
|
</ChatAwareFab>
|
||||||
|
|||||||
Reference in New Issue
Block a user