u

src/components/article/ArticlePhotosDialog.jsx

@@ -11,11 +11,13 @@ 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 EditOutlinedIcon from '@mui/icons-material/EditOutlined';
 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 chatAutomat from '../../automats/chatAutomat';
 import { requireArray, requireObject } from '../../utils/apiShape';
 import {
   articleWithPhotoOrder,
@@ -65,6 +67,7 @@ class ArticlePhotosDialog extends Component {
     this.handleSearchClose = this.handleSearchClose.bind(this);
     this.handleFileChange = this.handleFileChange.bind(this);
     this.uploadRawImage = this.uploadRawImage.bind(this);
+    this.handleEditInChat = this.handleEditInChat.bind(this);
   }
 
   handleClose() {
@@ -72,6 +75,14 @@ class ArticlePhotosDialog extends Component {
     this.props.onClose();
   }
 
+  handleEditInChat(photo, index) {
+    const { article: articleData } = this.props;
+    const sku = articleData?.sku ?? '';
+    const imageNr = index + 1;
+    const prompt = `Artikelbild Nr ${imageNr} von Artikel SKU ${sku} folgende Änderung: `;
+    chatAutomat.actions.openWithPrompt(prompt);
+  }
+
   async uploadRawImage(rawBlob) {
     const { article: articleData, onArticleUpdated } = this.props;
     this.setState({ busy: true });
@@ -223,41 +234,58 @@ class ArticlePhotosDialog extends Component {
           <Box
             sx={{
               display: 'flex',
-              justifyContent: 'flex-end',
-              gap: 0.25,
+              alignItems: 'center',
+              justifyContent: 'space-between',
               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"
+              aria-label="Bearbeiten"
               disabled={busy}
-              onClick={() => void this.deletePhoto(photo.fullHash)}
+              onClick={() => this.handleEditInChat(photo, index)}
               sx={overlayIconSx}
             >
-              <DeleteOutlineOutlinedIcon fontSize="small" />
+              <EditOutlinedIcon fontSize="small" />
             </IconButton>
+            <Box
+              sx={{
+                display: 'flex',
+                gap: 0.25,
+              }}
+            >
+              <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>
       </Box>