diff --git a/src/components/PicturesDialog.jsx b/src/components/PicturesDialog.jsx index d2a9f44..fa9c1e5 100644 --- a/src/components/PicturesDialog.jsx +++ b/src/components/PicturesDialog.jsx @@ -17,6 +17,7 @@ import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined import EditOutlinedIcon from '@mui/icons-material/EditOutlined'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; +import GoogleIcon from '@mui/icons-material/Google'; import { enqueueSnackbar } from 'notistack'; import AppDialog from './AppDialog'; import { thumb, article as articleApi } from '../api'; @@ -29,6 +30,7 @@ import { articleWithPhotoOrder, articleWithUploadedPhoto, articleWithoutPhoto, + buildGoogleSearchQuery, formatPhotoDimensions, formatPhotoSizeKb, sortedPhotos, @@ -182,6 +184,22 @@ function resolveTitle(props, single) { } return single ? 'Bild' : 'Bilder'; } + +function resolveGoogleImagesQuery(props) { + if (props.article) { + return buildGoogleSearchQuery(props.article); + } + if (props.brand?.name) { + return String(props.brand.name).trim(); + } + if (props.category?.name) { + return String(props.category.name).trim(); + } + if (props.attributeValue) { + return String(props.attributeValue.value || props.attributeValue.name || '').trim(); + } + return ''; +} // #endregion /** @@ -400,6 +418,13 @@ export default class PicturesDialog extends PureComponent { handleSearchClose = () => { this.setState({ searchOpen: false }); }; + + handleOpenGoogleImages = () => { + const query = resolveGoogleImagesQuery(this.props); + if (!query) return; + const url = `https://www.google.com/search?tbm=isch&q=${encodeURIComponent(query)}`; + window.open(url, '_blank', 'noopener,noreferrer'); + }; // #endregion // #region render helpers @@ -627,6 +652,7 @@ export default class PicturesDialog extends PureComponent { const pics = resolvePictures(this.props, single); const title = resolveTitle(this.props, single); const hasPic = Boolean(pics[0]?.fullHash || pics[0]?.thumbHash); + const googleQuery = resolveGoogleImagesQuery(this.props); return ( <> @@ -781,6 +807,16 @@ export default class PicturesDialog extends PureComponent { > Bild suchen + )} + + 0) { + const first = eans[0]; + return String(typeof first === 'object' && first ? (first.ean ?? '') : first ?? '').trim(); + } + if (article.ean) { + return String(typeof article.ean === 'object' && article.ean ? (article.ean.ean ?? '') : article.ean).trim(); + } + return ''; +} + +export function getArticleBrand(article) { + if (!article) return ''; + if (typeof article.brand === 'object' && article.brand?.name) { + return String(article.brand.name).trim(); + } + if (typeof article.brand === 'string' && article.brand.trim()) { + return article.brand.trim(); + } + if (article.brandName) { + return String(article.brandName).trim(); + } + if (article.brandId != null) { + const brands = brandAutomat?.state?.brands || []; + const b = brands.find((x) => x.id === article.brandId); + if (b?.name) return String(b.name).trim(); + } + return ''; +} + +export function getArticleName(article) { + if (!article) return ''; + return String(article.name ?? article.sku ?? '').trim(); +} + +export function buildGoogleSearchQuery(article) { + if (!article) return ''; + const ean = getArticleEan(article); + const brand = getArticleBrand(article); + const name = getArticleName(article); + return [ean, brand, name].filter(Boolean).join(' '); +} + export function formatPhotoSizeKb(fullSize) { return `${Math.round(fullSize / 1024)} KB`; }