Add trash functionality and selection UI to ImageGallery component

Author: kolev-sf

src/api/api.ts

@@ -297,3 +297,16 @@ export async function adminResetPassword({
 
 	return response.data;
 }
+
+export async function trashObjects({
+	objectIds,
+}: {
+	objectIds: string[];
+}): Promise<number> {
+	
+	const response = await axiosClient.post('object/trash', {
+		 ObjectIds : objectIds,
+	});
+
+	return response.data;
+}

src/components/ImageGallery.tsx

@@ -1,26 +1,64 @@
-import { Divider, Grid, Paper, Typography } from '@mui/material';
-import { useInfiniteQuery } from '@tanstack/react-query';
+import CloseIcon from '@mui/icons-material/Close';
+import DeleteIcon from '@mui/icons-material/Delete';
+import DownloadIcon from '@mui/icons-material/Download';
+import {
+	Button,
+	Dialog,
+	DialogActions,
+	DialogTitle,
+	Divider,
+	Grid,
+	Paper,
+	Tooltip,
+	Typography,
+} from '@mui/material';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Slide from '@mui/material/Slide';
+import { useTheme } from '@mui/material/styles';
+import Toolbar from '@mui/material/Toolbar';
+import {
+	useInfiniteQuery,
+	useMutation,
+	useQueryClient,
+} from '@tanstack/react-query';
 import React, { useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
 import { useInView } from 'react-intersection-observer';
 import { IThumbnail } from 'types/types';
 
-import { fetchImageIds } from '../api/api';
+import { fetchImageIds, trashObjects } from '../api/api';
 import ImageThumbnail from './ImageThumbnail';
 import Loading from './Loading';
 import Preview from './Preview';
+import SelectImageButton from './SelectImageButton';
 
 export const ImageGallery: React.FC = () => {
 	const [previewOpen, setPreviewOpen] = useState(false);
 	const [currentImage, setCurrentImage] = useState<number | null>(null);
+	const [selectedImages, setSelectedImages] = useState<string[]>([]); // <-- add this
 	const { ref, inView } = useInView();
 
+	const queryClient = useQueryClient();
+
 	const { data, fetchNextPage, hasNextPage, isLoading } = useInfiniteQuery({
 		queryKey: ['fetchIds'],
 		queryFn: fetchImageIds,
 		initialPageParam: '',
 		getNextPageParam: (lastPage) => lastPage.lastId || null,
 	});
 
+	const trashObjectMutation = useMutation({
+		mutationFn: trashObjects,
+		onSuccess: () => {
+			toast.success('Object(s) trashed successfully.');
+		},
+		onError: (error) => {
+			toast.error(`Something went wrong: ${error.message}`);
+		},
+	});
+
 	const lastId = data?.pages.slice(-1)[0].lastId;
 	const imageIds = data?.pages.map((page) => page.properties).flat();
 	const lastImage = data?.pages.slice(-1)[0].properties?.slice(-1)[0].id;
@@ -65,8 +103,125 @@ export const ImageGallery: React.FC = () => {
 		setCurrentImage((prev) => (prev ? prev - 1 : 0));
 	};
 
+	const toggleSelectImage = (id: string) => {
+		setSelectedImages((prev) =>
+			prev.includes(id) ? prev.filter((imgId) => imgId !== id) : [...prev, id]
+		);
+	};
+
+	const handleClearSelection = () => setSelectedImages([]);
+	const handleDelete = () => {
+		trashObjectMutation.mutate(
+			{ objectIds: selectedImages },
+			{
+				onSuccess: () => {
+					handleClearSelection();
+					queryClient.invalidateQueries({ queryKey: ['fetchIds'] }); // <-- refresh the gallery
+				},
+			}
+		);
+	};
+	const handleDownload = () => {
+		// TODO: Implement download logic for selectedImages
+	};
+
+	const theme = useTheme();
+
+	const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+
 	return (
 		<>
+			{/* Selection Toolbar */}
+			<Slide
+				direction="down"
+				in={selectedImages.length > 0}
+				mountOnEnter
+				unmountOnExit
+			>
+				<AppBar
+					position="fixed"
+					color="default"
+					elevation={2}
+					sx={{
+						top: 0,
+						left: 0,
+						right: 0,
+						background: theme.palette.background.paper,
+						borderBottom: '1px solid #eee',
+						zIndex: theme.zIndex.drawer + 2,
+					}}
+				>
+					<Toolbar>
+						<IconButton
+							edge="start"
+							color="inherit"
+							onClick={handleClearSelection}
+						>
+							<CloseIcon />
+						</IconButton>
+						<Typography sx={{ flexGrow: 1, fontWeight: 600 }}>
+							{selectedImages.length} selected
+						</Typography>
+						<Tooltip title="Download">
+							<IconButton color="inherit" onClick={handleDownload}>
+								<DownloadIcon />
+							</IconButton>
+						</Tooltip>
+						<Tooltip title="Delete">
+							<IconButton
+								color="inherit"
+								onClick={() => setOpenDeleteDialog(true)}
+							>
+								<DeleteIcon />
+							</IconButton>
+						</Tooltip>
+						<Dialog
+							open={openDeleteDialog}
+							onClose={() => setOpenDeleteDialog(false)}
+							aria-labelledby="delete-dialog-title"
+							aria-describedby="delete-dialog-description"
+						>
+							<DialogTitle
+								id="delete-dialog-title"
+								sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
+							>
+								<DeleteIcon color="error" sx={{ fontSize: 32 }} />
+								Delete {selectedImages.length}{' '}
+								{selectedImages.length === 1 ? 'item' : 'items'}?
+							</DialogTitle>
+							<Typography
+								id="delete-dialog-description"
+								sx={{ px: 3, pb: 1, color: 'text.secondary' }}
+							>
+								This action will move the selected{' '}
+								{selectedImages.length === 1 ? 'item' : 'items'} to trash. You
+								can restore them from trash later.
+							</Typography>
+							<DialogActions>
+								<Button
+									onClick={() => setOpenDeleteDialog(false)}
+									variant="outlined"
+								>
+									Cancel
+								</Button>
+								<Button
+									onClick={() => {
+										handleDelete();
+										setOpenDeleteDialog(false);
+									}}
+									color="error"
+									variant="contained"
+								>
+									Move to Trash
+								</Button>
+							</DialogActions>
+						</Dialog>
+					</Toolbar>
+				</AppBar>
+			</Slide>
+
+			{selectedImages.length > 0 && <Toolbar />}
+
 			<Divider sx={{ mb: 2 }} />
 			<Typography
 				color="text.primary"
@@ -82,9 +237,35 @@ export const ImageGallery: React.FC = () => {
 						.map((page) => page.properties)
 						.flat()
 						.map((thumbnail: IThumbnail, index) => (
-							<Grid item xs={1} key={thumbnail.id}>
-								<Paper elevation={0} onClick={() => openPreview(index)}>									
-								<ImageThumbnail id={thumbnail.id} mediaType={thumbnail.mediaType} />
+							<Grid
+								item
+								xs={1}
+								key={thumbnail.id}
+								sx={{ position: 'relative' }}
+							>
+								<Paper elevation={0}>
+									<SelectImageButton
+										selected={selectedImages.includes(thumbnail.id)}
+										onClick={(e) => {
+											e.stopPropagation();
+											toggleSelectImage(thumbnail.id);
+										}}
+									/>
+									<div onClick={() => openPreview(index)}>
+										{selectedImages.includes(thumbnail.id) ? (
+											<Box component="section" sx={{ p: 1.5 }}>
+												<ImageThumbnail
+													id={thumbnail.id}
+													mediaType={thumbnail.mediaType}
+												/>
+											</Box>
+										) : (
+											<ImageThumbnail
+												id={thumbnail.id}
+												mediaType={thumbnail.mediaType}
+											/>
+										)}
+									</div>
 								</Paper>
 							</Grid>
 						))}

src/components/SelectImageButton.tsx

@@ -0,0 +1,67 @@
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import IconButton from '@mui/material/IconButton';
+import React, { useState } from 'react';
+
+interface SelectImageButtonProps {
+    selected: boolean;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const SelectImageButton: React.FC<SelectImageButtonProps> = ({ selected, onClick }) => {
+    const [hovered, setHovered] = useState(false);
+
+    return (
+        <IconButton
+            size="small"
+            onClick={onClick}
+            onMouseEnter={() => setHovered(true)}
+            onMouseLeave={() => setHovered(false)}
+            sx={{
+                position: 'absolute',
+                top: 10,
+                left: 6,
+                zIndex: 2,
+                //transition: 'background 0.2s, box-shadow 0.2s, filter 0.2s',
+                //boxShadow: 1,
+                // '&:hover': {
+                //     background: 'rgba(26,115,232,0.15)',
+                // },
+            }}
+        >
+            {(() => {
+                if (selected) {
+                    return (
+                        <CheckCircleIcon
+                            sx={{
+                                color: '#0B57D0',
+                                fontSize: 24,
+                                filter: 'drop-shadow(0 0 2px #fff)',
+                            }}
+                        />
+                    );
+                } else if (hovered) {
+                    return (
+                        <CheckCircleIcon
+                            sx={{
+                                color: 'white',
+                                fontSize: 24,
+                            }}
+                        />
+                    );
+                } else {
+                    return (
+                        <CheckCircleOutlineIcon
+                            sx={{
+                                color: 'gray',
+                                fontSize: 24,
+                            }}
+                        />
+                    );
+                }
+            })()}
+        </IconButton>
+    );
+};
+
+export default SelectImageButton;