Обновление бэйджей задач и улучшения wishlist

2026-01-20 21:02:22 +03:00
parent 5f2d610deb
commit b2c95dcbab
6 changed files with 138 additions and 86 deletions
--- a/play-life-web/src/components/TaskList.css
+++ b/play-life-web/src/components/TaskList.css
@@ -149,7 +149,7 @@
  flex-shrink: 0;
 }

-.task-onetime-icon {
+.task-recurring-icon {
  color: #9ca3af;
  flex-shrink: 0;
 }
--- a/play-life-web/src/components/TaskList.jsx
+++ b/play-life-web/src/components/TaskList.jsx
@@ -602,43 +602,9 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
                  <span className="task-subtasks-count">(+{task.subtasks_count})</span>
                )}
                <span className="task-badge-bar">
-                  {hasProgression && (
-                    <svg 
-                      className="task-progression-icon" 
-                      width="16" 
-                      height="16" 
-                      viewBox="0 0 24 24" 
-                      fill="none" 
-                      stroke="currentColor" 
-                      strokeWidth="2" 
-                      strokeLinecap="round" 
-                      strokeLinejoin="round"
-                      title="Задача с прогрессией"
-                    >
-                      <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
-                      <polyline points="17 6 23 6 23 12"></polyline>
-                    </svg>
-                  )}
-                  {isInfinite && (
-                    <svg 
-                      className="task-infinite-icon" 
-                      width="16" 
-                      height="16" 
-                      viewBox="0 0 24 24" 
-                      fill="none" 
-                      stroke="currentColor" 
-                      strokeWidth="2" 
-                      strokeLinecap="round" 
-                      strokeLinejoin="round"
-                      title="Бесконечная задача"
-                    >
-                      <path d="M12 12c0-2.5-1.5-4.5-3.5-4.5S5 9.5 5 12s1.5 4.5 3.5 4.5S12 14.5 12 12z"/>
-                      <path d="M12 12c0 2.5 1.5 4.5 3.5 4.5S19 14.5 19 12s-1.5-4.5-3.5-4.5S12 9.5 12 12z"/>
-                    </svg>
-                  )}
-                  {isOneTime && !isWishlist && (
+                  {!isOneTime && !isInfinite && !isWishlist && (
                    <svg
-                      className="task-onetime-icon"
+                      className="task-recurring-icon"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
@@ -647,11 +613,46 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
-                      title="Одноразовая задача"
+                      title="Повторяющаяся задача"
                    >
-                      <circle cx="12" cy="12" r="10"></circle>
-                      <line x1="12" y1="8" x2="12" y2="14"></line>
-                      <circle cx="12" cy="18" r="1"></circle>
+                      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+                      <path d="M21 3v5h-5"/>
+                      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+                      <path d="M3 21v-5h5"/>
+                    </svg>
+                  )}
+                  {isInfinite && (
+                    <svg
+                      className="task-infinite-icon"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      title="Бесконечная задача"
+                    >
+                      <path d="M12 12c0-2.5-1.5-4.5-3.5-4.5S5 9.5 5 12s1.5 4.5 3.5 4.5S12 14.5 12 12z"/>
+                      <path d="M12 12c0 2.5 1.5 4.5 3.5 4.5S19 14.5 19 12s-1.5-4.5-3.5-4.5S12 9.5 12 12z"/>
+                    </svg>
+                  )}
+                  {hasProgression && (
+                    <svg
+                      className="task-progression-icon"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      title="Задача с прогрессией"
+                    >
+                      <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
+                      <polyline points="17 6 23 6 23 12"></polyline>
                    </svg>
                  )}
                </span>
--- a/play-life-web/src/components/WishlistDetail.css
+++ b/play-life-web/src/components/WishlistDetail.css
@@ -291,12 +291,13 @@
 }

 .wishlist-detail-uncomplete-button {
-  background-color: #f39c12;
+  flex: 1;
+  background-color: #f1c40f;
  color: white;
 }

 .wishlist-detail-uncomplete-button:hover:not(:disabled) {
-  background-color: #e67e22;
+  background-color: #f39c12;
  transform: translateY(-1px);
 }

@@ -320,6 +321,41 @@
  cursor: not-allowed;
 }

