seb/dashfront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add shared Manifest UI for delivery, quote, and order.

Browse Source 
Wire quote/order API clients and routes, then unify list/create/edit behind ManifestList/Form tiles so Lieferungen and Auftrag share one stack.
This commit is contained in:
seb
2026-08-06 20:08:56 +02:00
parent 8d50d083f5
commit 4896b1dc36
26 changed files with 1356 additions and 1103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/api/ApiClient.js
View File

@@ -95,6 +95,32 @@ export class ApiClient {
delete: (id) => this.#empty('DELETE', `/api/delivery/${enc(id)}`),
};
this.quote = {
/** GET /api/quote → { quotes } */
list: () => this.#json('GET', '/api/quote'),
/** GET /api/quote/{id} → { quote } */
get: (id) => this.#json('GET', `/api/quote/${enc(id)}`),
/** POST /api/quote → 201 { quote } */
create: (body) => this.#json('POST', '/api/quote', { body }),
/** PATCH /api/quote/{id} → { quote } */
update: (id, body) => this.#json('PATCH', `/api/quote/${enc(id)}`, { body }),
/** DELETE /api/quote/{id} → 204 */
delete: (id) => this.#empty('DELETE', `/api/quote/${enc(id)}`),
};
this.order = {
/** GET /api/order → { orders } */
list: () => this.#json('GET', '/api/order'),
/** GET /api/order/{id} → { order } */
get: (id) => this.#json('GET', `/api/order/${enc(id)}`),
/** POST /api/order → 201 { order } */
create: (body) => this.#json('POST', '/api/order', { body }),
/** PATCH /api/order/{id} → { order } */
update: (id, body) => this.#json('PATCH', `/api/order/${enc(id)}`, { body }),
/** DELETE /api/order/{id} → 204 */
delete: (id) => this.#empty('DELETE', `/api/order/${enc(id)}`),
};
this.customergroup = {
/** GET /api/customergroup → { customergroups } */
list: () => this.#json('GET', '/api/customergroup'),

24
src/api/StorageManager.js
View File

@@ -297,6 +297,8 @@ export class StorageManager extends ApiClient {
this.#loadCustomergroups(),
);
const entityCache = createCache('GET /entity', () => this.#loadEntities());
const quoteCache = createCache('GET /quote', () => this.#loadQuotes());
const orderCache = createCache('GET /order', () => this.#loadOrders());
Object.defineProperties(this, {
authMePromise: { get: () => authMeCache.promise },
@@ -350,6 +352,16 @@ export class StorageManager extends ApiClient {
/** Settled GET /entity list, or undefined. */
entities: { get: () => entityCache.value },
quotePromise: { get: () => quoteCache.promise },
updateQuote: { value: quoteCache.update },
/** Settled GET /quote list, or undefined. */
quotes: { get: () => quoteCache.value },
orderPromise: { get: () => orderCache.promise },
updateOrder: { value: orderCache.update },
/** Settled GET /order list, or undefined. */
orders: { get: () => orderCache.value },
/** Close and reopen GET /api/events (required after selected-company change). */
reconnectEvents: { value: () => this.#reconnectEvents() },
});
@@ -494,6 +506,18 @@ export class StorageManager extends ApiClient {
return requireArray(data.entities, 'entities');
}
async #loadQuotes() {
const data = await this.quote.list();
requireObject(data, 'GET /api/quote');
return requireArray(data.quotes, 'quotes');
}
async #loadOrders() {
const data = await this.order.list();
requireObject(data, 'GET /api/order');
return requireArray(data.orders, 'orders');
}
async doSearch({ target, filter, offset, maxCount, onUpdate }) {
const articles = await this.articleIndexPromise;
const query = target.trim().toLowerCase();

83
src/api/index.js
View File

@@ -599,6 +599,87 @@ export const delivery = {
},
};
/**
* Sales quotes (manifest type = quote).
* Summary = { id, number, type: 'quote', entityId, date }
* Line = { id, articleId, sku, amount, net, rebate, tax, comment } — no transactedAmount
* LineInput = { sku, amount, net, tax, rebate?, comment? }
*/
export const quote = {
/** GET /api/quote → { quotes: QuoteSummary[] } */
list() {
return http('/api/quote');
},
/** GET /api/quote/:id → { quote: Quote } */
get(id) {
return http(`/api/quote/${id}`);
},
/**
* POST /api/quote
* Body: { number, date, entityId?, lines }
* → 201 { quote: Quote }
*/
create(body) {
return http('/api/quote', { method: 'POST', body });
},
/**
* PATCH /api/quote/:id
* Body: partial { number?, date?, entityId?, lines? }
* → 200 { quote: Quote }
*/
update(id, body) {
return http(`/api/quote/${id}`, { method: 'PATCH', body });
},
/** DELETE /api/quote/:id → 204 */
delete(id) {
return http(`/api/quote/${id}`, { method: 'DELETE' });
},
};
/**
* Sales orders (manifest type = order).
* Summary = { id, number, type: 'order', entityId, date }
* Line shape same as quote (no transactedAmount).
*/
export const order = {
/** GET /api/order → { orders: OrderSummary[] } */
list() {
return http('/api/order');
},
/** GET /api/order/:id → { order: Order } */
get(id) {
return http(`/api/order/${id}`);
},
/**
* POST /api/order
* Body: { number, date, entityId?, lines }
* → 201 { order: Order }
*/
create(body) {
return http('/api/order', { method: 'POST', body });
},
/**
* PATCH /api/order/:id
* Body: partial { number?, date?, entityId?, lines? }
* → 200 { order: Order }
*/
update(id, body) {
return http(`/api/order/${id}`, { method: 'PATCH', body });
},
/** DELETE /api/order/:id → 204 */
delete(id) {
return http(`/api/order/${id}`, { method: 'DELETE' });
},
};
/**
* Company-scoped customer groups.
* Shape: CustomerGroup = { id, name }
@@ -903,7 +984,9 @@ export default {
customergroup,
delivery,
entity,
order,
posterminal,
quote,
supplier,
thumb,
unit,

15
src/appRouter.jsx
View File

@@ -13,7 +13,11 @@ const LieferungNeuPage = lazy(() => import('./pages/lieferung/neu'));
const LieferungLieferantenPage = lazy(() => import('./pages/lieferung/lieferanten'));
const LieferungEditPage = lazy(() => import('./pages/lieferung/edit'));
const AuftragAngebotPage = lazy(() => import('./pages/auftrag/index'));
const AuftragAngebotNeuPage = lazy(() => import('./pages/auftrag/neu'));
const AuftragAngebotEditPage = lazy(() => import('./pages/auftrag/edit'));
const AuftragBestellungPage = lazy(() => import('./pages/auftrag/bestellung'));
const AuftragBestellungNeuPage = lazy(() => import('./pages/auftrag/bestellungNeu'));
const AuftragBestellungEditPage = lazy(() => import('./pages/auftrag/bestellungEdit'));
const AuftragAusliefernPage = lazy(() => import('./pages/auftrag/ausliefern'));
const AuftragRetourePage = lazy(() => import('./pages/auftrag/retoure'));
const KundeListePage = lazy(() => import('./pages/kunde/index'));
@@ -59,9 +63,18 @@ export const router = createBrowserRouter([
element: <SectionLayout sectionPath="/auftrag" />,
children: [
{ index: true, element: <AuftragAngebotPage /> },
{ path: 'bestellung', element: <AuftragBestellungPage /> },
{ path: 'neu', element: <AuftragAngebotNeuPage /> },
{
path: 'bestellung',
children: [
{ index: true, element: <AuftragBestellungPage /> },
{ path: 'neu', element: <AuftragBestellungNeuPage /> },
{ path: ':orderId', element: <AuftragBestellungEditPage /> },
],
},
{ path: 'ausliefern', element: <AuftragAusliefernPage /> },
{ path: 'retoure', element: <AuftragRetourePage /> },
{ path: ':quoteId', element: <AuftragAngebotEditPage /> },
],
},
{

12
src/components/SectionLayout.jsx
View File

@@ -48,11 +48,19 @@ export default function SectionLayout({ sectionPath }) {
sectionPath === '/kunde' && rest && !knownSegments.has(rest);
const isLieferungDetail =
sectionPath === '/lieferung' && rest && !knownSegments.has(rest);
const isDetail = isArticleDetail || isKundeDetail || isLieferungDetail;
const isAngebotDoc =
sectionPath === '/auftrag' && rest && !knownSegments.has(rest);
const isDetail =
isArticleDetail || isKundeDetail || isLieferungDetail || isAngebotDoc;
const pageTitle = isDetail
const angebotLabel =
subNav?.find((item) => item.segment === '')?.label ?? 'Angebot';
let pageTitle = isDetail
? title
: (activeSub?.label ?? title);
if (pathname === '/auftrag/neu') pageTitle = 'Neues Angebot';
else if (isAngebotDoc) pageTitle = angebotLabel;
else if (pathname === '/auftrag/bestellung/neu') pageTitle = 'Neue Bestellung';
const showsRenameSwitch = activeSub?.segment === 'kategorien';

8
src/components/article/boxes/ArticleViewBrand.jsx
View File

@@ -63,7 +63,13 @@ class BrandEdit extends Component {
inputRef={inputRef}
label="Marke"
size="small"
slotProps={{ inputLabel: { shrink: true } }}
slotProps={{
...params.slotProps,
inputLabel: {
...params.slotProps?.inputLabel,
shrink: true,
},
}}
/>
)}
/>

8
src/components/article/boxes/ArticleViewEANs.jsx
View File

@@ -75,7 +75,13 @@ class EansEdit extends Component {
inputRef={inputRef}
label="EANs (Enter zum Hinzufügen)"
size="small"
slotProps={{ inputLabel: { shrink: true } }}
slotProps={{
...params.slotProps,
inputLabel: {
...params.slotProps?.inputLabel,
shrink: true,
},
}}
/>
)}
/>

321
src/components/manifest/ManifestForm.jsx Normal file
View File

@@ -0,0 +1,321 @@
import { PureComponent } from 'react';
import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';
import Typography from '@mui/material/Typography';
import { enqueueSnackbar } from 'notistack';
import BackendError from '../BackendError';
import { PanelTile, PanelTileGrid } from '../panels';
import { StorageManagerContext } from '../../api/storageManagerContext';
import { router } from '../../appRouter';
import { requireArray, requireDefined, requireObject } from '../../utils/apiShape';
import { backendErrorFrom } from '../../utils/backendError';
import { notifyError } from '../../utils/notify';
import ManifestHeader from './ManifestHeader';
import ManifestLines from './ManifestLines';
import {
buildManifestBody,
dateInputValue,
emptyLine,
lineFromApi,
loadParties,
manifestConfig,
} from './manifestConfig';
class ManifestForm extends PureComponent {
static contextType = StorageManagerContext;
constructor(props) {
super(props);
this.cfg = manifestConfig(props.kind);
this.state = {
status: props.mode === 'edit' ? 'loading' : 'loadingParties',
error: null,
parties: [],
partiesLoading: true,
date: '',
partyId: null,
number: '',
lines: [emptyLine()],
saving: false,
};
this._cancelled = false;
this.handleRetry = this.handleRetry.bind(this);
this.handlePartyChange = this.handlePartyChange.bind(this);
this.handleDateChange = this.handleDateChange.bind(this);
this.handleNumberChange = this.handleNumberChange.bind(this);
this.handleLineChange = this.handleLineChange.bind(this);
this.handleAddLine = this.handleAddLine.bind(this);
this.handleRemoveLine = this.handleRemoveLine.bind(this);
this.handleSave = this.handleSave.bind(this);
}
componentDidMount() {
this._cancelled = false;
if (this.props.mode === 'edit') void this.loadEdit();
else void this.loadPartiesOnly();
}
componentDidUpdate(prevProps) {
if (
this.props.mode === 'edit' &&
prevProps.docId !== this.props.docId
) {
void this.loadEdit();
}
}
componentWillUnmount() {
this._cancelled = true;
}
async loadPartiesOnly() {
this.setState({ status: 'loadingParties', error: null, partiesLoading: true });
try {
const parties = await loadParties(this.props.kind, this.context);
if (this._cancelled) return;
this.setState({
status: 'ready',
parties,
partiesLoading: false,
});
} catch (err) {
if (this._cancelled) return;
this.setState({
status: 'failed',
error: backendErrorFrom(err),
partiesLoading: false,
});
notifyError(err);
}
}
async loadEdit() {
const { docId, kind } = this.props;
const cfg = this.cfg;
if (docId == null) {
this.setState({
status: 'failed',
error: backendErrorFrom(new Error(cfg.invalidId)),
});
return;
}
this.setState({ status: 'loading', error: null, partiesLoading: true });
try {
const [docRes, parties] = await Promise.all([
this.context[cfg.api].get(docId),
loadParties(kind, this.context),
]);
if (this._cancelled) return;
requireObject(docRes, cfg.getPathLabel);
requireObject(docRes[cfg.docField], cfg.docField);
const doc = docRes[cfg.docField];
const apiLines = requireArray(doc.lines, `${cfg.docField}.lines`);
const lines =
apiLines.length > 0 ? apiLines.map(lineFromApi) : [emptyLine()];
this.setState({
status: 'ready',
parties,
partiesLoading: false,
date: dateInputValue(doc.date),
partyId: doc[cfg.partyField],
number: doc.number ?? '',
lines,
});
} catch (err) {
if (this._cancelled) return;
this.setState({
status: 'failed',
error: backendErrorFrom(err),
partiesLoading: false,
});
}
}
handleRetry() {
if (this.props.mode === 'edit') void this.loadEdit();
else void this.loadPartiesOnly();
}
handlePartyChange(partyId) {
const { mode } = this.props;
const { requirePartyBeforeLines } = this.cfg;
if (mode === 'create' && requirePartyBeforeLines && partyId == null) {
this.setState({ partyId: null, lines: [emptyLine()] });
return;
}
this.setState({ partyId });
}
handleDateChange(date) {
this.setState({ date });
}
handleNumberChange(number) {
this.setState({ number });
}
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() {
const { mode, docId } = this.props;
const cfg = this.cfg;
if (this.state.saving) return;
if (mode === 'edit' && docId == null) return;
const requireAtLeastOne = mode === 'create';
let body;
try {
body = buildManifestBody(
{
number: this.state.number,
date: this.state.date,
partyId: this.state.partyId,
lines: this.state.lines,
},
{ partyField: cfg.partyField, requireAtLeastOne },
);
} catch (err) {
notifyError(err);
return;
}
this.setState({ saving: true });
try {
if (mode === 'create') {
const data = await this.context[cfg.api].create(body);
requireObject(data, cfg.postPathLabel);
requireObject(data[cfg.docField], cfg.docField);
requireDefined(data[cfg.docField].id, `${cfg.docField}.id`);
await this.context[cfg.updateCache]();
if (this._cancelled) return;
enqueueSnackbar(cfg.createdMsg, { variant: 'success' });
void router.navigate(cfg.editPath(data[cfg.docField].id));
return;
}
const data = await this.context[cfg.api].update(docId, body);
requireObject(data, cfg.patchPathLabel);
requireObject(data[cfg.docField], cfg.docField);
requireDefined(data[cfg.docField].id, `${cfg.docField}.id`);
await this.context[cfg.updateCache]();
if (this._cancelled) return;
const doc = data[cfg.docField];
const apiLines = requireArray(doc.lines, `${cfg.docField}.lines`);
this.setState({
date: dateInputValue(doc.date),
partyId: doc[cfg.partyField],
number: doc.number ?? '',
lines:
apiLines.length > 0 ? apiLines.map(lineFromApi) : [emptyLine()],
saving: false,
});
enqueueSnackbar(cfg.savedMsg, { variant: 'success' });
} catch (err) {
if (this._cancelled) return;
notifyError(err);
this.setState({ saving: false });
}
}
renderArticles() {
const { mode } = this.props;
const cfg = this.cfg;
const { partyId, lines, saving } = this.state;
if (
cfg.requirePartyBeforeLines &&
mode === 'create' &&
partyId == null
) {
return (
<PanelTile wide={3} minHeight={160} color="#e2e8f0">
<Typography color="text.secondary">
{cfg.partyGateMessage}
</Typography>
</PanelTile>
);
}
return (
<ManifestLines
lines={lines}
saving={saving}
linesColor={cfg.linesColor}
onLineChange={this.handleLineChange}
onAddLine={this.handleAddLine}
onRemoveLine={this.handleRemoveLine}
onSave={() => void this.handleSave()}
/>
);
}
render() {
const { kind, mode } = this.props;
const cfg = this.cfg;
const {
status,
error,
parties,
partiesLoading,
date,
partyId,
number,
saving,
} = 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>
<ManifestHeader
kind={kind}
headerColor={cfg.headerColor}
dateLabel={cfg.dateLabel}
partyLabel={cfg.partyLabel}
parties={parties}
partiesLoading={partiesLoading || status === 'loadingParties'}
partyId={partyId}
date={date}
number={number}
saving={saving}
onPartyChange={this.handlePartyChange}
onDateChange={this.handleDateChange}
onNumberChange={this.handleNumberChange}
/>
{status === 'ready' ? this.renderArticles() : null}
</PanelTileGrid>
);
}
}
export default ManifestForm;

83
src/components/manifest/ManifestFormLine.jsx Normal file
View File

@@ -0,0 +1,83 @@
import { PureComponent } from 'react';
import IconButton from '@mui/material/IconButton';
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';
import TextField from '@mui/material/TextField';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import { LINE_COLUMNS } from './manifestConfig';
class ManifestFormLine extends PureComponent {
constructor(props) {
super(props);
this.handleRemove = this.handleRemove.bind(this);
}
handleRemove() {
this.props.onRemove(this.props.line.key);
}
renderField(column) {
const { id, align, type } = column;
const { line, saving, onChange } = this.props;
return (
<TextField
size="small"
fullWidth
type={type}
value={line[id]}
disabled={saving}
autoComplete="off"
onChange={(e) => onChange(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,
},
}}
/>
);
}
render() {
const { columns = LINE_COLUMNS, saving } = this.props;
return (
<TableRow>
{columns.map((col) => (
<TableCell
key={col.id}
align={col.align}
sx={{ py: 0.75, verticalAlign: 'middle' }}
>
{this.renderField(col)}
</TableCell>
))}
<TableCell padding="checkbox" sx={{ py: 0.75 }}>
<IconButton
size="small"
aria-label="Zeile entfernen"
disabled={saving}
onClick={this.handleRemove}
>
<DeleteOutlinedIcon fontSize="small" />
</IconButton>
</TableCell>
</TableRow>
);
}
}
export default ManifestFormLine;

93
src/components/manifest/ManifestHeader.jsx Normal file
View File

@@ -0,0 +1,93 @@
import { PureComponent } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import SingleLineTextEdit from '../SingleLineTextEdit';
import { PanelTile } from '../panels';
import { partyDisplayName } from './manifestConfig';
class ManifestHeader extends PureComponent {
constructor(props) {
super(props);
this.handlePartyChange = this.handlePartyChange.bind(this);
}
handlePartyChange(_event, option) {
this.props.onPartyChange(option?.id ?? null);
}
render() {
const {
kind,
headerColor,
dateLabel,
partyLabel,
parties,
partiesLoading,
partyId,
date,
number,
saving,
onDateChange,
onNumberChange,
} = this.props;
const selected = parties.find((row) => row.id === partyId) ?? null;
return (
<PanelTile wide={3} minHeight={160} color={headerColor} title="Kopfdaten">
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
<TextField
size="small"
type="date"
label={dateLabel}
value={date}
disabled={saving}
onChange={(e) => onDateChange(e.target.value)}
autoComplete="off"
slotProps={{
inputLabel: { shrink: true },
htmlInput: { spellCheck: false },
}}
sx={{ minWidth: 220 }}
/>
<Autocomplete
size="small"
options={parties}
value={selected}
loading={Boolean(partiesLoading)}
disabled={saving}
getOptionLabel={(option) => partyDisplayName(kind, option)}
isOptionEqualToValue={(option, value) => option.id === value.id}
onChange={this.handlePartyChange}
sx={{ flex: 1, minWidth: 220 }}
renderInput={(params) => (
<TextField
{...params}
label={partyLabel}
slotProps={{
...params.slotProps,
htmlInput: {
...params.slotProps?.htmlInput,
spellCheck: false,
autoComplete: 'off',
},
}}
/>
)}
/>
<SingleLineTextEdit
size="small"
label="Nummer"
value={number}
disabled={saving}
onChange={onNumberChange}
sx={{ minWidth: 180, flex: 1 }}
/>
</Stack>
</PanelTile>
);
}
}
export default ManifestHeader;

91
src/components/manifest/ManifestLines.jsx Normal file
View File

@@ -0,0 +1,91 @@
import { PureComponent } from 'react';
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 AddIcon from '@mui/icons-material/Add';
import { PanelTile } from '../panels';
import { LINE_COLUMNS } from './manifestConfig';
import ManifestFormLine from './ManifestFormLine';
class ManifestLines extends PureComponent {
render() {
const {
lines,
saving,
linesColor,
onLineChange,
onAddLine,
onRemoveLine,
onSave,
columns = LINE_COLUMNS,
} = this.props;
return (
<PanelTile wide={3} minHeight={280} color={linesColor} 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: linesColor,
}}
>
{col.label}
</TableCell>
))}
<TableCell padding="checkbox" sx={{ bgcolor: linesColor }} />
</TableRow>
</TableHead>
<TableBody>
{lines.map((line) => (
<ManifestFormLine
key={line.key}
line={line}
columns={columns}
saving={saving}
onChange={onLineChange}
onRemove={onRemoveLine}
/>
))}
</TableBody>
</Table>
</TableContainer>
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
<Button
size="small"
startIcon={<AddIcon />}
disabled={saving}
onClick={onAddLine}
>
Zeile hinzufügen
</Button>
<Box sx={{ flex: 1 }} />
<Button
variant="contained"
size="small"
disabled={saving}
onClick={onSave}
>
{saving ? 'Speichern…' : 'Speichern'}
</Button>
</Box>
</Stack>
</PanelTile>
);
}
}
export default ManifestLines;

206
src/components/manifest/ManifestList.jsx Normal file
View File

@@ -0,0 +1,206 @@
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 DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
import { enqueueSnackbar } from 'notistack';
import BackendError from '../BackendError';
import { PanelTile, PanelTileGrid } from '../panels';
import { StorageManagerContext } from '../../api/storageManagerContext';
import { router } from '../../appRouter';
import { backendErrorFrom } from '../../utils/backendError';
import { notifyError } from '../../utils/notify';
import {
formatDate,
loadParties,
manifestConfig,
partyDisplayName,
sortDocs,
} from './manifestConfig';
class ManifestList extends PureComponent {
static contextType = StorageManagerContext;
constructor(props) {
super(props);
this.cfg = manifestConfig(props.kind);
this.state = {
status: 'loading',
error: null,
docs: [],
partiesById: {},
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() {
const cfg = this.cfg;
this.setState({ status: 'loading', error: null });
try {
const [docs, parties] = await Promise.all([
cfg.listPromise(this.context),
loadParties(this.props.kind, this.context),
]);
if (this._cancelled) return;
this.setState({
status: 'ready',
docs: sortDocs(docs),
partiesById: cfg.partiesByIdFromList(parties),
});
} catch (err) {
if (this._cancelled) return;
this.setState({ status: 'failed', error: backendErrorFrom(err) });
}
}
handleRetry() {
void this.load();
}
handleCreate() {
void router.navigate(this.cfg.createPath);
}
handleEdit(doc) {
void router.navigate(this.cfg.editPath(doc.id));
}
async handleDelete(doc) {
if (this.state.busyId != null) return;
if (!window.confirm(this.cfg.confirmDelete(doc.number))) return;
const cfg = this.cfg;
this.setState({ busyId: doc.id });
try {
await this.context[cfg.api].delete(doc.id);
const list = await this.context[cfg.updateCache]();
if (this._cancelled) return;
this.setState({
docs: sortDocs(list),
busyId: null,
});
enqueueSnackbar(cfg.deletedMsg, { variant: 'success' });
} catch (err) {
if (this._cancelled) return;
notifyError(err);
this.setState({ busyId: null });
}
}
partyName(partyId) {
if (partyId == null) return null;
return partyDisplayName(
this.props.kind,
this.state.partiesById[partyId],
);
}
render() {
const { status, error, docs, busyId } = this.state;
const cfg = this.cfg;
const partyField = cfg.partyField;
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={cfg.listColor}>
<Stack spacing={2}>
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
<Button variant="contained" size="small" onClick={this.handleCreate}>
{cfg.createButton}
</Button>
</Box>
{docs.length === 0 ? (
<Typography variant="body2" color="text.secondary">
{cfg.emptyList}
</Typography>
) : (
<TableContainer>
<Table size="small">
<TableHead>
<TableRow>
<TableCell>Nummer</TableCell>
<TableCell>{cfg.dateLabel}</TableCell>
<TableCell>{cfg.partyLabel}</TableCell>
<TableCell padding="checkbox" />
</TableRow>
</TableHead>
<TableBody>
{docs.map((row) => (
<TableRow
key={row.id}
hover
sx={{ cursor: 'pointer' }}
onClick={() => this.handleEdit(row)}
>
<TableCell>{row.number}</TableCell>
<TableCell>{formatDate(row.date)}</TableCell>
<TableCell>{this.partyName(row[partyField])}</TableCell>
<TableCell
padding="checkbox"
onClick={(e) => e.stopPropagation()}
>
<IconButton
size="small"
aria-label={`„${row.number}“ bearbeiten`}
onClick={() => this.handleEdit(row)}
>
<EditOutlinedIcon fontSize="small" />
</IconButton>
<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 ManifestList;

13
src/components/manifest/index.js Normal file
View File

@@ -0,0 +1,13 @@
export { default as ManifestList } from './ManifestList';
export { default as ManifestForm } from './ManifestForm';
export { default as ManifestHeader } from './ManifestHeader';
export { default as ManifestLines } from './ManifestLines';
export { default as ManifestFormLine } from './ManifestFormLine';
export { withManifestId } from './withManifestId';
export {
manifestConfig,
LINE_COLUMNS,
emptyLine,
lineFromApi,
buildManifestBody,
} from './manifestConfig';

264
src/components/manifest/manifestConfig.js Normal file
View File

@@ -0,0 +1,264 @@
/** Groups that are not sales customers (filter client-side). */
export const EXCLUDED_CUSTOMER_GROUP_NAMES = new Set(['Lieferanten', 'POS']);
export function entityDisplayName(entity) {
if (!entity) return '';
return [entity.firstName, entity.name].filter(Boolean).join(' ');
}
export function sortEntities(entities) {
return [...entities].sort((a, b) => {
const byName = String(a.name).localeCompare(String(b.name), 'de');
if (byName !== 0) return byName;
return String(a.firstName ?? '').localeCompare(String(b.firstName ?? ''), 'de');
});
}
/**
* Customers = entities whose customergroup.name is not Lieferanten/POS.
*/
export function filterCustomerEntities(entities, groups) {
const excludedIds = new Set(
groups
.filter((g) => EXCLUDED_CUSTOMER_GROUP_NAMES.has(g.name))
.map((g) => g.id),
);
return sortEntities(
entities.filter((e) => !excludedIds.has(e.customergroupId)),
);
}
export function sortSuppliers(suppliers) {
return [...suppliers].sort((a, b) =>
String(a.name).localeCompare(String(b.name), 'de'),
);
}
export function sortDocs(docs) {
return [...docs].sort((a, b) => String(b.date).localeCompare(String(a.date)));
}
export function formatDate(iso) {
const d = new Date(iso);
if (Number.isNaN(d.getTime())) return iso;
return d.toLocaleDateString('de-DE');
}
export function dateInputValue(iso) {
if (!iso) return '';
const d = new Date(iso);
if (Number.isNaN(d.getTime())) return String(iso).slice(0, 10);
return d.toISOString().slice(0, 10);
}
export function emptyLine() {
return {
key: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
amount: '',
sku: '',
tax: '',
rebate: '',
net: '',
};
}
export function lineFromApi(row) {
return {
key: `line-${row.id}`,
amount: row.amount == null ? '' : String(row.amount),
sku: row.sku ?? '',
tax: row.tax == null ? '' : String(row.tax),
rebate: row.rebate == null ? '' : String(row.rebate),
net: row.net == null ? '' : String(row.net),
};
}
function parseNum(value) {
if (value == null || value === '') return null;
const n = Number(String(value).trim().replace(',', '.'));
return Number.isFinite(n) ? n : null;
}
/** Build create/update line array. Throws Error on client validation. */
export function buildLines(lines, { requireAtLeastOne }) {
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 (requireAtLeastOne && outLines.length === 0) {
throw new Error('Mindestens eine Artikelzeile nötig.');
}
return outLines;
}
/**
* @param {{ number: string, date: string, partyId: number|null, lines: object[] }} form
* @param {{ partyField: 'supplierId'|'entityId', requireAtLeastOne: boolean }} opts
*/
export function buildManifestBody(form, { partyField, requireAtLeastOne }) {
const number = String(form.number ?? '').trim();
const date = form.date;
if (!number) throw new Error('Nummer fehlt.');
if (!date) throw new Error('Datum fehlt.');
const body = {
number,
date,
lines: buildLines(form.lines, { requireAtLeastOne }),
};
if (form.partyId != null) body[partyField] = form.partyId;
else if (!requireAtLeastOne) body[partyField] = null;
return body;
}
export const LINE_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' },
];
/** @typedef {'delivery'|'quote'|'order'} ManifestKind */
/**
* Load party options for Autocomplete / list name lookup.
* @param {ManifestKind} kind
* @param {object} ctx StorageManager instance
*/
export async function loadParties(kind, ctx) {
if (kind === 'delivery') {
const list = ctx.suppliers ?? (await ctx.supplierPromise);
return sortSuppliers(list);
}
const [entities, groups] = await Promise.all([
ctx.entities ?? ctx.entityPromise,
ctx.customergroups ?? ctx.customergroupPromise,
]);
return filterCustomerEntities(entities, groups);
}
export function partyDisplayName(kind, party) {
if (!party) return '';
if (kind === 'delivery') return String(party.name ?? '');
return entityDisplayName(party);
}
/**
* @param {ManifestKind} kind
*/
export function manifestConfig(kind) {
if (kind === 'delivery') {
return {
kind: 'delivery',
api: 'delivery',
listField: 'deliveries',
docField: 'delivery',
partyField: 'supplierId',
listPath: '/lieferung',
createPath: '/lieferung/neu',
editPath: (id) => `/lieferung/${id}`,
dateLabel: 'Lieferdatum',
partyLabel: 'Lieferant',
emptyList: 'Noch keine Lieferungen.',
createButton: 'Neue Lieferung',
createdMsg: 'Lieferung angelegt.',
savedMsg: 'Lieferung gespeichert.',
deletedMsg: 'Lieferung gelöscht.',
confirmDelete: (number) => `Lieferung „${number}“ wirklich löschen?`,
invalidId: 'Ungültige Lieferungs-ID.',
partyGateMessage: 'Lieferant wählen, um Artikel zu erfassen.',
getPathLabel: 'GET /api/delivery/:id',
postPathLabel: 'POST /api/delivery',
patchPathLabel: 'PATCH /api/delivery/:id',
listColor: '#fed7aa',
headerColor: '#fed7aa',
linesColor: '#bbf7d0',
requirePartyBeforeLines: true,
updateCache: 'updateDelivery',
listPromise: (ctx) => ctx.deliveries ?? ctx.deliveryPromise,
partiesByIdFromList: (parties) =>
Object.fromEntries(parties.map((row) => [row.id, row])),
};
}
if (kind === 'quote') {
return {
kind: 'quote',
api: 'quote',
listField: 'quotes',
docField: 'quote',
partyField: 'entityId',
listPath: '/auftrag',
createPath: '/auftrag/neu',
editPath: (id) => `/auftrag/${id}`,
dateLabel: 'Gültig bis',
partyLabel: 'Kunde',
emptyList: 'Noch keine Angebote.',
createButton: 'Neues Angebot',
createdMsg: 'Angebot angelegt.',
savedMsg: 'Angebot gespeichert.',
deletedMsg: 'Angebot gelöscht.',
confirmDelete: (number) => `Angebot „${number}“ wirklich löschen?`,
invalidId: 'Ungültige Angebots-ID.',
partyGateMessage: null,
getPathLabel: 'GET /api/quote/:id',
postPathLabel: 'POST /api/quote',
patchPathLabel: 'PATCH /api/quote/:id',
listColor: '#fde68a',
headerColor: '#fde68a',
linesColor: '#bbf7d0',
requirePartyBeforeLines: false,
updateCache: 'updateQuote',
listPromise: (ctx) => ctx.quotes ?? ctx.quotePromise,
partiesByIdFromList: (parties) =>
Object.fromEntries(parties.map((row) => [row.id, row])),
};
}
if (kind === 'order') {
return {
kind: 'order',
api: 'order',
listField: 'orders',
docField: 'order',
partyField: 'entityId',
listPath: '/auftrag/bestellung',
createPath: '/auftrag/bestellung/neu',
editPath: (id) => `/auftrag/bestellung/${id}`,
dateLabel: 'Lieferdatum',
partyLabel: 'Kunde',
emptyList: 'Noch keine Bestellungen.',
createButton: 'Neue Bestellung',
createdMsg: 'Bestellung angelegt.',
savedMsg: 'Bestellung gespeichert.',
deletedMsg: 'Bestellung gelöscht.',
confirmDelete: (number) => `Bestellung „${number}“ wirklich löschen?`,
invalidId: 'Ungültige Bestellungs-ID.',
partyGateMessage: null,
getPathLabel: 'GET /api/order/:id',
postPathLabel: 'POST /api/order',
patchPathLabel: 'PATCH /api/order/:id',
listColor: '#c4b5fd',
headerColor: '#c4b5fd',
linesColor: '#bbf7d0',
requirePartyBeforeLines: false,
updateCache: 'updateOrder',
listPromise: (ctx) => ctx.orders ?? ctx.orderPromise,
partiesByIdFromList: (parties) =>
Object.fromEntries(parties.map((row) => [row.id, row])),
};
}
throw new Error(`Unknown manifest kind: ${kind}`);
}

20
src/components/manifest/withManifestId.jsx Normal file
View File

@@ -0,0 +1,20 @@
import { useParams } from 'react-router-dom';
/**
* Router glue only: maps a path param to `docId` (integer or null).
* Function component is intentional — useParams has no class equivalent.
*/
export function withManifestId(paramName, Wrapped) {
function ManifestIdWrapper(props) {
const params = useParams();
const raw = params[paramName];
const docId = Number(raw);
return (
<Wrapped
{...props}
docId={Number.isInteger(docId) ? docId : null}
/>
);
}
return ManifestIdWrapper;
}

13
src/nav.js
View File

@@ -86,7 +86,18 @@ export function resolveActiveSub(pathname, sectionPath) {
sectionPath === '/kunde' && rest && !knownSegments.has(rest);
const isLieferungDetail =
sectionPath === '/lieferung' && rest && !knownSegments.has(rest);
if (isArticleDetail || isKundeDetail || isLieferungDetail) return null;
// Angebot neu/edit: /auftrag/neu or /auftrag/:quoteId (not a known sub)
const isAngebotDoc =
sectionPath === '/auftrag' && rest && !knownSegments.has(rest);
if (isArticleDetail || isKundeDetail || isLieferungDetail || isAngebotDoc) {
return null;
}
// Keep Bestellung/Ausliefern/Retoure active for nested paths
// (e.g. /auftrag/bestellung/neu).
if (sectionPath === '/auftrag' && rest && knownSegments.has(rest)) {
return rest;
}
const active = subNav.find((item) => {
if (item.segment === 'kategorien') {

8
src/pages/auftrag/bestellung.jsx
View File

@@ -1,13 +1,9 @@
import { PureComponent } from 'react';
import Typography from '@mui/material/Typography';
import { ManifestList } from '../../components/manifest';
class AuftragBestellungPage extends PureComponent {
render() {
return (
<Typography color="text.secondary">
Bestellung — Inhalt folgt.
</Typography>
);
return <ManifestList kind="order" />;
}
}

16
src/pages/auftrag/bestellungEdit.jsx Normal file
View File

@@ -0,0 +1,16 @@
import { PureComponent } from 'react';
import { ManifestForm, withManifestId } from '../../components/manifest';
class AuftragBestellungEditPage extends PureComponent {
render() {
return (
<ManifestForm
kind="order"
mode="edit"
docId={this.props.docId}
/>
);
}
}
export default withManifestId('orderId', AuftragBestellungEditPage);

10
src/pages/auftrag/bestellungNeu.jsx Normal file
View File

@@ -0,0 +1,10 @@
import { PureComponent } from 'react';
import { ManifestForm } from '../../components/manifest';
class AuftragBestellungNeuPage extends PureComponent {
render() {
return <ManifestForm kind="order" mode="create" />;
}
}
export default AuftragBestellungNeuPage;

16
src/pages/auftrag/edit.jsx Normal file
View File

@@ -0,0 +1,16 @@
import { PureComponent } from 'react';
import { ManifestForm, withManifestId } from '../../components/manifest';
class AuftragAngebotEditPage extends PureComponent {
render() {
return (
<ManifestForm
kind="quote"
mode="edit"
docId={this.props.docId}
/>
);
}
}
export default withManifestId('quoteId', AuftragAngebotEditPage);

8
src/pages/auftrag/index.jsx
View File

@@ -1,13 +1,9 @@
import { PureComponent } from 'react';
import Typography from '@mui/material/Typography';
import { ManifestList } from '../../components/manifest';
class AuftragAngebotPage extends PureComponent {
render() {
return (
<Typography color="text.secondary">
Angebot — Inhalt folgt.
</Typography>
);
return <ManifestList kind="quote" />;
}
}

10
src/pages/auftrag/neu.jsx Normal file
View File

@@ -0,0 +1,10 @@
import { PureComponent } from 'react';
import { ManifestForm } from '../../components/manifest';
class AuftragAngebotNeuPage extends PureComponent {
render() {
return <ManifestForm kind="quote" mode="create" />;
}
}
export default AuftragAngebotNeuPage;

34
src/pages/kunde/neu.jsx
View File

@@ -148,25 +148,21 @@ class KundeNeuPage extends PureComponent {
getOptionLabel={(option) => String(option.name ?? '')}
isOptionEqualToValue={(option, value) => option.id === value.id}
onChange={this.handleGroupChange}
renderInput={(params) => {
const { InputProps, inputProps, ...other } = params;
return (
<TextField
{...other}
label="Kundengruppe"
required
autoComplete="off"
slotProps={{
input: InputProps,
htmlInput: {
...inputProps,
spellCheck: false,
autoComplete: 'off',
},
}}
/>
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Kundengruppe"
required
slotProps={{
...params.slotProps,
htmlInput: {
...params.slotProps?.htmlInput,
spellCheck: false,
autoComplete: 'off',
},
}}
/>
)}
/>
<SingleLineTextEdit
size="small"

467
src/pages/lieferung/edit.jsx
View File

@@ -1,469 +1,16 @@
import { PureComponent } from 'react';
import { useParams } from 'react-router-dom';
import Autocomplete from '@mui/material/Autocomplete';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';
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 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 { requireArray, requireDefined, requireObject } from '../../utils/apiShape';
import { backendErrorFrom } from '../../utils/backendError';
import { notifyError } from '../../utils/notify';
function withDeliveryRoute(Wrapped) {
function DeliveryRouteWrapper(props) {
const { deliveryId: raw } = useParams();
const deliveryId = Number(raw);
return (
<Wrapped
{...props}
deliveryId={Number.isInteger(deliveryId) ? deliveryId : null}
/>
);
}
return DeliveryRouteWrapper;
}
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 lineFromApi(row) {
return {
key: `line-${row.id}`,
amount: row.amount == null ? '' : String(row.amount),
sku: row.sku ?? '',
tax: row.tax == null ? '' : String(row.tax),
rebate: row.rebate == null ? '' : String(row.rebate),
net: row.net == null ? '' : String(row.net),
};
}
function dateInputValue(iso) {
if (!iso) return '';
const d = new Date(iso);
if (Number.isNaN(d.getTime())) return String(iso).slice(0, 10);
return d.toISOString().slice(0, 10);
}
function parseNum(value) {
if (value == null || value === '') return null;
const n = Number(String(value).trim().replace(',', '.'));
return Number.isFinite(n) ? n : null;
}
/** Build PATCH /api/delivery/:id body. Throws Error on client validation. */
function buildUpdateBody({ shippingNumber, estimatedDeliveryDate, supplierId, lines }) {
const number = shippingNumber.trim();
const date = estimatedDeliveryDate;
if (!number) throw new Error('Nummer 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);
}
return {
number,
date,
supplierId: supplierId ?? null,
lines: outLines,
};
}
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' },
];
import { ManifestForm, withManifestId } from '../../components/manifest';
class LieferungEditPage extends PureComponent {
static contextType = StorageManagerContext;
constructor(props) {
super(props);
this.state = {
status: 'loading',
error: null,
suppliers: [],
estimatedDeliveryDate: '',
supplierId: null,
shippingNumber: '',
lines: [emptyLine()],
saving: false,
};
this._cancelled = false;
this.handleRetry = this.handleRetry.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.load();
}
componentDidUpdate(prevProps) {
if (prevProps.deliveryId !== this.props.deliveryId) {
void this.load();
}
}
componentWillUnmount() {
this._cancelled = true;
}
async load() {
const { deliveryId } = this.props;
if (deliveryId == null) {
this.setState({
status: 'failed',
error: backendErrorFrom(new Error('Ungültige Lieferungs-ID.')),
});
return;
}
this.setState({ status: 'loading', error: null });
try {
const [deliveryRes, suppliers] = await Promise.all([
this.context.delivery.get(deliveryId),
this.context.suppliers ?? this.context.supplierPromise,
]);
if (this._cancelled) return;
requireObject(deliveryRes, 'GET /api/delivery/:id');
requireObject(deliveryRes.delivery, 'delivery');
const delivery = deliveryRes.delivery;
const apiLines = requireArray(delivery.lines, 'delivery.lines');
const lines =
apiLines.length > 0 ? apiLines.map(lineFromApi) : [emptyLine()];
this.setState({
status: 'ready',
suppliers: sortSuppliers(suppliers),
estimatedDeliveryDate: dateInputValue(delivery.date),
supplierId: delivery.supplierId,
shippingNumber: delivery.number ?? '',
lines,
});
} catch (err) {
if (this._cancelled) return;
this.setState({ status: 'failed', error: backendErrorFrom(err) });
}
}
handleRetry() {
void this.load();
}
handleSupplierChange(_event, option) {
this.setState({ supplierId: option?.id ?? null });
}
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() {
const { deliveryId } = this.props;
if (this.state.saving || deliveryId == null) return;
let body;
try {
body = buildUpdateBody(this.state);
} catch (err) {
notifyError(err);
return;
}
this.setState({ saving: true });
try {
const data = await this.context.delivery.update(deliveryId, body);
requireObject(data, 'PATCH /api/delivery/:id');
requireObject(data.delivery, 'delivery');
requireDefined(data.delivery.id, 'delivery.id');
await this.context.updateDelivery();
if (this._cancelled) return;
const apiLines = requireArray(data.delivery.lines, 'delivery.lines');
this.setState({
estimatedDeliveryDate: dateInputValue(data.delivery.date),
supplierId: data.delivery.supplierId,
shippingNumber: data.delivery.number ?? '',
lines:
apiLines.length > 0 ? apiLines.map(lineFromApi) : [emptyLine()],
saving: false,
});
enqueueSnackbar('Lieferung gespeichert.', { variant: 'success' });
} catch (err) {
if (this._cancelled) return;
notifyError(err);
this.setState({ saving: false });
}
}
renderHeader() {
const {
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}
disabled={saving}
getOptionLabel={(option) => String(option.name ?? '')}
isOptionEqualToValue={(option, value) => option.id === value.id}
onChange={this.handleSupplierChange}
sx={{ flex: 1, minWidth: 220 }}
renderInput={(params) => {
const { InputProps, inputProps, ...other } = params;
return (
<TextField
{...other}
label="Lieferant"
autoComplete="off"
slotProps={{
input: InputProps,
htmlInput: {
...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 { lines, saving } = this.state;
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 { status, error } = 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>
{this.renderHeader()}
{this.renderArticles()}
</PanelTileGrid>
<ManifestForm
kind="delivery"
mode="edit"
docId={this.props.docId}
/>
);
}
}
export default withDeliveryRoute(LieferungEditPage);
export default withManifestId('deliveryId', LieferungEditPage);

203
src/pages/lieferung/index.jsx
View File

@@ -1,208 +1,9 @@
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 DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
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';
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');
}
import { ManifestList } from '../../components/manifest';
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');
}
handleEdit(delivery) {
void router.navigate(`/lieferung/${delivery.id}`);
}
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
sx={{ cursor: 'pointer' }}
onClick={() => this.handleEdit(row)}
>
<TableCell>{row.number}</TableCell>
<TableCell>{formatDate(row.date)}</TableCell>
<TableCell>{this.supplierName(row.supplierId)}</TableCell>
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
<IconButton
size="small"
aria-label={`„${row.number}“ bearbeiten`}
onClick={() => this.handleEdit(row)}
>
<EditOutlinedIcon fontSize="small" />
</IconButton>
<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>
);
return <ManifestList kind="delivery" />;
}
}

407
src/pages/lieferung/neu.jsx
View File

@@ -1,412 +1,9 @@
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' },
];
import { ManifestForm } from '../../components/manifest';
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/${data.delivery.id}`);
} 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) => {
const { InputProps, inputProps, ...other } = params;
return (
<TextField
{...other}
label="Lieferant"
autoComplete="off"
slotProps={{
input: InputProps,
htmlInput: {
...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>
);
return <ManifestForm kind="delivery" mode="create" />;
}
}