Обновление бэйджей задач и улучшения wishlist
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 53s

This commit is contained in:
poignatov
2026-01-20 21:02:22 +03:00
parent 5f2d610deb
commit b2c95dcbab
6 changed files with 138 additions and 86 deletions

View File

@@ -1 +1 @@
3.23.0 3.24.0

View File

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

View File

@@ -149,7 +149,7 @@
flex-shrink: 0; flex-shrink: 0;
} }
.task-onetime-icon { .task-recurring-icon {
color: #9ca3af; color: #9ca3af;
flex-shrink: 0; flex-shrink: 0;
} }

View File

@@ -602,43 +602,9 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
<span className="task-subtasks-count">(+{task.subtasks_count})</span> <span className="task-subtasks-count">(+{task.subtasks_count})</span>
)} )}
<span className="task-badge-bar"> <span className="task-badge-bar">
{hasProgression && ( {!isOneTime && !isInfinite && !isWishlist && (
<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 && (
<svg <svg
className="task-onetime-icon" className="task-recurring-icon"
width="16" width="16"
height="16" height="16"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -647,11 +613,46 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
strokeWidth="2" strokeWidth="2"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
title="Одноразовая задача" title="Повторяющаяся задача"
> >
<circle cx="12" cy="12" r="10"></circle> <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
<line x1="12" y1="8" x2="12" y2="14"></line> <path d="M21 3v5h-5"/>
<circle cx="12" cy="18" r="1"></circle> <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> </svg>
)} )}
</span> </span>

View File

@@ -291,12 +291,13 @@
} }
.wishlist-detail-uncomplete-button { .wishlist-detail-uncomplete-button {
background-color: #f39c12; flex: 1;
background-color: #f1c40f;
color: white; color: white;
} }
.wishlist-detail-uncomplete-button:hover:not(:disabled) { .wishlist-detail-uncomplete-button:hover:not(:disabled) {
background-color: #e67e22; background-color: #f39c12;
transform: translateY(-1px); transform: translateY(-1px);
} }
@@ -320,6 +321,41 @@
cursor: not-allowed; 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 { .loading {
text-align: center; text-align: center;
padding: 2rem; padding: 2rem;

View File

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