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-04 11:25:10 +02:00
parent dd8566eabc
commit 874d6c010f
16 changed files with 345 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/components/TextInput.jsx Normal file
View File

@@ -0,0 +1,139 @@
import { Component } from 'react';
import TextField from '@mui/material/TextField';
function normalizeSx(s) {
if (!s || typeof s !== 'object' || Array.isArray(s)) return s;
const bg = s.bgcolor ?? s.backgroundColor;
if (bg && bg !== 'transparent') {
const { bgcolor: _bg, backgroundColor: _bgc, ...rest } = s;
return {
...rest,
bgcolor: 'transparent',
'& .MuiInputBase-root': {
bgcolor: bg,
...(typeof rest['& .MuiInputBase-root'] === 'object' ? rest['& .MuiInputBase-root'] : {}),
},
};
}
return s;
}
function resolveSx(s) {
if (!s) return undefined;
if (Array.isArray(s)) return s.map(resolveSx);
return normalizeSx(s);
}
/**
* TextInput:
* Reusable Class Component wrapping MUI TextField with the harmonized
* style of EANs (small outlined, shrink label by default, transparent root)
* and complete suppression of browser autocomplete/autofill popups.
*/
export default class TextInput extends Component {
state = {
// Starting as readOnly prevents Chrome/Safari/Firefox from attaching autofill popup listeners
readOnly: true,
};
handleFocus = (e) => {
if (this.state.readOnly && !this.props.readOnly && !this.props.slotProps?.htmlInput?.readOnly) {
this.setState({ readOnly: false });
}
if (this.props.onFocus) {
this.props.onFocus(e);
}
};
handleMouseDown = (e) => {
if (this.state.readOnly && !this.props.readOnly && !this.props.slotProps?.htmlInput?.readOnly) {
this.setState({ readOnly: false });
}
if (this.props.onMouseDown) {
this.props.onMouseDown(e);
}
};
render() {
const {
slotProps,
inputProps,
InputProps,
InputLabelProps,
inputRef,
label,
size = 'small',
onFocus,
onMouseDown,
readOnly: propReadOnly,
sx,
...rest
} = this.props;
const isSelect = Boolean(rest.select);
const effectiveReadOnly = isSelect
? (propReadOnly ?? slotProps?.htmlInput?.readOnly ?? inputProps?.readOnly)
: (propReadOnly ?? slotProps?.htmlInput?.readOnly ?? inputProps?.readOnly ?? this.state.readOnly);
const htmlInput = isSelect
? {
readOnly: effectiveReadOnly,
...slotProps?.htmlInput,
...inputProps,
}
: {
autoComplete: 'one-time-code',
autoCorrect: 'off',
autoCapitalize: 'off',
spellCheck: false,
'aria-autocomplete': 'none',
'data-lpignore': 'true',
'data-1p-ignore': 'true',
'data-bwignore': 'true',
'data-form-type': 'other',
readOnly: effectiveReadOnly,
...slotProps?.htmlInput,
...inputProps,
};
const resolvedInputProps = (InputProps || slotProps?.input) ? {
...slotProps?.input,
...InputProps,
startAdornment: (slotProps?.input?.startAdornment && InputProps?.startAdornment)
? <>{slotProps.input.startAdornment}{InputProps.startAdornment}</>
: (InputProps?.startAdornment ?? slotProps?.input?.startAdornment),
endAdornment: (slotProps?.input?.endAdornment && InputProps?.endAdornment)
? <>{InputProps.endAdornment}{slotProps.input.endAdornment}</>
: (InputProps?.endAdornment ?? slotProps?.input?.endAdornment),
} : undefined;
const { input: _unusedInput, ...restSlotProps } = (slotProps || {});
const mergedSlotProps = {
...restSlotProps,
inputLabel: {
...(label ? { shrink: true } : {}),
...InputLabelProps,
...slotProps?.inputLabel,
},
htmlInput,
};
return (
<TextField
size={size}
label={label}
inputRef={inputRef}
autoComplete="one-time-code"
onFocus={this.handleFocus}
onMouseDown={this.handleMouseDown}
InputProps={resolvedInputProps}
slotProps={mergedSlotProps}
sx={resolveSx(sx)}
{...rest}
/>
);
}
}
export { TextInput };

6
src/components/article/ArticleImageSearchDialog.jsx
View File

@@ -11,7 +11,7 @@ import IconButton from '@mui/material/IconButton';
import InputAdornment from '@mui/material/InputAdornment';
import LinearProgress from '@mui/material/LinearProgress';
import Skeleton from '@mui/material/Skeleton';
import TextField from '@mui/material/TextField';
import TextInput from '../TextInput';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
@@ -358,9 +358,9 @@ export default class ArticleImageSearchDialog extends PureComponent {
}}
sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}
>
<TextField
size="small"
<TextInput
fullWidth
label="Suchbegriff"
value={query}
disabled={isSearching || Boolean(processingId)}
onChange={(e) => this.setState({ query: e.target.value })}

9
src/components/article/ArticlePriceTiersDialog.jsx
View File

