141 lines
3.7 KiB
JavaScript
141 lines
3.7 KiB
JavaScript
import { Component } from 'react';
|
|
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 InputLabel from '@mui/material/InputLabel';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import Select from '@mui/material/Select';
|
|
import StraightenOutlinedIcon from '@mui/icons-material/StraightenOutlined';
|
|
import Switch from '@mui/material/Switch';
|
|
import TextInput from '../../TextInput';
|
|
import { findUnitBySi, unitLabel } from '../../../utils/units';
|
|
|
|
const priceUnitCornerSx = {
|
|
position: 'absolute',
|
|
top: 72,
|
|
right: 4,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
gap: 1.25,
|
|
zIndex: 2,
|
|
};
|
|
|
|
export class PriceUnitRow extends Component {
|
|
render() {
|
|
const {
|
|
hasUnit,
|
|
unitamount,
|
|
unitSi,
|
|
units,
|
|
displaySymbol,
|
|
onChangeAmount,
|
|
onChangeSi,
|
|
readOnly,
|
|
amountError,
|
|
} = this.props;
|
|
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%',
|
|
}}
|
|
>
|
|
<TextInput
|
|
label="Menge"
|
|
value={unitamount}
|
|
onChange={(event) => onChangeAmount(event.target.value)}
|
|
error={amountError}
|
|
sx={{ width: 88, flexShrink: 0 }}
|
|
slotProps={{
|
|
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>
|
|
);
|
|
}
|
|
}
|
|
|
|
export class PriceUnitCorner extends Component {
|
|
render() {
|
|
const { hasUnit, onToggleHasUnit, onOpenEditor } = this.props;
|
|
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>
|
|
);
|
|
}
|
|
}
|