u

src/components/merkmale/ArtikelMerkmalAuswahl.jsx

@@ -121,11 +121,13 @@ class ArtikelMerkmalAuswahl extends PureComponent {
   };
 
   render() {
-    const { attribute, isSelected, onSelect, disabled, sx } = this.props;
+    const { attribute: propAttribute, isSelected, onSelect, disabled, sx } = this.props;
+    const attribute = propAttribute ?? this.props.item;
     const { draft, busy } = this.state;
     const name = attribute?.name ?? '';
     const exclusive = attribute ? Boolean(attribute.exclusive) : true;
     const isDisabled = disabled || busy;
+    const articleCount = attribute?.articleCount ?? 0;
 
     return (
       <ListItem
@@ -211,6 +213,29 @@ class ArtikelMerkmalAuswahl extends PureComponent {
           }}
         />
 
+        <Chip
+          size="small"
+          label={articleCount}
+          onClick={(e) => e.stopPropagation()}
+          sx={{
+            height: 24,
+            width: 52,
+            minWidth: 52,
+            maxWidth: 52,
+            fontSize: '0.75rem',
+            fontWeight: 600,
+            fontVariantNumeric: 'tabular-nums',
+            bgcolor: 'action.hover',
+            color: articleCount > 0 ? 'text.primary' : 'text.disabled',
+            flexShrink: 0,
+            '& .MuiChip-label': {
+              px: 0.5,
+              textAlign: 'center',
+              width: '100%',
+            },
+          }}
+        />
+
         <IconButton
           aria-label={`„${name}“ löschen`}
           disabled={isDisabled || !attribute}

src/components/merkmale/ArtikelMerkmalText.jsx

@@ -124,6 +124,7 @@ class ArtikelMerkmalText extends PureComponent {
     const name = item?.name ?? '';
     const exclusive = item ? Boolean(item.exclusive) : true;
     const isDisabled = disabled || busy;
+    const articleCount = item?.articleCount ?? 0;
 
     return (
       <ListItem
@@ -196,6 +197,28 @@ class ArtikelMerkmalText extends PureComponent {
           }}
         />
 
+        <Chip
+          size="small"
+          label={articleCount}
+          sx={{
+            height: 24,
+            width: 52,
+            minWidth: 52,
+            maxWidth: 52,
+            fontSize: '0.75rem',
+            fontWeight: 600,
+            fontVariantNumeric: 'tabular-nums',
+            bgcolor: 'action.hover',
+            color: articleCount > 0 ? 'text.primary' : 'text.disabled',
+            flexShrink: 0,
+            '& .MuiChip-label': {
+              px: 0.5,
+              textAlign: 'center',
+              width: '100%',
+            },
+          }}
+        />
+
         <IconButton
           aria-label={`„${name}“ löschen`}
           disabled={isDisabled || !item}

src/components/merkmale/ArtikelMerkmalWert.jsx

@@ -1,5 +1,6 @@
 import { PureComponent } from 'react';
 import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
 import IconButton from '@mui/material/IconButton';
 import ListItem from '@mui/material/ListItem';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
@@ -102,6 +103,7 @@ class ArtikelMerkmalWert extends PureComponent {
     const { draft, busy } = this.state;
     const valText = item?.value ?? '';
     const isDisabled = disabled || busy;
+    const articleCount = item?.articleCount ?? 0;
 
     return (
       <ListItem
@@ -147,6 +149,28 @@ class ArtikelMerkmalWert extends PureComponent {
           sx={{ flex: 1, minWidth: 0 }}
         />
 
+        <Chip
+          size="small"
+          label={articleCount}
+          sx={{
+            height: 24,
+            width: 52,
+            minWidth: 52,
+            maxWidth: 52,
+            fontSize: '0.75rem',
+            fontWeight: 600,
+            fontVariantNumeric: 'tabular-nums',
+            bgcolor: 'action.hover',
+            color: articleCount > 0 ? 'text.primary' : 'text.disabled',
+            flexShrink: 0,
+            '& .MuiChip-label': {
+              px: 0.5,
+              textAlign: 'center',
+              width: '100%',
+            },
+          }}
+        />
+
         <IconButton
           aria-label={`„${valText}“ löschen`}
           disabled={isDisabled || !item}