diff --git a/client/src/entities/gallery/ui/GalleryGrid.tsx b/client/src/entities/gallery/ui/GalleryGrid.tsx
index ab65f09..ad9bb83 100644
--- a/client/src/entities/gallery/ui/GalleryGrid.tsx
+++ b/client/src/entities/gallery/ui/GalleryGrid.tsx
@@ -1,5 +1,8 @@
+import AutoFixHighOutlinedIcon from '@mui/icons-material/AutoFixHighOutlined'
+import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined'
import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'
import Box from '@mui/material/Box'
+import Chip from '@mui/material/Chip'
import IconButton from '@mui/material/IconButton'
import Tooltip from '@mui/material/Tooltip'
import { OptimizedImage } from '@/shared/ui/OptimizedImage'
@@ -8,10 +11,12 @@ import type { GalleryImageItem } from '../model/types'
type Props = {
items: GalleryImageItem[]
deleting?: boolean
+ resizing?: string | null
onDelete: (id: string) => void
+ onResize: (id: string) => void
}
-export function GalleryGrid({ items, deleting, onDelete }: Props) {
+export function GalleryGrid({ items, deleting, resizing, onDelete, onResize }: Props) {
return (
-
- onDelete(item.id)}
- >
-
-
-
+
+ {item.isResized ? (
+ }
+ sx={{ height: 24, '& .MuiChip-label': { px: 0.75 }, '& .MuiChip-icon': { fontSize: 14, ml: 0.5 } }}
+ />
+ ) : (
+
+ )}
+
+
+ {!item.isResized && (
+
+ onResize(item.id)}
+ >
+
+
+
+ )}
+
+ onDelete(item.id)}
+ >
+
+
+
+
))}
diff --git a/client/src/pages/admin-gallery/ui/AdminGalleryPage.tsx b/client/src/pages/admin-gallery/ui/AdminGalleryPage.tsx
index 271ff37..9163b27 100644
--- a/client/src/pages/admin-gallery/ui/AdminGalleryPage.tsx
+++ b/client/src/pages/admin-gallery/ui/AdminGalleryPage.tsx
@@ -6,7 +6,7 @@ import Stack from '@mui/material/Stack'
import Typography from '@mui/material/Typography'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { fetchAdminCatalogSlider } from '@/entities/catalog-slider'
-import { deleteGalleryImage, fetchAdminGallery, GalleryGrid } from '@/entities/gallery'
+import { deleteGalleryImage, fetchAdminGallery, GalleryGrid, resizeGalleryImage } from '@/entities/gallery'
import { uploadAdminProductImages } from '@/entities/product/api/product-api'
import { formatAdminImageMaxSizeHint } from '@/shared/constants/upload-limits'
import { invalidateQueryKeys } from '@/shared/lib/invalidate-query-keys'
@@ -50,6 +50,13 @@ export function AdminGalleryPage() {
},
})
+ const resizeMut = useMutation({
+ mutationFn: (id: string) => resizeGalleryImage(id),
+ onSuccess: () => {
+ void invalidateQueryKeys(queryClient, [['admin', 'gallery'], ['admin', 'catalog-slider'], ['catalog-slider']])
+ },
+ })
+
const items = galleryQuery.data?.items ?? []
return (
@@ -122,7 +129,13 @@ export function AdminGalleryPage() {
)}
- deleteMut.mutate(id)} />
+ deleteMut.mutate(id)}
+ onResize={(id) => resizeMut.mutate(id)}
+ />
{!galleryQuery.isLoading && items.length === 0 && (
Пока нет загруженных изображений.