09fb1da335
- Updated API documentation to reflect changes in article data structure. - Improved ArticlePhoto component to support dynamic sizing and object fit options. - Added performance logging for image upload in ArticlePhotosDialog and ArticlePhotoTile components. - Enhanced ArticleTile to conditionally render photos and adjusted styling for better layout. - Optimized image preparation process with configurable AVIF encoding speed.
106 lines
2.8 KiB
JavaScript
106 lines
2.8 KiB
JavaScript
import Inventory2OutlinedIcon from '@mui/icons-material/Inventory2Outlined';
|
|
import Box from '@mui/material/Box';
|
|
import ButtonBase from '@mui/material/ButtonBase';
|
|
import Typography from '@mui/material/Typography';
|
|
import { Tile, tileBaseSx } from './Tile';
|
|
import { formatPrice } from '../../utils/price';
|
|
import { articleSku } from '../../pages/artikel/articleRoute';
|
|
import ArticlePhoto from '../article/ArticlePhoto';
|
|
|
|
export class ArticleTile extends Tile {
|
|
hasPhoto() {
|
|
const { article } = this.props;
|
|
return article?.thumbHash != null || article?.fullHash != null;
|
|
}
|
|
|
|
renderIcon() {
|
|
return <Inventory2OutlinedIcon color="action" sx={{ fontSize: 36 }} />;
|
|
}
|
|
|
|
renderSecondary() {
|
|
const { article } = this.props;
|
|
if (!article) return null;
|
|
const sku = articleSku(article);
|
|
return (
|
|
<>
|
|
{sku ? (
|
|
<Typography variant="caption" color="text.secondary" noWrap sx={{ maxWidth: '100%' }}>
|
|
{sku}
|
|
</Typography>
|
|
) : null}
|
|
{article.net != null && (
|
|
<Typography variant="caption" fontWeight={600}>
|
|
{formatPrice(article.net)}
|
|
</Typography>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
if (!this.hasPhoto()) {
|
|
return super.render();
|
|
}
|
|
|
|
const { article, label, sx, disabled } = this.props;
|
|
const sku = articleSku(article);
|
|
|
|
return (
|
|
<ButtonBase
|
|
component="button"
|
|
type="button"
|
|
disabled={disabled}
|
|
onClick={this.handleClick}
|
|
sx={{
|
|
...tileBaseSx,
|
|
p: 0,
|
|
gap: 0,
|
|
position: 'relative',
|
|
...(disabled ? { opacity: 0.5, pointerEvents: 'none' } : {}),
|
|
...sx,
|
|
}}
|
|
>
|
|
<Box sx={{ position: 'absolute', inset: 0 }}>
|
|
<ArticlePhoto
|
|
fill
|
|
photo={{
|
|
fullHash: article.fullHash,
|
|
thumbW: article.thumbW,
|
|
thumbH: article.thumbH,
|
|
thumbHash: article.thumbHash,
|
|
}}
|
|
/>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
px: 1,
|
|
py: 0.75,
|
|
background: 'linear-gradient(transparent, rgba(0,0,0,0.65))',
|
|
textAlign: 'left',
|
|
}}
|
|
>
|
|
{label ? (
|
|
<Typography
|
|
variant="body2"
|
|
fontWeight={600}
|
|
noWrap
|
|
sx={{ color: '#fff', lineHeight: 1.2 }}
|
|
>
|
|
{label}
|
|
</Typography>
|
|
) : null}
|
|
{sku ? (
|
|
<Typography variant="caption" noWrap sx={{ color: 'rgba(255,255,255,0.85)' }}>
|
|
{sku}
|
|
</Typography>
|
|
) : null}
|
|
</Box>
|
|
</ButtonBase>
|
|
);
|
|
}
|
|
}
|