5ea58476cb
Some checks failed
Build and Push Docker Image / build-and-push (push) Failing after 1m19s
1696 lines
61 KiB
JavaScript
1696 lines
61 KiB
JavaScript
import React, { useState, useEffect, useCallback, useRef } from 'react'
|
||
import { createPortal } from 'react-dom'
|
||
import Cropper from 'react-easy-crop'
|
||
import { useAuth } from './auth/AuthContext'
|
||
import Toast from './Toast'
|
||
import './WishlistForm.css'
|
||
|
||
// Извлекает первый URL из текста
|
||
function extractUrl(text) {
|
||
if (!text) return ''
|
||
const match = text.match(/https?:\/\/[^\s<>"'`,;!)\]]+/i)
|
||
return match ? match[0] : text
|
||
}
|
||
|
||
const API_URL = '/api/wishlist'
|
||
const TASKS_API_URL = '/api/tasks'
|
||
const PROJECTS_API_URL = '/projects'
|
||
const WISHLIST_FORM_STATE_KEY = 'wishlistFormPendingState'
|
||
|
||
function WishlistForm({ onNavigate, wishlistId, editConditionIndex, newTaskId: newTaskIdProp, boardId, isActive }) {
|
||
const { authFetch, user } = useAuth()
|
||
|
||
// newTaskId может прийти из props (через onNavigate) или из sessionStorage (через history.back)
|
||
const [newTaskId] = useState(() => {
|
||
if (newTaskIdProp) return newTaskIdProp
|
||
const stored = sessionStorage.getItem('wishlistFormNewTaskId')
|
||
if (stored) {
|
||
sessionStorage.removeItem('wishlistFormNewTaskId')
|
||
return parseInt(stored, 10)
|
||
}
|
||
return undefined
|
||
})
|
||
|
||
const [name, setName] = useState('')
|
||
const [price, setPrice] = useState('')
|
||
const [link, setLink] = useState('')
|
||
const [imageUrl, setImageUrl] = useState(null)
|
||
const [imageFile, setImageFile] = useState(null)
|
||
const [imageRemoved, setImageRemoved] = useState(false) // Флаг удаления фото
|
||
const [showCropper, setShowCropper] = useState(false)
|
||
const [crop, setCrop] = useState({ x: 0, y: 0 })
|
||
const [zoom, setZoom] = useState(1)
|
||
const [croppedAreaPixels, setCroppedAreaPixels] = useState(null)
|
||
const [unlockConditions, setUnlockConditions] = useState([])
|
||
const [showConditionForm, setShowConditionForm] = useState(false)
|
||
const [editingConditionIndex, setEditingConditionIndex] = useState(null)
|
||
const [tasks, setTasks] = useState([])
|
||
const [projects, setProjects] = useState([])
|
||
const [groupName, setGroupName] = useState('')
|
||
const [groupSuggestions, setGroupSuggestions] = useState([])
|
||
const [loading, setLoading] = useState(false)
|
||
const [error, setError] = useState('')
|
||
const [toastMessage, setToastMessage] = useState(null)
|
||
const [loadingWishlist, setLoadingWishlist] = useState(false)
|
||
const [fetchingMetadata, setFetchingMetadata] = useState(false)
|
||
const [restoredFromSession, setRestoredFromSession] = useState(() => {
|
||
// Инициализируем флаг сразу, чтобы loadWishlist не запустился до восстановления
|
||
return !!(newTaskId && sessionStorage.getItem(WISHLIST_FORM_STATE_KEY))
|
||
})
|
||
const [loadedWishlistData, setLoadedWishlistData] = useState(null) // Данные желания для последующего маппинга условий
|
||
const [imageUrlInput, setImageUrlInput] = useState('') // Ссылка на картинку для загрузки по URL
|
||
const [loadingImageFromUrl, setLoadingImageFromUrl] = useState(false)
|
||
const [newTaskConsumed, setNewTaskConsumed] = useState(false) // Флаг что newTaskId уже добавлен как цель
|
||
const fileInputRef = useRef(null)
|
||
|
||
// Загрузка задач, проектов и саджестов групп
|
||
useEffect(() => {
|
||
const loadData = async () => {
|
||
try {
|
||
// Загружаем задачи
|
||
const tasksResponse = await authFetch(TASKS_API_URL)
|
||
if (tasksResponse.ok) {
|
||
const tasksData = await tasksResponse.json()
|
||
setTasks(Array.isArray(tasksData) ? tasksData : [])
|
||
}
|
||
|
||
// Загружаем проекты (нужны для ConditionForm)
|
||
const projectsResponse = await authFetch(PROJECTS_API_URL)
|
||
if (projectsResponse.ok) {
|
||
const projectsData = await projectsResponse.json()
|
||
setProjects(Array.isArray(projectsData) ? projectsData : [])
|
||
}
|
||
|
||
// Загружаем саджесты групп
|
||
const groupsResponse = await authFetch('/api/group-suggestions')
|
||
if (groupsResponse.ok) {
|
||
const groupsData = await groupsResponse.json()
|
||
setGroupSuggestions(Array.isArray(groupsData) ? groupsData : [])
|
||
}
|
||
} catch (err) {
|
||
console.error('Error loading data:', err)
|
||
}
|
||
}
|
||
loadData()
|
||
}, [authFetch])
|
||
|
||
// Загрузка желания при редактировании или сброс формы при создании
|
||
useEffect(() => {
|
||
// Пропускаем загрузку, если состояние было восстановлено из sessionStorage
|
||
if (restoredFromSession) {
|
||
console.log('[WishlistForm] Skipping loadWishlist - restored from session')
|
||
return
|
||
}
|
||
|
||
if (wishlistId !== undefined && wishlistId !== null) {
|
||
// Загружаем желание независимо от наличия задач и проектов
|
||
loadWishlist()
|
||
} else if (wishlistId === undefined || wishlistId === null) {
|
||
// Сбрасываем форму при создании новой задачи
|
||
resetForm()
|
||
setLoadedWishlistData(null)
|
||
}
|
||
}, [wishlistId, restoredFromSession])
|
||
|
||
// Обновляем маппинг условий после загрузки задач и проектов
|
||
useEffect(() => {
|
||
// Если есть загруженные данные желания, но маппинг еще не выполнен,
|
||
// обновляем условия с правильным маппингом
|
||
if (loadedWishlistData && tasks.length > 0 && projects.length > 0) {
|
||
const data = loadedWishlistData
|
||
setName(data.name || '')
|
||
setPrice(data.price ? String(data.price) : '')
|
||
setLink(data.link || '')
|
||
setImageUrl(data.image_url || null)
|
||
setGroupName(data.group_name || '')
|
||
if (data.unlock_conditions) {
|
||
setUnlockConditions(data.unlock_conditions.map((cond, idx) => ({
|
||
id: cond.id || null,
|
||
type: cond.type,
|
||
task_id: cond.type === 'task_completion' ? (cond.task_id || tasks.find(t => t.name === cond.task_name)?.id) : null,
|
||
task_name: cond.task_name || null,
|
||
project_id: cond.type === 'project_points' ? (cond.project_id || projects.find(p => p.project_name === cond.project_name)?.project_id) : null,
|
||
project_name: cond.project_name || null,
|
||
required_points: cond.required_points || null,
|
||
start_date: cond.start_date || null,
|
||
display_order: idx,
|
||
user_id: cond.user_id || null,
|
||
weeks_text: cond.weeks_text || null,
|
||
})))
|
||
} else {
|
||
setUnlockConditions([])
|
||
}
|
||
setLoadedWishlistData(null) // Очищаем после применения
|
||
}
|
||
}, [tasks, projects, loadedWishlistData])
|
||
|
||
// Сброс формы при размонтировании компонента или при изменении wishlistId на undefined
|
||
useEffect(() => {
|
||
return () => {
|
||
resetForm()
|
||
}
|
||
}, [wishlistId])
|
||
|
||
// Открываем форму редактирования условия, если передан editConditionIndex
|
||
useEffect(() => {
|
||
if (editConditionIndex !== undefined && editConditionIndex !== null && unlockConditions.length > editConditionIndex) {
|
||
setEditingConditionIndex(editConditionIndex)
|
||
setShowConditionForm(true)
|
||
} else if (editConditionIndex === undefined || editConditionIndex === null) {
|
||
// Закрываем форму условия, если editConditionIndex сброшен
|
||
setEditingConditionIndex(null)
|
||
setShowConditionForm(false)
|
||
}
|
||
}, [editConditionIndex, unlockConditions])
|
||
|
||
// Обработка кнопки "назад" для диалога ConditionForm
|
||
const showConditionFormRef = useRef(false)
|
||
const conditionClosedByPopStateRef = useRef(false)
|
||
showConditionFormRef.current = showConditionForm
|
||
|
||
useEffect(() => {
|
||
const handlePopState = () => {
|
||
if (showConditionFormRef.current) {
|
||
// Закрываем диалог — popstate уже убрал запись из стека
|
||
conditionClosedByPopStateRef.current = true
|
||
setShowConditionForm(false)
|
||
setEditingConditionIndex(null)
|
||
}
|
||
}
|
||
window.addEventListener('popstate', handlePopState)
|
||
return () => window.removeEventListener('popstate', handlePopState)
|
||
}, [])
|
||
|
||
// Восстановление состояния при возврате с создания задачи
|
||
useEffect(() => {
|
||
const savedState = sessionStorage.getItem(WISHLIST_FORM_STATE_KEY)
|
||
console.log('[WishlistForm] Checking restore - newTaskId:', newTaskId, 'savedState exists:', !!savedState)
|
||
|
||
if (savedState && newTaskId) {
|
||
console.log('[WishlistForm] Starting restoration...')
|
||
try {
|
||
const state = JSON.parse(savedState)
|
||
console.log('[WishlistForm] Parsed state:', state)
|
||
|
||
// Восстанавливаем состояние формы
|
||
setName(state.name || '')
|
||
setPrice(state.price || '')
|
||
setLink(state.link || '')
|
||
setImageUrl(state.imageUrl || null)
|
||
setImageRemoved(false) // Сбрасываем флаг удаления при восстановлении
|
||
|
||
// Восстанавливаем условия и автоматически добавляем новую задачу
|
||
const restoredConditions = state.unlockConditions || []
|
||
console.log('[WishlistForm] Restored conditions:', restoredConditions)
|
||
|
||
// Устанавливаем флаг синхронно, чтобы loadWishlist не перезаписал восстановленное состояние
|
||
setRestoredFromSession(true)
|
||
|
||
// Перезагружаем задачи, чтобы новая задача была в списке
|
||
const reloadTasks = async () => {
|
||
console.log('[WishlistForm] Reloading tasks...')
|
||
try {
|
||
const tasksResponse = await authFetch(TASKS_API_URL)
|
||
console.log('[WishlistForm] Tasks response ok:', tasksResponse.ok)
|
||
if (tasksResponse.ok) {
|
||
const tasksData = await tasksResponse.json()
|
||
console.log('[WishlistForm] Tasks loaded:', tasksData.length)
|
||
setTasks(Array.isArray(tasksData) ? tasksData : [])
|
||
|
||
// Автоматически добавляем цель с новой задачей
|
||
console.log('[WishlistForm] pendingConditionType:', state.pendingConditionType)
|
||
if (state.pendingConditionType === 'task_completion') {
|
||
const newCondition = {
|
||
type: 'task_completion',
|
||
task_id: newTaskId,
|
||
project_id: null,
|
||
required_points: null,
|
||
start_date: null,
|
||
display_order: restoredConditions.length,
|
||
}
|
||
console.log('[WishlistForm] New condition to add:', newCondition)
|
||
|
||
// Если редактировали существующее условие, заменяем его
|
||
if (state.editingConditionIndex !== null && state.editingConditionIndex !== undefined) {
|
||
console.log('[WishlistForm] Replacing existing condition at index:', state.editingConditionIndex)
|
||
const updatedConditions = restoredConditions.map((cond, idx) =>
|
||
idx === state.editingConditionIndex ? { ...newCondition, display_order: idx } : cond
|
||
)
|
||
setUnlockConditions(updatedConditions)
|
||
console.log('[WishlistForm] Updated conditions:', updatedConditions)
|
||
} else {
|
||
// Добавляем новое условие
|
||
const finalConditions = [...restoredConditions, newCondition]
|
||
console.log('[WishlistForm] Adding new condition, final conditions:', finalConditions)
|
||
setUnlockConditions(finalConditions)
|
||
}
|
||
setNewTaskConsumed(true)
|
||
} else {
|
||
setUnlockConditions(restoredConditions)
|
||
}
|
||
}
|
||
} catch (err) {
|
||
console.error('[WishlistForm] Error reloading tasks:', err)
|
||
setUnlockConditions(restoredConditions)
|
||
}
|
||
}
|
||
reloadTasks()
|
||
|
||
// Очищаем sessionStorage
|
||
sessionStorage.removeItem(WISHLIST_FORM_STATE_KEY)
|
||
console.log('[WishlistForm] SessionStorage cleared')
|
||
} catch (e) {
|
||
console.error('[WishlistForm] Error restoring wishlist form state:', e)
|
||
sessionStorage.removeItem(WISHLIST_FORM_STATE_KEY)
|
||
}
|
||
}
|
||
}, [newTaskId, authFetch])
|
||
|
||
const loadWishlist = async () => {
|
||
setLoadingWishlist(true)
|
||
try {
|
||
// Сначала очищаем форму, чтобы удалить старые данные
|
||
setName('')
|
||
setPrice('')
|
||
setLink('')
|
||
setImageUrl(null)
|
||
setImageFile(null)
|
||
setImageRemoved(false)
|
||
setUnlockConditions([])
|
||
setError('')
|
||
setShowCropper(false)
|
||
setCrop({ x: 0, y: 0 })
|
||
setZoom(1)
|
||
setCroppedAreaPixels(null)
|
||
setImageUrlInput('')
|
||
setLoadingImageFromUrl(false)
|
||
setShowConditionForm(false)
|
||
setEditingConditionIndex(null)
|
||
setToastMessage(null)
|
||
|
||
const response = await authFetch(`${API_URL}/${wishlistId}`)
|
||
if (!response.ok) {
|
||
throw new Error('Ошибка загрузки желания')
|
||
}
|
||
const data = await response.json()
|
||
|
||
// Если задачи и проекты уже загружены, применяем данные сразу
|
||
// Иначе сохраняем данные для последующего применения
|
||
if (tasks.length > 0 && projects.length > 0) {
|
||
setName(data.name || '')
|
||
setPrice(data.price ? String(data.price) : '')
|
||
setLink(data.link || '')
|
||
setImageUrl(data.image_url || null)
|
||
setImageFile(null) // Сбрасываем imageFile при загрузке существующего желания
|
||
setImageRemoved(false) // Сбрасываем флаг удаления при загрузке
|
||
setGroupName(data.group_name || '')
|
||
if (data.unlock_conditions) {
|
||
setUnlockConditions(data.unlock_conditions.map((cond, idx) => ({
|
||
id: cond.id || null,
|
||
type: cond.type,
|
||
task_id: cond.type === 'task_completion' ? (cond.task_id || tasks.find(t => t.name === cond.task_name)?.id) : null,
|
||
task_name: cond.task_name || null,
|
||
project_id: cond.type === 'project_points' ? (cond.project_id || projects.find(p => p.project_name === cond.project_name)?.project_id) : null,
|
||
project_name: cond.project_name || null,
|
||
required_points: cond.required_points || null,
|
||
start_date: cond.start_date || null,
|
||
display_order: idx,
|
||
user_id: cond.user_id || null,
|
||
weeks_text: cond.weeks_text || null,
|
||
})))
|
||
} else {
|
||
setUnlockConditions([])
|
||
}
|
||
} else {
|
||
// Сохраняем данные для последующего применения после загрузки задач и проектов
|
||
setLoadedWishlistData(data)
|
||
// Применяем базовые данные сразу
|
||
setName(data.name || '')
|
||
setPrice(data.price ? String(data.price) : '')
|
||
setLink(data.link || '')
|
||
setImageUrl(data.image_url || null)
|
||
setImageFile(null)
|
||
setImageRemoved(false) // Сбрасываем флаг удаления при загрузке
|
||
setGroupName(data.group_name || '')
|
||
}
|
||
} catch (err) {
|
||
setError(err.message)
|
||
} finally {
|
||
setLoadingWishlist(false)
|
||
}
|
||
}
|
||
|
||
const resetForm = () => {
|
||
setName('')
|
||
setPrice('')
|
||
setLink('')
|
||
setImageUrl(null)
|
||
setImageFile(null)
|
||
setImageRemoved(false)
|
||
setImageUrlInput('')
|
||
setLoadingImageFromUrl(false)
|
||
setUnlockConditions([])
|
||
setGroupName('')
|
||
setError('')
|
||
setShowCropper(false)
|
||
setCrop({ x: 0, y: 0 })
|
||
setZoom(1)
|
||
setCroppedAreaPixels(null)
|
||
setShowConditionForm(false)
|
||
setEditingConditionIndex(null)
|
||
setToastMessage(null)
|
||
}
|
||
|
||
// Функция для извлечения метаданных из ссылки (по нажатию кнопки)
|
||
const fetchLinkMetadata = useCallback(async () => {
|
||
if (!link || !link.trim()) {
|
||
setToastMessage({ text: 'Введите ссылку', type: 'error' })
|
||
return
|
||
}
|
||
|
||
const extracted = extractUrl(link)
|
||
setLink(extracted)
|
||
|
||
// Проверяем валидность URL
|
||
try {
|
||
new URL(extracted)
|
||
} catch {
|
||
setToastMessage({ text: 'Некорректная ссылка', type: 'error' })
|
||
return
|
||
}
|
||
|
||
setFetchingMetadata(true)
|
||
try {
|
||
const response = await authFetch(`${API_URL}/metadata`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({ url: extracted.trim() }),
|
||
})
|
||
|
||
if (response.ok) {
|
||
const metadata = await response.json()
|
||
let loaded = false
|
||
|
||
// Заполняем название только если поле пустое
|
||
if (metadata.title && !name) {
|
||
setName(metadata.title)
|
||
loaded = true
|
||
}
|
||
|
||
// Заполняем цену только если поле пустое
|
||
if (metadata.price && !price) {
|
||
setPrice(String(metadata.price))
|
||
loaded = true
|
||
}
|
||
|
||
// Загружаем изображение только если нет текущего
|
||
if (metadata.image && !imageUrl) {
|
||
try {
|
||
// Загружаем изображение через бэкенд прокси для обхода CORS
|
||
const proxyUrl = `${API_URL}/proxy-image?url=${encodeURIComponent(metadata.image)}`
|
||
const imgResponse = await authFetch(proxyUrl)
|
||
if (imgResponse.ok) {
|
||
const blob = await imgResponse.blob()
|
||
// Проверяем размер (максимум 5MB)
|
||
if (blob.size <= 5 * 1024 * 1024 && blob.type.startsWith('image/')) {
|
||
const reader = new FileReader()
|
||
reader.onload = () => {
|
||
setImageUrl(reader.result)
|
||
setImageFile(blob)
|
||
setImageRemoved(false) // Сбрасываем флаг удаления при загрузке из метаданных
|
||
setShowCropper(true)
|
||
}
|
||
reader.readAsDataURL(blob)
|
||
loaded = true
|
||
}
|
||
}
|
||
} catch (imgErr) {
|
||
console.error('Error loading image from URL:', imgErr)
|
||
}
|
||
}
|
||
|
||
if (loaded) {
|
||
setToastMessage({ text: 'Информация загружена из ссылки', type: 'success' })
|
||
} else {
|
||
setToastMessage({ text: 'Не удалось найти информацию на странице', type: 'warning' })
|
||
}
|
||
} else {
|
||
// Пытаемся получить детальное сообщение об ошибке
|
||
let errorMessage = 'Не удалось загрузить информацию'
|
||
try {
|
||
const errorData = await response.json()
|
||
errorMessage = errorData.message || errorData.error || errorMessage
|
||
} catch (e) {
|
||
const text = await response.text().catch(() => '')
|
||
if (text) {
|
||
try {
|
||
const parsed = JSON.parse(text)
|
||
errorMessage = parsed.message || parsed.error || errorMessage
|
||
} catch {
|
||
// Если не JSON, используем текст как есть (но обрезаем до разумной длины)
|
||
if (text.length < 200) {
|
||
errorMessage = text
|
||
}
|
||
}
|
||
}
|
||
}
|
||
setToastMessage({ text: errorMessage, type: 'error' })
|
||
}
|
||
} catch (err) {
|
||
console.error('Error fetching metadata:', err)
|
||
const errorMessage = err.message || 'Ошибка при загрузке информации'
|
||
setToastMessage({ text: errorMessage, type: 'error' })
|
||
} finally {
|
||
setFetchingMetadata(false)
|
||
}
|
||
}, [authFetch, link, name, price, imageUrl])
|
||
|
||
const handleImageSelect = (e) => {
|
||
const file = e.target.files?.[0]
|
||
if (!file) return
|
||
|
||
if (file.size > 5 * 1024 * 1024) {
|
||
setToastMessage({ text: 'Файл слишком большой (максимум 5MB)', type: 'error' })
|
||
return
|
||
}
|
||
|
||
const reader = new FileReader()
|
||
reader.onload = () => {
|
||
setImageFile(file)
|
||
setImageUrl(reader.result)
|
||
setImageRemoved(false) // Сбрасываем флаг удаления при выборе нового фото
|
||
setShowCropper(true)
|
||
}
|
||
reader.readAsDataURL(file)
|
||
}
|
||
|
||
// Загрузка картинки по ссылке с последующим кропом
|
||
const loadImageFromUrl = async () => {
|
||
const extracted = extractUrl(imageUrlInput)
|
||
setImageUrlInput(extracted)
|
||
const url = extracted?.trim()
|
||
if (!url) {
|
||
setToastMessage({ text: 'Введите ссылку на картинку', type: 'error' })
|
||
return
|
||
}
|
||
try {
|
||
new URL(url)
|
||
} catch {
|
||
setToastMessage({ text: 'Некорректная ссылка на картинку', type: 'error' })
|
||
return
|
||
}
|
||
|
||
setLoadingImageFromUrl(true)
|
||
try {
|
||
const proxyUrl = `${API_URL}/proxy-image?url=${encodeURIComponent(url)}`
|
||
const imgResponse = await authFetch(proxyUrl)
|
||
if (!imgResponse.ok) {
|
||
const errData = await imgResponse.json().catch(() => ({}))
|
||
throw new Error(errData.message || errData.error || 'Не удалось загрузить картинку')
|
||
}
|
||
const blob = await imgResponse.blob()
|
||
if (blob.size > 5 * 1024 * 1024) {
|
||
setToastMessage({ text: 'Картинка слишком большая (максимум 5MB)', type: 'error' })
|
||
return
|
||
}
|
||
if (!blob.type.startsWith('image/')) {
|
||
setToastMessage({ text: 'По ссылке не изображение', type: 'error' })
|
||
return
|
||
}
|
||
const reader = new FileReader()
|
||
reader.onload = () => {
|
||
setImageUrl(reader.result)
|
||
setImageFile(blob)
|
||
setImageRemoved(false)
|
||
setImageUrlInput('')
|
||
setShowCropper(true)
|
||
}
|
||
reader.readAsDataURL(blob)
|
||
} catch (err) {
|
||
setToastMessage({ text: err.message || 'Ошибка при загрузке картинки по ссылке', type: 'error' })
|
||
} finally {
|
||
setLoadingImageFromUrl(false)
|
||
}
|
||
}
|
||
|
||
const onCropComplete = (croppedArea, croppedAreaPixels) => {
|
||
setCroppedAreaPixels(croppedAreaPixels)
|
||
}
|
||
|
||
const createImage = (url) => {
|
||
return new Promise((resolve, reject) => {
|
||
const image = new Image()
|
||
image.addEventListener('load', () => resolve(image))
|
||
image.addEventListener('error', (error) => reject(error))
|
||
image.src = url
|
||
})
|
||
}
|
||
|
||
const getCroppedImg = async (imageSrc, pixelCrop) => {
|
||
const image = await createImage(imageSrc)
|
||
const canvas = document.createElement('canvas')
|
||
const ctx = canvas.getContext('2d')
|
||
|
||
canvas.width = pixelCrop.width
|
||
canvas.height = pixelCrop.height
|
||
|
||
ctx.drawImage(
|
||
image,
|
||
pixelCrop.x,
|
||
pixelCrop.y,
|
||
pixelCrop.width,
|
||
pixelCrop.height,
|
||
0,
|
||
0,
|
||
pixelCrop.width,
|
||
pixelCrop.height
|
||
)
|
||
|
||
return new Promise((resolve) => {
|
||
canvas.toBlob(resolve, 'image/jpeg', 0.95)
|
||
})
|
||
}
|
||
|
||
const handleCropSave = async () => {
|
||
if (!imageUrl || !croppedAreaPixels) return
|
||
|
||
try {
|
||
const croppedImage = await getCroppedImg(imageUrl, croppedAreaPixels)
|
||
const reader = new FileReader()
|
||
reader.onload = () => {
|
||
setImageUrl(reader.result)
|
||
setImageFile(croppedImage)
|
||
setImageRemoved(false) // Сбрасываем флаг удаления при сохранении обрезки
|
||
setShowCropper(false)
|
||
}
|
||
reader.readAsDataURL(croppedImage)
|
||
} catch (err) {
|
||
setToastMessage({ text: 'Ошибка при обрезке изображения', type: 'error' })
|
||
}
|
||
}
|
||
|
||
const openConditionForm = () => {
|
||
setShowConditionForm(true)
|
||
conditionClosedByPopStateRef.current = false
|
||
window.history.pushState({ conditionForm: true }, '', window.location.href)
|
||
}
|
||
|
||
const closeConditionForm = () => {
|
||
setShowConditionForm(false)
|
||
setEditingConditionIndex(null)
|
||
// Если закрытие через popstate — запись уже убрана, не делаем back
|
||
if (!conditionClosedByPopStateRef.current) {
|
||
window.history.back()
|
||
}
|
||
conditionClosedByPopStateRef.current = false
|
||
}
|
||
|
||
const handleAddCondition = () => {
|
||
setEditingConditionIndex(null)
|
||
openConditionForm()
|
||
}
|
||
|
||
const handleEditCondition = (index) => {
|
||
const condition = unlockConditions[index]
|
||
// Проверяем, что условие принадлежит текущему пользователю
|
||
if (condition.user_id && condition.user_id !== user?.id) {
|
||
setToastMessage({ text: 'Нельзя редактировать чужие цели', type: 'error' })
|
||
return
|
||
}
|
||
setEditingConditionIndex(index)
|
||
openConditionForm()
|
||
}
|
||
|
||
const handleConditionSubmit = (condition) => {
|
||
if (editingConditionIndex !== null) {
|
||
// Редактирование существующего условия
|
||
setUnlockConditions(prev => prev.map((cond, idx) =>
|
||
idx === editingConditionIndex ? { ...condition, display_order: idx } : cond
|
||
))
|
||
} else {
|
||
// Добавление нового условия
|
||
setUnlockConditions([...unlockConditions, { ...condition, display_order: unlockConditions.length }])
|
||
}
|
||
closeConditionForm()
|
||
}
|
||
|
||
const handleConditionCancel = () => {
|
||
closeConditionForm()
|
||
}
|
||
|
||
const handleRemoveCondition = (index) => {
|
||
const condition = unlockConditions[index]
|
||
// Проверяем, что условие принадлежит текущему пользователю
|
||
if (condition.user_id && condition.user_id !== user?.id) {
|
||
setToastMessage({ text: 'Нельзя удалять чужие цели', type: 'error' })
|
||
return
|
||
}
|
||
setUnlockConditions(unlockConditions.filter((_, i) => i !== index))
|
||
}
|
||
|
||
// Обработчик для создания задачи из ConditionForm
|
||
const handleCreateTaskFromCondition = () => {
|
||
// Закрываем диалог цели перед переходом
|
||
setShowConditionForm(false)
|
||
|
||
// Сохранить текущее состояние формы
|
||
const stateToSave = {
|
||
name,
|
||
price,
|
||
link,
|
||
imageUrl,
|
||
unlockConditions,
|
||
pendingConditionType: 'task_completion',
|
||
editingConditionIndex,
|
||
}
|
||
console.log('[WishlistForm] Saving state and navigating to task-form:', stateToSave)
|
||
sessionStorage.setItem(WISHLIST_FORM_STATE_KEY, JSON.stringify(stateToSave))
|
||
|
||
// Навигация на форму создания задачи
|
||
const navParams = {
|
||
returnTo: 'wishlist-form',
|
||
returnWishlistId: wishlistId,
|
||
}
|
||
console.log('[WishlistForm] Navigation params:', navParams)
|
||
onNavigate?.('task-form', navParams)
|
||
}
|
||
|
||
const handleSubmit = async (e) => {
|
||
e.preventDefault()
|
||
setError('')
|
||
setLoading(true)
|
||
|
||
if (!name.trim()) {
|
||
setError('Название обязательно')
|
||
setLoading(false)
|
||
return
|
||
}
|
||
|
||
try {
|
||
const payload = {
|
||
name: name.trim(),
|
||
price: price ? parseFloat(price) : null,
|
||
link: link.trim() || null,
|
||
group_name: groupName.trim() || null,
|
||
unlock_conditions: unlockConditions.map(cond => ({
|
||
id: cond.id || null,
|
||
type: cond.type,
|
||
task_id: cond.type === 'task_completion' ? cond.task_id : null,
|
||
project_id: cond.type === 'project_points' ? cond.project_id : null,
|
||
required_points: cond.type === 'project_points' ? parseFloat(cond.required_points) : null,
|
||
start_date: cond.type === 'project_points' ? cond.start_date : null,
|
||
})),
|
||
}
|
||
|
||
let url, method
|
||
if (wishlistId) {
|
||
// Редактирование существующего желания
|
||
url = `${API_URL}/${wishlistId}`
|
||
method = 'PUT'
|
||
} else {
|
||
// Создание нового желания
|
||
if (boardId) {
|
||
// Создание на доске
|
||
url = `/api/wishlist/boards/${boardId}/items`
|
||
} else {
|
||
// Старый API для обратной совместимости
|
||
url = API_URL
|
||
}
|
||
method = 'POST'
|
||
}
|
||
|
||
const response = await authFetch(url, {
|
||
method,
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(payload),
|
||
})
|
||
|
||
if (!response.ok) {
|
||
let errorMessage = 'Ошибка при сохранении'
|
||
try {
|
||
const errorData = await response.json()
|
||
errorMessage = errorData.message || errorData.error || errorMessage
|
||
} catch (e) {
|
||
const text = await response.text().catch(() => '')
|
||
if (text) errorMessage = text
|
||
}
|
||
throw new Error(errorMessage)
|
||
}
|
||
|
||
const savedItem = await response.json()
|
||
const itemId = savedItem.id || wishlistId
|
||
|
||
// Удаляем картинку если она была удалена пользователем
|
||
if (imageRemoved && itemId) {
|
||
const deleteResponse = await authFetch(`${API_URL}/${itemId}/image`, {
|
||
method: 'DELETE',
|
||
})
|
||
|
||
if (!deleteResponse.ok) {
|
||
setToastMessage({ text: 'Желание сохранено, но ошибка при удалении картинки', type: 'warning' })
|
||
}
|
||
}
|
||
|
||
// Загружаем картинку если есть новое фото
|
||
if (imageFile && itemId && !imageRemoved) {
|
||
const formData = new FormData()
|
||
formData.append('image', imageFile)
|
||
|
||
const imageResponse = await authFetch(`${API_URL}/${itemId}/image`, {
|
||
method: 'POST',
|
||
body: formData,
|
||
})
|
||
|
||
if (!imageResponse.ok) {
|
||
setToastMessage({ text: 'Желание сохранено, но ошибка при загрузке картинки', type: 'warning' })
|
||
} else {
|
||
// Обновляем imageUrl после успешной загрузки
|
||
const imageData = await imageResponse.json()
|
||
if (imageData.image_url) {
|
||
setImageUrl(imageData.image_url)
|
||
}
|
||
}
|
||
}
|
||
|
||
resetForm()
|
||
// Возврат назад по стеку истории
|
||
window.history.back()
|
||
} catch (err) {
|
||
setError(err.message)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleCancel = () => {
|
||
resetForm()
|
||
window.history.back()
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<div className="wishlist-form">
|
||
<button className="close-x-button" onClick={handleCancel}>
|
||
✕
|
||
</button>
|
||
{loadingWishlist ? (
|
||
<div className="fixed inset-0 flex justify-center items-center">
|
||
<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>
|
||
) : (
|
||
<>
|
||
<h2>{wishlistId ? 'Редактировать желание' : 'Новое желание'}</h2>
|
||
|
||
<form id="wishlist-form-element" onSubmit={handleSubmit}>
|
||
<div className="form-group">
|
||
<label htmlFor="link">Ссылка</label>
|
||
<div className="link-input-wrapper">
|
||
<input
|
||
id="link"
|
||
type="text"
|
||
value={link}
|
||
onChange={(e) => setLink(e.target.value)}
|
||
onBlur={() => setLink(extractUrl(link))}
|
||
placeholder="https://..."
|
||
className="form-input"
|
||
disabled={fetchingMetadata}
|
||
/>
|
||
<button
|
||
type="button"
|
||
className="pull-metadata-button"
|
||
onClick={fetchLinkMetadata}
|
||
disabled={fetchingMetadata || !link.trim()}
|
||
title="Загрузить информацию из ссылки"
|
||
>
|
||
{fetchingMetadata ? (
|
||
<div className="mini-spinner"></div>
|
||
) : (
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||
<polyline points="7 10 12 15 17 10"/>
|
||
<line x1="12" y1="15" x2="12" y2="3"/>
|
||
</svg>
|
||
)}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label htmlFor="name">Название *</label>
|
||
<input
|
||
id="name"
|
||
type="text"
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
required
|
||
className="form-input"
|
||
/>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label htmlFor="price">Цена</label>
|
||
<input
|
||
id="price"
|
||
type="number"
|
||
step="0.01"
|
||
value={price}
|
||
onChange={(e) => setPrice(e.target.value)}
|
||
placeholder="0.00"
|
||
className="form-input"
|
||
/>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label htmlFor="group">Группа</label>
|
||
<GroupAutocomplete
|
||
suggestions={groupSuggestions}
|
||
value={groupName}
|
||
onChange={setGroupName}
|
||
/>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label>Картинка</label>
|
||
{imageUrl && !showCropper && (
|
||
<div className="image-preview">
|
||
<img
|
||
src={imageUrl}
|
||
alt="Preview"
|
||
onClick={() => fileInputRef.current?.click()}
|
||
style={{ cursor: 'pointer' }}
|
||
title="Нажмите, чтобы изменить"
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setImageUrl(null)
|
||
setImageFile(null)
|
||
setImageRemoved(true) // Устанавливаем флаг удаления
|
||
// Сбрасываем file input, чтобы можно было выбрать новое фото
|
||
if (fileInputRef.current) {
|
||
fileInputRef.current.value = ''
|
||
}
|
||
}}
|
||
className="remove-image-button"
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
)}
|
||
{!imageUrl && (
|
||
<>
|
||
<div className="image-url-row">
|
||
<span className="image-url-label">Файл:</span>
|
||
<label className="file-input-label">
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
onChange={handleImageSelect}
|
||
className="file-input-hidden"
|
||
/>
|
||
<span className="file-input-button">Выбрать</span>
|
||
</label>
|
||
</div>
|
||
<div className="image-url-row">
|
||
<span className="image-url-label">Ссылка:</span>
|
||
<input
|
||
type="text"
|
||
value={imageUrlInput}
|
||
onChange={(e) => setImageUrlInput(e.target.value)}
|
||
onBlur={() => setImageUrlInput(extractUrl(imageUrlInput))}
|
||
placeholder="https://..."
|
||
className="form-input image-url-input"
|
||
disabled={loadingImageFromUrl}
|
||
/>
|
||
<button
|
||
type="button"
|
||
className="image-url-load-button"
|
||
onClick={loadImageFromUrl}
|
||
disabled={loadingImageFromUrl || !imageUrlInput.trim()}
|
||
title="Загрузить картинку по ссылке и обрезать"
|
||
>
|
||
{loadingImageFromUrl ? (
|
||
<div className="mini-spinner"></div>
|
||
) : (
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||
<polyline points="7 10 12 15 17 10"/>
|
||
<line x1="12" y1="15" x2="12" y2="3"/>
|
||
</svg>
|
||
)}
|
||
</button>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{showCropper && (
|
||
<div className="cropper-modal">
|
||
<div className="cropper-container">
|
||
<Cropper
|
||
image={imageUrl}
|
||
crop={crop}
|
||
zoom={zoom}
|
||
aspect={5 / 6}
|
||
onCropChange={setCrop}
|
||
onZoomChange={setZoom}
|
||
onCropComplete={onCropComplete}
|
||
/>
|
||
</div>
|
||
<div className="cropper-controls">
|
||
<label>
|
||
Масштаб:
|
||
<input
|
||
type="range"
|
||
min={1}
|
||
max={3}
|
||
step={0.1}
|
||
value={zoom}
|
||
onChange={(e) => setZoom(Number(e.target.value))}
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div className="cropper-actions">
|
||
<button type="button" onClick={() => setShowCropper(false)}>
|
||
Отмена
|
||
</button>
|
||
<button type="button" onClick={handleCropSave}>
|
||
Сохранить
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="form-group">
|
||
<label>Цель</label>
|
||
{unlockConditions.length > 0 && (
|
||
<div className="conditions-list">
|
||
{unlockConditions.map((cond, idx) => {
|
||
const isOwnCondition = !cond.user_id || cond.user_id === user?.id
|
||
return (
|
||
<div key={idx} className="condition-item">
|
||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||
<span
|
||
className={`condition-item-text ${!isOwnCondition ? 'condition-item-other-user' : ''}`}
|
||
onClick={() => isOwnCondition && handleEditCondition(idx)}
|
||
style={{ cursor: isOwnCondition ? 'pointer' : 'default', paddingBottom: '0.125rem' }}
|
||
title={!isOwnCondition ? 'Чужая цель - нельзя редактировать' : ''}
|
||
>
|
||
{cond.type === 'task_completion'
|
||
? tasks.find(t => t.id === cond.task_id)?.name || 'Не выбрана'
|
||
: `${cond.required_points} в ${projects.find(p => p.project_id === cond.project_id)?.project_name || cond.project_name || 'Не выбран'}${cond.start_date ? ` с ${new Date(cond.start_date + 'T00:00:00').toLocaleDateString('ru-RU')}` : ' за всё время'}`}
|
||
</span>
|
||
{cond.type === 'project_points' && cond.weeks_text && (
|
||
<div style={{ color: '#666', fontSize: '0.85em' }}>
|
||
<span>Срок: </span>
|
||
<span style={{ fontWeight: '600' }}>{cond.weeks_text}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
{isOwnCondition && (
|
||
<button
|
||
type="button"
|
||
onClick={() => handleRemoveCondition(idx)}
|
||
className="remove-condition-button"
|
||
>
|
||
✕
|
||
</button>
|
||
)}
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
<button
|
||
type="button"
|
||
onClick={handleAddCondition}
|
||
className="add-condition-button"
|
||
>
|
||
Добавить цель
|
||
</button>
|
||
</div>
|
||
|
||
{error && <div className="error-message">{error}</div>}
|
||
|
||
</form>
|
||
|
||
{showConditionForm && (
|
||
<ConditionForm
|
||
tasks={tasks}
|
||
projects={projects}
|
||
onSubmit={handleConditionSubmit}
|
||
onCancel={handleConditionCancel}
|
||
editingCondition={editingConditionIndex !== null ? unlockConditions[editingConditionIndex] : null}
|
||
onCreateTask={handleCreateTaskFromCondition}
|
||
preselectedTaskId={newTaskConsumed ? undefined : newTaskId}
|
||
authFetch={authFetch}
|
||
/>
|
||
)}
|
||
|
||
{toastMessage && (
|
||
<Toast
|
||
message={toastMessage.text}
|
||
type={toastMessage.type}
|
||
onClose={() => setToastMessage(null)}
|
||
/>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
{isActive ? 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
|
||
type="submit"
|
||
form="wishlist-form-element"
|
||
disabled={loading}
|
||
style={{
|
||
width: '100%',
|
||
maxWidth: '42rem',
|
||
padding: '0.875rem',
|
||
background: loading ? undefined : 'linear-gradient(to right, #10b981, #059669)',
|
||
backgroundColor: loading ? '#9ca3af' : undefined,
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '0.5rem',
|
||
fontSize: '1rem',
|
||
fontWeight: 600,
|
||
cursor: loading ? 'not-allowed' : 'pointer',
|
||
opacity: loading ? 0.6 : 1,
|
||
transition: 'all 0.2s',
|
||
}}
|
||
>
|
||
{loading ? 'Сохранение...' : 'Сохранить'}
|
||
</button>
|
||
</div>,
|
||
document.body
|
||
) : null}
|
||
</>
|
||
)
|
||
}
|
||
|
||
// Компонент селектора даты с календарём (аналогично TaskList)
|
||
function DateSelector({ value, onChange, placeholder = "За всё время" }) {
|
||
const dateInputRef = useRef(null)
|
||
|
||
const formatDateForDisplay = (dateStr) => {
|
||
if (!dateStr) return ''
|
||
const date = new Date(dateStr + 'T00:00:00')
|
||
const now = new Date()
|
||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
|
||
const targetDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
|
||
|
||
const diffDays = Math.floor((targetDate - today) / (1000 * 60 * 60 * 24))
|
||
|
||
const monthNames = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
|
||
'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
|
||
|
||
if (diffDays === 0) {
|
||
return 'Сегодня'
|
||
} else if (diffDays === 1) {
|
||
return 'Завтра'
|
||
} else if (diffDays === -1) {
|
||
return 'Вчера'
|
||
} else if (diffDays > 1 && diffDays <= 7) {
|
||
const dayOfWeek = targetDate.getDay()
|
||
const dayNames = ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота']
|
||
return dayNames[dayOfWeek]
|
||
} else if (targetDate.getFullYear() === now.getFullYear()) {
|
||
return `${targetDate.getDate()} ${monthNames[targetDate.getMonth()]}`
|
||
} else {
|
||
return `${targetDate.getDate()} ${monthNames[targetDate.getMonth()]} ${targetDate.getFullYear()}`
|
||
}
|
||
}
|
||
|
||
const handleDisplayClick = () => {
|
||
if (dateInputRef.current) {
|
||
if (typeof dateInputRef.current.showPicker === 'function') {
|
||
dateInputRef.current.showPicker()
|
||
} else {
|
||
dateInputRef.current.focus()
|
||
dateInputRef.current.click()
|
||
}
|
||
}
|
||
}
|
||
|
||
const handleClear = (e) => {
|
||
e.stopPropagation()
|
||
onChange('')
|
||
}
|
||
|
||
return (
|
||
<div className="date-selector-input-group">
|
||
<input
|
||
ref={dateInputRef}
|
||
type="date"
|
||
value={value || ''}
|
||
onChange={(e) => onChange(e.target.value || '')}
|
||
className="date-selector-input"
|
||
/>
|
||
<div
|
||
className="date-selector-display-date"
|
||
onClick={handleDisplayClick}
|
||
>
|
||
{value ? formatDateForDisplay(value) : placeholder}
|
||
</div>
|
||
{value && (
|
||
<button
|
||
type="button"
|
||
onClick={handleClear}
|
||
className="date-selector-clear-button"
|
||
aria-label="Очистить дату"
|
||
>
|
||
✕
|
||
</button>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// Компонент автодополнения для выбора группы
|
||
function GroupAutocomplete({ suggestions, value, onChange }) {
|
||
const [inputValue, setInputValue] = useState('')
|
||
const [isOpen, setIsOpen] = useState(false)
|
||
const [highlightedIndex, setHighlightedIndex] = useState(-1)
|
||
const wrapperRef = useRef(null)
|
||
const inputRef = useRef(null)
|
||
|
||
// При изменении value - обновить inputValue
|
||
useEffect(() => {
|
||
setInputValue(value || '')
|
||
}, [value])
|
||
|
||
// Фильтрация саджестов
|
||
const filteredSuggestions = inputValue.trim()
|
||
? suggestions.filter(group =>
|
||
group.toLowerCase().includes(inputValue.toLowerCase())
|
||
)
|
||
: suggestions
|
||
|
||
// Закрытие при клике снаружи
|
||
useEffect(() => {
|
||
const handleClickOutside = (e) => {
|
||
if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
|
||
setIsOpen(false)
|
||
// Восстанавливаем значение
|
||
setInputValue(value || '')
|
||
}
|
||
}
|
||
document.addEventListener('mousedown', handleClickOutside)
|
||
return () => document.removeEventListener('mousedown', handleClickOutside)
|
||
}, [value])
|
||
|
||
const handleInputChange = (e) => {
|
||
const newValue = e.target.value
|
||
setInputValue(newValue)
|
||
setIsOpen(true)
|
||
setHighlightedIndex(-1)
|
||
onChange(newValue)
|
||
}
|
||
|
||
const handleSelectGroup = (group) => {
|
||
onChange(group)
|
||
setInputValue(group)
|
||
setIsOpen(false)
|
||
setHighlightedIndex(-1)
|
||
}
|
||
|
||
const handleKeyDown = (e) => {
|
||
if (!isOpen) {
|
||
if (e.key === 'ArrowDown' || e.key === 'Enter') {
|
||
setIsOpen(true)
|
||
e.preventDefault()
|
||
}
|
||
return
|
||
}
|
||
|
||
switch (e.key) {
|
||
case 'ArrowDown':
|
||
e.preventDefault()
|
||
setHighlightedIndex(prev =>
|
||
prev < filteredSuggestions.length - 1 ? prev + 1 : prev
|
||
)
|
||
break
|
||
case 'ArrowUp':
|
||
e.preventDefault()
|
||
setHighlightedIndex(prev => prev > 0 ? prev - 1 : -1)
|
||
break
|
||
case 'Enter':
|
||
e.preventDefault()
|
||
if (highlightedIndex >= 0 && filteredSuggestions[highlightedIndex]) {
|
||
handleSelectGroup(filteredSuggestions[highlightedIndex])
|
||
}
|
||
break
|
||
case 'Escape':
|
||
setIsOpen(false)
|
||
setInputValue(value || '')
|
||
break
|
||
}
|
||
}
|
||
|
||
const handleFocus = () => {
|
||
setIsOpen(true)
|
||
}
|
||
|
||
return (
|
||
<div className="group-autocomplete" ref={wrapperRef}>
|
||
<div className="group-autocomplete-input-wrapper">
|
||
<input
|
||
ref={inputRef}
|
||
type="text"
|
||
value={inputValue}
|
||
onChange={handleInputChange}
|
||
onFocus={handleFocus}
|
||
onKeyDown={handleKeyDown}
|
||
placeholder="Введите название группы..."
|
||
className="form-input"
|
||
autoComplete="off"
|
||
/>
|
||
{inputValue && (
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setInputValue('')
|
||
onChange('')
|
||
inputRef.current?.focus()
|
||
}}
|
||
className="group-autocomplete-clear"
|
||
>
|
||
✕
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{isOpen && filteredSuggestions.length > 0 && (
|
||
<div className="group-autocomplete-dropdown">
|
||
{filteredSuggestions.map((group, index) => (
|
||
<div
|
||
key={group}
|
||
className={`group-autocomplete-item ${
|
||
highlightedIndex === index ? 'highlighted' : ''
|
||
}`}
|
||
onClick={() => handleSelectGroup(group)}
|
||
onMouseEnter={() => setHighlightedIndex(index)}
|
||
>
|
||
{group}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// Компонент автодополнения для выбора задачи
|
||
function TaskAutocomplete({ tasks, value, onChange, onCreateTask, preselectedTaskId }) {
|
||
const [inputValue, setInputValue] = useState('')
|
||
const [isOpen, setIsOpen] = useState(false)
|
||
const [highlightedIndex, setHighlightedIndex] = useState(-1)
|
||
const wrapperRef = useRef(null)
|
||
const inputRef = useRef(null)
|
||
|
||
// Найти выбранную задачу по ID
|
||
const selectedTask = tasks.find(t => t.id === value)
|
||
|
||
// При изменении selectedTask или value - обновить inputValue
|
||
useEffect(() => {
|
||
if (selectedTask) {
|
||
setInputValue(selectedTask.name)
|
||
} else if (!value) {
|
||
setInputValue('')
|
||
}
|
||
}, [selectedTask, value])
|
||
|
||
// При preselectedTaskId автоматически выбрать задачу
|
||
useEffect(() => {
|
||
if (preselectedTaskId && !value && tasks.length > 0) {
|
||
const task = tasks.find(t => t.id === preselectedTaskId)
|
||
if (task && value !== preselectedTaskId) {
|
||
onChange(preselectedTaskId)
|
||
setInputValue(task.name)
|
||
}
|
||
}
|
||
}, [preselectedTaskId, tasks.length, value, onChange])
|
||
|
||
// Фильтрация задач
|
||
const filteredTasks = inputValue.trim()
|
||
? tasks.filter(task =>
|
||
task.name.toLowerCase().includes(inputValue.toLowerCase())
|
||
)
|
||
: tasks
|
||
|
||
// Закрытие при клике снаружи
|
||
useEffect(() => {
|
||
const handleClickOutside = (e) => {
|
||
if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
|
||
setIsOpen(false)
|
||
// Восстанавливаем название выбранной задачи
|
||
if (selectedTask) {
|
||
setInputValue(selectedTask.name)
|
||
} else if (!value) {
|
||
setInputValue('')
|
||
}
|
||
}
|
||
}
|
||
document.addEventListener('mousedown', handleClickOutside)
|
||
return () => document.removeEventListener('mousedown', handleClickOutside)
|
||
}, [selectedTask, value])
|
||
|
||
const handleInputChange = (e) => {
|
||
setInputValue(e.target.value)
|
||
setIsOpen(true)
|
||
setHighlightedIndex(-1)
|
||
// Сбрасываем выбор, если пользователь изменил текст
|
||
if (selectedTask && e.target.value !== selectedTask.name) {
|
||
onChange(null)
|
||
}
|
||
}
|
||
|
||
const handleSelectTask = (task) => {
|
||
onChange(task.id)
|
||
setInputValue(task.name)
|
||
setIsOpen(false)
|
||
setHighlightedIndex(-1)
|
||
}
|
||
|
||
const handleKeyDown = (e) => {
|
||
if (!isOpen) {
|
||
if (e.key === 'ArrowDown' || e.key === 'Enter') {
|
||
setIsOpen(true)
|
||
e.preventDefault()
|
||
}
|
||
return
|
||
}
|
||
|
||
switch (e.key) {
|
||
case 'ArrowDown':
|
||
e.preventDefault()
|
||
setHighlightedIndex(prev =>
|
||
prev < filteredTasks.length - 1 ? prev + 1 : prev
|
||
)
|
||
break
|
||
case 'ArrowUp':
|
||
e.preventDefault()
|
||
setHighlightedIndex(prev => prev > 0 ? prev - 1 : -1)
|
||
break
|
||
case 'Enter':
|
||
e.preventDefault()
|
||
if (highlightedIndex >= 0 && filteredTasks[highlightedIndex]) {
|
||
handleSelectTask(filteredTasks[highlightedIndex])
|
||
}
|
||
break
|
||
case 'Escape':
|
||
setIsOpen(false)
|
||
if (selectedTask) {
|
||
setInputValue(selectedTask.name)
|
||
} else {
|
||
setInputValue('')
|
||
}
|
||
break
|
||
}
|
||
}
|
||
|
||
const handleFocus = () => {
|
||
setIsOpen(true)
|
||
}
|
||
|
||
return (
|
||
<div className="task-autocomplete" ref={wrapperRef}>
|
||
<div className="task-autocomplete-row">
|
||
<div className="task-autocomplete-input-wrapper">
|
||
<input
|
||
ref={inputRef}
|
||
type="text"
|
||
value={inputValue}
|
||
onChange={handleInputChange}
|
||
onFocus={handleFocus}
|
||
onKeyDown={handleKeyDown}
|
||
placeholder="Начните вводить название..."
|
||
className="task-autocomplete-input"
|
||
autoComplete="off"
|
||
/>
|
||
{inputValue && (
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setInputValue('')
|
||
onChange(null)
|
||
inputRef.current?.focus()
|
||
}}
|
||
className="task-autocomplete-clear"
|
||
>
|
||
✕
|
||
</button>
|
||
)}
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={onCreateTask}
|
||
className="create-task-button"
|
||
title="Создать новую задачу"
|
||
>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
{isOpen && (
|
||
<div className="task-autocomplete-dropdown">
|
||
{filteredTasks.length === 0 ? (
|
||
<div className="task-autocomplete-empty">
|
||
{inputValue ? 'Задачи не найдены' : 'Нет доступных задач'}
|
||
</div>
|
||
) : (
|
||
filteredTasks.map((task, index) => (
|
||
<div
|
||
key={task.id}
|
||
className={`task-autocomplete-item ${
|
||
value === task.id ? 'selected' : ''
|
||
} ${highlightedIndex === index ? 'highlighted' : ''}`}
|
||
onClick={() => handleSelectTask(task)}
|
||
onMouseEnter={() => setHighlightedIndex(index)}
|
||
>
|
||
{task.name}
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// Компонент формы цели
|
||
function ConditionForm({ tasks, projects, onSubmit, onCancel, editingCondition, onCreateTask, preselectedTaskId, authFetch }) {
|
||
const [type, setType] = useState(editingCondition?.type || 'project_points')
|
||
const [taskId, setTaskId] = useState(editingCondition?.task_id || null)
|
||
const [projectId, setProjectId] = useState(editingCondition?.project_id?.toString() || '')
|
||
const [requiredPoints, setRequiredPoints] = useState(editingCondition?.required_points?.toString() || '')
|
||
const [startDate, setStartDate] = useState(editingCondition?.start_date || '')
|
||
const [calculatedWeeksText, setCalculatedWeeksText] = useState(
|
||
editingCondition?.type === 'project_points' ? (editingCondition?.weeks_text ?? null) : null
|
||
)
|
||
|
||
const isEditing = editingCondition !== null
|
||
|
||
// Показываем срок разблокировки из редактируемого условия до прихода ответа API
|
||
useEffect(() => {
|
||
if (editingCondition?.type === 'project_points' && editingCondition?.weeks_text) {
|
||
setCalculatedWeeksText(editingCondition.weeks_text)
|
||
}
|
||
}, [editingCondition?.id, editingCondition?.type, editingCondition?.weeks_text])
|
||
|
||
// Автоподстановка новой задачи
|
||
useEffect(() => {
|
||
if (preselectedTaskId && !editingCondition) {
|
||
setType('task_completion')
|
||
setTaskId(preselectedTaskId)
|
||
}
|
||
}, [preselectedTaskId, editingCondition])
|
||
|
||
// Расчет недель при изменении проекта, баллов или даты
|
||
useEffect(() => {
|
||
const calculateWeeks = async () => {
|
||
if (type === 'project_points' && projectId && requiredPoints && authFetch) {
|
||
try {
|
||
const response = await authFetch('/api/wishlist/calculate-weeks', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
project_id: parseInt(projectId),
|
||
required_points: parseFloat(requiredPoints),
|
||
start_date: startDate || '',
|
||
condition_user_id: editingCondition?.user_id || null,
|
||
}),
|
||
})
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
setCalculatedWeeksText(data.weeks_text || null)
|
||
} else {
|
||
setCalculatedWeeksText(null)
|
||
}
|
||
} catch (err) {
|
||
console.error('Error calculating weeks:', err)
|
||
setCalculatedWeeksText(null)
|
||
}
|
||
} else {
|
||
setCalculatedWeeksText(null)
|
||
}
|
||
}
|
||
calculateWeeks()
|
||
}, [type, projectId, requiredPoints, startDate, editingCondition?.user_id, authFetch])
|
||
|
||
const handleSubmit = (e) => {
|
||
e.preventDefault()
|
||
e.stopPropagation() // Предотвращаем всплытие события
|
||
|
||
// Валидация
|
||
if (type === 'task_completion' && (!taskId || taskId === null)) {
|
||
return
|
||
}
|
||
if (type === 'project_points' && (!projectId || !requiredPoints)) {
|
||
return
|
||
}
|
||
|
||
const condition = {
|
||
type,
|
||
task_id: type === 'task_completion' ? (typeof taskId === 'number' ? taskId : parseInt(taskId)) : null,
|
||
project_id: type === 'project_points' ? parseInt(projectId) : null,
|
||
required_points: type === 'project_points' ? parseFloat(requiredPoints) : null,
|
||
start_date: type === 'project_points' && startDate ? startDate : null,
|
||
...(type === 'project_points' && {
|
||
weeks_text: calculatedWeeksText || editingCondition?.weeks_text || null,
|
||
}),
|
||
...(editingCondition?.id != null && { id: editingCondition.id }),
|
||
...(editingCondition?.user_id != null && { user_id: editingCondition.user_id }),
|
||
}
|
||
onSubmit(condition)
|
||
// Сброс формы
|
||
setType('project_points')
|
||
setTaskId(null)
|
||
setProjectId('')
|
||
setRequiredPoints('')
|
||
setStartDate('')
|
||
}
|
||
|
||
return (
|
||
<div className="condition-form-overlay" onClick={onCancel}>
|
||
<div className="condition-form" onClick={(e) => e.stopPropagation()}>
|
||
<form onSubmit={handleSubmit}>
|
||
<div className="condition-tabs-container">
|
||
<div className="condition-tabs-inner">
|
||
<button
|
||
type="button"
|
||
className={`condition-tab-button ${type === 'project_points' ? 'active' : ''}`}
|
||
onClick={() => setType('project_points')}
|
||
>
|
||
Баллы
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`condition-tab-button ${type === 'task_completion' ? 'active' : ''}`}
|
||
onClick={() => setType('task_completion')}
|
||
>
|
||
Задача
|
||
</button>
|
||
</div>
|
||
<button type="button" onClick={onCancel} className="condition-form-close-button condition-tabs-close">
|
||
✕
|
||
</button>
|
||
</div>
|
||
|
||
{type === 'task_completion' && (
|
||
<div className="form-group">
|
||
<label>Задача</label>
|
||
<TaskAutocomplete
|
||
tasks={tasks}
|
||
value={taskId}
|
||
onChange={(id) => setTaskId(id)}
|
||
onCreateTask={onCreateTask}
|
||
preselectedTaskId={preselectedTaskId}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{type === 'project_points' && (
|
||
<>
|
||
<div className="form-group">
|
||
<label>Проект</label>
|
||
<select
|
||
value={projectId}
|
||
onChange={(e) => setProjectId(e.target.value)}
|
||
className="form-input"
|
||
required
|
||
>
|
||
<option value="">Выберите проект</option>
|
||
{projects.map(project => (
|
||
<option key={project.project_id} value={project.project_id}>
|
||
{project.project_name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<div className="form-group">
|
||
<label>Необходимо баллов</label>
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
value={requiredPoints}
|
||
onChange={(e) => setRequiredPoints(e.target.value)}
|
||
className="form-input"
|
||
required
|
||
/>
|
||
</div>
|
||
<div className="form-group">
|
||
<label>Дата начала подсчёта</label>
|
||
<DateSelector
|
||
value={startDate}
|
||
onChange={setStartDate}
|
||
placeholder="За всё время"
|
||
/>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
<div className="form-actions">
|
||
<button type="submit" className="submit-button condition-form-submit-button">
|
||
{isEditing ? 'Сохранить' : 'Добавить'}
|
||
</button>
|
||
</div>
|
||
{type === 'project_points' && calculatedWeeksText && (
|
||
<div className="calculated-weeks-info">
|
||
<span>Срок: </span>
|
||
<span style={{ fontWeight: '600' }}>{calculatedWeeksText}</span>
|
||
</div>
|
||
)}
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default WishlistForm
|
||
|