u

src/components/brand/ArtikelMarke.jsx

@@ -1,7 +1,9 @@
 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 Tooltip from '@mui/material/Tooltip';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
 import ImageSearchIcon from '@mui/icons-material/ImageSearch';
 import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
@@ -111,6 +113,8 @@ class ArtikelMarke extends PureComponent {
     const name = brand?.name ?? '';
     const hasLogo = this.hasLogo();
 
+    const articleCount = brand?.articleCount ?? 0;
+
     return (
       <>
         <ListItem
@@ -142,8 +146,7 @@ class ArtikelMarke extends PureComponent {
             </IconButton>
           )}
 
-
-          {true ? (<SingleLineTextEdit
+          <SingleLineTextEdit
             size="small"
             label=""
             value={draft}
@@ -153,7 +156,28 @@ class ArtikelMarke extends PureComponent {
             onKeyDown={this.handleKeyDown}
             sx={{ flex: 1, minWidth: 0 }}
           />
-          ) : (<Typography sx={{ flex: 1, px: 1.6, py: 0.9, borderRadius: 1, border: '1px solid rgba(0, 0, 0, 0.23)' }}>{draft}</Typography>)}
+
+          <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`}