u

src/components/article/ArticlePhotoTile.jsx

@@ -1,16 +1,27 @@
 import { PureComponent } from 'react';
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import Box from '@mui/material/Box';
 import { PanelTile } from 'dashgui/panels';
-import { primaryPhoto } from '../../utils/articleDetail';
+import { sortedPhotos, primaryPhoto } from '../../utils/articleDetail';
 import ArticlePhoto from './ArticlePhoto';
 import ArticlePhotosDialog from './ArticlePhotosDialog';
 
 class ArticlePhotoTile extends PureComponent {
   constructor(props) {
     super(props);
-    this.state = { editOpen: false };
+    this.state = {
+      editOpen: false,
+      selectedHash: null,
+    };
     this.handleEditOpen = this.handleEditOpen.bind(this);
     this.handleEditClose = this.handleEditClose.bind(this);
+    this.handleSelectPhoto = this.handleSelectPhoto.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.article?.sku !== this.props.article?.sku) {
+      this.setState({ selectedHash: null });
+    }
   }
 
   handleEditOpen() {
@@ -21,6 +32,10 @@ class ArticlePhotoTile extends PureComponent {
     this.setState({ editOpen: false });
   }
 
+  handleSelectPhoto(fullHash) {
+    this.setState({ selectedHash: fullHash });
+  }
+
   render() {
     const {
       article: articleData,
@@ -30,8 +45,14 @@ class ArticlePhotoTile extends PureComponent {
       sx,
       color,
     } = this.props;
-    const { editOpen } = this.state;
-    const photo = primaryPhoto(articleData);
+    const { editOpen, selectedHash } = this.state;
+
+    const photos = sortedPhotos(articleData);
+    const primary = primaryPhoto(articleData);
+    const activePhoto =
+      (selectedHash && photos.find((p) => p.fullHash === selectedHash)) ||
+      primary;
+    const otherPhotos = photos.filter((p) => p.fullHash !== activePhoto?.fullHash);
 
     return (
       <>
@@ -47,7 +68,86 @@ class ArticlePhotoTile extends PureComponent {
             busy: false,
           }}
         >
-          <ArticlePhoto photo={photo} />
+          {otherPhotos.length === 0 ? (
+            <ArticlePhoto photo={activePhoto} />
+          ) : (
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'flex-start',
+                justifyContent: 'flex-start',
+                gap: 1.5,
+              }}
+            >
+              <ArticlePhoto photo={activePhoto} />
+
+              {/* Smallthumbs of all other images beside the main image */}
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 0.75,
+                  maxHeight: 200,
+                  overflowY: 'auto',
+                  overflowX: 'hidden',
+                  mt: '32px',
+                  py: 0.25,
+                  px: 0.25,
+                  flexShrink: 0,
+                  scrollbarWidth: 'thin',
+                  '&::-webkit-scrollbar': { width: 4 },
+                  '&::-webkit-scrollbar-thumb': {
+                    bgcolor: 'action.hover',
+                    borderRadius: 2,
+                  },
+                }}
+              >
+                {otherPhotos.map((p) => (
+                  <Box
+                    key={p.fullHash}
+                    component="button"
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      this.handleSelectPhoto(p.fullHash);
+                    }}
+                    sx={{
+                      p: 0,
+                      m: 0,
+                      width: 40,
+                      height: 40,
+                      flexShrink: 0,
+                      cursor: 'pointer',
+                      borderRadius: 1,
+                      overflow: 'hidden',
+                      border: '2px solid transparent',
+                      bgcolor: 'transparent',
+                      outline: 'none',
+                      display: 'block',
+                      transition: 'all 0.15s ease',
+                      '&:hover': {
+                        transform: 'scale(1.08)',
+                        borderColor: 'primary.main',
+                        boxShadow: 2,
+                      },
+                      '&:focus-visible': {
+                        borderColor: 'primary.main',
+                      },
+                    }}
+                  >
+                    <ArticlePhoto
+                      photo={p}
+                      size={40}
+                      useSmallThumb
+                      objectFit="cover"
+                      sx={{ width: '100%', height: '100%', borderRadius: 1 }}
+                    />
+                  </Box>
+                ))}
+              </Box>
+            </Box>
+          )}
         </PanelTile>
         <ArticlePhotosDialog
           open={editOpen}