321 lines
11 KiB
TypeScript
321 lines
11 KiB
TypeScript
import { useState, useEffect } from 'react';
|
||
import {
|
||
Box,
|
||
Typography,
|
||
Paper,
|
||
Button,
|
||
TextField,
|
||
IconButton,
|
||
Dialog,
|
||
DialogTitle,
|
||
DialogContent,
|
||
DialogActions,
|
||
Grid,
|
||
Card,
|
||
CardContent,
|
||
Skeleton,
|
||
} from '@mui/material';
|
||
import { ArrowBack, Edit as EditIcon, Delete as DeleteIcon, Save as SaveIcon, Close as CloseIcon } 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 { bestellungApi } from '../services/bestellung';
|
||
import type { LieferantFormData } from '../types/bestellung.types';
|
||
|
||
const emptyForm: LieferantFormData = { name: '', kontakt_name: '', email: '', telefon: '', adresse: '', website: '', notizen: '' };
|
||
|
||
function ensureUrl(url: string): string {
|
||
if (!url) return url;
|
||
if (url.startsWith('http://') || url.startsWith('https://')) return url;
|
||
return `https://${url}`;
|
||
}
|
||
|
||
export default function LieferantDetail() {
|
||
const { id } = useParams<{ id: string }>();
|
||
const navigate = useNavigate();
|
||
const queryClient = useQueryClient();
|
||
const { showSuccess, showError } = useNotification();
|
||
const { hasPermission } = usePermissionContext();
|
||
|
||
const isNew = id === 'neu';
|
||
const vendorId = isNew ? 0 : Number(id);
|
||
const canManage = hasPermission('bestellungen:manage_vendors');
|
||
|
||
const [editMode, setEditMode] = useState(isNew);
|
||
const [form, setForm] = useState<LieferantFormData>({ ...emptyForm });
|
||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||
|
||
// Sync edit mode when navigating between /neu and /:id within the same component instance
|
||
useEffect(() => {
|
||
if (isNew) {
|
||
setEditMode(true);
|
||
setForm({ ...emptyForm });
|
||
}
|
||
}, [isNew]);
|
||
|
||
// ── Query ──
|
||
const { data: vendor, isPending, isLoading, isError } = useQuery({
|
||
queryKey: ['lieferant', vendorId],
|
||
queryFn: () => bestellungApi.getVendor(vendorId),
|
||
enabled: !isNew && !!vendorId,
|
||
});
|
||
|
||
// Sync form with loaded vendor data
|
||
useEffect(() => {
|
||
if (vendor) {
|
||
setForm({
|
||
name: vendor.name,
|
||
kontakt_name: vendor.kontakt_name || '',
|
||
email: vendor.email || '',
|
||
telefon: vendor.telefon || '',
|
||
adresse: vendor.adresse || '',
|
||
website: vendor.website || '',
|
||
notizen: vendor.notizen || '',
|
||
});
|
||
}
|
||
}, [vendor]);
|
||
|
||
// ── Mutations ──
|
||
const createVendor = useMutation({
|
||
mutationFn: (data: LieferantFormData) => bestellungApi.createVendor(data),
|
||
onSuccess: (created) => {
|
||
queryClient.invalidateQueries({ queryKey: ['lieferanten'] });
|
||
showSuccess('Lieferant erstellt');
|
||
navigate(`/bestellungen/lieferanten/${created.id}`, { replace: true });
|
||
},
|
||
onError: () => showError('Fehler beim Erstellen des Lieferanten'),
|
||
});
|
||
|
||
const updateVendor = useMutation({
|
||
mutationFn: (data: LieferantFormData) => bestellungApi.updateVendor(vendorId, data),
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['lieferant', vendorId] });
|
||
queryClient.invalidateQueries({ queryKey: ['lieferanten'] });
|
||
showSuccess('Lieferant aktualisiert');
|
||
setEditMode(false);
|
||
},
|
||
onError: () => showError('Fehler beim Aktualisieren des Lieferanten'),
|
||
});
|
||
|
||
const deleteVendor = useMutation({
|
||
mutationFn: () => bestellungApi.deleteVendor(vendorId),
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['lieferanten'] });
|
||
showSuccess('Lieferant gelöscht');
|
||
navigate('/bestellungen?tab=1');
|
||
},
|
||
onError: () => showError('Fehler beim Löschen des Lieferanten'),
|
||
});
|
||
|
||
function handleSave() {
|
||
if (!form.name.trim()) return;
|
||
if (isNew) {
|
||
createVendor.mutate(form);
|
||
} else {
|
||
updateVendor.mutate(form);
|
||
}
|
||
}
|
||
|
||
function handleCancel() {
|
||
if (isNew) {
|
||
navigate('/bestellungen?tab=1');
|
||
} else if (vendor) {
|
||
setForm({
|
||
name: vendor.name,
|
||
kontakt_name: vendor.kontakt_name || '',
|
||
email: vendor.email || '',
|
||
telefon: vendor.telefon || '',
|
||
adresse: vendor.adresse || '',
|
||
website: vendor.website || '',
|
||
notizen: vendor.notizen || '',
|
||
});
|
||
setEditMode(false);
|
||
}
|
||
}
|
||
|
||
// ── Loading / Error ──
|
||
if (!isNew && isPending) {
|
||
return (
|
||
<DashboardLayout>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 3 }}>
|
||
<IconButton onClick={() => navigate('/bestellungen?tab=1')}><ArrowBack /></IconButton>
|
||
<Skeleton width={300} height={40} />
|
||
</Box>
|
||
<Paper sx={{ p: 3 }}>
|
||
<Skeleton height={40} />
|
||
<Skeleton height={40} />
|
||
<Skeleton height={40} />
|
||
</Paper>
|
||
</DashboardLayout>
|
||
);
|
||
}
|
||
|
||
if (!isNew && !isPending && (isError || !vendor)) {
|
||
return (
|
||
<DashboardLayout>
|
||
<Box sx={{ p: 4, textAlign: 'center' }}>
|
||
<Typography color="error">Lieferant nicht gefunden.</Typography>
|
||
<Button sx={{ mt: 2 }} onClick={() => navigate('/bestellungen?tab=1')}>Zurück</Button>
|
||
</Box>
|
||
</DashboardLayout>
|
||
);
|
||
}
|
||
|
||
const isSaving = createVendor.isPending || updateVendor.isPending;
|
||
|
||
return (
|
||
<DashboardLayout>
|
||
{/* ── Header ── */}
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 3 }}>
|
||
<IconButton onClick={() => navigate('/bestellungen?tab=1')}>
|
||
<ArrowBack />
|
||
</IconButton>
|
||
<Typography variant="h4" sx={{ flexGrow: 1 }}>
|
||
{isNew ? 'Neuer Lieferant' : vendor!.name}
|
||
</Typography>
|
||
{!isNew && canManage && !editMode && (
|
||
<>
|
||
<Button startIcon={<EditIcon />} onClick={() => setEditMode(true)}>
|
||
Bearbeiten
|
||
</Button>
|
||
<Button startIcon={<DeleteIcon />} color="error" onClick={() => setDeleteDialogOpen(true)}>
|
||
Löschen
|
||
</Button>
|
||
</>
|
||
)}
|
||
{editMode && (
|
||
<>
|
||
<Button
|
||
variant="contained"
|
||
startIcon={<SaveIcon />}
|
||
onClick={handleSave}
|
||
disabled={!form.name.trim() || isSaving}
|
||
>
|
||
Speichern
|
||
</Button>
|
||
<Button startIcon={<CloseIcon />} onClick={handleCancel}>
|
||
Abbrechen
|
||
</Button>
|
||
</>
|
||
)}
|
||
</Box>
|
||
|
||
{/* ── Content ── */}
|
||
{editMode ? (
|
||
<Paper sx={{ p: 3 }}>
|
||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||
<TextField
|
||
label="Name"
|
||
required
|
||
value={form.name}
|
||
onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
|
||
/>
|
||
<TextField
|
||
label="Kontakt-Name"
|
||
value={form.kontakt_name || ''}
|
||
onChange={(e) => setForm((f) => ({ ...f, kontakt_name: e.target.value }))}
|
||
/>
|
||
<TextField
|
||
label="E-Mail"
|
||
type="email"
|
||
value={form.email || ''}
|
||
onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
|
||
/>
|
||
<TextField
|
||
label="Telefon"
|
||
value={form.telefon || ''}
|
||
onChange={(e) => setForm((f) => ({ ...f, telefon: e.target.value }))}
|
||
/>
|
||
<TextField
|
||
label="Adresse"
|
||
value={form.adresse || ''}
|
||
onChange={(e) => setForm((f) => ({ ...f, adresse: e.target.value }))}
|
||
/>
|
||
<TextField
|
||
label="Website"
|
||
value={form.website || ''}
|
||
onChange={(e) => setForm((f) => ({ ...f, website: e.target.value }))}
|
||
/>
|
||
<TextField
|
||
label="Notizen"
|
||
multiline
|
||
rows={4}
|
||
value={form.notizen || ''}
|
||
onChange={(e) => setForm((f) => ({ ...f, notizen: e.target.value }))}
|
||
/>
|
||
</Box>
|
||
</Paper>
|
||
) : (
|
||
<Grid container spacing={2}>
|
||
<Grid item xs={12} sm={6} md={4}>
|
||
<Card variant="outlined"><CardContent>
|
||
<Typography variant="caption" color="text.secondary">Name</Typography>
|
||
<Typography>{vendor!.name}</Typography>
|
||
</CardContent></Card>
|
||
</Grid>
|
||
<Grid item xs={12} sm={6} md={4}>
|
||
<Card variant="outlined"><CardContent>
|
||
<Typography variant="caption" color="text.secondary">Kontakt</Typography>
|
||
<Typography>{vendor!.kontakt_name || '–'}</Typography>
|
||
</CardContent></Card>
|
||
</Grid>
|
||
<Grid item xs={12} sm={6} md={4}>
|
||
<Card variant="outlined"><CardContent>
|
||
<Typography variant="caption" color="text.secondary">E-Mail</Typography>
|
||
<Typography>
|
||
{vendor!.email ? <a href={`mailto:${vendor!.email}`}>{vendor!.email}</a> : '–'}
|
||
</Typography>
|
||
</CardContent></Card>
|
||
</Grid>
|
||
<Grid item xs={12} sm={6} md={4}>
|
||
<Card variant="outlined"><CardContent>
|
||
<Typography variant="caption" color="text.secondary">Telefon</Typography>
|
||
<Typography>{vendor!.telefon || '–'}</Typography>
|
||
</CardContent></Card>
|
||
</Grid>
|
||
<Grid item xs={12} sm={6} md={4}>
|
||
<Card variant="outlined"><CardContent>
|
||
<Typography variant="caption" color="text.secondary">Website</Typography>
|
||
<Typography>
|
||
{vendor!.website ? <a href={ensureUrl(vendor!.website)} target="_blank" rel="noopener noreferrer">{vendor!.website}</a> : '–'}
|
||
</Typography>
|
||
</CardContent></Card>
|
||
</Grid>
|
||
<Grid item xs={12} sm={6} md={4}>
|
||
<Card variant="outlined"><CardContent>
|
||
<Typography variant="caption" color="text.secondary">Adresse</Typography>
|
||
<Typography>{vendor!.adresse || '–'}</Typography>
|
||
</CardContent></Card>
|
||
</Grid>
|
||
{vendor!.notizen && (
|
||
<Grid item xs={12}>
|
||
<Card variant="outlined"><CardContent>
|
||
<Typography variant="caption" color="text.secondary">Notizen</Typography>
|
||
<Typography sx={{ whiteSpace: 'pre-wrap' }}>{vendor!.notizen}</Typography>
|
||
</CardContent></Card>
|
||
</Grid>
|
||
)}
|
||
</Grid>
|
||
)}
|
||
|
||
{/* ── Delete Dialog ── */}
|
||
<Dialog open={deleteDialogOpen} onClose={() => setDeleteDialogOpen(false)}>
|
||
<DialogTitle>Lieferant löschen</DialogTitle>
|
||
<DialogContent>
|
||
<Typography>
|
||
Soll der Lieferant <strong>{vendor?.name}</strong> wirklich gelöscht werden?
|
||
</Typography>
|
||
</DialogContent>
|
||
<DialogActions>
|
||
<Button onClick={() => setDeleteDialogOpen(false)}>Abbrechen</Button>
|
||
<Button color="error" variant="contained" onClick={() => deleteVendor.mutate()} disabled={deleteVendor.isPending}>
|
||
Löschen
|
||
</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
</DashboardLayout>
|
||
);
|
||
}
|