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

Add article pack units with Redux-cached company unit list.

Browse Source 
Edit amount/unit on the price tile (pc×1 = no pack unit), manage units in a dialog, and keep the default pc unit non-deletable.
This commit is contained in:
seb
2026-08-01 06:37:47 +02:00
parent 1b8652ceaf
commit 80f093649a
7 changed files with 841 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

353
src/components/article/ArticleView.jsx
View File

@@ -1,21 +1,29 @@
import { Link as RouterLink, useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import LayersOutlinedIcon from '@mui/icons-material/LayersOutlined';
import StraightenOutlinedIcon from '@mui/icons-material/StraightenOutlined';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import FormControl from '@mui/material/FormControl';
import IconButton from '@mui/material/IconButton';
import InputAdornment from '@mui/material/InputAdornment';
import InputLabel from '@mui/material/InputLabel';
import Link from '@mui/material/Link';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import Switch from '@mui/material/Switch';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import SingleLineTextEdit from '../SingleLineTextEdit';
import ArticlePhotoTile from './ArticlePhotoTile';
import ArticlePriceTiersDialog from './ArticlePriceTiersDialog';
import ArticleTileTab from './ArticleTileTab';
import ArticleUnitEditorDialog from './ArticleUnitEditorDialog';
import { article } from '../../api';
import { EditablePanelTile, PanelTile, PanelTileGrid } from '../panels';
import { requireDefined, requireObject } from '../../utils/apiShape';
import { loadUnits, selectUnits, selectUnitsStatus } from '../../store/unitSlice';
import {
articleEans,
brandName,
@@ -32,6 +40,13 @@ import {
netFromGross,
parsePriceInput,
} from '../../utils/price';
import {
findUnitBySi,
firstPackUnitSi,
isNoPackUnit,
unitLabel,
} from '../../utils/units';
import { notifyError } from '../../utils/notify';
import { PANEL_TILE_KEYS } from '../../theme';
import { formatStock } from '../../pages/artikel/searchFormat';
import {
@@ -66,7 +81,7 @@ const headerTileSx = {
};
/** Second article row (Bestand / Marke / SKU / Preis). */
const SECOND_ROW_MIN_HEIGHT = 176;
const SECOND_ROW_MIN_HEIGHT = 220;
function CountLine({ label, count }) {
if (count == null) return null;
@@ -100,9 +115,17 @@ function nameDraftValid(draft) {
return draft.name.trim().length > 0;
}
function articleHasPackUnit(article) {
const si = article.unit?.si;
const amount = article.unitamount;
if (si == null || amount == null) return false;
return !isNoPackUnit(si, amount);
}
function priceDraftValue(article, company) {
const basePrice = primaryPrice(article);
const gross = priceBrutto(basePrice);
const hasUnit = articleHasPackUnit(article);
return {
gross: gross != null ? formatPriceAmount(gross) : '',
taxRate:
@@ -112,6 +135,12 @@ function priceDraftValue(article, company) {
? company.taxrate
: '',
tiers: tierDraftFromArticle(article),
hasUnit,
unitamount:
hasUnit && article.unitamount != null
? formatPriceAmount(article.unitamount)
: '',
unitSi: hasUnit ? (article.unit?.si ?? '') : '',
};
}
@@ -119,7 +148,7 @@ function tiersEqual(a, b) {
return JSON.stringify(a ?? []) === JSON.stringify(b ?? []);
}
function priceDraftDirty(draft, saved) {
function priceSectionDirty(draft, saved) {
return (
parsePriceInput(draft.gross) !== parsePriceInput(saved.gross) ||
Number(draft.taxRate) !== Number(saved.taxRate) ||
@@ -127,7 +156,33 @@ function priceDraftDirty(draft, saved) {
);
}
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;
// pc × 1 is the DB “no unit” sentinel — not a real pack unit.
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 ?? []) {
@@ -174,8 +229,10 @@ const articlePriceTextSx = {
};
const articlePriceFieldSx = {
flexShrink: 0,
'& .MuiOutlinedInput-root': {
alignItems: 'baseline',
flexShrink: 0,
},
'& .MuiInputBase-input': {
fontSize: '3.5rem',
@@ -224,6 +281,17 @@ const priceBodySx = {
gap: 0.75,
};
const priceUnitCornerSx = {
position: 'absolute',
top: 72,
right: 4,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: 1.25,
zIndex: 2,
};
const taxPillSx = {
height: 28,
fontSize: 13,
@@ -370,17 +438,142 @@ function PriceAmountField({
);
}
function PriceUnitRow({
hasUnit,
unitamount,
unitSi,
units,
displaySymbol,
onChangeAmount,
onChangeSi,
readOnly,
amountError,
}) {
const selected = findUnitBySi(units, unitSi);
const symbol = selected?.symbol ?? displaySymbol ?? unitSi ?? '';
if (readOnly) {
return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, minHeight: 36 }}>
{hasUnit && unitamount ? (
<Chip
size="medium"
label={`${unitamount} ${symbol}`}
sx={{
height: 28,
fontSize: 13,
fontWeight: 600,
bgcolor: 'rgba(0, 0, 0, 0.08)',
}}
/>
) : null}
</Box>
);
}
if (!hasUnit) {
return <Box sx={{ minHeight: 40 }} />;
}
return (
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: 0.75,
flexWrap: 'nowrap',
minHeight: 40,
minWidth: 0,
width: '100%',
}}
>
<TextField
label="Menge"
value={unitamount}
onChange={(event) => onChangeAmount(event.target.value)}
size="small"
error={amountError}
sx={{ width: 88, flexShrink: 0 }}
slotProps={{
inputLabel: { shrink: true },
htmlInput: { inputMode: 'decimal' },
}}
/>
<FormControl size="small" sx={{ flex: 1, minWidth: 0, maxWidth: 160 }}>
<InputLabel id="article-unit-si-label" shrink>
Einheit
</InputLabel>
<Select
labelId="article-unit-si-label"
label="Einheit"
value={unitSi}
displayEmpty
notched
onChange={(event) => onChangeSi(event.target.value)}
sx={{
'& .MuiSelect-select': {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
}}
>
{units.map((row) => (
<MenuItem key={row.si} value={row.si}>
{unitLabel(row)}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
);
}
function PriceUnitCorner({ hasUnit, onToggleHasUnit, onOpenEditor }) {
return (
<Box sx={priceUnitCornerSx}>
<Switch
size="small"
checked={Boolean(hasUnit)}
onChange={(event) => onToggleHasUnit(event.target.checked)}
inputProps={{ 'aria-label': 'Einheit' }}
/>
<IconButton
type="button"
size="small"
aria-label="Einheiten bearbeiten"
onClick={onOpenEditor}
sx={{ p: 0.5 }}
>
<StraightenOutlinedIcon sx={{ fontSize: 28 }} />
</IconButton>
</Box>
);
}
export default function ArticleView({ article: articleData, onArticleUpdated }) {
const navigate = useNavigate();
const dispatch = useDispatch();
const [tiersDialogOpen, setTiersDialogOpen] = useState(false);
const [unitEditorOpen, setUnitEditorOpen] = useState(false);
const categories = useSelector((state) => state.category.categories);
const rootCategoryId = useSelector(selectCategoryRootId);
const company = useSelector(selectCurrentCompany);
const units = useSelector(selectUnits);
const unitsStatus = useSelector(selectUnitsStatus);
const basePrice = primaryPrice(articleData);
const eans = articleEans(articleData);
const taxRates = companyTaxRateOptions(company, basePrice?.taxRate);
const priceValue = priceDraftValue(articleData, company);
const unitOptions =
articleData.unit?.si && !findUnitBySi(units, articleData.unit.si)
? [...units, articleData.unit]
: units;
useEffect(() => {
if (unitsStatus !== 'idle') return;
void dispatch(loadUnits()).unwrap().catch((err) => notifyError(err));
}, [dispatch, unitsStatus]);
const syncCategoryListPhoto = (next) => {
const photo = primaryPhoto(next);
@@ -420,25 +613,63 @@ export default function ArticleView({ article: articleData, onArticleUpdated })
};
const handleSavePrice = async (draft) => {
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 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 article.update(articleData.sku, { unitamount, unitSi });
requireObject(res, 'PATCH /api/article/:sku');
requireObject(res.article, 'article');
nextArticle = res.article;
} else {
const res = await article.update(articleData.sku, {
unitamount: 1,
unitSi: 'pc',
});
requireObject(res, 'PATCH /api/article/:sku');
requireObject(res.article, 'article');
nextArticle = res.article;
}
}
const net = requireDefined(netFromGross(gross, taxRate), 'price.net');
const prices = buildPosPricesPutBody({
net,
taxRate,
tiers: draft.tiers ?? [],
});
const res = await article.setPrices(articleData.sku, prices);
requireObject(res, 'PUT /api/article/:sku/prices');
requireObject(res.article, 'article');
onArticleUpdated?.(res.article);
syncCategoryListPrice(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 article.setPrices(articleData.sku, prices);
requireObject(res, 'PUT /api/article/:sku/prices');
requireObject(res.article, 'article');
nextArticle = res.article;
syncCategoryListPrice(res.article);
}
onArticleUpdated?.(nextArticle);
};
const handleArticleDeleted = () => {
@@ -536,6 +767,49 @@ export default function ArticleView({ article: articleData, onArticleUpdated })
onSave={handleSavePrice}
isDirty={priceDraftDirty}
canSave={priceDraftValid}
renderOverlay={({ editing, draft, onChange }) => {
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 || articleData.unit?.si,
);
// Only pc available: keep pc but clear amount so user must set ≠ 1.
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={() => setUnitEditorOpen(true)}
/>
);
}}
renderDisplay={(saved) => (
<Box sx={priceBodySx}>
<PriceAmountField value={saved.gross} readOnly />
@@ -545,10 +819,19 @@ export default function ArticleView({ article: articleData, onArticleUpdated })
readOnly
/>
<TierPricePills tiers={saved.tiers} />
<PriceUnitRow
hasUnit={saved.hasUnit}
unitamount={saved.unitamount}
unitSi={saved.unitSi}
units={unitOptions}
displaySymbol={articleData.unit?.symbol}
readOnly
/>
</Box>
)}
renderEdit={(draft, onChange, inputRef) => {
const draftGross = parsePriceInput(draft.gross);
const draftAmount = parsePriceInput(draft.unitamount);
return (
<Box sx={priceBodySx}>
<PriceAmountField
@@ -564,12 +847,40 @@ export default function ArticleView({ article: articleData, onArticleUpdated })
onOpenTiers={() => setTiersDialogOpen(true)}
/>
<TierPricePills tiers={draft.tiers} />
<PriceUnitRow
hasUnit={draft.hasUnit}
unitamount={draft.unitamount}
unitSi={draft.unitSi}
units={unitOptions}
displaySymbol={articleData.unit?.symbol}
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={() => setTiersDialogOpen(false)}
onApply={(tiers) => onChange({ ...draft, tiers })}
/>
<ArticleUnitEditorDialog
open={unitEditorOpen}
onClose={() => setUnitEditorOpen(false)}
onUnitUpserted={(row) => {
if (!draft.unitSi) {
onChange({ ...draft, unitSi: row.si });
}
}}
onUnitDeleted={(si) => {
if (draft.unitSi === si) {
onChange({ ...draft, unitSi: '' });
}
}}
/>
</Box>
);
}}