Add Lieferungen section with supplier CRUD and delivery create/list.
Wire /lieferung sub-nav (list, neu, lieferanten) to supplier and delivery APIs.
This commit is contained in:
seb
@@ -1,10 +1,192 @@
|
||||
import { PureComponent } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Table from '@mui/material/Table';
|
||||
import TableBody from '@mui/material/TableBody';
|
||||
import TableCell from '@mui/material/TableCell';
|
||||
import TableContainer from '@mui/material/TableContainer';
|
||||
import TableHead from '@mui/material/TableHead';
|
||||
import TableRow from '@mui/material/TableRow';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import PageLayout from '../../components/PageLayout';
|
||||
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import BackendError from '../../components/BackendError';
|
||||
import { PanelTile, PanelTileGrid } from '../../components/panels';
|
||||
import { StorageManagerContext } from '../../api/storageManagerContext';
|
||||
import { router } from '../../appRouter';
|
||||
import { backendErrorFrom } from '../../utils/backendError';
|
||||
import { notifyError } from '../../utils/notify';
|
||||
|
||||
export default function LieferungPage() {
|
||||
return (
|
||||
<PageLayout title="Lieferung">
|
||||
<Typography color="text.secondary">Lieferung — Inhalt folgt.</Typography>
|
||||
</PageLayout>
|
||||
function sortDeliveries(deliveries) {
|
||||
return [...deliveries].sort((a, b) =>
|
||||
String(b.date).localeCompare(String(a.date)),
|
||||
);
|
||||
}
|
||||
|
||||
function formatDate(iso) {
|
||||
const d = new Date(iso);
|
||||
if (Number.isNaN(d.getTime())) return iso;
|
||||
return d.toLocaleDateString('de-DE');
|
||||
}
|
||||
|
||||
class LieferungListePage extends PureComponent {
|
||||
static contextType = StorageManagerContext;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
status: 'loading',
|
||||
error: null,
|
||||
deliveries: [],
|
||||
suppliersById: {},
|
||||
busyId: null,
|
||||
};
|
||||
this._cancelled = false;
|
||||
this.handleRetry = this.handleRetry.bind(this);
|
||||
this.handleCreate = this.handleCreate.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this._cancelled = false;
|
||||
void this.load();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this._cancelled = true;
|
||||
}
|
||||
|
||||
async load() {
|
||||
this.setState({ status: 'loading', error: null });
|
||||
try {
|
||||
const [deliveries, suppliers] = await Promise.all([
|
||||
this.context.deliveries ?? this.context.deliveryPromise,
|
||||
this.context.suppliers ?? this.context.supplierPromise,
|
||||
]);
|
||||
if (this._cancelled) return;
|
||||
const suppliersById = Object.fromEntries(
|
||||
suppliers.map((row) => [row.id, row]),
|
||||
);
|
||||
this.setState({
|
||||
status: 'ready',
|
||||
deliveries: sortDeliveries(deliveries),
|
||||
suppliersById,
|
||||
});
|
||||
} catch (err) {
|
||||
if (this._cancelled) return;
|
||||
this.setState({ status: 'failed', error: backendErrorFrom(err) });
|
||||
}
|
||||
}
|
||||
|
||||
handleRetry() {
|
||||
void this.load();
|
||||
}
|
||||
|
||||
handleCreate() {
|
||||
void router.navigate('/lieferung/neu');
|
||||
}
|
||||
|
||||
async handleDelete(delivery) {
|
||||
if (this.state.busyId != null) return;
|
||||
if (
|
||||
!window.confirm(
|
||||
`Lieferung „${delivery.number}“ wirklich löschen?`,
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({ busyId: delivery.id });
|
||||
try {
|
||||
await this.context.delivery.delete(delivery.id);
|
||||
const list = await this.context.updateDelivery();
|
||||
if (this._cancelled) return;
|
||||
this.setState({
|
||||
deliveries: sortDeliveries(list),
|
||||
busyId: null,
|
||||
});
|
||||
enqueueSnackbar('Lieferung gelöscht.', { variant: 'success' });
|
||||
} catch (err) {
|
||||
if (this._cancelled) return;
|
||||
notifyError(err);
|
||||
this.setState({ busyId: null });
|
||||
}
|
||||
}
|
||||
|
||||
supplierName(supplierId) {
|
||||
if (supplierId == null) return null;
|
||||
return this.state.suppliersById[supplierId]?.name;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { status, error, deliveries, busyId } = this.state;
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (status === 'failed') {
|
||||
return <BackendError error={error} onRetry={this.handleRetry} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<PanelTileGrid>
|
||||
<PanelTile wide={3} minHeight={240} color="#fed7aa">
|
||||
<Stack spacing={2}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<Button variant="contained" size="small" onClick={this.handleCreate}>
|
||||
Neue Lieferung
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{deliveries.length === 0 ? (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Noch keine Lieferungen.
|
||||
</Typography>
|
||||
) : (
|
||||
<TableContainer>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Nummer</TableCell>
|
||||
<TableCell>Datum</TableCell>
|
||||
<TableCell>Lieferant</TableCell>
|
||||
<TableCell padding="checkbox" />
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{deliveries.map((row) => (
|
||||
<TableRow key={row.id} hover>
|
||||
<TableCell>{row.number}</TableCell>
|
||||
<TableCell>{formatDate(row.date)}</TableCell>
|
||||
<TableCell>{this.supplierName(row.supplierId)}</TableCell>
|
||||
<TableCell padding="checkbox">
|
||||
<IconButton
|
||||
size="small"
|
||||
aria-label={`„${row.number}“ löschen`}
|
||||
disabled={busyId != null}
|
||||
onClick={() => void this.handleDelete(row)}
|
||||
>
|
||||
<DeleteOutlinedIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)}
|
||||
</Stack>
|
||||
</PanelTile>
|
||||
</PanelTileGrid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default LieferungListePage;
|
||||
|
||||
272
src/pages/lieferung/lieferanten.jsx
Normal file
272
src/pages/lieferung/lieferanten.jsx
Normal file
@@ -0,0 +1,272 @@
|
||||
import { PureComponent } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
|
||||
import StorefrontIcon from '@mui/icons-material/Storefront';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import BackendError from '../../components/BackendError';
|
||||
import SingleLineTextEdit from '../../components/SingleLineTextEdit';
|
||||
import { PanelTile, PanelTileGrid } from '../../components/panels';
|
||||
import { StorageManagerContext } from '../../api/storageManagerContext';
|
||||
import { requireDefined, requireObject } from '../../utils/apiShape';
|
||||
import { backendErrorFrom } from '../../utils/backendError';
|
||||
import { notifyError } from '../../utils/notify';
|
||||
|
||||
function sortSuppliers(suppliers) {
|
||||
return [...suppliers].sort((a, b) =>
|
||||
String(a.name).localeCompare(String(b.name), 'de'),
|
||||
);
|
||||
}
|
||||
|
||||
function draftsFrom(suppliers) {
|
||||
return Object.fromEntries(suppliers.map((row) => [row.id, row.name]));
|
||||
}
|
||||
|
||||
class LieferungLieferantenPage extends PureComponent {
|
||||
static contextType = StorageManagerContext;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
status: 'loading',
|
||||
error: null,
|
||||
suppliers: [],
|
||||
drafts: {},
|
||||
newName: '',
|
||||
busyKey: null,
|
||||
};
|
||||
this._cancelled = false;
|
||||
this.handleCreate = this.handleCreate.bind(this);
|
||||
this.handleRetry = this.handleRetry.bind(this);
|
||||
this.loadSuppliers = this.loadSuppliers.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this._cancelled = false;
|
||||
void this.loadSuppliers();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this._cancelled = true;
|
||||
}
|
||||
|
||||
applySuppliers(suppliers) {
|
||||
const sorted = sortSuppliers(suppliers);
|
||||
this.setState({
|
||||
status: 'ready',
|
||||
error: null,
|
||||
suppliers: sorted,
|
||||
drafts: draftsFrom(sorted),
|
||||
});
|
||||
}
|
||||
|
||||
async loadSuppliers() {
|
||||
this.setState({ status: 'loading', error: null });
|
||||
try {
|
||||
const list = this.context.suppliers ?? (await this.context.supplierPromise);
|
||||
if (this._cancelled) return;
|
||||
this.applySuppliers(list);
|
||||
} catch (err) {
|
||||
if (this._cancelled) return;
|
||||
this.setState({ status: 'failed', error: backendErrorFrom(err) });
|
||||
}
|
||||
}
|
||||
|
||||
handleRetry() {
|
||||
void this.loadSuppliers();
|
||||
}
|
||||
|
||||
async refreshFromServer() {
|
||||
const list = await this.context.updateSupplier();
|
||||
if (this._cancelled) return;
|
||||
this.applySuppliers(list);
|
||||
}
|
||||
|
||||
async handleCreate() {
|
||||
const name = this.state.newName.trim();
|
||||
if (!name || this.state.busyKey != null) return;
|
||||
|
||||
this.setState({ busyKey: 'new' });
|
||||
try {
|
||||
const data = await this.context.supplier.create({ name });
|
||||
requireObject(data, 'POST /api/supplier');
|
||||
requireObject(data.supplier, 'supplier');
|
||||
requireDefined(data.supplier.id, 'supplier.id');
|
||||
await this.refreshFromServer();
|
||||
if (this._cancelled) return;
|
||||
this.setState({ newName: '', busyKey: null });
|
||||
enqueueSnackbar('Lieferant angelegt.', { variant: 'success' });
|
||||
} catch (err) {
|
||||
if (this._cancelled) return;
|
||||
notifyError(err);
|
||||
this.setState({ busyKey: null });
|
||||
}
|
||||
}
|
||||
|
||||
async handleRename(supplier) {
|
||||
const draft = String(this.state.drafts[supplier.id] ?? '').trim();
|
||||
if (!draft) {
|
||||
this.setState((prev) => ({
|
||||
drafts: { ...prev.drafts, [supplier.id]: supplier.name },
|
||||
}));
|
||||
return;
|
||||
}
|
||||
if (draft === supplier.name || this.state.busyKey != null) return;
|
||||
|
||||
this.setState({ busyKey: supplier.id });
|
||||
try {
|
||||
const data = await this.context.supplier.update(supplier.id, { name: draft });
|
||||
requireObject(data, 'PATCH /api/supplier/:id');
|
||||
requireObject(data.supplier, 'supplier');
|
||||
requireDefined(data.supplier.id, 'supplier.id');
|
||||
await this.refreshFromServer();
|
||||
if (this._cancelled) return;
|
||||
this.setState({ busyKey: null });
|
||||
enqueueSnackbar('Lieferant gespeichert.', { variant: 'success' });
|
||||
} catch (err) {
|
||||
if (this._cancelled) return;
|
||||
notifyError(err);
|
||||
this.setState((prev) => ({
|
||||
busyKey: null,
|
||||
drafts: { ...prev.drafts, [supplier.id]: supplier.name },
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
async handleDelete(supplier) {
|
||||
if (this.state.busyKey != null) return;
|
||||
if (!window.confirm(`Lieferant „${supplier.name}“ wirklich löschen?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({ busyKey: supplier.id });
|
||||
try {
|
||||
await this.context.supplier.delete(supplier.id);
|
||||
await this.refreshFromServer();
|
||||
if (this._cancelled) return;
|
||||
this.setState({ busyKey: null });
|
||||
enqueueSnackbar('Lieferant gelöscht.', { variant: 'success' });
|
||||
} catch (err) {
|
||||
if (this._cancelled) return;
|
||||
notifyError(err);
|
||||
this.setState({ busyKey: null });
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { status, error, suppliers, drafts, newName, busyKey } = this.state;
|
||||
const busy = busyKey != null;
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (status === 'failed') {
|
||||
return (
|
||||
<BackendError error={error} onRetry={this.handleRetry} />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<PanelTileGrid>
|
||||
<PanelTile wide={2} minHeight={280} color="#bbf7d0">
|
||||
<Stack spacing={2}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Lieferanten der ausgewählten Firma.
|
||||
</Typography>
|
||||
|
||||
<List dense disablePadding>
|
||||
{suppliers.length === 0 ? (
|
||||
<Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
|
||||
Noch keine Lieferanten.
|
||||
</Typography>
|
||||
) : (
|
||||
suppliers.map((supplier) => (
|
||||
<ListItem
|
||||
key={supplier.id}
|
||||
disableGutters
|
||||
sx={{ gap: 1, py: 0.75, alignItems: 'center' }}
|
||||
>
|
||||
<StorefrontIcon sx={{ color: 'text.secondary', fontSize: 20, flexShrink: 0 }} />
|
||||
<SingleLineTextEdit
|
||||
size="small"
|
||||
label=""
|
||||
value={drafts[supplier.id] ?? ''}
|
||||
disabled={busy}
|
||||
onChange={(next) =>
|
||||
this.setState((prev) => ({
|
||||
drafts: { ...prev.drafts, [supplier.id]: next },
|
||||
}))
|
||||
}
|
||||
onBlur={() => void this.handleRename(supplier)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
event.target.blur();
|
||||
}
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
this.setState((prev) => ({
|
||||
drafts: { ...prev.drafts, [supplier.id]: supplier.name },
|
||||
}));
|
||||
event.target.blur();
|
||||
}
|
||||
}}
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
<IconButton
|
||||
edge="end"
|
||||
size="small"
|
||||
aria-label={`„${supplier.name}“ löschen`}
|
||||
disabled={busy}
|
||||
onClick={() => void this.handleDelete(supplier)}
|
||||
>
|
||||
<DeleteOutlinedIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</ListItem>
|
||||
))
|
||||
)}
|
||||
</List>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<SingleLineTextEdit
|
||||
size="small"
|
||||
label="Neuer Lieferant"
|
||||
value={newName}
|
||||
disabled={busy}
|
||||
onChange={(next) => this.setState({ newName: next })}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
void this.handleCreate();
|
||||
}
|
||||
}}
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
disabled={busy || !newName.trim()}
|
||||
onClick={() => void this.handleCreate()}
|
||||
>
|
||||
{busyKey === 'new' ? '…' : 'Hinzufügen'}
|
||||
</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
</PanelTile>
|
||||
</PanelTileGrid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default LieferungLieferantenPage;
|
||||
407
src/pages/lieferung/neu.jsx
Normal file
407
src/pages/lieferung/neu.jsx
Normal file
@@ -0,0 +1,407 @@
|
||||
import { PureComponent } from 'react';
|
||||
import Autocomplete from '@mui/material/Autocomplete';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Table from '@mui/material/Table';
|
||||
import TableBody from '@mui/material/TableBody';
|
||||
import TableCell from '@mui/material/TableCell';
|
||||
import TableContainer from '@mui/material/TableContainer';
|
||||
import TableHead from '@mui/material/TableHead';
|
||||
import TableRow from '@mui/material/TableRow';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import BackendError from '../../components/BackendError';
|
||||
import SingleLineTextEdit from '../../components/SingleLineTextEdit';
|
||||
import { PanelTile, PanelTileGrid } from '../../components/panels';
|
||||
import { StorageManagerContext } from '../../api/storageManagerContext';
|
||||
import { router } from '../../appRouter';
|
||||
import { requireDefined, requireObject } from '../../utils/apiShape';
|
||||
import { backendErrorFrom } from '../../utils/backendError';
|
||||
import { notifyError } from '../../utils/notify';
|
||||
|
||||
function sortSuppliers(suppliers) {
|
||||
return [...suppliers].sort((a, b) =>
|
||||
String(a.name).localeCompare(String(b.name), 'de'),
|
||||
);
|
||||
}
|
||||
|
||||
function emptyLine() {
|
||||
return {
|
||||
key: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
|
||||
amount: '',
|
||||
sku: '',
|
||||
tax: '',
|
||||
rebate: '',
|
||||
net: '',
|
||||
};
|
||||
}
|
||||
|
||||
function parseNum(value) {
|
||||
if (value == null || value === '') return null;
|
||||
const n = Number(String(value).trim().replace(',', '.'));
|
||||
return Number.isFinite(n) ? n : null;
|
||||
}
|
||||
|
||||
/** Build POST /api/delivery body from form state. Throws Error on client validation. */
|
||||
function buildCreateBody({ shippingNumber, estimatedDeliveryDate, supplierId, lines }) {
|
||||
const number = shippingNumber.trim();
|
||||
const date = estimatedDeliveryDate;
|
||||
if (!number) throw new Error('Sendungsnummer fehlt.');
|
||||
if (!date) throw new Error('Lieferdatum fehlt.');
|
||||
|
||||
const outLines = [];
|
||||
for (const line of lines) {
|
||||
const sku = String(line.sku ?? '').trim();
|
||||
const amount = parseNum(line.amount);
|
||||
const net = parseNum(line.net);
|
||||
const tax = parseNum(line.tax);
|
||||
const rebate = parseNum(line.rebate);
|
||||
const blank =
|
||||
!sku && amount == null && net == null && tax == null && rebate == null;
|
||||
if (blank) continue;
|
||||
if (!sku || amount == null || net == null || tax == null) {
|
||||
throw new Error('Jede Zeile braucht SKU, Amount, Net und Tax.');
|
||||
}
|
||||
const row = { sku, amount, net, tax };
|
||||
if (rebate != null) row.rebate = rebate;
|
||||
outLines.push(row);
|
||||
}
|
||||
if (outLines.length === 0) {
|
||||
throw new Error('Mindestens eine Artikelzeile nötig.');
|
||||
}
|
||||
|
||||
const body = { number, date, lines: outLines };
|
||||
if (supplierId != null) body.supplierId = supplierId;
|
||||
return body;
|
||||
}
|
||||
|
||||
const COLUMNS = [
|
||||
{ id: 'amount', label: 'Amount', width: 88, align: 'right', type: 'number' },
|
||||
{ id: 'sku', label: 'SKU', width: 140, align: 'left', type: 'text' },
|
||||
{ id: 'tax', label: 'Tax', width: 80, align: 'right', type: 'number' },
|
||||
{ id: 'rebate', label: 'Rebate', width: 88, align: 'right', type: 'number' },
|
||||
{ id: 'net', label: 'Net', width: 104, align: 'right', type: 'number' },
|
||||
];
|
||||
|
||||
class LieferungNeuPage extends PureComponent {
|
||||
static contextType = StorageManagerContext;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
suppliersStatus: 'loading',
|
||||
suppliersError: null,
|
||||
suppliers: [],
|
||||
estimatedDeliveryDate: '',
|
||||
supplierId: null,
|
||||
shippingNumber: '',
|
||||
lines: [emptyLine()],
|
||||
saving: false,
|
||||
};
|
||||
this._cancelled = false;
|
||||
this.handleRetrySuppliers = this.handleRetrySuppliers.bind(this);
|
||||
this.handleAddLine = this.handleAddLine.bind(this);
|
||||
this.handleSupplierChange = this.handleSupplierChange.bind(this);
|
||||
this.handleSave = this.handleSave.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this._cancelled = false;
|
||||
void this.loadSuppliers();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this._cancelled = true;
|
||||
}
|
||||
|
||||
async loadSuppliers() {
|
||||
this.setState({ suppliersStatus: 'loading', suppliersError: null });
|
||||
try {
|
||||
const list = this.context.suppliers ?? (await this.context.supplierPromise);
|
||||
if (this._cancelled) return;
|
||||
this.setState({
|
||||
suppliersStatus: 'ready',
|
||||
suppliers: sortSuppliers(list),
|
||||
});
|
||||
} catch (err) {
|
||||
if (this._cancelled) return;
|
||||
this.setState({
|
||||
suppliersStatus: 'failed',
|
||||
suppliersError: backendErrorFrom(err),
|
||||
});
|
||||
notifyError(err);
|
||||
}
|
||||
}
|
||||
|
||||
handleRetrySuppliers() {
|
||||
void this.loadSuppliers();
|
||||
}
|
||||
|
||||
handleSupplierChange(_event, option) {
|
||||
this.setState({
|
||||
supplierId: option?.id ?? null,
|
||||
lines: option ? this.state.lines : [emptyLine()],
|
||||
});
|
||||
}
|
||||
|
||||
handleLineChange(key, field, value) {
|
||||
this.setState((prev) => ({
|
||||
lines: prev.lines.map((line) =>
|
||||
line.key === key ? { ...line, [field]: value } : line,
|
||||
),
|
||||
}));
|
||||
}
|
||||
|
||||
handleAddLine() {
|
||||
this.setState((prev) => ({ lines: [...prev.lines, emptyLine()] }));
|
||||
}
|
||||
|
||||
handleRemoveLine(key) {
|
||||
this.setState((prev) => {
|
||||
const next = prev.lines.filter((line) => line.key !== key);
|
||||
return { lines: next.length > 0 ? next : [emptyLine()] };
|
||||
});
|
||||
}
|
||||
|
||||
async handleSave() {
|
||||
if (this.state.saving) return;
|
||||
let body;
|
||||
try {
|
||||
body = buildCreateBody(this.state);
|
||||
} catch (err) {
|
||||
notifyError(err);
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({ saving: true });
|
||||
try {
|
||||
const data = await this.context.delivery.create(body);
|
||||
requireObject(data, 'POST /api/delivery');
|
||||
requireObject(data.delivery, 'delivery');
|
||||
requireDefined(data.delivery.id, 'delivery.id');
|
||||
await this.context.updateDelivery();
|
||||
if (this._cancelled) return;
|
||||
enqueueSnackbar('Lieferung angelegt.', { variant: 'success' });
|
||||
void router.navigate('/lieferung');
|
||||
} catch (err) {
|
||||
if (this._cancelled) return;
|
||||
notifyError(err);
|
||||
this.setState({ saving: false });
|
||||
}
|
||||
}
|
||||
|
||||
renderHeader() {
|
||||
const {
|
||||
suppliersStatus,
|
||||
suppliers,
|
||||
estimatedDeliveryDate,
|
||||
supplierId,
|
||||
shippingNumber,
|
||||
saving,
|
||||
} = this.state;
|
||||
const selected =
|
||||
suppliers.find((row) => row.id === supplierId) ?? null;
|
||||
|
||||
return (
|
||||
<PanelTile wide={3} minHeight={160} color="#fed7aa" title="Kopfdaten">
|
||||
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
|
||||
<TextField
|
||||
size="small"
|
||||
type="date"
|
||||
label="Lieferdatum"
|
||||
value={estimatedDeliveryDate}
|
||||
disabled={saving}
|
||||
onChange={(e) =>
|
||||
this.setState({ estimatedDeliveryDate: e.target.value })
|
||||
}
|
||||
autoComplete="off"
|
||||
slotProps={{
|
||||
inputLabel: { shrink: true },
|
||||
htmlInput: { spellCheck: false },
|
||||
}}
|
||||
sx={{ minWidth: 220 }}
|
||||
/>
|
||||
<Autocomplete
|
||||
size="small"
|
||||
options={suppliers}
|
||||
value={selected}
|
||||
loading={suppliersStatus === 'loading'}
|
||||
disabled={saving}
|
||||
getOptionLabel={(option) => String(option.name ?? '')}
|
||||
isOptionEqualToValue={(option, value) => option.id === value.id}
|
||||
onChange={this.handleSupplierChange}
|
||||
sx={{ flex: 1, minWidth: 220 }}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Lieferant"
|
||||
autoComplete="off"
|
||||
inputProps={{
|
||||
...params.inputProps,
|
||||
spellCheck: false,
|
||||
autoComplete: 'off',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<SingleLineTextEdit
|
||||
size="small"
|
||||
label="Nummer"
|
||||
value={shippingNumber}
|
||||
disabled={saving}
|
||||
onChange={(next) => this.setState({ shippingNumber: next })}
|
||||
sx={{ minWidth: 180, flex: 1 }}
|
||||
/>
|
||||
</Stack>
|
||||
</PanelTile>
|
||||
);
|
||||
}
|
||||
|
||||
renderLineField(line, column) {
|
||||
const { id, align, type } = column;
|
||||
const { saving } = this.state;
|
||||
return (
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
type={type}
|
||||
value={line[id]}
|
||||
disabled={saving}
|
||||
autoComplete="off"
|
||||
onChange={(e) => this.handleLineChange(line.key, id, e.target.value)}
|
||||
slotProps={{
|
||||
htmlInput: {
|
||||
inputMode: type === 'number' ? 'decimal' : 'text',
|
||||
style: { textAlign: align },
|
||||
spellCheck: false,
|
||||
autoComplete: 'off',
|
||||
step: type === 'number' ? 'any' : undefined,
|
||||
},
|
||||
}}
|
||||
sx={{
|
||||
'& input[type=number]': {
|
||||
MozAppearance: 'textfield',
|
||||
},
|
||||
'& input[type=number]::-webkit-outer-spin-button, & input[type=number]::-webkit-inner-spin-button':
|
||||
{
|
||||
WebkitAppearance: 'none',
|
||||
margin: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderArticles() {
|
||||
const { supplierId, lines, saving } = this.state;
|
||||
if (supplierId == null) {
|
||||
return (
|
||||
<PanelTile wide={3} minHeight={160} color="#e2e8f0">
|
||||
<Typography color="text.secondary">
|
||||
Lieferant wählen, um Artikel zu erfassen.
|
||||
</Typography>
|
||||
</PanelTile>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<PanelTile wide={3} minHeight={280} color="#bbf7d0" title="Artikel">
|
||||
<Stack spacing={1.5}>
|
||||
<TableContainer>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{COLUMNS.map((col) => (
|
||||
<TableCell
|
||||
key={col.id}
|
||||
align={col.align}
|
||||
sx={{
|
||||
width: col.width,
|
||||
whiteSpace: 'nowrap',
|
||||
bgcolor: '#bbf7d0',
|
||||
}}
|
||||
>
|
||||
{col.label}
|
||||
</TableCell>
|
||||
))}
|
||||
<TableCell padding="checkbox" sx={{ bgcolor: '#bbf7d0' }} />
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{lines.map((line) => (
|
||||
<TableRow key={line.key}>
|
||||
{COLUMNS.map((col) => (
|
||||
<TableCell
|
||||
key={col.id}
|
||||
align={col.align}
|
||||
sx={{ py: 0.75, verticalAlign: 'middle' }}
|
||||
>
|
||||
{this.renderLineField(line, col)}
|
||||
</TableCell>
|
||||
))}
|
||||
<TableCell padding="checkbox" sx={{ py: 0.75 }}>
|
||||
<IconButton
|
||||
size="small"
|
||||
aria-label="Zeile entfernen"
|
||||
disabled={saving}
|
||||
onClick={() => this.handleRemoveLine(line.key)}
|
||||
>
|
||||
<DeleteOutlinedIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<AddIcon />}
|
||||
disabled={saving}
|
||||
onClick={this.handleAddLine}
|
||||
>
|
||||
Zeile hinzufügen
|
||||
</Button>
|
||||
<Box sx={{ flex: 1 }} />
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
disabled={saving}
|
||||
onClick={() => void this.handleSave()}
|
||||
>
|
||||
{saving ? 'Speichern…' : 'Speichern'}
|
||||
</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
</PanelTile>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { suppliersStatus, suppliersError } = this.state;
|
||||
|
||||
if (suppliersStatus === 'failed') {
|
||||
return (
|
||||
<BackendError
|
||||
error={suppliersError}
|
||||
onRetry={this.handleRetrySuppliers}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<PanelTileGrid>
|
||||
{this.renderHeader()}
|
||||
{this.renderArticles()}
|
||||
</PanelTileGrid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default LieferungNeuPage;
|
||||
Reference in New Issue
Block a user