57fff72f12
Move reusable GUI primitives (PanelTile, EditablePanelTile, base Tile, ElevatedPill, SingleLineTextEdit) into the shared dashgui package and consume them via a file: dependency. EditablePanelTile now accepts an onError prop so error notification stays app-side.
555 lines
16 KiB
JavaScript
555 lines
16 KiB
JavaScript
import { Component, PureComponent } from 'react';
|
||
import Box from '@mui/material/Box';
|
||
import InputAdornment from '@mui/material/InputAdornment';
|
||
import TextField from '@mui/material/TextField';
|
||
import Typography from '@mui/material/Typography';
|
||
import { EditablePanelTile } from 'dashgui/panels';
|
||
import ArticlePriceTiersDialog from '../ArticlePriceTiersDialog';
|
||
import ArticleUnitEditorDialog from '../ArticleUnitEditorDialog';
|
||
import { StorageManagerContext } from '../../../api/storageManagerContext';
|
||
import { requireDefined, requireObject } from '../../../utils/apiShape';
|
||
import {
|
||
buildPosPricesPutBody,
|
||
companyTaxRateOptions,
|
||
priceBrutto,
|
||
primaryPrice,
|
||
tierDraftFromArticle,
|
||
} from '../../../utils/articleDetail';
|
||
import {
|
||
formatPriceAmount,
|
||
netFromGross,
|
||
parsePriceInput,
|
||
} from '../../../utils/price';
|
||
import {
|
||
findUnitBySi,
|
||
firstPackUnitSi,
|
||
isNoPackUnit,
|
||
} from '../../../utils/units';
|
||
import { notifyError } from '../../../utils/notify';
|
||
import { PriceTaxRow } from './PriceTaxRow';
|
||
import TierPricePills from './TierPricePills';
|
||
import { PriceUnitRow, PriceUnitCorner } from './PriceUnitRow';
|
||
|
||
const SECOND_ROW_MIN_HEIGHT = 220;
|
||
|
||
const articlePriceTextSx = {
|
||
fontWeight: 700,
|
||
lineHeight: 1.1,
|
||
letterSpacing: '-0.02em',
|
||
};
|
||
|
||
const articlePriceFieldSx = {
|
||
flexShrink: 0,
|
||
'& .MuiOutlinedInput-root': {
|
||
alignItems: 'baseline',
|
||
flexShrink: 0,
|
||
},
|
||
'& .MuiInputBase-input': {
|
||
fontSize: '3.5rem',
|
||
py: 0.5,
|
||
height: 'auto',
|
||
...articlePriceTextSx,
|
||
},
|
||
'& .MuiInputAdornment-root': {
|
||
marginRight: 0.75,
|
||
height: 'auto',
|
||
maxHeight: 'none',
|
||
alignItems: 'baseline',
|
||
},
|
||
'& .MuiInputAdornment-root .MuiTypography-root': {
|
||
fontSize: '2rem',
|
||
fontWeight: 700,
|
||
lineHeight: 1.1,
|
||
},
|
||
'& .MuiOutlinedInput-notchedOutline': {
|
||
borderWidth: '1px !important',
|
||
},
|
||
};
|
||
|
||
const articlePriceFieldHiddenSx = {
|
||
...articlePriceFieldSx,
|
||
pointerEvents: 'none',
|
||
'& .MuiOutlinedInput-notchedOutline': {
|
||
borderWidth: '1px !important',
|
||
borderColor: 'transparent',
|
||
},
|
||
'& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline': {
|
||
borderWidth: '1px !important',
|
||
borderColor: 'transparent',
|
||
},
|
||
'& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||
borderWidth: '1px !important',
|
||
borderColor: 'transparent',
|
||
},
|
||
};
|
||
|
||
const priceBodySx = {
|
||
width: '100%',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: 0.75,
|
||
};
|
||
|
||
function articleHasPackUnit(art) {
|
||
const si = art.unit?.si;
|
||
const amount = art.unitamount;
|
||
if (si == null || amount == null) return false;
|
||
return !isNoPackUnit(si, amount);
|
||
}
|
||
|
||
function tiersEqual(a, b) {
|
||
return JSON.stringify(a ?? []) === JSON.stringify(b ?? []);
|
||
}
|
||
|
||
function priceDraftValue(art, company) {
|
||
const basePrice = primaryPrice(art);
|
||
const gross = priceBrutto(basePrice);
|
||
const hasUnit = articleHasPackUnit(art);
|
||
return {
|
||
gross: gross != null ? formatPriceAmount(gross) : '',
|
||
taxRate:
|
||
basePrice?.taxRate != null
|
||
? basePrice.taxRate
|
||
: company?.taxrate != null
|
||
? company.taxrate
|
||
: '',
|
||
tiers: tierDraftFromArticle(art),
|
||
hasUnit,
|
||
unitamount:
|
||
hasUnit && art.unitamount != null
|
||
? formatPriceAmount(art.unitamount)
|
||
: '',
|
||
unitSi: hasUnit ? (art.unit?.si ?? '') : '',
|
||
};
|
||
}
|
||
|
||
function priceSectionDirty(draft, saved) {
|
||
return (
|
||
parsePriceInput(draft.gross) !== parsePriceInput(saved.gross) ||
|
||
Number(draft.taxRate) !== Number(saved.taxRate) ||
|
||
!tiersEqual(draft.tiers, saved.tiers)
|
||
);
|
||
}
|
||
|
||
function unitSectionDirty(draft, saved) {
|
||
if (Boolean(draft.hasUnit) !== Boolean(saved.hasUnit)) return true;
|
||
if (!draft.hasUnit) return false;
|
||
return (
|
||
parsePriceInput(draft.unitamount) !== parsePriceInput(saved.unitamount) ||
|
||
draft.unitSi !== saved.unitSi
|
||
);
|
||
}
|
||
|
||
function priceDraftDirty(draft, saved) {
|
||
return priceSectionDirty(draft, saved) || unitSectionDirty(draft, saved);
|
||
}
|
||
|
||
function priceDraftValid(draft) {
|
||
if (draft.hasUnit) {
|
||
const unitamount = parsePriceInput(draft.unitamount);
|
||
if (unitamount == null || unitamount <= 0) return false;
|
||
if (!draft.unitSi) return false;
|
||
if (isNoPackUnit(draft.unitSi, unitamount)) return false;
|
||
}
|
||
|
||
const hasGross = draft.gross !== '';
|
||
if (!hasGross) {
|
||
return !(draft.tiers?.length > 0);
|
||
}
|
||
|
||
if (parsePriceInput(draft.gross) == null) return false;
|
||
if (draft.taxRate === '' || draft.taxRate == null) return false;
|
||
for (const tier of draft.tiers ?? []) {
|
||
if (parsePriceInput(tier.gross) == null) return false;
|
||
const mult = Number(tier.minmultiplier);
|
||
if (!Number.isFinite(mult) || mult <= 1) return false;
|
||
}
|
||
return true;
|
||
}
|
||
|
||
function companyFromStore(store) {
|
||
if (!store) return null;
|
||
const companies = store.companies;
|
||
const session = store.authMe;
|
||
if (companies == null || session == null) return null;
|
||
const companyId = session.user?.selectedCompanyId;
|
||
if (companyId == null) return null;
|
||
return companies.find((c) => c.id === companyId) ?? null;
|
||
}
|
||
|
||
class PriceAmountField extends Component {
|
||
render() {
|
||
const { value, onChange, inputRef, readOnly, error } = this.props;
|
||
return (
|
||
<TextField
|
||
inputRef={inputRef}
|
||
value={value}
|
||
onChange={
|
||
readOnly
|
||
? undefined
|
||
: (event) => {
|
||
onChange?.(event.target.value);
|
||
}
|
||
}
|
||
fullWidth
|
||
error={error}
|
||
sx={readOnly ? articlePriceFieldHiddenSx : articlePriceFieldSx}
|
||
slotProps={{
|
||
input: {
|
||
readOnly,
|
||
startAdornment: (
|
||
<InputAdornment position="start">
|
||
<Typography component="span">€</Typography>
|
||
</InputAdornment>
|
||
),
|
||
},
|
||
htmlInput: {
|
||
inputMode: 'decimal',
|
||
readOnly,
|
||
tabIndex: readOnly ? -1 : undefined,
|
||
},
|
||
}}
|
||
/>
|
||
);
|
||
}
|
||
}
|
||
|
||
class PriceDisplay extends Component {
|
||
render() {
|
||
const { saved, taxRates, unitOptions, displaySymbol } = this.props;
|
||
return (
|
||
<Box sx={priceBodySx}>
|
||
<PriceAmountField value={saved.gross} readOnly />
|
||
<PriceTaxRow rates={taxRates} selected={saved.taxRate} readOnly />
|
||
<TierPricePills tiers={saved.tiers} />
|
||
<PriceUnitRow
|
||
hasUnit={saved.hasUnit}
|
||
unitamount={saved.unitamount}
|
||
unitSi={saved.unitSi}
|
||
units={unitOptions}
|
||
displaySymbol={displaySymbol}
|
||
readOnly
|
||
/>
|
||
</Box>
|
||
);
|
||
}
|
||
}
|
||
|
||
class PriceOverlay extends Component {
|
||
render() {
|
||
const {
|
||
editing,
|
||
draft,
|
||
onChange,
|
||
unitOptions,
|
||
articleUnitSi,
|
||
onOpenEditor,
|
||
} = this.props;
|
||
if (!editing || draft == null) return null;
|
||
return (
|
||
<PriceUnitCorner
|
||
hasUnit={draft.hasUnit}
|
||
onToggleHasUnit={(hasUnit) => {
|
||
if (hasUnit) {
|
||
const unitamount = draft.unitamount || '1';
|
||
const amount = parsePriceInput(unitamount) ?? 1;
|
||
let unitSi = firstPackUnitSi(unitOptions, draft.unitSi || articleUnitSi);
|
||
if (!unitSi && isNoPackUnit('pc', amount)) {
|
||
onChange({
|
||
...draft,
|
||
hasUnit: true,
|
||
unitSi: 'pc',
|
||
unitamount: '',
|
||
});
|
||
return;
|
||
}
|
||
if (!unitSi) unitSi = 'pc';
|
||
onChange({
|
||
...draft,
|
||
hasUnit: true,
|
||
unitSi,
|
||
unitamount,
|
||
});
|
||
return;
|
||
}
|
||
onChange({
|
||
...draft,
|
||
hasUnit: false,
|
||
unitamount: '',
|
||
unitSi: '',
|
||
});
|
||
}}
|
||
onOpenEditor={onOpenEditor}
|
||
/>
|
||
);
|
||
}
|
||
}
|
||
|
||
class PriceEdit extends Component {
|
||
handleUnitUpserted = async (row) => {
|
||
const { draft, onChange, onUnitUpserted } = this.props;
|
||
await onUnitUpserted?.(row);
|
||
if (!draft.unitSi) {
|
||
onChange({ ...draft, unitSi: row.si });
|
||
}
|
||
};
|
||
|
||
handleUnitDeleted = async (si) => {
|
||
const { draft, onChange, onUnitDeleted } = this.props;
|
||
await onUnitDeleted?.(si);
|
||
if (draft.unitSi === si) {
|
||
onChange({ ...draft, unitSi: '' });
|
||
}
|
||
};
|
||
|
||
render() {
|
||
const {
|
||
draft,
|
||
onChange,
|
||
inputRef,
|
||
taxRates,
|
||
unitOptions,
|
||
displaySymbol,
|
||
tiersDialogOpen,
|
||
unitEditorOpen,
|
||
onOpenTiers,
|
||
onCloseTiers,
|
||
onCloseUnitEditor,
|
||
} = this.props;
|
||
const draftGross = parsePriceInput(draft.gross);
|
||
const draftAmount = parsePriceInput(draft.unitamount);
|
||
return (
|
||
<Box sx={priceBodySx}>
|
||
<PriceAmountField
|
||
inputRef={inputRef}
|
||
value={draft.gross}
|
||
onChange={(gross) => onChange({ ...draft, gross })}
|
||
error={draft.gross !== '' && draftGross == null}
|
||
/>
|
||
<PriceTaxRow
|
||
rates={taxRates}
|
||
selected={draft.taxRate}
|
||
onSelectTax={(taxRate) => onChange({ ...draft, taxRate })}
|
||
onOpenTiers={onOpenTiers}
|
||
/>
|
||
<TierPricePills tiers={draft.tiers} />
|
||
<PriceUnitRow
|
||
hasUnit={draft.hasUnit}
|
||
unitamount={draft.unitamount}
|
||
unitSi={draft.unitSi}
|
||
units={unitOptions}
|
||
displaySymbol={displaySymbol}
|
||
onChangeAmount={(unitamount) => onChange({ ...draft, unitamount })}
|
||
onChangeSi={(unitSi) => onChange({ ...draft, unitSi })}
|
||
amountError={
|
||
draft.hasUnit &&
|
||
draft.unitamount !== '' &&
|
||
(draftAmount == null || draftAmount <= 0)
|
||
}
|
||
/>
|
||
<ArticlePriceTiersDialog
|
||
open={tiersDialogOpen}
|
||
tiers={draft.tiers ?? []}
|
||
onClose={onCloseTiers}
|
||
onApply={(tiers) => onChange({ ...draft, tiers })}
|
||
/>
|
||
<ArticleUnitEditorDialog
|
||
open={unitEditorOpen}
|
||
onClose={onCloseUnitEditor}
|
||
onUnitUpserted={this.handleUnitUpserted}
|
||
onUnitDeleted={this.handleUnitDeleted}
|
||
/>
|
||
</Box>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default class ArticleViewPrice extends PureComponent {
|
||
static contextType = StorageManagerContext;
|
||
|
||
constructor(props) {
|
||
super(props);
|
||
const store = this.context;
|
||
const company = companyFromStore(store);
|
||
const units = store?.units;
|
||
this.state = {
|
||
tiersDialogOpen: false,
|
||
unitEditorOpen: false,
|
||
units: units ?? [],
|
||
company,
|
||
};
|
||
this._cancelled = false;
|
||
this._ready = company != null && units != null;
|
||
}
|
||
|
||
componentDidMount() {
|
||
this._cancelled = false;
|
||
if (this._ready) return;
|
||
void this.load();
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
this._cancelled = true;
|
||
}
|
||
|
||
async load() {
|
||
const store = this.context;
|
||
try {
|
||
const [unitList, companies, session] = await Promise.all([
|
||
store.unitPromise,
|
||
store.companyPromise,
|
||
store.authMePromise,
|
||
]);
|
||
const companyId = requireDefined(session.user?.selectedCompanyId, 'selectedCompanyId');
|
||
const current = requireDefined(
|
||
companies.find((c) => c.id === companyId),
|
||
'company',
|
||
);
|
||
if (!this._cancelled) {
|
||
this.setState({ units: unitList, company: current });
|
||
}
|
||
} catch (err) {
|
||
if (!this._cancelled) notifyError(err);
|
||
}
|
||
}
|
||
|
||
handleSave = async (draft) => {
|
||
const { article: articleData, onArticleUpdated } = this.props;
|
||
const store = this.context;
|
||
const { company } = this.state;
|
||
const saved = priceDraftValue(articleData, company);
|
||
let nextArticle = articleData;
|
||
|
||
if (unitSectionDirty(draft, saved)) {
|
||
if (draft.hasUnit) {
|
||
const unitamount = requireDefined(
|
||
parsePriceInput(draft.unitamount),
|
||
'unitamount',
|
||
);
|
||
if (unitamount <= 0) {
|
||
throw new Error('Ungültige Menge');
|
||
}
|
||
const unitSi = requireDefined(
|
||
draft.unitSi?.trim() ? draft.unitSi.trim() : null,
|
||
'unitSi',
|
||
);
|
||
if (isNoPackUnit(unitSi, unitamount)) {
|
||
throw new Error('Einheit pc × 1 ist keine Packungseinheit');
|
||
}
|
||
const res = await store.article.update(articleData.sku, { unitamount, unitSi });
|
||
requireObject(res, 'PATCH /api/article/:sku');
|
||
requireObject(res.article, 'article');
|
||
nextArticle = res.article;
|
||
} else {
|
||
const res = await store.article.update(articleData.sku, {
|
||
unitamount: 1,
|
||
unitSi: 'pc',
|
||
});
|
||
requireObject(res, 'PATCH /api/article/:sku');
|
||
requireObject(res.article, 'article');
|
||
nextArticle = res.article;
|
||
}
|
||
}
|
||
|
||
if (priceSectionDirty(draft, saved) && draft.gross !== '') {
|
||
const gross = requireDefined(parsePriceInput(draft.gross), 'price.gross');
|
||
const taxRate = requireDefined(
|
||
draft.taxRate === '' ? null : Number(draft.taxRate),
|
||
'price.tax',
|
||
);
|
||
if (!Number.isFinite(taxRate)) {
|
||
throw new Error('Ungültiger Steuersatz');
|
||
}
|
||
const net = requireDefined(netFromGross(gross, taxRate), 'price.net');
|
||
const prices = buildPosPricesPutBody({
|
||
net,
|
||
taxRate,
|
||
tiers: draft.tiers ?? [],
|
||
});
|
||
const res = await store.article.setPrices(articleData.sku, { prices });
|
||
requireObject(res, 'PUT /api/article/:sku/prices');
|
||
requireObject(res.article, 'article');
|
||
nextArticle = res.article;
|
||
}
|
||
|
||
onArticleUpdated?.(nextArticle);
|
||
};
|
||
|
||
openTiersDialog = () => this.setState({ tiersDialogOpen: true });
|
||
closeTiersDialog = () => this.setState({ tiersDialogOpen: false });
|
||
openUnitEditor = () => this.setState({ unitEditorOpen: true });
|
||
closeUnitEditor = () => this.setState({ unitEditorOpen: false });
|
||
|
||
unitOptions() {
|
||
const { article: articleData } = this.props;
|
||
const { units } = this.state;
|
||
if (articleData.unit?.si && !findUnitBySi(units, articleData.unit.si)) {
|
||
return [...units, articleData.unit];
|
||
}
|
||
return units;
|
||
}
|
||
|
||
refreshUnits = async () => {
|
||
this.setState({ units: await this.context.unitPromise });
|
||
};
|
||
|
||
render() {
|
||
const { article: articleData } = this.props;
|
||
const { company, tiersDialogOpen, unitEditorOpen } = this.state;
|
||
const priceValue = priceDraftValue(articleData, company);
|
||
const basePrice = primaryPrice(articleData);
|
||
const taxRates = companyTaxRateOptions(company, basePrice?.taxRate);
|
||
const unitOptions = this.unitOptions();
|
||
const displaySymbol = articleData.unit?.symbol;
|
||
|
||
return (
|
||
<EditablePanelTile
|
||
wide={1}
|
||
minHeight={SECOND_ROW_MIN_HEIGHT}
|
||
color="#bfdbfe"
|
||
contentAlignItems="flex-start"
|
||
value={priceValue}
|
||
onSave={this.handleSave}
|
||
onError={notifyError}
|
||
isDirty={priceDraftDirty}
|
||
canSave={priceDraftValid}
|
||
overlay={({ editing, draft, onChange }) => (
|
||
<PriceOverlay
|
||
editing={editing}
|
||
draft={draft}
|
||
onChange={onChange}
|
||
unitOptions={unitOptions}
|
||
articleUnitSi={articleData.unit?.si}
|
||
onOpenEditor={this.openUnitEditor}
|
||
/>
|
||
)}
|
||
display={
|
||
<PriceDisplay
|
||
saved={priceValue}
|
||
taxRates={taxRates}
|
||
unitOptions={unitOptions}
|
||
displaySymbol={displaySymbol}
|
||
/>
|
||
}
|
||
edit={({ draft, onChange, inputRef }) => (
|
||
<PriceEdit
|
||
draft={draft}
|
||
onChange={onChange}
|
||
inputRef={inputRef}
|
||
taxRates={taxRates}
|
||
unitOptions={unitOptions}
|
||
displaySymbol={displaySymbol}
|
||
tiersDialogOpen={tiersDialogOpen}
|
||
unitEditorOpen={unitEditorOpen}
|
||
onOpenTiers={this.openTiersDialog}
|
||
onCloseTiers={this.closeTiersDialog}
|
||
onCloseUnitEditor={this.closeUnitEditor}
|
||
onUnitUpserted={this.refreshUnits}
|
||
onUnitDeleted={this.refreshUnits}
|
||
/>
|
||
)}
|
||
/>
|
||
);
|
||
}
|
||
}
|