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-21 00:33:36 +02:00
parent 07206674c1
commit 18fa62514a
1 changed files with 115 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
src/routes/artikel.jsx
View File

@@ -57,31 +57,21 @@ import { SCRIM_LABEL } from '../colors';
// #region Styles & Measure Sample // #region Styles & Measure Sample
const resultRowSx = { const resultRowSx = {
alignItems: 'center', alignItems: 'center',
minHeight: 64, minHeight: 40,
maxHeight: 64, maxHeight: 40,
height: 64, height: 40,
boxSizing: 'border-box', boxSizing: 'border-box',
py: 0, py: 0,
gap: 1.25,
// Keep every row one line so sample height matches real rows. // Keep every row one line so sample height matches real rows.
'& .MuiListItemText-root': { minWidth: 0, my: 0 }, '& .MuiListItemText-root': { minWidth: 0, my: 0 },
'& .MuiListItemText-primary': { };
overflow: 'hidden',
textOverflow: 'ellipsis', const resultCellSx = {
whiteSpace: 'nowrap', flexShrink: 0,
lineHeight: '22px', whiteSpace: 'nowrap',
height: '22px', overflow: 'hidden',
display: 'flex', textOverflow: 'ellipsis',
alignItems: 'center',
},
'& .MuiListItemText-secondary': {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
lineHeight: '20px',
height: '20px',
display: 'flex',
alignItems: 'center',
},
}; };
/** /**
@@ -112,16 +102,8 @@ class ResultRow extends Component {
disabled disabled
sx={{ ...resultRowSx, pointerEvents: 'none', userSelect: 'none', opacity: 0 }} sx={{ ...resultRowSx, pointerEvents: 'none', userSelect: 'none', opacity: 0 }}
> >
<ListItemText <Box sx={{ width: 28, height: 28, flexShrink: 0 }} />
primary={'\u00A0'} <Typography variant="body2">&nbsp;</Typography>
slotProps={{ primary: { fontWeight: 500, noWrap: true } }}
/>
<Typography
variant="body2"
sx={{ fontWeight: 600, flexShrink: 0, ml: 2, visibility: 'hidden' }}
>
&nbsp;
</Typography>
</ListItemButton> </ListItemButton>
); );
} }
@@ -139,120 +121,112 @@ class ResultRow extends Component {
onMouseDown={(e) => e.preventDefault()} onMouseDown={(e) => e.preventDefault()}
onClick={() => onOpenArticle?.(row)} onClick={() => onOpenArticle?.(row)}
sx={resultRowSx} sx={resultRowSx}
title={row.sku}
> >
<ListItemText <Box
primary={ sx={{
width: 28,
height: 28,
flexShrink: 0,
borderRadius: 0.5,
overflow: 'hidden',
bgcolor: 'action.hover',
}}
>
{row.smallThumbBinary && (
<Box <Box
component="span" component="img"
sx={{ alt=""
display: 'inline-flex', src={`data:image/avif;base64,${row.smallThumbBinary}`}
alignItems: 'center', sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
gap: 0.75, />
maxWidth: '100%', )}
}} </Box>
>
<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"
color="text.secondary"
noWrap
sx={{
display: 'inline-flex',
alignItems: 'center',
gap: 0.5,
maxWidth: '100%',
lineHeight: '20px',
height: '20px',
}}
>
{(row.brand?.name || row.brandName) ? (
<Box
component="span"
sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }}
>
<BrandLabel
brand={row.brand || { name: row.brandName, thumbHash: row.brandThumbHash }}
name={row.brand?.name || row.brandName}
size={14}
spacing={0.5}
typographyProps={{
variant: 'body2',
color: 'text.secondary',
noWrap: true,
}}
/>
<span>·</span>
</Box>
) : null}
<Box component="span" sx={{ flexShrink: 0 }}>
{row.sku}
</Box>
<Box component="span" sx={{ flexShrink: 0 }}>
·
</Box>
<Box
component="span"
sx={{ flexShrink: 0 }}
title={
row.warehouses?.length > 0
? row.warehouses.map((w) => `${w.name || 'Lager'}: ${formatStock(w.stock)}`).join(' · ')
: undefined
}
>
Bestand {formatStock(row.stock)}
</Box>
{row.categories ? (
<Box
component="span"
sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
>
{` · ${formatCategoryList(row.categories, categoryFacets ?? {})}`}
</Box>
) : null}
</Typography>
}
slotProps={{ primary: { fontWeight: 500, noWrap: true } }}
/>
<Typography <Typography
variant="body2" variant="body2"
sx={{ fontWeight: 600, flexShrink: 0, ml: 2 }} color="text.secondary"
sx={{ ...resultCellSx, minWidth: 28, textAlign: 'right' }}
title={
row.warehouses?.length > 0
? row.warehouses.map((w) => `${w.name || 'Lager'}: ${formatStock(w.stock)}`).join(' · ')
: undefined
}
>
{formatStock(row.stock)}
</Typography>
{row.categories ? (
<Typography
variant="body2"
sx={{ ...resultCellSx, maxWidth: '20%', color: '#9aa0a6' }}
>
{formatCategoryList(row.categories, categoryFacets ?? {})}
</Typography>
) : null}
{(row.brand?.name || row.brandName) ? (
<Box
sx={{
...resultCellSx,
maxWidth: '16%',
display: 'inline-flex',
alignItems: 'center',
color: '#1976d2',
fontWeight: 500,
'& *': { color: '#1976d2 !important' },
}}
>
<BrandLabel
brand={row.brand || { name: row.brandName, thumbHash: row.brandThumbHash }}
name={row.brand?.name || row.brandName}
size={14}
spacing={0.5}
typographyProps={{ variant: 'body2', color: 'primary.main', noWrap: true }}
/>
</Box>
) : null}
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: 0.75,
minWidth: 0,
flex: 1,
}}
>
<Typography
variant="body2"
noWrap
sx={{ fontWeight: 500, minWidth: 0 }}
>
{row.name}
</Typography>
{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>
<Typography
variant="body2"
sx={{ fontWeight: 600, flexShrink: 0 }}
> >
{price != null ? formatPrice(price) : '—'} {price != null ? formatPrice(price) : '—'}
</Typography> </Typography>