@@ -9,7 +9,7 @@ import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import IconButton from '@mui/material/IconButton';
import InputAdornment from '@mui/material/InputAdornment';
import TextField from '@mui/material/TextField';
import TextInput from '../TextInput';
import Typography from '@mui/material/Typography';
import { formatPriceAmount, parsePriceInput } from '../../utils/price';
@@ -111,27 +111,24 @@ class ArticlePriceTiersDialog extends Component {
alignItems: 'flex-start',
}}
>
<TextField
<TextInput
label="Ab Menge"
value={tier.minmultiplier}
onChange={(event) =>
this.handleChange(index, 'minmultiplier', event.target.value)
}
size="small"
error={tier.minmultiplier !== '' && mult == null}
slotProps={{
inputLabel: { shrink: true },
htmlInput: { inputMode: 'numeric' },
}}
sx={{ width: 120 }}
/>
<TextField
<TextInput
label="Brutto"
value={tier.gross}
onChange={(event) =>
this.handleChange(index, 'gross', event.target.value)
}
size="small"
fullWidth
error={tier.gross !== '' && gross == null}
slotProps={{

11
src/components/article/ArticleStockAdjustDialog.jsx
View File

@@ -16,7 +16,7 @@ import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import TextInput from '../TextInput';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import Typography from '@mui/material/Typography';
@@ -480,9 +480,8 @@ export default class ArticleStockAdjustDialog extends PureComponent {
{/* Amount input */}
{mode === 'diff' ? (
<TextField
<TextInput
fullWidth
size="small"
label="Menge (+ für Zugang, - für Abgang)"
type="number"
value={diffValue}
@@ -509,9 +508,8 @@ export default class ArticleStockAdjustDialog extends PureComponent {
}
/>
) : (
<TextField
<TextInput
fullWidth
size="small"
label="Tatsächlicher Zählbestand (Ist-Bestand)"
type="number"
value={targetValue}
@@ -560,9 +558,8 @@ export default class ArticleStockAdjustDialog extends PureComponent {
{/* Reason / Memo */}
<Box>
<TextField
<TextInput
fullWidth
size="small"
label="Grund / Buchungstext"
value={reason}
onChange={this.handleReasonChange}

20
src/components/article/ArticleSupplierDialog.jsx
View File

@@ -9,7 +9,7 @@ import DialogTitle from '@mui/material/DialogTitle';
import InputAdornment from '@mui/material/InputAdornment';
import MenuItem from '@mui/material/MenuItem';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import TextInput from '../TextInput';
import Typography from '@mui/material/Typography';
import { companyTaxRateOptions } from '../../utils/articleDetail';
import { formatPriceAmount, parsePriceInput } from '../../utils/price';
@@ -135,7 +135,7 @@ export default class ArticleSupplierDialog extends PureComponent {
value={selectedSupplier}
onChange={(_e, val) => this.setState({ entityId: val ? val.id : null })}
renderInput={(params) => (
<TextField
<TextInput
{...params}
label="Lieferant auswählen"
required
@@ -146,7 +146,7 @@ export default class ArticleSupplierDialog extends PureComponent {
/>
)}
<TextField
<TextInput
label="Lieferanten-Artikelnummer (SKU)"
value={sku}
onChange={(e) => this.setState({ sku: e.target.value })}
@@ -155,22 +155,22 @@ export default class ArticleSupplierDialog extends PureComponent {
/>
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
<TextField
<TextInput
label="Verpackungseinheit (VPE / PU)"
type="number"
required
error={!puValid}
helperText={!puValid ? 'Muss größer als 0 sein' : undefined}
inputProps={{ step: 'any', min: 0.0001 }}
slotProps={{ htmlInput: { step: 'any', min: 0.0001 } }}
value={pu}
onChange={(e) => this.setState({ pu: e.target.value })}
sx={{ flex: 1 }}
/>
<TextField
<TextInput
label="Bestand beim Lieferanten"
type="number"
inputProps={{ step: 'any', min: 0 }}
slotProps={{ htmlInput: { step: 'any', min: 0 } }}
value={stock}
onChange={(e) => this.setState({ stock: e.target.value })}
sx={{ flex: 1 }}
@@ -179,7 +179,7 @@ export default class ArticleSupplierDialog extends PureComponent {
</Stack>
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
<TextField
<TextInput
label="Einkaufspreis Netto"
value={netPrice}
onChange={(e) => this.setState({ netPrice: e.target.value })}
@@ -193,7 +193,7 @@ export default class ArticleSupplierDialog extends PureComponent {
helperText="Optionaler Einkaufspreis (EK)"
/>
<TextField
<TextInput
select
label="MwSt.-Satz"
value={taxRate}
@@ -208,7 +208,7 @@ export default class ArticleSupplierDialog extends PureComponent {
{rate} %
</MenuItem>
))}
</TextField>
</TextInput>
</Stack>
</Stack>
</DialogContent>

22
src/components/article/ArticleUnitEditorDialog.jsx
View File

@@ -13,7 +13,7 @@ import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import TextField from '@mui/material/TextField';
import TextInput from '../TextInput';
import Typography from '@mui/material/Typography';
import { StorageManagerContext } from '../../api/storageManagerContext';
import { requireObject } from '../../utils/apiShape';
@@ -241,47 +241,38 @@ export default class ArticleUnitEditorDialog extends Component {
</Box>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
<TextField
<TextInput
label="Name"
value={form.name}
onChange={(e) => this.handleField('name', e.target.value)}
size="small"
fullWidth
disabled={busy}
slotProps={{ inputLabel: { shrink: true } }}
/>
<TextField
<TextInput
label="Symbol"
value={form.symbol}
onChange={(e) => this.handleField('symbol', e.target.value)}
size="small"
fullWidth
disabled={busy}
slotProps={{ inputLabel: { shrink: true } }}
/>
<TextField
<TextInput
label="si"
value={form.si}
onChange={(e) => this.handleField('si', e.target.value)}
size="small"
fullWidth
disabled={busy}
slotProps={{ inputLabel: { shrink: true } }}
/>
<TextField
<TextInput
label="basesi"
value={form.basesi}
onChange={(e) => this.handleField('basesi', e.target.value)}
size="small"
fullWidth
disabled={busy}
slotProps={{ inputLabel: { shrink: true } }}
/>
<TextField
<TextInput
label="basesifactor"
value={form.basesifactor}
onChange={(e) => this.handleField('basesifactor', e.target.value)}
size="small"
fullWidth
disabled={busy}
error={
@@ -290,7 +281,6 @@ export default class ArticleUnitEditorDialog extends Component {
parseFactor(form.basesifactor) <= 0)
}
slotProps={{
inputLabel: { shrink: true },
htmlInput: { inputMode: 'decimal' },
}}
/>

31
src/components/article/boxes/ArticleViewBrand.jsx
View File

@@ -1,6 +1,6 @@
import { Component, PureComponent } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import TextInput from '../../TextInput';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import { EditablePanelTile } from 'dashgui/panels';
@@ -86,22 +86,22 @@ class BrandEdit extends Component {
);
}}
renderInput={(params) => (
<TextField
<TextInput
{...params}
inputRef={inputRef}
size="small"
slotProps={{
...params.slotProps,
input: {
...params.slotProps?.input,
startAdornment: matchingBrand ? (
<InputAdornment position="start" sx={{ mr: 0.5 }}>
<BrandThumb brand={matchingBrand} size={20} />
</InputAdornment>
) : (
params.slotProps?.input?.startAdornment
),
},
label="Marke"
InputProps={{
...params.InputProps,
startAdornment: (
<>
{matchingBrand ? (
<InputAdornment position="start" sx={{ mr: 0.5 }}>
<BrandThumb brand={matchingBrand} size={20} />
</InputAdornment>
) : null}
{params.InputProps?.startAdornment}
</>
),
}}
/>
)}
@@ -182,6 +182,7 @@ export default class ArticleViewBrand extends PureComponent {
wide={1}
minHeight={SECOND_ROW_MIN_HEIGHT}
color="#e9d5ff"
contentAlignItems="flex-start"
value={value}
onSave={this.handleSave}
onError={notifyError}

12
src/components/article/boxes/ArticleViewEANs.jsx
View File

@@ -1,6 +1,6 @@
import { Component, PureComponent } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import TextInput from '../../TextInput';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import { EditablePanelTile } from 'dashgui/panels';
@@ -117,18 +117,10 @@ class EansEdit extends Component {
value={draft.eans ?? []}
onChange={(_event, eans) => onChange({ eans })}
renderInput={(params) => (
<TextField
<TextInput
{...params}
inputRef={inputRef}
label="EANs (Enter zum Hinzufügen)"
size="small"
slotProps={{
...params.slotProps,
inputLabel: {
...params.slotProps?.inputLabel,
shrink: true,
},
}}
/>
)}
/>

186
src/components/article/boxes/ArticleViewLists.jsx
View File

@@ -11,14 +11,11 @@ import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import FormControl from '@mui/material/FormControl';
import FormControlLabel from '@mui/material/FormControlLabel';
import IconButton from '@mui/material/IconButton';
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 TextField from '@mui/material/TextField';
import TextInput from '../../TextInput';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import AddIcon from '@mui/icons-material/Add';
@@ -638,21 +635,18 @@ export default class ArticleViewLists extends PureComponent {
}
isOptionEqualToValue={(opt, val) => opt.sku === val?.sku}
renderInput={(params) => (
<TextField
<TextInput
{...params}
label="Artikel"
placeholder="Artikel suchen..."
sx={{
bgcolor: 'background.paper',
'& .MuiInputBase-input': { py: 0.5, px: 1, fontSize: '0.82rem' },
}}
/>
)}
sx={{ flex: 1, minWidth: 0 }}
/>
<TextField
size="small"
<TextInput
type="number"
label="Menge"
value={stuecklisteCount}
disabled={busy}
onChange={(e) =>
@@ -660,11 +654,13 @@ export default class ArticleViewLists extends PureComponent {
stuecklisteCount: Math.max(1, parseInt(e.target.value, 10) || 1),
})
}
inputProps={{
min: 1,
style: { padding: '4px 6px', textAlign: 'center', fontSize: '0.82rem' },
slotProps={{
htmlInput: {
min: 1,
style: { textAlign: 'center' },
},
}}
sx={{ width: 44, bgcolor: 'background.paper', flexShrink: 0 }}
sx={{ width: 72, flexShrink: 0 }}
/>
<Tooltip title="Komponente hinzufügen">
@@ -809,21 +805,17 @@ export default class ArticleViewLists extends PureComponent {
}
isOptionEqualToValue={(opt, val) => opt.sku === val?.sku}
renderInput={(params) => (
<TextField
<TextInput
{...params}
label="Artikel"
placeholder="Artikel suchen..."
sx={{
bgcolor: 'background.paper',
'& .MuiInputBase-input': { py: 0.5, px: 1, fontSize: '0.82rem' },
}}
/>
)}
sx={{ width: '100%' }}
/>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1 }}>
<TextField
size="small"
<TextInput
type="number"
label="Menge"
value={stuecklisteCount}
@@ -833,11 +825,13 @@ export default class ArticleViewLists extends PureComponent {
stuecklisteCount: Math.max(1, parseInt(e.target.value, 10) || 1),
})
}
inputProps={{
min: 1,
style: { padding: '4px 6px', textAlign: 'center', fontSize: '0.82rem' },
slotProps={{
htmlInput: {
min: 1,
style: { textAlign: 'center' },
},
}}
sx={{ width: 70 }}
sx={{ width: 72 }}
/>
<Box sx={{ display: 'flex', gap: 0.75 }}>
@@ -917,21 +911,18 @@ export default class ArticleViewLists extends PureComponent {
}
isOptionEqualToValue={(opt, val) => opt.sku === val?.sku}
renderInput={(params) => (
<TextField
<TextInput
{...params}
label="Option"
placeholder="Option suchen..."
sx={{
bgcolor: 'background.paper',
'& .MuiInputBase-input': { py: 0.5, px: 1, fontSize: '0.82rem' },
}}
/>
)}
sx={{ flex: 1, minWidth: 0 }}
/>
<TextField
size="small"
<TextInput
type="number"
label="Menge"
value={optionCount}
disabled={busy}
onChange={(e) =>
@@ -939,11 +930,13 @@ export default class ArticleViewLists extends PureComponent {
optionCount: Math.max(1, parseInt(e.target.value, 10) || 1),
})
}
inputProps={{
min: 1,
style: { padding: '4px 6px', textAlign: 'center', fontSize: '0.82rem' },
slotProps={{
htmlInput: {
min: 1,
style: { textAlign: 'center' },
},
}}
sx={{ width: 44, bgcolor: 'background.paper', flexShrink: 0 }}
sx={{ width: 72, flexShrink: 0 }}
/>
<Tooltip title="Option hinzufügen">
@@ -1119,21 +1112,17 @@ export default class ArticleViewLists extends PureComponent {
}
isOptionEqualToValue={(opt, val) => opt.sku === val?.sku}
renderInput={(params) => (
<TextField
<TextInput
{...params}
label="Option"
placeholder="Option suchen..."
sx={{
bgcolor: 'background.paper',
'& .MuiInputBase-input': { py: 0.5, px: 1, fontSize: '0.82rem' },
}}
/>
)}
sx={{ width: '100%' }}
/>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1 }}>
<TextField
size="small"
<TextInput
type="number"
label="Menge"
value={optionCount}
@@ -1143,11 +1132,13 @@ export default class ArticleViewLists extends PureComponent {
optionCount: Math.max(1, parseInt(e.target.value, 10) || 1),
})
}
inputProps={{
min: 1,
style: { padding: '4px 6px', textAlign: 'center', fontSize: '0.82rem' },
slotProps={{
htmlInput: {
min: 1,
style: { textAlign: 'center' },
},
}}
sx={{ width: 70 }}
sx={{ width: 72 }}
/>
<FormControlLabel
@@ -1231,34 +1222,27 @@ export default class ArticleViewLists extends PureComponent {
Alle vorhandenen Merkmale sind diesem Artikel bereits zugewiesen.
</Typography>
) : (
<FormControl size="small" fullWidth>
<InputLabel id="activate-attr-label" sx={{ fontSize: '0.8rem' }}>
Merkmal für Varianten
</InputLabel>
<Select
labelId="activate-attr-label"
label="Merkmal für Varianten"
value={selectedAttributeId}
size="small"
onChange={(e) => this.setState({ selectedAttributeId: e.target.value })}
sx={{ fontSize: '0.82rem', height: 32 }}
>
{attributes.map((a) => {
const isAssigned = assignedAttributeIds.has(a.id);
return (
<MenuItem
key={a.id}
value={a.id}
disabled={isAssigned}
sx={{ fontSize: '0.82rem' }}
>
{a.name}
{isAssigned ? ' (bereits zugewiesen)' : ''}
</MenuItem>
);
})}
</Select>
</FormControl>
<TextInput
select
fullWidth
label="Merkmal für Varianten"
value={selectedAttributeId}
onChange={(e) => this.setState({ selectedAttributeId: e.target.value })}
>
{attributes.map((a) => {
const isAssigned = assignedAttributeIds.has(a.id);
return (
<MenuItem
key={a.id}
value={a.id}
disabled={isAssigned}
>
{a.name}
{isAssigned ? ' (bereits zugewiesen)' : ''}
</MenuItem>
);
})}
</TextInput>
)}
<Box sx={{ display: 'flex', gap: 0.75, justifyContent: 'flex-end' }}>
@@ -1475,8 +1459,8 @@ export default class ArticleViewLists extends PureComponent {
{/* Add Child Variant Row */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 0.5 }}>
{isCustomChildValue || availableFatherValues.length === 0 ? (
<TextField
size="small"
<TextInput
label="Neuer Wert"
placeholder="Neuer Wert..."
value={newChildText}
disabled={busy}
@@ -1487,38 +1471,26 @@ export default class ArticleViewLists extends PureComponent {
void this.handleAddChild();
}
}}
sx={{
flex: 1,
minWidth: 0,
bgcolor: 'background.paper',
'& .MuiInputBase-input': { py: 0.5, px: 1, fontSize: '0.82rem' },
}}
sx={{ flex: 1, minWidth: 0 }}
/>
) : (
<FormControl size="small" sx={{ flex: 1, minWidth: 0 }}>
<Select
size="small"
value={selectedChildValueId}
displayEmpty
disabled={busy}
onChange={(e) => this.setState({ selectedChildValueId: e.target.value })}
sx={{
bgcolor: 'background.paper',
fontSize: '0.82rem',
height: 32,
'& .MuiSelect-select': { py: 0.5, px: 1 },
}}
>
<MenuItem value="" disabled>
<em>Variante wählen...</em>
<TextInput
select
label="Variante"
value={selectedChildValueId}
disabled={busy}
onChange={(e) => this.setState({ selectedChildValueId: e.target.value })}
sx={{ flex: 1, minWidth: 0 }}
>
<MenuItem value="" disabled>
<em>Variante wählen...</em>
</MenuItem>
{availableFatherValues.map((v) => (
<MenuItem key={v.id} value={v.id}>
{v.value}
</MenuItem>
{availableFatherValues.map((v) => (
<MenuItem key={v.id} value={v.id} sx={{ fontSize: '0.82rem' }}>
{v.value}
</MenuItem>
))}
</Select>
</FormControl>
))}
</TextInput>
)}
<Tooltip title="Variante hinzufügen">

6
src/components/article/boxes/PriceUnitRow.jsx
View File

@@ -8,7 +8,7 @@ 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 TextInput from '../../TextInput';
import { findUnitBySi, unitLabel } from '../../../utils/units';
const priceUnitCornerSx = {
@@ -73,15 +73,13 @@ export class PriceUnitRow extends Component {
width: '100%',
}}
>
<TextField
<TextInput
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' },
}}
/>

83
src/components/article/tabs/ArticleAttributesTab.jsx
View File

@@ -3,10 +3,7 @@ import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';
import IconButton from '@mui/material/IconButton';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import TextField from '@mui/material/TextField';
import TextInput from '../../TextInput';
import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
import Tooltip from '@mui/material/Tooltip';
@@ -397,51 +394,45 @@ export default class ArticleAttributesTab extends PureComponent {
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
{/* Unified Add Bar: [Merkmal ▼] [Wert ▼ / Input] [+] */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<FormControl size="small" sx={{ minWidth: 170 }}>
<InputLabel id="merkmal-select-label">Merkmal</InputLabel>
<Select
labelId="merkmal-select-label"
value={selectedMerkmalKey}
label="Merkmal"
disabled={saving || merkmalOptions.length === 0}
onChange={this.handleMerkmalChange}
sx={{ bgcolor: 'background.paper' }}
>
{merkmalOptions.map((m) => (
<MenuItem key={m.key} value={m.key}>
{m.name}
</MenuItem>
))}
</Select>
</FormControl>
<TextInput
select
label="Merkmal"
value={selectedMerkmalKey}
disabled={saving || merkmalOptions.length === 0}
onChange={this.handleMerkmalChange}
sx={{ minWidth: 170 }}
>
{merkmalOptions.map((m) => (
<MenuItem key={m.key} value={m.key}>
{m.name}
</MenuItem>
))}
</TextInput>
{isAttr ? (
<FormControl size="small" sx={{ minWidth: 170 }}>
<InputLabel id="item-select-label">Wert</InputLabel>
<Select
labelId="item-select-label"
value={selectedItemId}
label="Wert"
disabled={saving || availableItems.length === 0}
onChange={this.handleItemChange}
sx={{ bgcolor: 'background.paper' }}
>
{availableItems.length === 0 ? (
<MenuItem value="" disabled>
(Keine Werte)
<TextInput
select
label="Wert"
value={selectedItemId}
disabled={saving || availableItems.length === 0}
onChange={this.handleItemChange}
sx={{ minWidth: 170 }}
>
{availableItems.length === 0 ? (
<MenuItem value="" disabled>
(Keine Werte)
</MenuItem>
) : (
availableItems.map((val) => (
<MenuItem key={val.id} value={val.id}>
{val.value}
</MenuItem>
) : (
availableItems.map((val) => (
<MenuItem key={val.id} value={val.id}>
{val.value}
</MenuItem>
))
)}
</Select>
</FormControl>
))
)}
</TextInput>
) : (
<TextField
size="small"
<TextInput
label="Wert"
placeholder="Wert..."
value={customValueText}
disabled={saving || !selectedMerkmalKey}
@@ -452,7 +443,7 @@ export default class ArticleAttributesTab extends PureComponent {
void this.handleAddItem();
}
}}
sx={{ minWidth: 170, bgcolor: 'background.paper' }}
sx={{ minWidth: 170 }}
/>
)}

12
src/components/article/tabs/ArticleLabelTab.jsx
View File

@@ -3,7 +3,7 @@ import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import CircularProgress from '@mui/material/CircularProgress';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import TextInput from '../../TextInput';
import MenuItem from '@mui/material/MenuItem';
import Grid from '@mui/material/Grid';
import Paper from '@mui/material/Paper';
@@ -210,22 +210,21 @@ export default class ArticleLabelTab extends PureComponent {
<Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 3, alignItems: 'flex-start' }}>
<TextField
<TextInput
select
label="Drucker"
value={selectedPrinterId}
onChange={(e) => this.setState({ selectedPrinterId: e.target.value })}
sx={{ minWidth: 200 }}
size="small"
>
{printers.map((p) => (
<MenuItem key={p.id} value={p.id}>
{p.desc ? `${p.desc} (${p.address})` : p.address}
</MenuItem>
))}
</TextField>
</TextInput>
<TextField
<TextInput
type="number"
label="Anzahl"
value={quantity}
@@ -233,9 +232,8 @@ export default class ArticleLabelTab extends PureComponent {
const val = parseInt(e.target.value, 10);
this.setState({ quantity: isNaN(val) ? 1 : Math.max(1, val) });
}}
inputProps={{ min: 1, max: 9999 }}
slotProps={{ htmlInput: { min: 1, max: 9999 } }}
sx={{ width: 100 }}
size="small"
/>
<Button

6
src/components/brand/BrandImageSearchDialog.jsx
View File

@@ -11,7 +11,7 @@ import IconButton from '@mui/material/IconButton';
import InputAdornment from '@mui/material/InputAdornment';
import LinearProgress from '@mui/material/LinearProgress';
import Skeleton from '@mui/material/Skeleton';
import TextField from '@mui/material/TextField';
import TextInput from '../TextInput';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
@@ -276,9 +276,9 @@ export default class BrandImageSearchDialog extends PureComponent {
}}
sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}
>
<TextField
size="small"
<TextInput
fullWidth
label="Suchbegriff"
value={query}
disabled={isSearching || Boolean(processingId)}
onChange={(e) => this.setState({ query: e.target.value })}

7
src/components/tiles/ArticleTile.jsx
View File

@@ -310,8 +310,11 @@ export class ArticleTile extends Tile {
}
renderExtra() {
const childCount = Number(this.props.article?.childCount) || 0;
if (childCount <= 0) return null;
const { article } = this.props;
if (!article) return null;
const isFather = Boolean(article.isFather || article.is_father);
const childCount = Number(article.childCount) || 0;
if (!isFather && childCount <= 0) return null;
return (
<Box
sx={{

2
src/nav.js
View File

@@ -166,7 +166,7 @@ export const SUB_NAV = {
{
segment: 'merkmale',
label: 'Merkmale',
title: 'Merkmale & Attribute',
title: 'Merkmale',
icon: CategoryIcon,
help: 'Globale Merkmale, Attribute und Werte verwalten',
},

139
src/routes/artikel/merkmale.jsx
View File

@@ -8,9 +8,6 @@ import ListItem from '@mui/material/ListItem';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
import Tooltip from '@mui/material/Tooltip';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
import TuneIcon from '@mui/icons-material/Tune';
@@ -47,12 +44,10 @@ class ArtikelMerkmalePage extends PureComponent {
properties: initialProperties,
propDrafts: draftsFrom(initialProperties, 'name'),
newPropName: '',
newPropExclusive: true,
attributes: initialAttributes,
attrDrafts: draftsFrom(initialAttributes, 'name'),
newAttrName: '',
newAttrExclusive: true,
selectedAttributeId: initialSelectedAttrId,
valDrafts: draftsFrom(
@@ -333,13 +328,13 @@ class ArtikelMerkmalePage extends PureComponent {
async handleCreateProperty() {
const name = this.state.newPropName.trim();
if (!name || this.state.busyKey != null) return;
if (!name) return;
this.setState({ busyKey: 'new-prop' });
try {
const row = await propertyAutomat.actions.createProperty({
name,
exclusive: this.state.newPropExclusive,
exclusive: true,
});
if (this._cancelled) return;
this.setState({ newPropName: '', busyKey: null });
@@ -353,7 +348,6 @@ class ArtikelMerkmalePage extends PureComponent {
async handleTogglePropertyExclusive(prop, e) {
e?.stopPropagation();
if (this.state.busyKey != null) return;
const nextExclusive = !prop.exclusive;
this.setState({ busyKey: `prop-ex-${prop.id}` });
@@ -380,7 +374,7 @@ class ArtikelMerkmalePage extends PureComponent {
}));
return;
}
if (draft === prop.name || this.state.busyKey != null) return;
if (draft === prop.name) return;
this.setState({ busyKey: `prop-${prop.id}` });
try {
@@ -399,7 +393,6 @@ class ArtikelMerkmalePage extends PureComponent {
}
async handleDeleteProperty(prop) {
if (this.state.busyKey != null) return;
if (!window.confirm(`Merkmal „${prop.name}" wirklich löschen?`)) {
return;
}
@@ -421,13 +414,13 @@ class ArtikelMerkmalePage extends PureComponent {
async handleCreateAttribute() {
const name = this.state.newAttrName.trim();
if (!name || this.state.busyKey != null) return;
if (!name) return;
this.setState({ busyKey: 'new-attr' });
try {
const row = await attributeAutomat.actions.createAttribute({
name,
exclusive: this.state.newAttrExclusive,
exclusive: true,
});
if (this._cancelled) return;
this.setState({
@@ -451,7 +444,7 @@ class ArtikelMerkmalePage extends PureComponent {
}));
return;
}
if (draft === attr.name || this.state.busyKey != null) return;
if (draft === attr.name) return;
this.setState({ busyKey: `attr-${attr.id}` });
try {
@@ -471,7 +464,6 @@ class ArtikelMerkmalePage extends PureComponent {
async handleToggleAttributeExclusive(attr, e) {
e?.stopPropagation();
if (this.state.busyKey != null) return;
const nextExclusive = !attr.exclusive;
this.setState({ busyKey: `attr-ex-${attr.id}` });
@@ -492,7 +484,6 @@ class ArtikelMerkmalePage extends PureComponent {
async handleDeleteAttribute(attr, e) {
e?.stopPropagation();
if (this.state.busyKey != null) return;
if (!window.confirm(`Attribut „${attr.name}" und alle zugehörigen Werte wirklich löschen?`)) {
return;
}
@@ -523,7 +514,7 @@ class ArtikelMerkmalePage extends PureComponent {
async handleCreateValue(attrId) {
const text = this.state.newValText.trim();
if (!text || this.state.busyKey != null || !attrId) return;
if (!text || !attrId) return;
this.setState({ busyKey: 'new-val' });
try {
@@ -546,7 +537,7 @@ class ArtikelMerkmalePage extends PureComponent {
}));
return;
}
if (draft === val.value || this.state.busyKey != null) return;
if (draft === val.value) return;
this.setState({ busyKey: `val-${val.id}` });
try {
@@ -565,7 +556,6 @@ class ArtikelMerkmalePage extends PureComponent {
}
async handleDeleteValue(val) {
if (this.state.busyKey != null) return;
if (!window.confirm(`Wert „${val.value}" wirklich löschen?`)) {
return;
}
@@ -591,18 +581,15 @@ class ArtikelMerkmalePage extends PureComponent {
properties,
propDrafts,
newPropName,
newPropExclusive,
attributes,
attrDrafts,
newAttrName,
newAttrExclusive,
selectedAttributeId,
valDrafts,
newValText,
busyKey,
} = this.state;
const busy = busyKey != null;
if (attrStatus === 'loading' && propStatus === 'loading' && !properties.length && !attributes.length) {
return (
@@ -638,7 +625,6 @@ class ArtikelMerkmalePage extends PureComponent {
<Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
Auswahl-Merkmale
</Typography>
<Chip label={attributes.length} size="small" sx={{ ml: 'auto', fontWeight: 600, height: 20 }} />
</Box>
<List dense disablePadding ref={this.attrListRef}>
@@ -693,7 +679,6 @@ class ArtikelMerkmalePage extends PureComponent {
size="small"
label=""
value={attrDrafts[a.id] ?? ''}
disabled={busy}
onChange={(next) =>
this.setState((prev) => ({
attrDrafts: { ...prev.attrDrafts, [a.id]: next },
@@ -717,34 +702,29 @@ class ArtikelMerkmalePage extends PureComponent {
/>
</Box>
<Tooltip
title={
a.exclusive
? 'Einzelauswahl (Artikel kann max. 1 Wert wählen)'
: 'Mehrfachauswahl (Artikel kann mehrere Werte wählen)'
}
>
<Chip
label={a.exclusive ? '1x' : 'Multi'}
<Chip
label="Multi"
size="small"
color={a.exclusive ? 'primary' : 'default'}
variant={a.exclusive ? 'filled' : 'outlined'}
color={a.exclusive ? 'default' : 'success'}
variant="filled"
onClick={(e) => void this.handleToggleAttributeExclusive(a, e)}
aria-pressed={!a.exclusive}
sx={{
height: 22,
fontSize: '0.72rem',
fontWeight: 600,
cursor: 'pointer',
flexShrink: 0,
...(a.exclusive
? { bgcolor: 'grey.300', color: 'text.secondary' }
: null),
}}
/>
</Tooltip>
<IconButton
edge="end"
size="small"
aria-label={`„${a.name}" löschen`}
disabled={busy}
onClick={(e) => void this.handleDeleteAttribute(a, e)}
sx={{ flexShrink: 0 }}
>
@@ -761,7 +741,6 @@ class ArtikelMerkmalePage extends PureComponent {
size="small"
label=""
value={newAttrName}
disabled={busy}
onChange={(next) => this.setState({ newAttrName: next })}
onKeyDown={(event) => {
if (event.key === 'Enter') {
@@ -774,29 +753,12 @@ class ArtikelMerkmalePage extends PureComponent {
<Button
variant="contained"
size="small"
disabled={busy || !newAttrName.trim()}
disabled={!newAttrName.trim()}
onClick={() => void this.handleCreateAttribute()}
>
{busyKey === 'new-attr' ? '…' : 'Hinzufügen'}
</Button>
</Box>
<FormControlLabel
control={
<Checkbox
size="small"
checked={newAttrExclusive}
disabled={busy}
onChange={(e) => this.setState({ newAttrExclusive: e.target.checked })}
sx={{ p: 0.5 }}
/>
}
label={
<Typography variant="caption" color="text.secondary">
Einzelauswahl (max. 1 Wert pro Artikel)
</Typography>
}
sx={{ ml: 0.5, mt: -0.5 }}
/>
</Box>
</Stack>
</PanelTile>
@@ -807,15 +769,8 @@ class ArtikelMerkmalePage extends PureComponent {
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<LabelImportantIcon sx={{ color: 'text.secondary', fontSize: 20 }} />
<Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
{selectedAttr ? `Werte für „${selectedAttr.name}“` : 'Werte'}
{selectedAttr ? `Werte für Auswahl-Merkmal „${selectedAttr.name}“` : 'Werte'}
</Typography>
{selectedAttr ? (
<Chip
label={selectedValues.length}
size="small"
sx={{ ml: 'auto', fontWeight: 600, height: 20 }}
/>
) : null}
</Box>
{!selectedAttr ? (
@@ -825,12 +780,7 @@ class ArtikelMerkmalePage extends PureComponent {
) : (
<>
<List dense disablePadding ref={this.valListRef}>
{selectedValues.length === 0 ? (
<Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
Noch keine Werte für „{selectedAttr.name}“ hinterlegt.
</Typography>
) : (
selectedValues.map((v) => (
{selectedValues.map((v) => (
<ListItem
key={v.id}
disableGutters
@@ -855,7 +805,6 @@ class ArtikelMerkmalePage extends PureComponent {
size="small"
label=""
value={valDrafts[v.id] ?? ''}
disabled={busy}
onChange={(next) =>
this.setState((prev) => ({
valDrafts: { ...prev.valDrafts, [v.id]: next },
@@ -881,14 +830,12 @@ class ArtikelMerkmalePage extends PureComponent {
edge="end"
size="small"
aria-label={`„${v.value}" löschen`}
disabled={busy}
onClick={() => void this.handleDeleteValue(v)}
>
<DeleteOutlinedIcon fontSize="small" />
</IconButton>
</ListItem>
))
)}
))}
</List>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
@@ -896,7 +843,6 @@ class ArtikelMerkmalePage extends PureComponent {
size="small"
label=""
value={newValText}
disabled={busy}
onChange={(next) => this.setState({ newValText: next })}
onKeyDown={(event) => {
if (event.key === 'Enter') {
@@ -909,7 +855,7 @@ class ArtikelMerkmalePage extends PureComponent {
<Button
variant="contained"
size="small"
disabled={busy || !newValText.trim()}
disabled={!newValText.trim()}
onClick={() => void this.handleCreateValue(selectedAttr.id)}
>
{busyKey === 'new-val' ? '…' : 'Hinzufügen'}
@@ -928,7 +874,6 @@ class ArtikelMerkmalePage extends PureComponent {
<Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
Text-Merkmale
</Typography>
<Chip label={properties.length} size="small" sx={{ ml: 'auto', fontWeight: 600, height: 20 }} />
</Box>
<List dense disablePadding ref={this.propListRef}>
@@ -957,7 +902,6 @@ class ArtikelMerkmalePage extends PureComponent {
size="small"
label=""
value={propDrafts[p.id] ?? ''}
disabled={busy}
onChange={(next) =>
this.setState((prev) => ({
propDrafts: { ...prev.propDrafts, [p.id]: next },
@@ -979,33 +923,28 @@ class ArtikelMerkmalePage extends PureComponent {
}}
sx={{ flex: 1 }}
/>
<Tooltip
title={
p.exclusive
? 'Einzelauswahl (Artikel kann max. 1 Wert für dieses Merkmal haben)'
: 'Mehrfachauswahl (Artikel kann mehrere Werte für dieses Merkmal haben)'
}
>
<Chip
label={p.exclusive ? '1x' : 'Multi'}
<Chip
label="Multi"
size="small"
color={p.exclusive ? 'primary' : 'default'}
variant={p.exclusive ? 'filled' : 'outlined'}
color={p.exclusive ? 'default' : 'success'}
variant="filled"
onClick={(e) => void this.handleTogglePropertyExclusive(p, e)}
aria-pressed={!p.exclusive}
sx={{
height: 22,
fontSize: '0.72rem',
fontWeight: 600,
cursor: 'pointer',
flexShrink: 0,
...(p.exclusive
? { bgcolor: 'grey.300', color: 'text.secondary' }
: null),
}}
/>
</Tooltip>
<IconButton
edge="end"
size="small"
aria-label={`„${p.name}" löschen`}
disabled={busy}
onClick={() => void this.handleDeleteProperty(p)}
>
<DeleteOutlinedIcon fontSize="small" />
@@ -1020,7 +959,6 @@ class ArtikelMerkmalePage extends PureComponent {
size="small"
label=""
value={newPropName}
disabled={busy}
onChange={(next) => this.setState({ newPropName: next })}
onKeyDown={(event) => {
if (event.key === 'Enter') {
@@ -1033,29 +971,12 @@ class ArtikelMerkmalePage extends PureComponent {
<Button
variant="contained"
size="small"
disabled={busy || !newPropName.trim()}
disabled={!newPropName.trim()}
onClick={() => void this.handleCreateProperty()}
>
{busyKey === 'new-prop' ? '…' : 'Hinzufügen'}
</Button>
</Box>
<FormControlLabel
control={
<Checkbox
size="small"
checked={newPropExclusive}
disabled={busy}
onChange={(e) => this.setState({ newPropExclusive: e.target.checked })}
sx={{ p: 0.5 }}
/>
}
label={
<Typography variant="caption" color="text.secondary">
Einzelauswahl (max. 1 Wert pro Artikel)
</Typography>
}
sx={{ ml: 0.5, mt: -0.5 }}
/>
</Box>
</Stack>
</PanelTile>