339 lines
11 KiB
JavaScript
339 lines
11 KiB
JavaScript
import { Component, createRef } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import Chip from '@mui/material/Chip';
|
|
import Dialog from '@mui/material/Dialog';
|
|
import DialogActions from '@mui/material/DialogActions';
|
|
import DialogContent from '@mui/material/DialogContent';
|
|
import DialogTitle from '@mui/material/DialogTitle';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import ContentPasteIcon from '@mui/icons-material/ContentPaste';
|
|
import UploadFileIcon from '@mui/icons-material/UploadFile';
|
|
import ImageSearchIcon from '@mui/icons-material/ImageSearch';
|
|
import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
|
|
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
|
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
|
|
import { enqueueSnackbar } from 'notistack';
|
|
import { article as articleApi } from '../../api';
|
|
import artikelAutomat from '../../automats/artikelAutomat';
|
|
import { requireArray, requireObject } from '../../utils/apiShape';
|
|
import {
|
|
articleWithPhotoOrder,
|
|
articleWithUploadedPhoto,
|
|
articleWithoutPhoto,
|
|
formatPhotoDimensions,
|
|
formatPhotoSizeKb,
|
|
sortedPhotos,
|
|
} from '../../utils/articleDetail';
|
|
import { notifyError } from '../../utils/notify';
|
|
import { readClipboardImage } from '../../utils/pasteImage';
|
|
import { prepareArticlePhoto } from '../../utils/prepareArticlePhoto';
|
|
import ArticlePhoto from './ArticlePhoto';
|
|
import ArticleImageSearchDialog from './ArticleImageSearchDialog';
|
|
|
|
const overlayChipSx = {
|
|
height: 22,
|
|
bgcolor: 'rgba(0, 0, 0, 0.65)',
|
|
color: '#fff',
|
|
'& .MuiChip-label': { px: 0.75, fontSize: 11 },
|
|
};
|
|
|
|
const overlayIconSx = {
|
|
color: '#fff',
|
|
bgcolor: 'rgba(0, 0, 0, 0.55)',
|
|
'&:hover': { bgcolor: 'rgba(0, 0, 0, 0.75)' },
|
|
'&.Mui-disabled': { color: 'rgba(255,255,255,0.35)', bgcolor: 'rgba(0,0,0,0.35)' },
|
|
};
|
|
|
|
class ArticlePhotosDialog extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.fileInputRef = createRef();
|
|
this.state = { busy: false, searchOpen: false };
|
|
this.handleClose = this.handleClose.bind(this);
|
|
this.handlePasteClick = this.handlePasteClick.bind(this);
|
|
this.handleUploadClick = this.handleUploadClick.bind(this);
|
|
this.handleSearchOpen = this.handleSearchOpen.bind(this);
|
|
this.handleSearchClose = this.handleSearchClose.bind(this);
|
|
this.handleFileChange = this.handleFileChange.bind(this);
|
|
this.uploadRawImage = this.uploadRawImage.bind(this);
|
|
}
|
|
|
|
handleClose() {
|
|
if (this.state.busy) return;
|
|
this.props.onClose();
|
|
}
|
|
|
|
async uploadRawImage(rawBlob) {
|
|
const { article: articleData, onArticleUpdated } = this.props;
|
|
this.setState({ busy: true });
|
|
try {
|
|
const file = await prepareArticlePhoto(rawBlob);
|
|
const uploadStarted = performance.now();
|
|
const res = await articleApi.uploadImage(articleData.sku, file);
|
|
console.log('[article-photo] upload', {
|
|
uploadMs: Math.round(performance.now() - uploadStarted),
|
|
bytes: file.size,
|
|
sku: articleData.sku,
|
|
});
|
|
requireObject(res, 'POST /api/article/:sku/image');
|
|
requireObject(res.image, 'image');
|
|
const updated = articleWithUploadedPhoto(articleData, res.image);
|
|
artikelAutomat.actions.setArticle(updated);
|
|
onArticleUpdated?.(updated);
|
|
} catch (err) {
|
|
notifyError(err);
|
|
} finally {
|
|
this.setState({ busy: false });
|
|
}
|
|
}
|
|
|
|
async handlePasteClick() {
|
|
if (this.state.busy) return;
|
|
try {
|
|
const image = await readClipboardImage();
|
|
if (image) {
|
|
await this.uploadRawImage(image);
|
|
} else {
|
|
enqueueSnackbar('Kein Bild in der Zwischenablage gefunden.', { variant: 'info' });
|
|
}
|
|
} catch (err) {
|
|
console.warn('Clipboard read error:', err);
|
|
enqueueSnackbar('Zugriff auf Zwischenablage nicht möglich.', { variant: 'warning' });
|
|
}
|
|
}
|
|
|
|
handleUploadClick() {
|
|
if (this.state.busy) return;
|
|
this.fileInputRef.current?.click();
|
|
}
|
|
|
|
handleSearchOpen() {
|
|
if (this.state.busy) return;
|
|
this.setState({ searchOpen: true });
|
|
}
|
|
|
|
handleSearchClose() {
|
|
this.setState({ searchOpen: false });
|
|
}
|
|
|
|
handleFileChange(event) {
|
|
const file = event.target.files?.[0];
|
|
event.target.value = '';
|
|
if (!file) return;
|
|
void this.uploadRawImage(file);
|
|
}
|
|
|
|
async deletePhoto(fullHash) {
|
|
const { article: articleData, onArticleUpdated } = this.props;
|
|
this.setState({ busy: true });
|
|
try {
|
|
await articleApi.deleteImage(articleData.sku, fullHash);
|
|
const updated = articleWithoutPhoto(articleData, fullHash);
|
|
artikelAutomat.actions.setArticle(updated);
|
|
onArticleUpdated?.(updated);
|
|
} catch (err) {
|
|
notifyError(err);
|
|
} finally {
|
|
this.setState({ busy: false });
|
|
}
|
|
}
|
|
|
|
async movePhoto(fullHash, delta) {
|
|
const { article: articleData, onArticleUpdated } = this.props;
|
|
const photos = sortedPhotos(articleData);
|
|
const index = photos.findIndex((row) => row.fullHash === fullHash);
|
|
const target = index + delta;
|
|
if (index < 0 || target < 0 || target >= photos.length) return;
|
|
|
|
const next = [...photos];
|
|
const [row] = next.splice(index, 1);
|
|
next.splice(target, 0, row);
|
|
const fullHashes = next.map((item) => item.fullHash);
|
|
|
|
this.setState({ busy: true });
|
|
try {
|
|
const res = await articleApi.orderImages(articleData.sku, fullHashes);
|
|
requireObject(res, 'PUT /api/article/:sku/images/order');
|
|
requireArray(res.fullHashes, 'fullHashes');
|
|
const updated = articleWithPhotoOrder(articleData, res.fullHashes);
|
|
artikelAutomat.actions.setArticle(updated);
|
|
onArticleUpdated?.(updated);
|
|
} catch (err) {
|
|
notifyError(err);
|
|
} finally {
|
|
this.setState({ busy: false });
|
|
}
|
|
}
|
|
|
|
renderPhotoTile(photo, index, total) {
|
|
const { busy } = this.state;
|
|
const hasDimensions = photo.fullW != null && photo.fullH != null;
|
|
const hasSize = photo.fullSize != null;
|
|
|
|
return (
|
|
<Box
|
|
key={photo.fullHash}
|
|
sx={{ position: 'relative', width: 200, height: 200, flexShrink: 0 }}
|
|
>
|
|
<ArticlePhoto photo={photo} size={200} sx={{ position: 'absolute', inset: 0 }} />
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
zIndex: 1,
|
|
pointerEvents: 'none',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
p: 0.75,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
gap: 0.5,
|
|
pointerEvents: 'none',
|
|
}}
|
|
>
|
|
{hasDimensions ? (
|
|
<Chip
|
|
size="small"
|
|
label={formatPhotoDimensions(photo.fullW, photo.fullH)}
|
|
sx={overlayChipSx}
|
|
/>
|
|
) : null}
|
|
{hasSize ? (
|
|
<Chip
|
|
size="small"
|
|
label={formatPhotoSizeKb(photo.fullSize)}
|
|
sx={overlayChipSx}
|
|
/>
|
|
) : null}
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'flex-end',
|
|
gap: 0.25,
|
|
pointerEvents: 'auto',
|
|
}}
|
|
>
|
|
<IconButton
|
|
type="button"
|
|
size="small"
|
|
aria-label="Nach vorne"
|
|
disabled={busy || index === 0}
|
|
onClick={() => void this.movePhoto(photo.fullHash, -1)}
|
|
sx={overlayIconSx}
|
|
>
|
|
<KeyboardArrowUpIcon fontSize="small" />
|
|
</IconButton>
|
|
<IconButton
|
|
type="button"
|
|
size="small"
|
|
aria-label="Nach hinten"
|
|
disabled={busy || index >= total - 1}
|
|
onClick={() => void this.movePhoto(photo.fullHash, 1)}
|
|
sx={overlayIconSx}
|
|
>
|
|
<KeyboardArrowDownIcon fontSize="small" />
|
|
</IconButton>
|
|
<IconButton
|
|
type="button"
|
|
size="small"
|
|
aria-label="Löschen"
|
|
disabled={busy}
|
|
onClick={() => void this.deletePhoto(photo.fullHash)}
|
|
sx={overlayIconSx}
|
|
>
|
|
<DeleteOutlineOutlinedIcon fontSize="small" />
|
|
</IconButton>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const { open, article: articleData } = this.props;
|
|
const { busy } = this.state;
|
|
const photos = sortedPhotos(articleData);
|
|
|
|
return (
|
|
<>
|
|
<Dialog open={open} onClose={this.handleClose} maxWidth="md" fullWidth>
|
|
<DialogTitle>Bilder</DialogTitle>
|
|
<DialogContent dividers>
|
|
{photos.length === 0 ? (
|
|
<Box sx={{ color: 'text.secondary', py: 2 }}>Keine Bilder.</Box>
|
|
) : (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
gap: 1.5,
|
|
}}
|
|
>
|
|
{photos.map((photo, index) =>
|
|
this.renderPhotoTile(photo, index, photos.length),
|
|
)}
|
|
</Box>
|
|
)}
|
|
</DialogContent>
|
|
<DialogActions sx={{ px: 3, py: 2, justifyContent: 'space-between', flexWrap: 'wrap', gap: 1 }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
|
|
<Button
|
|
type="button"
|
|
variant="outlined"
|
|
startIcon={<ContentPasteIcon />}
|
|
onClick={this.handlePasteClick}
|
|
disabled={busy}
|
|
>
|
|
Bild einfügen
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outlined"
|
|
startIcon={<UploadFileIcon />}
|
|
onClick={this.handleUploadClick}
|
|
disabled={busy}
|
|
>
|
|
Bild hochladen
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="contained"
|
|
startIcon={<ImageSearchIcon />}
|
|
onClick={this.handleSearchOpen}
|
|
disabled={busy}
|
|
>
|
|
Bild suchen
|
|
</Button>
|
|
</Box>
|
|
<Button type="button" onClick={this.handleClose} disabled={busy} color="inherit">
|
|
Schließen
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
<input
|
|
ref={this.fileInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
hidden
|
|
onChange={this.handleFileChange}
|
|
/>
|
|
<ArticleImageSearchDialog
|
|
open={this.state.searchOpen}
|
|
article={articleData}
|
|
onClose={this.handleSearchClose}
|
|
onArticleUpdated={this.props.onArticleUpdated}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ArticlePhotosDialog;
|