-
)}
+ {loadedTabs.purchase && (
+
+ )}
+
{loadedTabs.tasks && (
@@ -1293,6 +1314,7 @@ function AppContent() {
taskId={tabParams.taskId}
wishlistId={tabParams.wishlistId}
isTest={tabParams.isTest}
+ isPurchase={tabParams.isPurchase}
returnTo={tabParams.returnTo}
returnWishlistId={tabParams.returnWishlistId}
/>
@@ -1787,6 +1809,17 @@ function AppContent() {
Тест
+
diff --git a/play-life-web/src/components/PurchaseScreen.jsx b/play-life-web/src/components/PurchaseScreen.jsx
new file mode 100644
index 0000000..b7c7ffc
--- /dev/null
+++ b/play-life-web/src/components/PurchaseScreen.jsx
@@ -0,0 +1,640 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react'
+import { createPortal } from 'react-dom'
+import { useAuth } from './auth/AuthContext'
+import ShoppingItemDetail from './ShoppingItemDetail'
+import Toast from './Toast'
+import { DayPicker } from 'react-day-picker'
+import { ru } from 'react-day-picker/locale'
+import 'react-day-picker/style.css'
+import './TaskList.css'
+import './ShoppingList.css'
+
+// Форматирование даты в YYYY-MM-DD (локальное время)
+const formatDateToLocal = (date) => {
+ const year = date.getFullYear()
+ const month = String(date.getMonth() + 1).padStart(2, '0')
+ const day = String(date.getDate()).padStart(2, '0')
+ return `${year}-${month}-${day}`
+}
+
+// Форматирование даты для отображения
+const formatDateForDisplay = (dateStr) => {
+ if (!dateStr) return ''
+ const date = new Date(dateStr)
+ if (isNaN(date.getTime())) return ''
+
+ const now = new Date()
+ now.setHours(0, 0, 0, 0)
+ const target = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+ const diffDays = Math.round((target - now) / (1000 * 60 * 60 * 24))
+
+ if (diffDays === 0) return 'Сегодня'
+ if (diffDays === 1) return 'Завтра'
+
+ const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
+ 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
+ return `${date.getDate()} ${months[date.getMonth()]}`
+}
+
+const calculateNextDateFromRepetitionPeriod = (periodStr) => {
+ if (!periodStr) return null
+ const match = periodStr.match(/(\d+)\s*(day|week|mon|year)/i)
+ if (!match) return null
+ const value = parseInt(match[1], 10)
+ const unit = match[2].toLowerCase()
+ const next = new Date()
+ next.setHours(0, 0, 0, 0)
+ if (unit.startsWith('day')) next.setDate(next.getDate() + value)
+ else if (unit.startsWith('week')) next.setDate(next.getDate() + value * 7)
+ else if (unit.startsWith('mon')) next.setMonth(next.getMonth() + value)
+ else if (unit.startsWith('year')) next.setFullYear(next.getFullYear() + value)
+ return next
+}
+
+function PurchaseScreen({ onNavigate, purchaseConfigId, taskId, taskName }) {
+ const { authFetch } = useAuth()
+ const [items, setItems] = useState([])
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState(false)
+ const [selectedItemForDetail, setSelectedItemForDetail] = useState(null)
+ const [selectedItemForPostpone, setSelectedItemForPostpone] = useState(null)
+ const [postponeDate, setPostponeDate] = useState('')
+ const [isPostponing, setIsPostponing] = useState(false)
+ const [toast, setToast] = useState(null)
+ const [expandedFuture, setExpandedFuture] = useState({})
+ const [isCompleting, setIsCompleting] = useState(false)
+ const historyPushedForDetailRef = useRef(false)
+ const historyPushedForPostponeRef = useRef(false)
+ const selectedItemForDetailRef = useRef(null)
+ const selectedItemForPostponeRef = useRef(null)
+
+ const fetchItems = async () => {
+ if (!purchaseConfigId) return
+ try {
+ setLoading(true)
+ setError(false)
+ const response = await authFetch(`/api/purchase/items/${purchaseConfigId}`)
+ if (response.ok) {
+ const data = await response.json()
+ setItems(Array.isArray(data) ? data : [])
+ } else {
+ setError(true)
+ }
+ } catch (err) {
+ console.error('Error loading purchase items:', err)
+ setError(true)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ useEffect(() => {
+ fetchItems()
+ }, [purchaseConfigId])
+
+ const handleRefresh = () => {
+ fetchItems()
+ }
+
+ const handleClose = () => {
+ onNavigate?.('tasks')
+ }
+
+ const handleCompleteTask = async () => {
+ if (!taskId || isCompleting) return
+ setIsCompleting(true)
+ try {
+ const response = await authFetch(`/api/tasks/${taskId}/complete`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({})
+ })
+ if (response.ok) {
+ setToast({ message: 'Задача выполнена', type: 'success' })
+ setTimeout(() => onNavigate?.('tasks'), 500)
+ } else {
+ const errorData = await response.json().catch(() => ({}))
+ setToast({ message: errorData.error || 'Ошибка выполнения', type: 'error' })
+ }
+ } catch (err) {
+ setToast({ message: 'Ошибка выполнения', type: 'error' })
+ } finally {
+ setIsCompleting(false)
+ }
+ }
+
+ // Синхронизация refs для диалогов
+ useEffect(() => {
+ selectedItemForDetailRef.current = selectedItemForDetail
+ selectedItemForPostponeRef.current = selectedItemForPostpone
+ }, [selectedItemForDetail, selectedItemForPostpone])
+
+ // Пуш в историю при открытии модалок и обработка popstate
+ useEffect(() => {
+ if (selectedItemForPostpone && !historyPushedForPostponeRef.current) {
+ window.history.pushState({ modalOpen: true, type: 'purchase-postpone' }, '', window.location.href)
+ historyPushedForPostponeRef.current = true
+ } else if (!selectedItemForPostpone) {
+ historyPushedForPostponeRef.current = false
+ }
+
+ if (selectedItemForDetail && !historyPushedForDetailRef.current) {
+ window.history.pushState({ modalOpen: true, type: 'purchase-detail' }, '', window.location.href)
+ historyPushedForDetailRef.current = true
+ } else if (!selectedItemForDetail) {
+ historyPushedForDetailRef.current = false
+ }
+
+ if (!selectedItemForDetail && !selectedItemForPostpone) return
+
+ const handlePopState = () => {
+ const currentDetail = selectedItemForDetailRef.current
+ const currentPostpone = selectedItemForPostponeRef.current
+
+ if (currentPostpone) {
+ setSelectedItemForPostpone(null)
+ setPostponeDate('')
+ historyPushedForPostponeRef.current = false
+ return
+ }
+
+ if (currentDetail) {
+ setSelectedItemForDetail(null)
+ historyPushedForDetailRef.current = false
+ }
+ }
+
+ window.addEventListener('popstate', handlePopState)
+ return () => {
+ window.removeEventListener('popstate', handlePopState)
+ }
+ }, [selectedItemForDetail, selectedItemForPostpone])
+
+ // Фильтрация и группировка
+ const groupedItems = useMemo(() => {
+ const now = new Date()
+ now.setHours(0, 0, 0, 0)
+ const todayEnd = new Date(now)
+ todayEnd.setHours(23, 59, 59, 999)
+
+ const groups = {}
+
+ items.forEach(item => {
+ const groupKey = item.group_name || 'Остальные'
+ if (!groups[groupKey]) {
+ groups[groupKey] = { active: [], future: [] }
+ }
+
+ if (!item.next_show_at) {
+ groups[groupKey].future.push(item)
+ return
+ }
+ const showAt = new Date(item.next_show_at)
+ if (showAt > todayEnd) {
+ groups[groupKey].future.push(item)
+ return
+ }
+ groups[groupKey].active.push(item)
+ })
+
+ Object.values(groups).forEach(group => {
+ group.future.sort((a, b) => {
+ if (!a.next_show_at) return 1
+ if (!b.next_show_at) return -1
+ return new Date(a.next_show_at) - new Date(b.next_show_at)
+ })
+ })
+
+ return groups
+ }, [items])
+
+ const groupNames = useMemo(() => {
+ const names = Object.keys(groupedItems)
+ return names.sort((a, b) => {
+ const groupA = groupedItems[a]
+ const groupB = groupedItems[b]
+ const hasActiveA = groupA.active.length > 0
+ const hasActiveB = groupB.active.length > 0
+
+ if (hasActiveA && !hasActiveB) return -1
+ if (!hasActiveA && hasActiveB) return 1
+
+ if (a === 'Остальные') return 1
+ if (b === 'Остальные') return -1
+ return a.localeCompare(b, 'ru')
+ })
+ }, [groupedItems])
+
+ const toggleFuture = (groupName) => {
+ setExpandedFuture(prev => ({
+ ...prev,
+ [groupName]: !prev[groupName]
+ }))
+ }
+
+ const handleCloseDetail = () => {
+ if (historyPushedForDetailRef.current) {
+ window.history.back()
+ } else {
+ setSelectedItemForDetail(null)
+ }
+ }
+
+ const handlePostponeClose = () => {
+ if (historyPushedForPostponeRef.current) {
+ window.history.back()
+ } else {
+ setSelectedItemForPostpone(null)
+ setPostponeDate('')
+ }
+ }
+
+ const handlePostponeSubmitWithDate = async (dateStr) => {
+ if (!selectedItemForPostpone || !dateStr) return
+ setIsPostponing(true)
+ try {
+ const nextShowAt = new Date(dateStr + 'T00:00:00')
+ const res = await authFetch(`/api/shopping/items/${selectedItemForPostpone.id}/postpone`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ next_show_at: nextShowAt.toISOString() })
+ })
+ if (res.ok) {
+ setToast({ message: 'Дата обновлена', type: 'success' })
+ handleRefresh()
+ handlePostponeClose()
+ } else {
+ setToast({ message: 'Ошибка переноса', type: 'error' })
+ }
+ } catch (err) {
+ setToast({ message: 'Ошибка переноса', type: 'error' })
+ } finally {
+ setIsPostponing(false)
+ }
+ }
+
+ const handleDateSelect = (date) => {
+ if (date) {
+ setPostponeDate(formatDateToLocal(date))
+ }
+ }
+
+ const handleDayClick = (date) => {
+ if (date) {
+ handlePostponeSubmitWithDate(formatDateToLocal(date))
+ }
+ }
+
+ const handleTodayClick = () => {
+ handlePostponeSubmitWithDate(formatDateToLocal(new Date()))
+ }
+
+ const handleTomorrowClick = () => {
+ const tomorrow = new Date()
+ tomorrow.setDate(tomorrow.getDate() + 1)
+ handlePostponeSubmitWithDate(formatDateToLocal(tomorrow))
+ }
+
+ const handleWithoutDateClick = async () => {
+ if (!selectedItemForPostpone) return
+ setIsPostponing(true)
+ try {
+ const res = await authFetch(`/api/shopping/items/${selectedItemForPostpone.id}/postpone`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ next_show_at: null })
+ })
+ if (res.ok) {
+ setToast({ message: 'Дата убрана', type: 'success' })
+ handleRefresh()
+ handlePostponeClose()
+ }
+ } catch (err) {
+ setToast({ message: 'Ошибка', type: 'error' })
+ } finally {
+ setIsPostponing(false)
+ }
+ }
+
+ const renderItem = (item) => {
+ let dateDisplay = null
+ if (item.next_show_at) {
+ const itemDate = new Date(item.next_show_at)
+ const now = new Date()
+ now.setHours(0, 0, 0, 0)
+ const target = new Date(itemDate.getFullYear(), itemDate.getMonth(), itemDate.getDate())
+ if (target > now) {
+ dateDisplay = formatDateForDisplay(item.next_show_at)
+ }
+ }
+
+ return (
+
setSelectedItemForDetail(item.id)}
+ >
+
+
{
+ e.stopPropagation()
+ setSelectedItemForDetail(item.id)
+ }}
+ title="Выполнить"
+ >
+
+
+
+
+
{item.name}
+ {dateDisplay && (
+
{dateDisplay}
+ )}
+
+
+
+
+
+
+
+ )
+ }
+
+ return (
+
+
+
{taskName || 'Закупка'}
+
+ {loading && items.length === 0 && (
+
+ )}
+
+ {error && (
+
+
Ошибка загрузки
+
+
+ )}
+
+ {!loading && !error && items.length === 0 && (
+
+ )}
+
+ {groupNames.map(groupName => {
+ const group = groupedItems[groupName]
+ const hasActive = group.active.length > 0
+ const hasFuture = group.future.length > 0
+ const isFutureExpanded = expandedFuture[groupName]
+
+ return (
+
+
toggleFuture(groupName) : undefined}
+ >
+
{groupName}
+ {hasFuture ? (
+
+ ) : (
+
+ ▶
+
+ )}
+
+
+ {hasActive && (
+
+ {group.active.map(item => renderItem(item))}
+
+ )}
+
+ {hasFuture && isFutureExpanded && (
+
+ {group.future.map(item => renderItem(item))}
+
+ )}
+
+ )
+ })}
+
+ {/* Кнопка завершения задачи — фиксированная внизу */}
+ {!loading && !error && taskId && createPortal(
+
+
+
,
+ document.body
+ )}
+
+ {/* Модалка выполнения */}
+ {selectedItemForDetail && (
+
setToast({ message: 'Товар выполнен', type: 'success' })}
+ onNavigate={onNavigate}
+ />
+ )}
+
+ {/* Модалка переноса */}
+ {selectedItemForPostpone && (() => {
+ const todayStr = formatDateToLocal(new Date())
+ const tomorrow = new Date()
+ tomorrow.setDate(tomorrow.getDate() + 1)
+ const tomorrowStr = formatDateToLocal(tomorrow)
+
+ let nextShowAtStr = null
+ if (selectedItemForPostpone.next_show_at) {
+ const nextShowAtDate = new Date(selectedItemForPostpone.next_show_at)
+ nextShowAtStr = formatDateToLocal(nextShowAtDate)
+ }
+
+ const isTomorrow = nextShowAtStr === tomorrowStr
+ const showTodayChip = !nextShowAtStr || nextShowAtStr > todayStr
+
+ const item = selectedItemForPostpone
+ let plannedDate
+ const now = new Date()
+ now.setHours(0, 0, 0, 0)
+ if (item.repetition_period) {
+ const nextDate = calculateNextDateFromRepetitionPeriod(item.repetition_period)
+ if (nextDate) plannedDate = nextDate
+ }
+ if (!plannedDate) {
+ plannedDate = new Date(now)
+ plannedDate.setDate(plannedDate.getDate() + 1)
+ }
+ plannedDate.setHours(0, 0, 0, 0)
+ const plannedDateStr = formatDateToLocal(plannedDate)
+ const plannedNorm = plannedDateStr.slice(0, 10)
+ const nextShowNorm = nextShowAtStr ? String(nextShowAtStr).slice(0, 10) : ''
+ const isCurrentDatePlanned = plannedNorm && nextShowNorm && plannedNorm === nextShowNorm
+
+ const modalContent = (
+
+
e.stopPropagation()}>
+
+
{selectedItemForPostpone.name}
+
+
+
+
+ {
+ const today = new Date()
+ today.setHours(0, 0, 0, 0)
+ return today
+ })() }}
+ locale={ru}
+ />
+
+
+ {showTodayChip && (
+
+ )}
+ {!isTomorrow && (
+
+ )}
+ {!isCurrentDatePlanned && (
+
+ )}
+ {nextShowAtStr && (
+
+ )}
+
+
+
+
+ )
+}
+
+export default PurchaseScreen
diff --git a/play-life-web/src/components/ShoppingList.jsx b/play-life-web/src/components/ShoppingList.jsx
index 3fef0ef..15479e7 100644
--- a/play-life-web/src/components/ShoppingList.jsx
+++ b/play-life-web/src/components/ShoppingList.jsx
@@ -398,6 +398,32 @@ function ShoppingList({ onNavigate, refreshTrigger = 0, isActive = false, initia
}
}
+ const openPostpone = (item) => {
+ setSelectedItemForPostpone(item)
+ // Предвыбираем дату "по плану" если она не совпадает с текущей next_show_at
+ const now2 = new Date()
+ now2.setHours(0, 0, 0, 0)
+ let planned
+ if (item.repetition_period) {
+ planned = calculateNextDateFromRepetitionPeriod(item.repetition_period)
+ }
+ if (!planned) {
+ planned = new Date(now2)
+ planned.setDate(planned.getDate() + 1)
+ }
+ planned.setHours(0, 0, 0, 0)
+ const plannedStr = formatDateToLocal(planned)
+ let nextShowStr = null
+ if (item.next_show_at) {
+ nextShowStr = formatDateToLocal(new Date(item.next_show_at))
+ }
+ if (plannedStr !== nextShowStr) {
+ setPostponeDate(plannedStr)
+ } else {
+ setPostponeDate('')
+ }
+ }
+
// Модалка переноса
const handlePostponeClose = () => {
if (historyPushedForPostponeRef.current) {
@@ -619,7 +645,7 @@ function ShoppingList({ onNavigate, refreshTrigger = 0, isActive = false, initia
className="task-postpone-button"
onClick={(e) => {
e.stopPropagation()
- setSelectedItemForPostpone(item)
+ openPostpone(item)
}}
title="Перенести"
>
diff --git a/play-life-web/src/components/TaskForm.css b/play-life-web/src/components/TaskForm.css
index bd1abfd..6964200 100644
--- a/play-life-web/src/components/TaskForm.css
+++ b/play-life-web/src/components/TaskForm.css
@@ -513,7 +513,7 @@
display: flex;
align-items: center;
gap: 0.5rem;
- padding: 0.5rem;
+ padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
cursor: pointer;
transition: background-color 0.2s;
@@ -526,6 +526,8 @@
.test-dictionary-item input[type="checkbox"] {
width: 18px;
height: 18px;
+ flex-shrink: 0;
+ margin: 0;
accent-color: #3498db;
}
diff --git a/play-life-web/src/components/TaskForm.jsx b/play-life-web/src/components/TaskForm.jsx
index 585c7e3..894b39e 100644
--- a/play-life-web/src/components/TaskForm.jsx
+++ b/play-life-web/src/components/TaskForm.jsx
@@ -8,7 +8,7 @@ import './TaskForm.css'
const API_URL = '/api/tasks'
const PROJECTS_API_URL = '/projects'
-function TaskForm({ onNavigate, taskId, wishlistId, isTest: isTestFromProps = false, returnTo, returnWishlistId }) {
+function TaskForm({ onNavigate, taskId, wishlistId, isTest: isTestFromProps = false, isPurchase: isPurchaseFromProps = false, returnTo, returnWishlistId }) {
const { authFetch } = useAuth()
const [name, setName] = useState('')
const [progressionBase, setProgressionBase] = useState('')
@@ -35,6 +35,10 @@ function TaskForm({ onNavigate, taskId, wishlistId, isTest: isTestFromProps = fa
const [maxCards, setMaxCards] = useState('')
const [selectedDictionaryIDs, setSelectedDictionaryIDs] = useState([])
const [availableDictionaries, setAvailableDictionaries] = useState([])
+ // Purchase-specific state
+ const [isPurchase, setIsPurchase] = useState(isPurchaseFromProps)
+ const [availableBoards, setAvailableBoards] = useState([])
+ const [selectedPurchaseBoards, setSelectedPurchaseBoards] = useState([])
const debounceTimer = useRef(null)
// Загрузка проектов для автокомплита
@@ -85,6 +89,22 @@ function TaskForm({ onNavigate, taskId, wishlistId, isTest: isTestFromProps = fa
loadDictionaries()
}, [])
+ // Загрузка досок для закупок
+ useEffect(() => {
+ const loadBoards = async () => {
+ try {
+ const response = await authFetch('/api/purchase/boards-info')
+ if (response.ok) {
+ const data = await response.json()
+ setAvailableBoards(Array.isArray(data.boards) ? data.boards : [])
+ }
+ } catch (err) {
+ console.error('Error loading boards for purchase:', err)
+ }
+ }
+ loadBoards()
+ }, [])
+
// Функция сброса формы
const resetForm = () => {
setName('')
@@ -399,6 +419,23 @@ function TaskForm({ onNavigate, taskId, wishlistId, isTest: isTestFromProps = fa
setMaxCards('')
setSelectedDictionaryIDs([])
}
+
+ // Загружаем информацию о закупке, если есть purchase_config_id
+ if (data.task.purchase_config_id) {
+ setIsPurchase(true)
+ if (data.purchase_boards && Array.isArray(data.purchase_boards)) {
+ setSelectedPurchaseBoards(data.purchase_boards.map(pb => ({
+ board_id: pb.board_id,
+ group_name: pb.group_name || null
+ })))
+ }
+ // Закупки не могут иметь прогрессию и подзадачи
+ setProgressionBase('')
+ setSubtasks([])
+ } else {
+ setIsPurchase(false)
+ setSelectedPurchaseBoards([])
+ }
} catch (err) {
setError(err.message)
} finally {
@@ -413,6 +450,13 @@ function TaskForm({ onNavigate, taskId, wishlistId, isTest: isTestFromProps = fa
}
}, [isTest])
+ // Очистка подзадач при переключении задачи в режим закупки
+ useEffect(() => {
+ if (isPurchase && subtasks.length > 0) {
+ setSubtasks([])
+ }
+ }, [isPurchase])
+
// Пересчет rewards при изменении reward_message (debounce)
useEffect(() => {
if (debounceTimer.current) {
@@ -597,6 +641,13 @@ function TaskForm({ onNavigate, taskId, wishlistId, isTest: isTestFromProps = fa
}
}
+ // Валидация закупки
+ if (isPurchase && selectedPurchaseBoards.length === 0) {
+ setError('Выберите хотя бы одну доску или группу для закупки')
+ setLoading(false)
+ return
+ }
+
// Проверяем, что задача с привязанным желанием не может быть периодической
const isLinkedToWishlist = wishlistInfo !== null || (taskId && currentWishlistId)
if (isLinkedToWishlist && repetitionPeriodValue && repetitionPeriodValue.trim() !== '') {
@@ -711,7 +762,7 @@ function TaskForm({ onNavigate, taskId, wishlistId, isTest: isTestFromProps = fa
value: parseFloat(r.value) || 0,
use_progression: !!(progressionBase && r.use_progression)
})),
- subtasks: isTest ? [] : subtasks.map((st, index) => ({
+ subtasks: (isTest || isPurchase) ? [] : subtasks.map((st, index) => ({
id: st.id || undefined,
name: st.name.trim() || null,
reward_message: st.reward_message.trim() || null,
@@ -727,7 +778,10 @@ function TaskForm({ onNavigate, taskId, wishlistId, isTest: isTestFromProps = fa
is_test: isTest,
words_count: isTest ? parseInt(wordsCount, 10) : undefined,
max_cards: isTest && maxCards ? parseInt(maxCards, 10) : undefined,
- dictionary_ids: isTest ? selectedDictionaryIDs : undefined
+ dictionary_ids: isTest ? selectedDictionaryIDs : undefined,
+ // Purchase-specific fields
+ is_purchase: isPurchase,
+ purchase_boards: isPurchase ? selectedPurchaseBoards : undefined
}
const url = taskId ? `${API_URL}/${taskId}` : API_URL
@@ -974,6 +1028,68 @@ function TaskForm({ onNavigate, taskId, wishlistId, isTest: isTestFromProps = fa
)}
+ {/* Purchase-specific fields */}
+ {isPurchase && (
+