u
This commit is contained in:
seb
@@ -85,8 +85,8 @@ class ArtikelMarke extends PureComponent {
|
||||
this.setState({ logoOpen: false });
|
||||
};
|
||||
|
||||
handleThumbClick = () => {
|
||||
if (this.props.disabled || !this.hasLogo()) return;
|
||||
handleOpenLogo = () => {
|
||||
if (this.props.disabled) return;
|
||||
this.setState({ previewOpen: true });
|
||||
};
|
||||
|
||||
@@ -124,7 +124,7 @@ class ArtikelMarke extends PureComponent {
|
||||
{hasLogo ? (
|
||||
<Box
|
||||
component="span"
|
||||
onClick={this.handleThumbClick}
|
||||
onClick={this.handleOpenLogo}
|
||||
sx={{
|
||||
display: 'inline-flex',
|
||||
flexShrink: 0,
|
||||
@@ -137,9 +137,9 @@ class ArtikelMarke extends PureComponent {
|
||||
</Box>
|
||||
) : (
|
||||
<IconButton
|
||||
aria-label={`Logo für „${name}" suchen`}
|
||||
aria-label={`Logo für „${name}" bearbeiten`}
|
||||
disabled={disabled}
|
||||
onClick={this.handleSearchLogo}
|
||||
onClick={this.handleOpenLogo}
|
||||
sx={{ width: 40, height: 40, flexShrink: 0 }}
|
||||
>
|
||||
<ImageSearchIcon sx={{ fontSize: 24 }} />
|
||||
|
||||
@@ -1,176 +1,17 @@
|
||||
import { PureComponent } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import AppDialog from '../AppDialog';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
|
||||
import ImageSearchIcon from '@mui/icons-material/ImageSearch';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { thumb } from '../../api';
|
||||
import brandAutomat from '../../automats/brandAutomat';
|
||||
import { notifyError } from '../../utils/notify';
|
||||
import ThumbHashImage from '../article/ThumbHashImage';
|
||||
import {
|
||||
CHECKERBOARD,
|
||||
SHADOW_THUMB_RING,
|
||||
WHITE,
|
||||
} from '../../colors';
|
||||
|
||||
/** Max edge (px) of the presized logo preview inside the dialog. */
|
||||
const MAX_PREVIEW = 240;
|
||||
import PicturesDialog from '../PicturesDialog';
|
||||
|
||||
/**
|
||||
* Small fixed-size brand logo preview.
|
||||
* Shows the stored thumb presized with thumbW/thumbH and offers
|
||||
* Löschen / Neues Suchen / Schließen.
|
||||
* Brand logo dialog wrapping the unified PicturesDialog.
|
||||
* Offers Löschen, Neues Suchen, Schließen, Bild einfügen (clipboard), Bild hochladen.
|
||||
*
|
||||
* Props: open, brand, onClose, onSearchNew, disabled?
|
||||
*/
|
||||
// #region component
|
||||
export default class BrandLogoPreviewDialog extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { busy: false };
|
||||
}
|
||||
|
||||
handleDelete = async () => {
|
||||
const { brand } = this.props;
|
||||
if (!brand?.id || this.state.busy) return;
|
||||
if (!window.confirm(`Logo von „${brand.name ?? ''}" wirklich löschen?`)) return;
|
||||
this.setState({ busy: true });
|
||||
try {
|
||||
await brandAutomat.actions.deleteImage(brand.id);
|
||||
enqueueSnackbar('Markenlogo gelöscht.', { variant: 'success' });
|
||||
this.props.onClose?.();
|
||||
} catch (err) {
|
||||
notifyError(err);
|
||||
} finally {
|
||||
this.setState({ busy: false });
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { open, brand, disabled, onClose, onSearchNew } = this.props;
|
||||
const { busy } = this.state;
|
||||
const pic = brand?.pics?.[0];
|
||||
const { fullHash, thumbHash, thumbW, thumbH } = pic ?? {};
|
||||
const name = brand?.name ?? '';
|
||||
|
||||
// Presize the preview with thumbW/thumbH, capped to MAX_PREVIEW.
|
||||
const tw = Number(thumbW);
|
||||
const th = Number(thumbH);
|
||||
let w = MAX_PREVIEW;
|
||||
let h = MAX_PREVIEW;
|
||||
if (Number.isFinite(tw) && Number.isFinite(th) && tw > 0 && th > 0) {
|
||||
const scale = Math.min(1, MAX_PREVIEW / Math.max(tw, th));
|
||||
w = Math.max(1, Math.round(tw * scale));
|
||||
h = Math.max(1, Math.round(th * scale));
|
||||
}
|
||||
|
||||
return (
|
||||
<AppDialog
|
||||
open={open}
|
||||
onClose={busy ? undefined : onClose}
|
||||
maxWidth={false}
|
||||
fullWidth={false}
|
||||
aria-labelledby="brand-logo-preview-title"
|
||||
slotProps={{
|
||||
paper: { sx: { width: 360, maxWidth: '90vw' } },
|
||||
}}
|
||||
>
|
||||
<DialogTitle id="brand-logo-preview-title" sx={{ px: 2.5, pt: 2, pb: 0.5 }}>
|
||||
Logo: {name}
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent sx={{ px: 2.5, py: 1 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
py: 1,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: w,
|
||||
height: h,
|
||||
borderRadius: 1.5,
|
||||
overflow: 'hidden',
|
||||
bgcolor: WHITE,
|
||||
backgroundImage: CHECKERBOARD,
|
||||
backgroundSize: '16px 16px',
|
||||
backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 0px',
|
||||
boxShadow: SHADOW_THUMB_RING,
|
||||
}}
|
||||
>
|
||||
{thumbHash ? <ThumbHashImage thumbHash={thumbHash} /> : null}
|
||||
{fullHash ? (
|
||||
<Box
|
||||
component="img"
|
||||
src={thumb.url(fullHash)}
|
||||
alt={`Logo von „${name}"`}
|
||||
draggable={false}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'contain',
|
||||
display: 'block',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Kein Logo hinterlegt.
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions sx={{ px: 2, pb: 1.5, gap: 0.5 }}>
|
||||
<Button
|
||||
size="small"
|
||||
color="error"
|
||||
startIcon={<DeleteOutlinedIcon />}
|
||||
disabled={busy || disabled}
|
||||
onClick={this.handleDelete}
|
||||
>
|
||||
Löschen
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<ImageSearchIcon />}
|
||||
disabled={busy || disabled}
|
||||
onClick={onSearchNew}
|
||||
>
|
||||
Neues Suchen
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<CloseIcon />}
|
||||
disabled={busy}
|
||||
onClick={onClose}
|
||||
>
|
||||
Schließen
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</AppDialog>
|
||||
);
|
||||
return <PicturesDialog {...this.props} single entityType="brand" />;
|
||||
}
|
||||
}
|
||||
// #endregion
|
||||
|
||||
|
||||
Reference in New Issue
Block a user