From 35dee985f727efac3039849d79eaeff22b15775d Mon Sep 17 00:00:00 2001
From: Kirill <mpak8501@yandex.ru>
Date: Sun, 17 May 2026 18:15:07 +0500
Subject: [PATCH] feat(client): complete AdminGalleryPage with new upload and
 resize UI

---
 .../admin-gallery/ui/AdminGalleryPage.tsx     | 32 ++++++++++++++-----
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/client/src/pages/admin-gallery/ui/AdminGalleryPage.tsx b/client/src/pages/admin-gallery/ui/AdminGalleryPage.tsx
index 9163b27..5943cef 100644
--- a/client/src/pages/admin-gallery/ui/AdminGalleryPage.tsx
+++ b/client/src/pages/admin-gallery/ui/AdminGalleryPage.tsx
@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import Divider from '@mui/material/Divider'
@@ -6,8 +6,13 @@ 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, resizeGalleryImage } from '@/entities/gallery'
-import { uploadAdminProductImages } from '@/entities/product/api/product-api'
+import {
+  deleteGalleryImage,
+  fetchAdminGallery,
+  GalleryGrid,
+  resizeGalleryImage,
+  uploadGalleryImages,
+} from '@/entities/gallery'
 import { formatAdminImageMaxSizeHint } from '@/shared/constants/upload-limits'
 import { invalidateQueryKeys } from '@/shared/lib/invalidate-query-keys'
 import { GallerySliderSection } from './GallerySliderSection'
@@ -22,6 +27,7 @@ function getApiErrorMessage(error: unknown): string | null {
 export function AdminGalleryPage() {
   const queryClient = useQueryClient()
   const fileInputRef = useRef<HTMLInputElement>(null)
+  const [resizingId, setResizingId] = useState<string | null>(null)
 
   const sliderQuery = useQuery({
     queryKey: ['admin', 'catalog-slider'],
@@ -34,7 +40,7 @@ export function AdminGalleryPage() {
   })
 
   const uploadMut = useMutation({
-    mutationFn: (files: File[]) => uploadAdminProductImages(files),
+    mutationFn: (files: File[]) => uploadGalleryImages(files),
     onSuccess: () => {
       void invalidateQueryKeys(queryClient, [['admin', 'gallery']])
       if (fileInputRef.current) {
@@ -51,7 +57,14 @@ export function AdminGalleryPage() {
   })
 
   const resizeMut = useMutation({
-    mutationFn: (id: string) => resizeGalleryImage(id),
+    mutationFn: async (id: string) => {
+      setResizingId(id)
+      try {
+        return await resizeGalleryImage(id)
+      } finally {
+        setResizingId(null)
+      }
+    },
     onSuccess: () => {
       void invalidateQueryKeys(queryClient, [['admin', 'gallery'], ['admin', 'catalog-slider'], ['catalog-slider']])
     },
@@ -65,8 +78,8 @@ export function AdminGalleryPage() {
         Галерея
       </Typography>
       <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-        Изображения без привязки к товару можно загружать здесь; их же можно добавить в карточку товара через «Из
-        галереи». Удаление из списка стирает файл с диска, если оно не используется в товаре.
+        Изображения загружаются без обработки. После загрузки нажмите «Resize» для подготовки к публикации. Обработанные
+        изображения доступны для добавления в карточку товара и слайдер.
       </Typography>
 
       {sliderQuery.isError && (
@@ -121,6 +134,9 @@ export function AdminGalleryPage() {
         {deleteMut.isError && (
           <Typography color="error">{getApiErrorMessage(deleteMut.error) ?? 'Ошибка удаления'}</Typography>
         )}
+        {resizeMut.isError && (
+          <Typography color="error">{getApiErrorMessage(resizeMut.error) ?? 'Ошибка обработки'}</Typography>
+        )}
       </Stack>
 
       {galleryQuery.isError && (
@@ -132,7 +148,7 @@ export function AdminGalleryPage() {
       <GalleryGrid
         items={items}
         deleting={deleteMut.isPending}
-        resizing={resizeMut.isPending ? (resizeMut.variables ?? null) : null}
+        resizing={resizingId}
         onDelete={(id) => deleteMut.mutate(id)}
         onResize={(id) => resizeMut.mutate(id)}
       />