Finished base implementation of PR TODO: Put image upload button in i…

…mage gallery #1096
ral-facilities · Jan 22, 2025 · bc12f92 · bc12f92
1 parent 92f9ecf
commit bc12f92
Show file tree

Hide file tree

Showing 9 changed files with 187 additions and 116 deletions.
diff --git a/src/catalogue/items/catalogueItemsLandingPage.component.tsx b/src/catalogue/items/catalogueItemsLandingPage.component.tsx
@@ -1,4 +1,3 @@
-import EditIcon from '@mui/icons-material/Edit';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import InventoryOutlinedIcon from '@mui/icons-material/InventoryOutlined';
 import NotesIcon from '@mui/icons-material/Notes';
@@ -92,23 +91,7 @@ function CatalogueItemsLandingPage() {
             {/* Image Section */}
             <Grid item container xs={12}>
               <Grid item xs={12} sm={4}>
-                <PlaceholderImage />
-                <Button
-                  startIcon={<EditIcon />}
-                  sx={{
-                    mx: 0.5,
-                    ml: 2,
-                    position: 'absolute',
-                    top: '18%',
-                    left: '9.2%',
-                  }}
-                  variant="outlined"
-                  onClick={() => {
-                    setOpenPrimaryDialog(true);
-                  }}
-                >
-                  Primary
-                </Button>
+                <PlaceholderImage setDialog={setOpenPrimaryDialog} />
               </Grid>
               <PrimaryImageDialog
                 open={openPrimaryDialog}

diff --git a/src/common/images/imageGallery.component.tsx b/src/common/images/imageGallery.component.tsx
@@ -39,13 +39,13 @@ import ThumbnailImage from './thumbnailImage.component';
 export interface ImageGalleryProps {
   entityId?: string;
   dense: boolean;
+  setSelectedPrimaryID: (value: React.SetStateAction<string>) => void;
 }
 
 const ImageGallery = (props: ImageGalleryProps) => {
-  const { entityId, dense } = props;
+  const { entityId, dense, setSelectedPrimaryID } = props;
 
   const MAX_HEIGHT_THUMBNAIL = dense ? 150 : 300;
-  console.log(MAX_HEIGHT_THUMBNAIL);
 
   const { data: images, isLoading: imageIsLoading } = useGetImages(entityId);
 
@@ -176,6 +176,15 @@ const ImageGallery = (props: ImageGalleryProps) => {
       size: 'small',
       variant: 'outlined',
     },
+    muiSelectCheckboxProps: dense
+      ? ({ row }) => {
+          return {
+            onClick: () => {
+              setSelectedPrimaryID(row.original.id);
+            },
+          };
+        }
+      : undefined,
     muiPaginationProps: {
       color: 'secondary',
       rowsPerPageOptions: [16, 24, 32],
@@ -293,19 +302,6 @@ const ImageGallery = (props: ImageGalleryProps) => {
         <Grid container>
           <Grid item container mt={2} direction="column" alignItems="center">
             <Collapse in={!isCollapsed} style={{ width: '100%' }}>
-              <Grid marginTop={'auto'} direction="row" item container>
-                <Button
-                  startIcon={<ClearIcon />}
-                  sx={{ mx: 0.5, ml: 2 }}
-                  variant="outlined"
-                  disabled={preservedState.columnFilters.length === 0}
-                  onClick={() => {
-                    table.resetColumnFilters();
-                  }}
-                >
-                  Clear Filters
-                </Button>
-              </Grid>
               <CardViewFilters table={table} />
             </Collapse>
 
@@ -323,6 +319,17 @@ const ImageGallery = (props: ImageGalleryProps) => {
               {isCollapsed ? 'Show Filters' : 'Hide Filters'}
             </Typography>
           </Grid>
+          <Button
+            startIcon={<ClearIcon />}
+            sx={{ mx: 0.5, ml: 2 }}
+            variant="outlined"
+            disabled={preservedState.columnFilters.length === 0}
+            onClick={() => {
+              table.resetColumnFilters();
+            }}
+          >
+            Clear Filters
+          </Button>
           <Grid container item>
             <Grid
               container

diff --git a/src/common/images/placeholderImage.component.tsx b/src/common/images/placeholderImage.component.tsx
@@ -1,30 +1,34 @@
-import { Box, SxProps, Theme, Typography } from '@mui/material';
+import { Box, Grid, SxProps, Theme, Typography } from '@mui/material';
+import PrimaryOptionsMenu from './primaryOptionsButton.component';
 
 export interface PlaceholderImageProps {
   sx?: SxProps<Theme>;
+  setDialog: (arg: boolean) => void;
 }
 
 const PlaceholderImage = (props: PlaceholderImageProps) => {
-  const { sx } = props;
+  const { sx, setDialog } = props;
   return (
-    <Box
-      sx={{
-        width: '100%',
-        height: '100%',
-        borderRadius: 2,
-        backgroundColor: 'inherit',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        textAlign: 'center',
-        color: 'text.primary',
-        border: '1px dashed',
-        borderColor: 'text.primary',
-        ...sx,
-      }}
-    >
-      <Typography variant="h5">No Image</Typography>
-    </Box>
+    <Grid sx={{ height: '100%', width: '100%' }}>
+      <Box
+        sx={{
+          height: '80%',
+          borderRadius: 2,
+          backgroundColor: 'inherit',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+          color: 'text.primary',
+          border: '1px dashed',
+          borderColor: 'text.primary',
+          ...sx,
+        }}
+      >
+        <Typography variant="h5">No Image</Typography>
+      </Box>
+      <PrimaryOptionsMenu setDialog={setDialog} />
+    </Grid>
   );
 };
 

diff --git a/src/common/images/primaryImageDialog.component.tsx b/src/common/images/primaryImageDialog.component.tsx
@@ -1,13 +1,19 @@
 import {
   Box,
   Button,
+  CircularProgress,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
   FormHelperText,
 } from '@mui/material';
+import { AxiosError } from 'axios';
 import React from 'react';
+import { ObjectFilePatch } from '../../api/api.types';
+import { usePatchImage } from '../../api/images';
+import handleIMS_APIError from '../../handleIMS_APIError';
+import { StyledUppyBox } from '../uppy.utils';
 import ImageGallery from './imageGallery.component';
 import UploadImagesDialog from './uploadImagesDialog.component';
 
@@ -27,18 +33,42 @@ const PrimaryImageDialog = (props: DeleteImageProps) => {
     undefined
   );
 
+  const [selectedPrimaryID, setSelectedPrimaryID] = React.useState<string>('');
+
+  const { mutateAsync: editImage, isPending: editPending } = usePatchImage();
+
   const handleClose = React.useCallback(() => {
     onClose();
+    setSelectedPrimaryID('');
     setErrorMessage(undefined);
   }, [onClose]);
 
+  const handleEditImage = React.useCallback(() => {
+    if (selectedPrimaryID) {
+      const fileToEdit: ObjectFilePatch = { primary: true };
+      editImage({ id: selectedPrimaryID, fileMetadata: fileToEdit })
+        .then(() => {
+          onClose();
+        })
+        .catch((error: AxiosError) => {
+          handleIMS_APIError(error);
+        });
+    } else {
+      setErrorMessage(
+        'No image selected, Please select an image and try again'
+      );
+    }
+  }, [selectedPrimaryID, editImage]);
+
   return (
     <>
-      <UploadImagesDialog
-        open={openUploadDialog}
-        onClose={() => setOpenUploadDialog(false)}
-        entityId={entityID}
-      />
+      <StyledUppyBox>
+        <UploadImagesDialog
+          open={openUploadDialog}
+          onClose={() => setOpenUploadDialog(false)}
+          entityId={entityID}
+        />
+      </StyledUppyBox>
       <Dialog open={open} maxWidth="xl">
         <DialogTitle
           sx={{
@@ -52,18 +82,29 @@ const PrimaryImageDialog = (props: DeleteImageProps) => {
             onClick={() => {
               setOpenUploadDialog(true);
             }}
+            variant="outlined"
           >
             Upload Image
           </Button>
         </DialogTitle>
         <DialogContent>
-          <ImageGallery entityId={entityID} dense={true} />
+          <ImageGallery
+            entityId={entityID}
+            dense={true}
+            setSelectedPrimaryID={setSelectedPrimaryID}
+          />
         </DialogContent>
         <DialogActions
           sx={{ display: 'inline-flex', justifyContent: 'space-between' }}
         >
           <Button onClick={handleClose}>Cancel</Button>
-          <Button onClick={handleClose}>Save</Button>
+          <Button
+            onClick={handleEditImage}
+            disabled={editPending || selectedPrimaryID === ''}
+            endIcon={editPending ? <CircularProgress size={20} /> : null}
+          >
+            Save
+          </Button>
         </DialogActions>
         {errorMessage != undefined && (
           <Box

diff --git a/src/common/images/primaryOptionsButton.component.tsx b/src/common/images/primaryOptionsButton.component.tsx
@@ -0,0 +1,52 @@
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { ListItemIcon } from '@mui/material';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import * as React from 'react';
+
+export interface PrimaryOptionsInterface {
+  setDialog: (arg: boolean) => void;
+}
+
+const PrimaryOptionsMenu = (props: PrimaryOptionsInterface) => {
+  const { setDialog } = props;
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setDialog(true);
+    setAnchorEl(null);
+  };
+
+  return (
+    <div>
+      <Button
+        id="basic-button"
+        aria-controls={open ? 'basic-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        onClick={handleClick}
+      >
+        <ListItemIcon>
+          <MoreVertIcon />
+        </ListItemIcon>
+      </Button>
+      <Menu
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          'aria-labelledby': 'basic-button',
+        }}
+      >
+        <MenuItem onClick={handleClose}>Set Primary</MenuItem>
+      </Menu>
+    </div>
+  );
+};
+
+export default PrimaryOptionsMenu;
diff --git a/src/common/uppy.utils.tsx b/src/common/uppy.utils.tsx
@@ -8,5 +8,5 @@ export const StyledUppyBox = styled(Box)(({ theme }) => ({
     maxHeight: 'calc(100% - 64px)',
     width: 'calc(100% - 64px)',
   },
-  '& .uppy-Dashboard--modal .uppy-Dashboard-inner': { zIndex: 1300 },
+  '& .uppy-Dashboard--modal .uppy-Dashboard-inner': { zIndex: 1300 + 1 },
 }));
diff --git a/src/items/itemsLandingPage.component.tsx b/src/items/itemsLandingPage.component.tsx
@@ -1,13 +1,6 @@
-import EditIcon from '@mui/icons-material/Edit';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import NotesIcon from '@mui/icons-material/Notes';
-import {
-  Box,
-  Button,
-  Divider,
-  LinearProgress,
-  Link as MuiLink,
-} from '@mui/material';
+import { Box, Divider, LinearProgress, Link as MuiLink } from '@mui/material';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import React from 'react';
@@ -106,23 +99,7 @@ function ItemsLandingPage() {
               {/* Image Section */}
               <Grid item container xs={12}>
                 <Grid item xs={12} sm={4}>
-                  <PlaceholderImage />
-                  <Button
-                    startIcon={<EditIcon />}
-                    sx={{
-                      mx: 0.5,
-                      ml: 2,
-                      position: 'absolute',
-                      top: '18%',
-                      left: '9.2%',
-                    }}
-                    variant="outlined"
-                    onClick={() => {
-                      setOpenPrimaryDialog(true);
-                    }}
-                  >
-                    Primary
-                  </Button>
+                  <PlaceholderImage setDialog={setOpenPrimaryDialog} />
                 </Grid>
                 <PrimaryImageDialog
                   open={openPrimaryDialog}