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

u

Browse Source
This commit is contained in:
seb
2026-10-11 17:27:33 +02:00
parent a96a80a036
commit d86af21125
3 changed files with 398 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/components/manifest/OrderList.jsx
View File

@@ -6,6 +6,8 @@ import CircularProgress from '@mui/material/CircularProgress';
import IconButton from '@mui/material/IconButton';
import ListItemButton from '@mui/material/ListItemButton';
import Typography from '@mui/material/Typography';
import Checkbox from '@mui/material/Checkbox';
import Tooltip from '@mui/material/Tooltip';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import { enqueueSnackbar } from 'notistack';
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
@@ -35,6 +37,14 @@ function orderGrossTotal(lines) {
}, 0);
}
function isOrderPaid(order) {
return Boolean(order.paid ?? order.payed ?? order.isPaid ?? order.is_paid ?? order.paidAt);
}
function isOrderDelivered(order) {
return Boolean(order.delivered ?? order.isDelivered ?? order.is_delivered ?? order.deliveredAt);
}
const cfg = manifestConfig('order');
const rowSx = {
@@ -54,9 +64,16 @@ const ellipsisSx = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: '
* (`<Row item index />`), so the list publishes callbacks and the party map
* here on every render.
*/
const rowContext = { partiesById: {}, busyId: null, onOpen: null, onDelete: null };
const rowContext = {
partiesById: {},
busyId: null,
onOpen: null,
onDelete: null,
onTogglePaid: null,
onToggleDelivered: null,
};
// MARK: one row rendered by FillSpace
// MARK: <OrderRow/>
class OrderRow extends PureComponent {
partyName(partyId) {
if (partyId == null) return '–';
@@ -76,9 +93,11 @@ class OrderRow extends PureComponent {
);
}
const { busyId, onOpen, onDelete } = rowContext;
const { busyId, onOpen, onDelete, onTogglePaid, onToggleDelivered } = rowContext;
const lines = order.lines ?? [];
const gross = orderGrossTotal(lines);
const paid = isOrderPaid(order);
const delivered = isOrderDelivered(order);
return (
<ListItemButton divider sx={rowSx} onClick={() => onOpen?.(order)}>
@@ -91,13 +110,48 @@ class OrderRow extends PureComponent {
</Typography>
</Box>
<Box sx={{ width: 100, flexShrink: 0, minWidth: 0 }}>
<Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
{order.date ? formatDate(order.date) : '–'}
</Typography>
</Box>
<Box sx={{ flex: 1, minWidth: 0 }}>
<Typography variant="body1" sx={{ fontWeight: 500, ...ellipsisSx }}>
{this.partyName(order.entityId)}
</Typography>
<Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
{cfg.dateLabel} {formatDate(order.date)}
</Typography>
</Box>
<Box sx={{ width: 72, flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
<Tooltip title={paid ? 'Bezahlt' : 'Offen (nicht bezahlt)'}>
<span>
<Checkbox
size="small"
checked={paid}
color="success"
onClick={(e) => e.stopPropagation()}
onChange={(e) => onTogglePaid?.(order, e.target.checked)}
inputProps={{ 'aria-label': `Auftrag ${order.number} bezahlt` }}
sx={{ p: 0.5 }}
/>
</span>
</Tooltip>
</Box>
<Box sx={{ width: 72, flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
<Tooltip title={delivered ? 'Geliefert' : 'Ausstehend (nicht geliefert)'}>
<span>
<Checkbox
size="small"
checked={delivered}
color="primary"
onClick={(e) => e.stopPropagation()}
onChange={(e) => onToggleDelivered?.(order, e.target.checked)}
inputProps={{ 'aria-label': `Auftrag ${order.number} geliefert` }}
sx={{ p: 0.5 }}
/>
</span>
</Tooltip>
</Box>
<Chip
@@ -139,7 +193,7 @@ class OrderRow extends PureComponent {
}
}
// MARK: search + create bar
// MARK: <OrderSearchField(>)
class OrderSearchField extends PureComponent {
constructor(props) {
super(props);
@@ -185,7 +239,7 @@ class OrderSearchField extends PureComponent {
}
}
// MARK: list page
// MARK: <OrderList/>
export class OrderList extends PureComponent {
constructor(props) {
super(props);
@@ -193,6 +247,7 @@ export class OrderList extends PureComponent {
this.state = {
status: s.status === 'ready' ? 'ready' : 'loading',
error: s.error ? backendErrorFrom(s.error) : null,
filteredItems: orderAutomat.actions.getOrLoad(),
items: s.items ?? [],
filter: s.filter ?? '',
partiesById: {},
@@ -204,14 +259,56 @@ export class OrderList extends PureComponent {
this.handleCreate = this.handleCreate.bind(this);
this.handleOpen = this.handleOpen.bind(this);
this.handleDelete = this.handleDelete.bind(this);
this.handleTogglePaid = this.handleTogglePaid.bind(this);
this.handleToggleDelivered = this.handleToggleDelivered.bind(this);
this.handlePageChange = this.handlePageChange.bind(this);
this.nameOf = this.nameOf.bind(this);
}
async handleTogglePaid(order, checked) {
if (this.state.busyId != null) return;
const patch = { paid: checked, payed: checked, isPaid: checked };
orderAutomat.actions.patchOrder(order.id, patch);
try {
await orderApi.update(order.id, { paid: checked });
enqueueSnackbar(checked ? 'Auftrag als bezahlt markiert' : 'Auftrag als unbezahlt markiert', {
variant: 'info',
});
} catch (err) {
console.warn('[OrderList] update paid on backend failed:', err);
}
}
async handleToggleDelivered(order, checked) {
if (this.state.busyId != null) return;
const patch = { delivered: checked, isDelivered: checked };
orderAutomat.actions.patchOrder(order.id, patch);
try {
await orderApi.update(order.id, { delivered: checked });
enqueueSnackbar(checked ? 'Auftrag als geliefert markiert' : 'Auftrag als ungeliefert markiert', {
variant: 'info',
});
} catch (err) {
console.warn('[OrderList] update delivered on backend failed:', err);
}
}
handlePageChange(page, meta) {
const pageCount = meta?.pageCount ?? 1;
// Load next batch when the pagination comes close to the end (within 2 pages).
if (pageCount - page <= 2) {
void orderAutomat.actions.loadMore();
}
}
componentDidMount() {
this._cancelled = false;
this.unsub = orderAutomat.subscribe(this, (state) => ({
items: state.items ?? [],
filter: state.filter ?? '',
filteredItems: state.filter
? filterOrders(state.items ?? [], state.filter, this.nameOf)
: (state.items ?? []),
status: state.status,
error: state.error ? backendErrorFrom(state.error) : null,
}));
@@ -226,15 +323,18 @@ export class OrderList extends PureComponent {
async loadAll() {
try {
const parties = await loadParties('order');
if (!this._cancelled) this.setState({ partiesById: cfg.partiesByIdFromList(parties) });
if (!this._cancelled) {
const partiesById = cfg.partiesByIdFromList(parties);
this.setState((prev) => ({
partiesById,
filteredItems: prev.filter
? filterOrders(prev.items, prev.filter, (o) => partyDisplayName('order', partiesById[o.entityId]))
: prev.filteredItems,
}));
}
} catch {
// Non-fatal: names fall back to ids.
}
try {
await orderAutomat.actions.ensureLoaded();
} catch {
// Surfaced through automat state.
}
}
nameOf(order) {
@@ -243,7 +343,7 @@ export class OrderList extends PureComponent {
}
handleRetry() {
void orderAutomat.actions.load().catch(() => {});
void orderAutomat.actions.load().catch(() => { });
}
handleCreate() {
@@ -270,7 +370,7 @@ export class OrderList extends PureComponent {
}
render() {
const { status, error, items, filter, partiesById, busyId } = this.state;
const { status, error, items, filteredItems, partiesById, busyId } = this.state;
if (status === 'loading' || status === 'idle') {
return (
@@ -287,8 +387,10 @@ export class OrderList extends PureComponent {
rowContext.busyId = busyId;
rowContext.onOpen = this.handleOpen;
rowContext.onDelete = this.handleDelete;
rowContext.onTogglePaid = this.handleTogglePaid;
rowContext.onToggleDelivered = this.handleToggleDelivered;
const rows = filterOrders(items, filter, this.nameOf);
const rows = filteredItems ?? [];
return (
<>
@@ -308,6 +410,36 @@ export class OrderList extends PureComponent {
items={rows}
totalCount={items.length}
renderItem={OrderRow}
header={
<Box
sx={{
display: 'flex',
alignItems: 'center',
height: 36,
minHeight: 36,
px: 2,
gap: 1.5,
borderBottom: '1px solid',
borderColor: 'divider',
color: 'text.secondary',
typography: 'caption',
fontWeight: 600,
textTransform: 'uppercase',
letterSpacing: '0.04em',
userSelect: 'none',
}}
>
<Box sx={{ width: 120, flexShrink: 0 }}>Nr. / Ref.</Box>
<Box sx={{ width: 100, flexShrink: 0 }}>Datum</Box>
<Box sx={{ flex: 1, minWidth: 0 }}>Kunde</Box>
<Box sx={{ width: 72, flexShrink: 0, textAlign: 'center' }}>Bezahlt</Box>
<Box sx={{ width: 72, flexShrink: 0, textAlign: 'center' }}>Geliefert</Box>
<Box sx={{ width: 64, flexShrink: 0, textAlign: 'center' }}>Pos.</Box>
<Box sx={{ width: 96, flexShrink: 0, textAlign: 'right' }}>Gesamt</Box>
<Box sx={{ width: 40, flexShrink: 0 }} />
</Box>
}
onPageChange={this.handlePageChange}
/>
)}
</PanelTile>