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-19 01:19:34 +02:00
parent 037a2b0ae4
commit 578387adca
2 changed files with 2 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/components/manifest/OrderPaymentList.jsx
View File

@@ -1,28 +1,21 @@
import { PureComponent } from 'react'; import { PureComponent } from 'react';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Chip from '@mui/material/Chip'; import Chip from '@mui/material/Chip';
import CircularProgress from '@mui/material/CircularProgress'; import CircularProgress from '@mui/material/CircularProgress';
import Divider from '@mui/material/Divider'; import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton'; import IconButton from '@mui/material/IconButton';
import ListItemButton from '@mui/material/ListItemButton'; import ListItemButton from '@mui/material/ListItemButton';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import MenuItem from '@mui/material/MenuItem';
import PaymentsIcon from '@mui/icons-material/Payments'; import PaymentsIcon from '@mui/icons-material/Payments';
import AccountBalanceIcon from '@mui/icons-material/AccountBalance'; import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
import PointOfSaleIcon from '@mui/icons-material/PointOfSale'; import PointOfSaleIcon from '@mui/icons-material/PointOfSale';
import CreditCardIcon from '@mui/icons-material/CreditCard'; import CreditCardIcon from '@mui/icons-material/CreditCard';
import AddIcon from '@mui/icons-material/Add';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'; import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import CloseIcon from '@mui/icons-material/Close';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import { enqueueSnackbar } from 'notistack'; import { enqueueSnackbar } from 'notistack';
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit'; import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
import FillSpace from 'dashgui/FillSpace'; import FillSpace from 'dashgui/FillSpace';
import { PanelTile, PanelTileGrid } from 'dashgui/panels'; import { PanelTile, PanelTileGrid } from 'dashgui/panels';
import BackendError from '../BackendError'; import BackendError from '../BackendError';
import AppDialog from '../AppDialog';
import orderAutomat from '../../automats/orderAutomat'; import orderAutomat from '../../automats/orderAutomat';
import accountAutomat from '../../automats/accountAutomat'; import accountAutomat from '../../automats/accountAutomat';
import { payment as paymentApi } from '../../api'; import { payment as paymentApi } from '../../api';
@@ -31,7 +24,6 @@ import { notifyError } from '../../utils/notify';
import { formatPrice } from '../../utils/price'; import { formatPrice } from '../../utils/price';
import withNavigate from '../withNavigate'; import withNavigate from '../withNavigate';
import { import {
formatDate,
loadParties, loadParties,
manifestConfig, manifestConfig,
partyDisplayName, partyDisplayName,
@@ -39,7 +31,6 @@ import {
import { import {
YELLOW_PANEL, YELLOW_PANEL,
SURFACE_RAISED, SURFACE_RAISED,
WHITE,
} from '../../colors'; } from '../../colors';
const cfg = manifestConfig('order'); const cfg = manifestConfig('order');
@@ -166,175 +157,6 @@ class PaymentTableRow extends PureComponent {
} }
} }
// MARK: <RecordPaymentDialog/>
class RecordPaymentDialog extends PureComponent {
constructor(props) {
super(props);
const orders = props.orders || [];
// Prefer unpaid orders
const unpaidOrders = orders.filter((o) => {
const tot = Number(o.orderTotal) || 0;
const pd = Number(o.paidTotal) || 0;
return tot === 0 || pd < tot;
});
const selectedOrder = unpaidOrders[0] || orders[0] || null;
const remaining = selectedOrder ? Math.max(0, Math.round(((Number(selectedOrder.orderTotal) || 0) - (Number(selectedOrder.paidTotal) || 0)) * 100) / 100) : 0;
const accounts = accountAutomat.state.items || [];
const defaultAccountId = accounts[0]?.id || 1;
this.state = {
orderId: selectedOrder?.id || '',
accountId: defaultAccountId,
type: 'transfer',
amount: remaining > 0 ? String(remaining) : '',
saving: false,
};
this.handleOrderChange = this.handleOrderChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleOrderChange(newOrderId) {
const order = this.props.orders.find((o) => o.id === Number(newOrderId));
const remaining = order ? Math.max(0, Math.round(((Number(order.orderTotal) || 0) - (Number(order.paidTotal) || 0)) * 100) / 100) : 0;
this.setState({
orderId: newOrderId,
amount: remaining > 0 ? String(remaining) : '',
});
}
async handleSubmit() {
const { onClose, onSuccess } = this.props;
const { orderId, accountId, type, amount } = this.state;
const numAmount = Number(String(amount).replace(',', '.'));
if (!orderId) {
enqueueSnackbar('Bitte einen Auftrag auswählen.', { variant: 'warning' });
return;
}
if (!Number.isFinite(numAmount) || numAmount <= 0) {
enqueueSnackbar('Bitte einen gültigen Betrag größer 0 eingeben.', { variant: 'warning' });
return;
}
this.setState({ saving: true });
try {
await paymentApi.create(orderId, {
accountId: Number(accountId),
type,
amount: numAmount,
});
enqueueSnackbar('Zahlungseingang erfolgreich verbucht!', { variant: 'success' });
await orderAutomat.actions.reload();
onSuccess?.();
onClose();
} catch (err) {
notifyError(err);
this.setState({ saving: false });
}
}
render() {
const { open, onClose, orders, partiesById } = this.props;
const { orderId, accountId, type, amount, saving } = this.state;
const accounts = accountAutomat.state.items || [];
return (
<AppDialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
<Box sx={{ p: 2.5 }}>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', pb: 2 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<PaymentsIcon color="primary" />
<Typography variant="h6" sx={{ fontWeight: 600 }}>
Zahlungseingang erfassen
</Typography>
</Box>
<IconButton onClick={onClose} size="small">
<CloseIcon />
</IconButton>
</Box>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }}>
<TextField
select
label="Auftrag (Manifest)"
size="small"
value={orderId}
onChange={(e) => this.handleOrderChange(e.target.value)}
fullWidth
>
{orders.map((o) => {
const party = partiesById[o.entityId];
const partyName = partyDisplayName('order', party) || `Kunde #${o.entityId}`;
const tot = Number(o.orderTotal) || 0;
const pd = Number(o.paidTotal) || 0;
const rem = Math.max(0, tot - pd);
return (
<MenuItem key={o.id} value={o.id}>
{o.number} — {partyName} (Offen: {formatPrice(rem)})
</MenuItem>
);
})}
</TextField>
<TextField
select
label="Konto / Kasse (account)"
size="small"
value={accountId}
onChange={(e) => this.setState({ accountId: e.target.value })}
>
{accounts.length > 0 ? (
accounts.map((acc) => (
<MenuItem key={acc.id} value={acc.id}>
{acc.name} ({acc.type})
</MenuItem>
))
) : (
<MenuItem value={1}>Standardkonto</MenuItem>
)}
</TextField>
<TextField
select
label="Zahlungsart (type)"
size="small"
value={type}
onChange={(e) => this.setState({ type: e.target.value })}
>
{PAYMENT_TYPES.map((pt) => (
<MenuItem key={pt.value} value={pt.value}>
{pt.label}
</MenuItem>
))}
</TextField>
<TextField
label="Zahlungsbetrag (€)"
size="small"
type="number"
value={amount}
onChange={(e) => this.setState({ amount: e.target.value })}
slotProps={{ htmlInput: { min: 0.01, step: 'any' } }}
/>
</Box>
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1.5 }}>
<Button variant="outlined" onClick={onClose} disabled={saving}>
Abbrechen
</Button>
<Button variant="contained" onClick={this.handleSubmit} disabled={saving} startIcon={<PaymentsIcon />}>
{saving ? 'Wird verbucht…' : 'Zahlung buchen'}
</Button>
</Box>
</Box>
</AppDialog>
);
}
}
// MARK: <OrderPaymentList/> // MARK: <OrderPaymentList/>
export class OrderPaymentList extends PureComponent { export class OrderPaymentList extends PureComponent {
constructor(props) { constructor(props) {
@@ -348,7 +170,6 @@ export class OrderPaymentList extends PureComponent {
partiesById: {}, partiesById: {},
accountsById: {}, accountsById: {},
busyId: null, busyId: null,
recordDialogOpen: false,
}; };
this._cancelled = false; this._cancelled = false;
this.handleRetry = this.handleRetry.bind(this); this.handleRetry = this.handleRetry.bind(this);
@@ -461,7 +282,7 @@ export class OrderPaymentList extends PureComponent {
} }
render() { render() {
const { status, error, filter, partiesById, accountsById, busyId, recordDialogOpen, items } = this.state; const { status, error, filter, partiesById, accountsById, busyId } = this.state;
if (status === 'loading' || status === 'idle') { if (status === 'loading' || status === 'idle') {
return ( return (
@@ -526,15 +347,6 @@ export class OrderPaymentList extends PureComponent {
{allPayments.length} {allPayments.length}
</Typography> </Typography>
</Box> </Box>
<Box sx={{ flex: 1 }} />
<Button
variant="contained"
startIcon={<AddIcon />}
onClick={() => this.setState({ recordDialogOpen: true })}
sx={{ height: 40 }}
>
Zahlungseingang erfassen
</Button>
</Box> </Box>
{/* Search Bar */} {/* Search Bar */}
@@ -594,15 +406,6 @@ export class OrderPaymentList extends PureComponent {
/> />
</PanelTile> </PanelTile>
</PanelTileGrid> </PanelTileGrid>
{recordDialogOpen && (
<RecordPaymentDialog
open={recordDialogOpen}
orders={items}
partiesById={partiesById}
onClose={() => this.setState({ recordDialogOpen: false })}
/>
)}
</> </>
); );
} }

2
src/nav.js
View File

@@ -226,7 +226,7 @@ export const SUB_NAV = {
label: 'Zahlungen', label: 'Zahlungen',
title: 'Zahlungen', title: 'Zahlungen',
icon: PaymentsIcon, icon: PaymentsIcon,
help: 'Zahlungseingänge erfassen und Auftragszahlungen überwachen', help: 'Auftragszahlungen und Zahlungsjournal überwachen',
}, },
{ {
segment: 'versandarten', segment: 'versandarten',