u
This commit is contained in:
seb
270
src/components/article/ArticlePhotosDialog.jsx
Normal file
270
src/components/article/ArticlePhotosDialog.jsx
Normal file
@@ -0,0 +1,270 @@
|
||||
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 DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
|
||||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
||||
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
|
||||
import { article } from '../../api';
|
||||
import { requireArray, requireObject } from '../../utils/apiShape';
|
||||
import {
|
||||
articleWithPhotoOrder,
|
||||
articleWithUploadedPhoto,
|
||||
articleWithoutPhoto,
|
||||
formatPhotoDimensions,
|
||||
formatPhotoSizeKb,
|
||||
sortedPhotos,
|
||||
} from '../../utils/articleDetail';
|
||||
import { notifyError } from '../../utils/notify';
|
||||
import { pasteImageOrFallback } from '../../utils/pasteImage';
|
||||
import { prepareArticlePhoto } from '../../utils/prepareArticlePhoto';
|
||||
import ArticlePhoto from './ArticlePhoto';
|
||||
|
||||
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 };
|
||||
this.handleClose = this.handleClose.bind(this);
|
||||
this.handlePasteClick = this.handlePasteClick.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 res = await article.uploadImage(articleData.sku, file);
|
||||
requireObject(res, 'POST /api/article/:sku/image');
|
||||
requireObject(res.image, 'image');
|
||||
onArticleUpdated?.(articleWithUploadedPhoto(articleData, res.image));
|
||||
} catch (err) {
|
||||
notifyError(err);
|
||||
} finally {
|
||||
this.setState({ busy: false });
|
||||
}
|
||||
}
|
||||
|
||||
handlePasteClick() {
|
||||
if (this.state.busy) return;
|
||||
void pasteImageOrFallback(() => {
|
||||
this.fileInputRef.current?.click();
|
||||
}).then((image) => {
|
||||
if (image) void this.uploadRawImage(image);
|
||||
});
|
||||
}
|
||||
|
||||
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 article.deleteImage(articleData.sku, fullHash);
|
||||
onArticleUpdated?.(articleWithoutPhoto(articleData, fullHash));
|
||||
} 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 article.orderImages(articleData.sku, fullHashes);
|
||||
requireObject(res, 'PUT /api/article/:sku/images/order');
|
||||
requireArray(res.fullHashes, 'fullHashes');
|
||||
onArticleUpdated?.(articleWithPhotoOrder(articleData, res.fullHashes));
|
||||
} 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} />
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
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' }}>
|
||||
<Button
|
||||
type="button"
|
||||
startIcon={<ContentPasteIcon />}
|
||||
onClick={this.handlePasteClick}
|
||||
disabled={busy}
|
||||
>
|
||||
Bild einfügen
|
||||
</Button>
|
||||
<Button type="button" onClick={this.handleClose} disabled={busy}>
|
||||
Schließen
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
<input
|
||||
ref={this.fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
hidden
|
||||
onChange={this.handleFileChange}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ArticlePhotosDialog;
|
||||
Reference in New Issue
Block a user