u

src/components/article/boxes/PriceUnitRow.jsx

@@ -0,0 +1,135 @@
+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 TextField from '@mui/material/TextField';
+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 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>
+  );
+}
+
+export 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>
+  );
+}