4.9.0: Модальное окно детализации задачи

VERSION

@@ -1 +1 @@
-4.8.11
+4.9.0

play-life-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "play-life-web",
-  "version": "4.8.11",
+  "version": "4.9.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

play-life-web/src/App.jsx

@@ -89,6 +89,9 @@ function AppContent() {
 
   // Параметры для навигации между вкладками
   const [tabParams, setTabParams] = useState({})
+  
+  // Предыдущий таб для возврата из модальных окон
+  const [previousTab, setPreviousTab] = useState(null)
 
   // Модальное окно выбора типа задачи
   const [showAddModal, setShowAddModal] = useState(false)
@@ -704,15 +707,29 @@ function AppContent() {
       if ((activeTab === 'task-form' || activeTab === 'test') && tab === 'tasks') {
         fetchTasksData(true)
       }
+      // Сохраняем предыдущий таб при открытии wishlist-form или wishlist-detail
+      if ((tab === 'wishlist-form' || tab === 'wishlist-detail') && activeTab !== tab) {
+        setPreviousTab(activeTab)
+      }
+      
       // Обновляем список желаний при возврате из экрана редактирования
-      if (activeTab === 'wishlist-form' && tab === 'wishlist') {
+      if (activeTab === 'wishlist-form' && tab !== 'wishlist-form') {
         // Сохраняем boardId из параметров или текущих tabParams
         const savedBoardId = params.boardId || tabParams.boardId
         // Параметры уже установлены в строке 649, но мы можем их обновить, чтобы сохранить boardId
-        if (savedBoardId) {
+        if (savedBoardId && tab === 'wishlist') {
           setTabParams(prev => ({ ...prev, boardId: savedBoardId }))
         }
-        setWishlistRefreshTrigger(prev => prev + 1)
+        if (tab === 'wishlist') {
+          setWishlistRefreshTrigger(prev => prev + 1)
+        }
+      }
+      
+      // Обновляем список желаний при возврате из экрана детализации
+      if (activeTab === 'wishlist-detail' && tab !== 'wishlist-detail') {
+        if (tab === 'wishlist') {
+          setWishlistRefreshTrigger(prev => prev + 1)
+        }
       }
       // Загрузка данных произойдет в useEffect при изменении activeTab
     }
@@ -978,17 +995,6 @@ function AppContent() {
             </div>
           )}
 
-          {loadedTabs['wishlist-detail'] && (
-            <div className={activeTab === 'wishlist-detail' ? 'block' : 'hidden'}>
-              <WishlistDetail
-                key={tabParams.wishlistId}
-                onNavigate={handleNavigate}
-                wishlistId={tabParams.wishlistId}
-                boardId={tabParams.boardId}
-                onRefresh={() => setWishlistRefreshTrigger(prev => prev + 1)}
-              />
-            </div>
-          )}
 
           {loadedTabs['board-form'] && (
             <div className={activeTab === 'board-form' ? 'block' : 'hidden'}>

play-life-web/src/components/TaskDetail.css

@@ -29,7 +29,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1rem 1.5rem;
+  padding: 1rem 1.5rem 0.5rem 1.5rem;
 }
 
 .task-detail-close-button {
@@ -54,7 +54,7 @@
 }
 
 .task-detail-modal-content {
-  padding: 0 1.5rem 1.5rem 1.5rem;
+  padding: 0.5rem 1.5rem 1.5rem 1.5rem;
   overflow-y: auto;
   flex: 1;
 }
@@ -64,9 +64,29 @@
   font-weight: 600;
   color: #1f2937;
   margin: 0;
-  display: flex;
+  flex: 1;
-  align-items: center;
+  min-width: 0;
-  gap: 0.5rem;
+  word-wrap: break-word;
+  word-break: break-word;
+  transition: opacity 0.2s;
+  line-height: 1.5;
+}
+
+.task-detail-title:hover {
+  opacity: 0.7;
+}
+
+.task-detail-edit-icon {
+  color: #6b7280;
+  flex-shrink: 0;
+  transition: color 0.2s;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 0.5rem;
+}
+
+.task-detail-title:hover .task-detail-edit-icon {
+  color: #1f2937;
 }
 
 .task-detail-auto-complete-icon {

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

@@ -731,10 +731,30 @@ function TaskDetail({ taskId, onClose, onRefresh, onTaskCompleted, onNavigate })
     <div className="task-detail-modal-overlay" onClick={onClose}>
       <div className="task-detail-modal" onClick={(e) => e.stopPropagation()}>
         <div className="task-detail-modal-header">
-          <h2 className="task-detail-title">
+          <h2 
+            className="task-detail-title"
+            onClick={taskDetail ? () => {
+              onClose?.()
+              onNavigate?.('task-form', { taskId: taskId })
+            } : undefined}
+            style={{ cursor: taskDetail ? 'pointer' : 'default' }}
+          >
             {loading ? 'Загрузка...' : error ? 'Ошибка' : taskDetail ? (
               <>
                 {task.name}
+                <svg 
+                  className="task-detail-edit-icon"
+                  width="18" 
+                  height="18" 
+                  viewBox="0 0 24 24" 
+                  fill="none" 
+                  stroke="currentColor" 
+                  strokeWidth="2" 
+                  strokeLinecap="round" 
+                  strokeLinejoin="round"
+                >
+                  <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
+                </svg>
               </>
             ) : 'Задача'}
           </h2>

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

@@ -30,7 +30,7 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
   // TaskList не инициирует загрузку самостоятельно
 
   const handleTaskClick = (task) => {
-    onNavigate?.('task-form', { taskId: task.id })
+    setSelectedTaskForDetail(task.id)
   }
 
   const handleCheckmarkClick = async (task, e) => {

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

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'
 import { useAuth } from './auth/AuthContext'
 import BoardSelector from './BoardSelector'
 import LoadingError from './LoadingError'
+import WishlistDetail from './WishlistDetail'
 import './Wishlist.css'
 
 const API_URL = '/api/wishlist'
@@ -43,6 +44,7 @@ function Wishlist({ onNavigate, refreshTrigger = 0, isActive = false, initialBoa
   const [completedExpanded, setCompletedExpanded] = useState(false)
   const [completedLoading, setCompletedLoading] = useState(false)
   const [selectedItem, setSelectedItem] = useState(null)
+  const [selectedWishlistForDetail, setSelectedWishlistForDetail] = useState(null)
   const fetchingRef = useRef(false)
   const fetchingCompletedRef = useRef(false)
   const initialFetchDoneRef = useRef(false)
@@ -406,7 +408,11 @@ function Wishlist({ onNavigate, refreshTrigger = 0, isActive = false, initialBoa
   }
 
   const handleItemClick = (item) => {
-    onNavigate?.('wishlist-detail', { wishlistId: item.id, boardId: selectedBoardId })
+    setSelectedWishlistForDetail(item.id)
+  }
+
+  const handleCloseDetail = () => {
+    setSelectedWishlistForDetail(null)
   }
 
   const handleMenuClick = (item, e) => {
@@ -697,6 +703,22 @@ function Wishlist({ onNavigate, refreshTrigger = 0, isActive = false, initialBoa
           </div>
         </div>
       )}
+
+      {/* Модальное окно для деталей желания */}
+      {selectedWishlistForDetail && (
+        <WishlistDetail
+          wishlistId={selectedWishlistForDetail}
+          onNavigate={onNavigate}
+          boardId={selectedBoardId}
+          onRefresh={async () => {
+            await fetchItems()
+            if (completedExpanded) {
+              await fetchCompleted()
+            }
+          }}
+          onClose={handleCloseDetail}
+        />
+      )}
     </div>
   )
 }

play-life-web/src/components/WishlistDetail.css

@@ -1,49 +1,102 @@
-.wishlist-detail {
+/* Модальное окно */
-  padding: 1rem;
+.wishlist-detail-modal-overlay {
-  max-width: 800px;
-  margin: 0 auto;
-  position: relative;
-}
-
-.close-x-button {
   position: fixed;
-  top: 1rem;
+  top: 0;
-  right: 1rem;
+  left: 0;
-  background: rgba(255, 255, 255, 0.9);
+  right: 0;
-  border: none;
+  bottom: 0;
-  font-size: 1.5rem;
+  background: rgba(0, 0, 0, 0.5);
-  color: #7f8c8d;
-  cursor: pointer;
-  width: 40px;
-  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
+  z-index: 1700;
-  transition: background-color 0.2s, color 0.2s;
+  padding: 1rem;
-  z-index: 1600;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
-.close-x-button:hover {
+.wishlist-detail-modal {
-  background-color: #ffffff;
-  color: #2c3e50;
-}
-
-.wishlist-detail h2 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: #1f2937;
-  margin: 0 0 0.75rem 0;
-}
-
-.wishlist-detail-content {
   background: white;
   border-radius: 0.5rem;
-  padding: 1rem;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  max-width: 500px;
+  width: 100%;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
+.wishlist-detail-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem 0.5rem 1.5rem;
+}
+
+.wishlist-detail-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+  word-wrap: break-word;
+  word-break: break-word;
+  transition: opacity 0.2s;
+  line-height: 1.5;
+}
+
+.wishlist-detail-title:hover {
+  opacity: 0.7;
+}
+
+.wishlist-detail-edit-icon {
+  color: #6b7280;
+  flex-shrink: 0;
+  transition: color 0.2s;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 0.5rem;
+}
+
+.wishlist-detail-title:hover .wishlist-detail-edit-icon {
+  color: #1f2937;
+}
+
+.wishlist-detail-close-button {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 0;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem;
+  transition: all 0.2s;
+  flex-shrink: 0;
+  margin-left: 1rem;
+}
+
+.wishlist-detail-close-button:hover {
+  background: #f3f4f6;
+  color: #1f2937;
+}
+
+.wishlist-detail-modal-content {
+  padding: 0.5rem 1.5rem 1.5rem 1.5rem;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.wishlist-detail {
+  /* Оставляем для обратной совместимости */
+}
+
+/* Контент теперь внутри модального окна, убираем лишние стили */
+
 .wishlist-detail-image {
   width: 100%;
   aspect-ratio: 5 / 6;

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

@@ -8,7 +8,7 @@ import './TaskList.css'
 
 const API_URL = '/api/wishlist'
 
-function WishlistDetail({ wishlistId, onNavigate, onRefresh, boardId }) {
+function WishlistDetail({ wishlistId, onNavigate, onRefresh, boardId, onClose, previousTab }) {
   const { authFetch, user } = useAuth()
   const [wishlistItem, setWishlistItem] = useState(null)
   const [loading, setLoading] = useState(true)
@@ -51,6 +51,7 @@ function WishlistDetail({ wishlistId, onNavigate, onRefresh, boardId }) {
   }, [wishlistId, fetchWishlistDetail])
 
   const handleEdit = () => {
+    onClose?.()
     onNavigate?.('wishlist-form', { wishlistId: wishlistId, boardId: boardId })
   }
 
@@ -159,6 +160,27 @@ function WishlistDetail({ wishlistId, onNavigate, onRefresh, boardId }) {
     setSelectedTaskForDetail(null)
   }
 
+  const handleClose = () => {
+    // Используем onClose если передан, иначе возвращаемся на wishlist
+    if (onClose) {
+      onClose()
+    } else {
+      // Возвращаемся на предыдущий таб, если он был сохранен, иначе на wishlist
+      if (previousTab) {
+        // Сохраняем boardId при возврате на предыдущий таб
+        if (boardId) {
+          onNavigate?.(previousTab, { boardId })
+        } else {
+          onNavigate?.(previousTab)
+        }
+      } else if (boardId) {
+        onNavigate?.('wishlist', { boardId })
+      } else {
+        onNavigate?.('wishlist')
+      }
+    }
+  }
+
   const handleTaskCompleted = () => {
     setToastMessage({ text: 'Задача выполнена', type: 'success' })
     // После выполнения задачи желание тоже завершается, перенаправляем на список
@@ -303,26 +325,51 @@ function WishlistDetail({ wishlistId, onNavigate, onRefresh, boardId }) {
 
 
   return (
-    <div className="wishlist-detail">
+    <div className="wishlist-detail-modal-overlay" onClick={handleClose}>
-      <button className="close-x-button" onClick={() => onNavigate?.('wishlist')}>
+      <div className="wishlist-detail-modal" onClick={(e) => e.stopPropagation()}>
-        ✕
+        <div className="wishlist-detail-modal-header">
-      </button>
+          <h2 
-      {loadingWishlist && (
+            className="wishlist-detail-title"
-        <div className="fixed inset-0 bottom-20 flex justify-center items-center">
+            onClick={wishlistItem ? handleEdit : undefined}
-          <div className="flex flex-col items-center">
+            style={{ cursor: wishlistItem ? 'pointer' : 'default' }}
-            <div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div>
+          >
-            <div className="text-gray-600 font-medium">Загрузка...</div>
+            {loadingWishlist ? 'Загрузка...' : error ? 'Ошибка' : wishlistItem ? wishlistItem.name : 'Желание'}
-          </div>
+            {wishlistItem && (
+              <svg 
+                className="wishlist-detail-edit-icon"
+                width="18" 
+                height="18" 
+                viewBox="0 0 24 24" 
+                fill="none" 
+                stroke="currentColor" 
+                strokeWidth="2" 
+                strokeLinecap="round" 
+                strokeLinejoin="round"
+              >
+                <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
+              </svg>
+            )}
+          </h2>
+          <button onClick={handleClose} className="wishlist-detail-close-button">
+            ✕
+          </button>
         </div>
-      )}
-      <h2>{wishlistItem ? wishlistItem.name : 'Желание'}</h2>
 
-      <div className="wishlist-detail-content">
+        <div className="wishlist-detail-modal-content">
-        {error && (
+          {loadingWishlist && (
-          <LoadingError onRetry={fetchWishlistDetail} />
+            <div className="flex justify-center items-center py-8">
-        )}
+              <div className="flex flex-col items-center">
+                <div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div>
+                <div className="text-gray-600 font-medium">Загрузка...</div>
+              </div>
+            </div>
+          )}
 
-        {!error && wishlistItem && (
+          {error && !loadingWishlist && (
+            <LoadingError onRetry={fetchWishlistDetail} />
+          )}
+
+          {!loadingWishlist && !error && wishlistItem && (
             <>
               {/* Изображение */}
               {wishlistItem.image_url && (
@@ -492,31 +539,32 @@ function WishlistDetail({ wishlistId, onNavigate, onRefresh, boardId }) {
                   )}
                 </>
               )}
-          </>
+            </>
+          )}
+        </div>
+
+        {toastMessage && (
+          <Toast
+            message={toastMessage.text}
+            type={toastMessage.type}
+            onClose={() => setToastMessage(null)}
+          />
+        )}
+
+        {/* Модальное окно для деталей задачи */}
+        {selectedTaskForDetail && (
+          <TaskDetail
+            taskId={selectedTaskForDetail}
+            onClose={handleCloseDetail}
+            onRefresh={() => {
+              fetchWishlistDetail()
+              if (onRefresh) onRefresh()
+            }}
+            onTaskCompleted={handleTaskCompleted}
+            onNavigate={onNavigate}
+          />
         )}
       </div>
-
-      {toastMessage && (
-        <Toast
-          message={toastMessage.text}
-          type={toastMessage.type}
-          onClose={() => setToastMessage(null)}
-        />
-      )}
-
-      {/* Модальное окно для деталей задачи */}
-      {selectedTaskForDetail && (
-        <TaskDetail
-          taskId={selectedTaskForDetail}
-          onClose={handleCloseDetail}
-          onRefresh={() => {
-            fetchWishlistDetail()
-            if (onRefresh) onRefresh()
-          }}
-          onTaskCompleted={handleTaskCompleted}
-          onNavigate={onNavigate}
-        />
-      )}
     </div>
   )
 }