6.21.0: Копирование товаров и меню действий

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

play-life-web/src/components/ShoppingItemForm.jsx

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom'
 import { useAuth } from './auth/AuthContext'
 import Toast from './Toast'
 import SubmitButton from './SubmitButton'
-import DeleteButton from './DeleteButton'
+import './Wishlist.css'
 import './ShoppingItemForm.css'
 
 function ShoppingItemForm({ onNavigate, itemId, boardId, previousTab, onSaved, isActive }) {
@@ -18,6 +18,9 @@ function ShoppingItemForm({ onNavigate, itemId, boardId, previousTab, onSaved, i
   const [loading, setLoading] = useState(false)
   const [loadingItem, setLoadingItem] = useState(false)
   const [isDeleting, setIsDeleting] = useState(false)
+  const [isCopying, setIsCopying] = useState(false)
+  const [showActionMenu, setShowActionMenu] = useState(false)
+  const actionMenuHistoryRef = useRef(false)
   const [toastMessage, setToastMessage] = useState(null)
 
   const isEdit = !!itemId
@@ -145,22 +148,75 @@ function ShoppingItemForm({ onNavigate, itemId, boardId, previousTab, onSaved, i
     }
   }
 
+  const openActionMenu = () => {
+    setShowActionMenu(true)
+    window.history.pushState({ actionMenu: true }, '')
+    actionMenuHistoryRef.current = true
+  }
+
+  const closeActionMenu = () => {
+    setShowActionMenu(false)
+    if (actionMenuHistoryRef.current) {
+      actionMenuHistoryRef.current = false
+      window.history.back()
+    }
+  }
+
+  // Обработка popstate для закрытия action menu кнопкой назад
+  useEffect(() => {
+    const handlePopState = () => {
+      if (showActionMenu) {
+        actionMenuHistoryRef.current = false
+        setShowActionMenu(false)
+      }
+    }
+    window.addEventListener('popstate', handlePopState)
+    return () => window.removeEventListener('popstate', handlePopState)
+  }, [showActionMenu])
+
   const handleDelete = async () => {
-    if (!window.confirm('Удалить товар?')) return
+    if (!itemId) return
+
+    setShowActionMenu(false)
+    if (actionMenuHistoryRef.current) {
+      actionMenuHistoryRef.current = false
+      window.history.go(-2)
+    } else {
+      window.history.back()
+    }
 
     setIsDeleting(true)
     try {
       const res = await authFetch(`/api/shopping/items/${itemId}`, { method: 'DELETE' })
       if (res.ok) {
         onSaved?.()
-        window.history.back()
-      } else {
-        setToastMessage({ text: 'Ошибка удаления', type: 'error' })
-        setIsDeleting(false)
       }
     } catch (err) {
-      setToastMessage({ text: 'Ошибка удаления', type: 'error' })
-      setIsDeleting(false)
+      console.error('Error deleting item:', err)
+    }
+  }
+
+  const handleCopy = async () => {
+    if (!itemId) return
+
+    setShowActionMenu(false)
+    if (actionMenuHistoryRef.current) {
+      actionMenuHistoryRef.current = false
+      window.history.go(-2)
+    } else {
+      window.history.back()
+    }
+
+    setIsCopying(true)
+    try {
+      const res = await authFetch(`/api/shopping/items/${itemId}/copy`, { method: 'POST' })
+      if (!res.ok) {
+        const errorText = await res.text().catch(() => '')
+        throw new Error(errorText || 'Ошибка при копировании товара')
+      }
+      onSaved?.()
+    } catch (err) {
+      console.error('Error copying item:', err)
     }
   }
 
@@ -305,7 +361,7 @@ function ShoppingItemForm({ onNavigate, itemId, boardId, previousTab, onSaved, i
       }}>
         <button
           onClick={handleSave}
-          disabled={loading || isDeleting || !name.trim() || !hasValidPeriod}
+          disabled={loading || isDeleting || isCopying || !name.trim() || !hasValidPeriod}
           style={{
             flex: 1,
             maxWidth: '42rem',
@@ -317,7 +373,7 @@ function ShoppingItemForm({ onNavigate, itemId, boardId, previousTab, onSaved, i
             borderRadius: '0.5rem',
             fontSize: '1rem',
             fontWeight: 600,
-            cursor: (loading || isDeleting) ? 'not-allowed' : 'pointer',
+            cursor: (loading || isDeleting || isCopying) ? 'not-allowed' : 'pointer',
             opacity: loading ? 0.6 : 1,
             transition: 'all 0.2s',
           }}
@@ -325,16 +381,55 @@ function ShoppingItemForm({ onNavigate, itemId, boardId, previousTab, onSaved, i
           {loading ? 'Сохранение...' : 'Сохранить'}
         </button>
         {isEdit && (
-          <DeleteButton
-            onClick={handleDelete}
-            loading={isDeleting}
-            disabled={loading}
-            title="Удалить товар"
-          />
+          <button
+            type="button"
+            onClick={openActionMenu}
+            disabled={loading || isDeleting || isCopying}
+            style={{
+              width: '52px',
+              height: '52px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: 'transparent',
+              color: '#059669',
+              border: '2px solid #059669',
+              borderRadius: '0.5rem',
+              fontSize: '1.25rem',
+              fontWeight: 700,
+              cursor: (loading || isDeleting || isCopying) ? 'not-allowed' : 'pointer',
+              lineHeight: 1,
+              flexShrink: 0,
+              padding: 0,
+              boxSizing: 'border-box',
+              transition: 'all 0.2s',
+            }}
+            title="Действия"
+          >
+            ⋮
+          </button>
         )}
       </div>,
       document.body
     ) : null}
+    {showActionMenu && createPortal(
+      <div className="wishlist-modal-overlay" style={{ zIndex: 2000 }} onClick={closeActionMenu}>
+        <div className="wishlist-modal" onClick={(e) => e.stopPropagation()}>
+          <div className="wishlist-modal-header">
+            <h3>{name}</h3>
+          </div>
+          <div className="wishlist-modal-actions">
+            <button className="wishlist-modal-copy" onClick={handleCopy}>
+              Копировать
+            </button>
+            <button className="wishlist-modal-delete" onClick={handleDelete}>
+              Удалить
+            </button>
+          </div>
+        </div>
+      </div>,
+      document.body
+    )}
     </>
   )
 }