u

src/routes/artikel.jsx

@@ -48,6 +48,7 @@ import {
   categoryAutomat,
 } from '../automats';
 import { BrandLabel } from '../components/brand';
+import { SCRIM_LABEL } from '../colors';
 // #endregion
 
 // #region Styles & Measure Sample
@@ -66,6 +67,8 @@ const resultRowSx = {
     whiteSpace: 'nowrap',
     lineHeight: '22px',
     height: '22px',
+    display: 'flex',
+    alignItems: 'center',
   },
   '& .MuiListItemText-secondary': {
     overflow: 'hidden',
@@ -579,22 +582,72 @@ class ArtikelSearchPage extends Component {
               <Box>
                 {rows.length > 0 && (
                   <List component={Paper} variant="outlined" disablePadding>
-                    {rows.map((row, index) => (
-                      <ListItemButton
-                        key={row.id}
-                        type="button"
-                        divider={index < rows.length - 1}
-                        data-result-row
-                        onMouseDown={(e) => e.preventDefault()}
-                        onClick={() => {
-                          this.persistQuery();
-                          this.props.navigate(artikelDetailPath(row));
-                        }}
-                        sx={resultRowSx}
-                      >
-                        <ListItemText
-                          primary={row.name}
-                          secondary={
+                    {rows.map((row, index) => {
+                      const isParent = Boolean(row.isParent || row.is_parent);
+                      const childCount = Number(row.childCount) || 0;
+                      const showChildBadge = isParent || childCount > 0;
+                      const price = row.price ?? row.net ?? row.vknetto;
+                      return (
+                        <ListItemButton
+                          key={row.id}
+                          type="button"
+                          divider={index < rows.length - 1}
+                          data-result-row
+                          onMouseDown={(e) => e.preventDefault()}
+                          onClick={() => {
+                            this.persistQuery();
+                            this.props.navigate(artikelDetailPath(row));
+                          }}
+                          sx={resultRowSx}
+                        >
+                          <ListItemText
+                            primary={
+                              <Box
+                                component="span"
+                                sx={{
+                                  display: 'inline-flex',
+                                  alignItems: 'center',
+                                  gap: 0.75,
+                                  maxWidth: '100%',
+                                }}
+                              >
+                                <Box
+                                  component="span"
+                                  sx={{
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                  }}
+                                >
+                                  {row.name}
+                                </Box>
+                                {showChildBadge && (
+                                  <Box
+                                    component="span"
+                                    title={`${childCount} Varianten`}
+                                    sx={{
+                                      display: 'inline-flex',
+                                      alignItems: 'center',
+                                      justifyContent: 'center',
+                                      px: 0.75,
+                                      py: 0.25,
+                                      borderRadius: 999,
+                                      bgcolor: SCRIM_LABEL,
+                                      color: 'common.white',
+                                      fontSize: 11,
+                                      fontWeight: 600,
+                                      lineHeight: 1.2,
+                                      whiteSpace: 'nowrap',
+                                      flexShrink: 0,
+                                      pointerEvents: 'none',
+                                    }}
+                                  >
+                                    {childCount}
+                                  </Box>
+                                )}
+                              </Box>
+                            }
+                            secondary={
                             <Typography
                               component="span"
                               variant="body2"
@@ -641,10 +694,11 @@ class ArtikelSearchPage extends Component {
                           variant="body2"
                           sx={{ fontWeight: 600, flexShrink: 0, ml: 2 }}
                         >
-                          {row.price != null ? formatPrice(row.price) : '—'}
+                          {price != null ? formatPrice(price) : '—'}
                         </Typography>
                       </ListItemButton>
-                    ))}
+                      );
+                    })}
                   </List>
                 )}
               </Box>