+.wishlist-detail-bottom-actions {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 1rem;
+  background: white;
+  border-top: 1px solid #e5e7eb;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1500;
+}
+
+.wishlist-detail-bottom-actions .wishlist-detail-uncomplete-button {
+  flex: 1;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  background-color: #f1c40f;
+  color: white;
+}
+
+.wishlist-detail-bottom-actions .wishlist-detail-uncomplete-button:hover:not(:disabled) {
+  background-color: #f39c12;
+  transform: translateY(-1px);
+}
+
+.wishlist-detail-bottom-actions .wishlist-detail-uncomplete-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .loading {
  text-align: center;
  padding: 2rem;
--- a/play-life-web/src/components/WishlistDetail.jsx
+++ b/play-life-web/src/components/WishlistDetail.jsx
@@ -91,7 +91,7 @@ function WishlistDetail({ wishlistId, onNavigate, onRefresh, boardId }) {
      })

      if (!response.ok) {
-        throw new Error('Ошибка при отмене завершения')
+        throw new Error('Ошибка при возобновлении желания')
      }

      if (onRefresh) {
@@ -100,7 +100,7 @@ function WishlistDetail({ wishlistId, onNavigate, onRefresh, boardId }) {
      fetchWishlistDetail()
    } catch (err) {
      console.error('Error uncompleting wishlist:', err)
-      setToastMessage({ text: err.message || 'Ошибка при отмене завершения', type: 'error' })
+      setToastMessage({ text: err.message || 'Ошибка при возобновлении желания', type: 'error' })
    } finally {
      setIsCompleting(false)
    }
@@ -172,7 +172,7 @@ function WishlistDetail({ wishlistId, onNavigate, onRefresh, boardId }) {

  const handleDeleteTask = async (e) => {
    e.stopPropagation()
-    if (!wishlistItem?.linked_task) return
+    if (!wishlistItem?.linked_task || wishlistItem?.completed) return

    if (!window.confirm('Удалить задачу, связанную с желанием?')) {
      return
@@ -367,7 +367,7 @@ function WishlistDetail({ wishlistId, onNavigate, onRefresh, boardId }) {
              {renderUnlockConditions()}

              {/* Связанная задача или кнопки действий */}
-              {wishlistItem.unlocked && !wishlistItem.completed && (
+              {wishlistItem.unlocked && (
                <>
                  {wishlistItem.linked_task && wishlistItem.linked_task.user_id === user?.id ? (
                    <div className="wishlist-detail-linked-task">
@@ -397,25 +397,25 @@ function WishlistDetail({ wishlistId, onNavigate, onRefresh, boardId }) {
                                const showDate = new Date(wishlistItem.linked_task.next_show_at)
                                // Нормализуем дату: устанавливаем время в 00:00:00 в локальном времени
                                const showDateNormalized = new Date(showDate.getFullYear(), showDate.getMonth(), showDate.getDate())
-                                
+
                                const today = new Date()
                                const todayNormalized = new Date(today.getFullYear(), today.getMonth(), today.getDate())
-                                
+
                                // Показываем только если дата > сегодня
                                if (showDateNormalized.getTime() <= todayNormalized.getTime()) {
                                  return null
                                }
-                                
+
                                const tomorrowNormalized = new Date(todayNormalized)
                                tomorrowNormalized.setDate(tomorrowNormalized.getDate() + 1)
-                                
+
                                let dateText
                                if (showDateNormalized.getTime() === tomorrowNormalized.getTime()) {
                                  dateText = 'Завтра'
                                } else {
                                  dateText = showDate.toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' })
                                }
-                                
+
                                return (
                                  <div className="task-next-show-date">
                                    {dateText}
@@ -424,43 +424,57 @@ function WishlistDetail({ wishlistId, onNavigate, onRefresh, boardId }) {
                              })()}
                            </div>
                          </div>
-                          <div className="task-actions">
-                            <button
-                              className="task-delete-button"
-                              onClick={handleDeleteTask}
-                              title="Удалить задачу"
-                            >
-                              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                <path d="M3 6h18"></path>
-                                <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
-                                <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
-                                <line x1="10" y1="11" x2="10" y2="17"></line>
-                                <line x1="14" y1="11" x2="14" y2="17"></line>
-                              </svg>
-                            </button>
-                          </div>
+                          {wishlistItem && !wishlistItem.completed && (
+                            <div className="task-actions">
+                              <button
+                                className="task-delete-button"
+                                onClick={handleDeleteTask}
+                                title="Удалить задачу"
+                              >
+                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                  <path d="M3 6h18"></path>
+                                  <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
+                                  <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
+                                  <line x1="10" y1="11" x2="10" y2="17"></line>
+                                  <line x1="14" y1="11" x2="14" y2="17"></line>
+                                </svg>
+                              </button>
+                            </div>
+                          )}
                        </div>
                      </div>
                    </div>
                  ) : (
                    <div className="wishlist-detail-actions">
-                      <button
-                        onClick={handleComplete}
-                        disabled={isCompleting}
-                        className="wishlist-detail-complete-button"
-                      >
-                        {isCompleting ? 'Завершение...' : 'Завершить'}
-                      </button>
-                      <button
-                        onClick={handleCreateTask}
-                        className="wishlist-detail-create-task-button"
-                        title="Создать задачу"
-                      >
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                          <path d="M9 11l3 3L22 4"></path>
-                          <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
-                        </svg>
-                      </button>
+                      {wishlistItem.completed ? (
+                        <button
+                          onClick={handleUncomplete}
+                          disabled={isCompleting}
+                          className="wishlist-detail-uncomplete-button"
+                        >
+                          {isCompleting ? 'Возобновление...' : 'Возобновить'}
+                        </button>
+                      ) : (
+                        <>
+                          <button
+                            onClick={handleComplete}
+                            disabled={isCompleting}
+                            className="wishlist-detail-complete-button"
+                          >
+                            {isCompleting ? 'Завершение...' : 'Завершить'}
+                          </button>
+                          <button
+                            onClick={handleCreateTask}
+                            className="wishlist-detail-create-task-button"
+                            title="Создать задачу"
+                          >
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                              <path d="M9 11l3 3L22 4"></path>
+                              <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
+                            </svg>
+                          </button>
+                        </>
+                      )}
                    </div>
                  )}
                </>
@@ -468,6 +482,7 @@ function WishlistDetail({ wishlistId, onNavigate, onRefresh, boardId }) {
          </>
        )}
      </div>
+
      {toastMessage && (
        <Toast
          message={toastMessage.text}