641 lines
23 KiB
React
641 lines
23 KiB
React
|
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 (
|
|||
|
|
<div
|
|||
|
|
key={item.id}
|
|||
|
|
className="task-item"
|
|||
|
|
onClick={() => setSelectedItemForDetail(item.id)}
|
|||
|
|
>
|
|||
|
|
<div className="task-item-content">
|
|||
|
|
<div
|
|||
|
|
className="task-checkmark"
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation()
|
|||
|
|
setSelectedItemForDetail(item.id)
|
|||
|
|
}}
|
|||
|
|
title="Выполнить"
|
|||
|
|
>
|
|||
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|||
|
|
<circle cx="10" cy="10" r="9" stroke="currentColor" strokeWidth="2" fill="none" className="checkmark-circle" />
|
|||
|
|
<path d="M6 10 L9 13 L14 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="checkmark-check" />
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<div className="task-name-container">
|
|||
|
|
<div className="task-name-wrapper">
|
|||
|
|
<div className="task-name">{item.name}</div>
|
|||
|
|
{dateDisplay && (
|
|||
|
|
<div className="task-next-show-date">{dateDisplay}</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="task-actions">
|
|||
|
|
<button
|
|||
|
|
className="task-postpone-button"
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation()
|
|||
|
|
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('')
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
title="Перенести"
|
|||
|
|
>
|
|||
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|||
|
|
<circle cx="10" cy="10" r="8" stroke="currentColor" strokeWidth="1.5" fill="none"/>
|
|||
|
|
<path d="M10 5V10L13 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" fill="none"/>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="max-w-2xl mx-auto" style={{ paddingBottom: taskId ? '5rem' : '2.5rem' }}>
|
|||
|
|
<button className="close-x-button" onClick={handleClose}>✕</button>
|
|||
|
|
<h2 className="text-2xl font-semibold text-gray-800 mb-6" style={{ marginTop: '1.25rem' }}>{taskName || 'Закупка'}</h2>
|
|||
|
|
|
|||
|
|
{loading && items.length === 0 && (
|
|||
|
|
<div className="shopping-loading">
|
|||
|
|
<div className="w-8 h-8 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin"></div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{error && (
|
|||
|
|
<div className="shopping-empty">
|
|||
|
|
<p>Ошибка загрузки</p>
|
|||
|
|
<button onClick={handleRefresh} style={{ marginTop: '8px', color: 'var(--accent-color)' }}>
|
|||
|
|
Повторить
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{!loading && !error && items.length === 0 && (
|
|||
|
|
<div className="shopping-empty">
|
|||
|
|
<p>Нет товаров</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{groupNames.map(groupName => {
|
|||
|
|
const group = groupedItems[groupName]
|
|||
|
|
const hasActive = group.active.length > 0
|
|||
|
|
const hasFuture = group.future.length > 0
|
|||
|
|
const isFutureExpanded = expandedFuture[groupName]
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div key={groupName} className={`project-group ${!hasActive ? 'project-group-no-tasks' : ''}`}>
|
|||
|
|
<div
|
|||
|
|
className={`project-group-header ${hasFuture ? 'project-group-header-clickable' : ''}`}
|
|||
|
|
onClick={hasFuture ? () => toggleFuture(groupName) : undefined}
|
|||
|
|
>
|
|||
|
|
<h3 className={`project-group-title ${!hasActive ? 'project-group-title-empty' : ''}`}>{groupName}</h3>
|
|||
|
|
{hasFuture ? (
|
|||
|
|
<button
|
|||
|
|
className="completed-toggle-header"
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation()
|
|||
|
|
toggleFuture(groupName)
|
|||
|
|
}}
|
|||
|
|
title={isFutureExpanded ? 'Скрыть ожидающие' : 'Показать ожидающие'}
|
|||
|
|
>
|
|||
|
|
<span className="completed-toggle-icon">
|
|||
|
|
{isFutureExpanded ? '▼' : '▶'}
|
|||
|
|
</span>
|
|||
|
|
</button>
|
|||
|
|
) : (
|
|||
|
|
<div className="completed-toggle-header" style={{ visibility: 'hidden', pointerEvents: 'none' }}>
|
|||
|
|
<span className="completed-toggle-icon">▶</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{hasActive && (
|
|||
|
|
<div className="task-group">
|
|||
|
|
{group.active.map(item => renderItem(item))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{hasFuture && isFutureExpanded && (
|
|||
|
|
<div className="task-group completed-tasks">
|
|||
|
|
{group.future.map(item => renderItem(item))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
})}
|
|||
|
|
|
|||
|
|
{/* Кнопка завершения задачи — фиксированная внизу */}
|
|||
|
|
{!loading && !error && taskId && createPortal(
|
|||
|
|
<div style={{
|
|||
|
|
position: 'fixed',
|
|||
|
|
bottom: 0,
|
|||
|
|
left: 0,
|
|||
|
|
right: 0,
|
|||
|
|
padding: '0.75rem 1rem',
|
|||
|
|
paddingBottom: 'max(0.75rem, env(safe-area-inset-bottom))',
|
|||
|
|
background: 'linear-gradient(to top, white 60%, rgba(255,255,255,0))',
|
|||
|
|
zIndex: 1500,
|
|||
|
|
display: 'flex',
|
|||
|
|
justifyContent: 'center',
|
|||
|
|
}}>
|
|||
|
|
<button
|
|||
|
|
onClick={handleCompleteTask}
|
|||
|
|
disabled={isCompleting}
|
|||
|
|
style={{
|
|||
|
|
width: '100%',
|
|||
|
|
maxWidth: '42rem',
|
|||
|
|
padding: '0.875rem',
|
|||
|
|
background: 'linear-gradient(to right, #10b981, #059669)',
|
|||
|
|
color: 'white',
|
|||
|
|
border: 'none',
|
|||
|
|
borderRadius: '0.5rem',
|
|||
|
|
fontSize: '1rem',
|
|||
|
|
fontWeight: 600,
|
|||
|
|
cursor: isCompleting ? 'not-allowed' : 'pointer',
|
|||
|
|
opacity: isCompleting ? 0.6 : 1,
|
|||
|
|
transition: 'all 0.2s',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{isCompleting ? 'Выполняется...' : 'Завершить'}
|
|||
|
|
</button>
|
|||
|
|
</div>,
|
|||
|
|
document.body
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Модалка выполнения */}
|
|||
|
|
{selectedItemForDetail && (
|
|||
|
|
<ShoppingItemDetail
|
|||
|
|
itemId={selectedItemForDetail}
|
|||
|
|
onClose={handleCloseDetail}
|
|||
|
|
onRefresh={handleRefresh}
|
|||
|
|
onItemCompleted={() => 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 = (
|
|||
|
|
<div className="task-postpone-modal-overlay" onClick={handlePostponeClose}>
|
|||
|
|
<div className="task-postpone-modal" onClick={(e) => e.stopPropagation()}>
|
|||
|
|
<div className="task-postpone-modal-header">
|
|||
|
|
<h3>{selectedItemForPostpone.name}</h3>
|
|||
|
|
<button onClick={handlePostponeClose} className="task-postpone-close-button">
|
|||
|
|
✕
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="task-postpone-modal-content">
|
|||
|
|
<div className="task-postpone-calendar">
|
|||
|
|
<DayPicker
|
|||
|
|
mode="single"
|
|||
|
|
selected={postponeDate ? new Date(postponeDate + 'T00:00:00') : undefined}
|
|||
|
|
onSelect={handleDateSelect}
|
|||
|
|
onDayClick={handleDayClick}
|
|||
|
|
disabled={{ before: (() => {
|
|||
|
|
const today = new Date()
|
|||
|
|
today.setHours(0, 0, 0, 0)
|
|||
|
|
return today
|
|||
|
|
})() }}
|
|||
|
|
locale={ru}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="task-postpone-quick-buttons">
|
|||
|
|
{showTodayChip && (
|
|||
|
|
<button
|
|||
|
|
className="task-postpone-quick-button"
|
|||
|
|
onClick={handleTodayClick}
|
|||
|
|
disabled={isPostponing}
|
|||
|
|
>
|
|||
|
|
Сегодня
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
{!isTomorrow && (
|
|||
|
|
<button
|
|||
|
|
className="task-postpone-quick-button"
|
|||
|
|
onClick={handleTomorrowClick}
|
|||
|
|
disabled={isPostponing}
|
|||
|
|
>
|
|||
|
|
Завтра
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
{!isCurrentDatePlanned && (
|
|||
|
|
<button
|
|||
|
|
className="task-postpone-quick-button"
|
|||
|
|
onClick={() => handlePostponeSubmitWithDate(plannedDateStr)}
|
|||
|
|
disabled={isPostponing}
|
|||
|
|
>
|
|||
|
|
По плану
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
{nextShowAtStr && (
|
|||
|
|
<button
|
|||
|
|
className="task-postpone-quick-button task-postpone-quick-button-danger"
|
|||
|
|
onClick={handleWithoutDateClick}
|
|||
|
|
disabled={isPostponing}
|
|||
|
|
>
|
|||
|
|
Без даты
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
return typeof document !== 'undefined'
|
|||
|
|
? createPortal(modalContent, document.body)
|
|||
|
|
: modalContent
|
|||
|
|
})()}
|
|||
|
|
|
|||
|
|
{toast && (
|
|||
|
|
<Toast
|
|||
|
|
message={toast.message}
|
|||
|
|
type={toast.type}
|
|||
|
|
onClose={() => setToast(null)}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default PurchaseScreen
|