745 lines
28 KiB
React
745 lines
28 KiB
React
|
import React, { useState, useEffect, useRef } from 'react'
|
|||
|
|
import { useAuth } from './auth/AuthContext'
|
|||
|
|
import './TaskForm.css'
|
|||
|
|
|
|||
|
|
const API_URL = '/api/tasks'
|
|||
|
|
const PROJECTS_API_URL = '/projects'
|
|||
|
|
|
|||
|
|
function TaskForm({ onNavigate, taskId }) {
|
|||
|
|
const { authFetch } = useAuth()
|
|||
|
|
const [name, setName] = useState('')
|
|||
|
|
const [progressionBase, setProgressionBase] = useState('')
|
|||
|
|
const [rewardMessage, setRewardMessage] = useState('')
|
|||
|
|
const [repetitionPeriodValue, setRepetitionPeriodValue] = useState('')
|
|||
|
|
const [repetitionPeriodType, setRepetitionPeriodType] = useState('day')
|
|||
|
|
const [rewards, setRewards] = useState([])
|
|||
|
|
const [subtasks, setSubtasks] = useState([])
|
|||
|
|
const [projects, setProjects] = useState([])
|
|||
|
|
const [loading, setLoading] = useState(false)
|
|||
|
|
const [error, setError] = useState('')
|
|||
|
|
const [loadingTask, setLoadingTask] = useState(false)
|
|||
|
|
const [isDeleting, setIsDeleting] = useState(false)
|
|||
|
|
const debounceTimer = useRef(null)
|
|||
|
|
|
|||
|
|
// Загрузка проектов для автокомплита
|
|||
|
|
useEffect(() => {
|
|||
|
|
const loadProjects = async () => {
|
|||
|
|
try {
|
|||
|
|
const response = await authFetch(PROJECTS_API_URL)
|
|||
|
|
if (response.ok) {
|
|||
|
|
const data = await response.json()
|
|||
|
|
setProjects(Array.isArray(data) ? data : [])
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error loading projects:', err)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
loadProjects()
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
// Функция сброса формы
|
|||
|
|
const resetForm = () => {
|
|||
|
|
setName('')
|
|||
|
|
setRewardMessage('')
|
|||
|
|
setProgressionBase('')
|
|||
|
|
setRepetitionPeriodValue('')
|
|||
|
|
setRepetitionPeriodType('day')
|
|||
|
|
setRewards([])
|
|||
|
|
setSubtasks([])
|
|||
|
|
setError('')
|
|||
|
|
setLoadingTask(false)
|
|||
|
|
if (debounceTimer.current) {
|
|||
|
|
clearTimeout(debounceTimer.current)
|
|||
|
|
debounceTimer.current = null
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Загрузка задачи при редактировании или сброс формы при создании новой
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (taskId !== undefined && taskId !== null) {
|
|||
|
|
loadTask()
|
|||
|
|
} else {
|
|||
|
|
// Сбрасываем форму при создании новой задачи
|
|||
|
|
resetForm()
|
|||
|
|
}
|
|||
|
|
}, [taskId])
|
|||
|
|
|
|||
|
|
const loadTask = async () => {
|
|||
|
|
setLoadingTask(true)
|
|||
|
|
try {
|
|||
|
|
const response = await authFetch(`${API_URL}/${taskId}`)
|
|||
|
|
if (!response.ok) {
|
|||
|
|
throw new Error('Ошибка загрузки задачи')
|
|||
|
|
}
|
|||
|
|
const data = await response.json()
|
|||
|
|
setName(data.task.name)
|
|||
|
|
setRewardMessage(data.task.reward_message || '')
|
|||
|
|
setProgressionBase(data.task.progression_base ? String(data.task.progression_base) : '')
|
|||
|
|
|
|||
|
|
// Парсим repetition_period если он есть
|
|||
|
|
if (data.task.repetition_period) {
|
|||
|
|
const periodStr = data.task.repetition_period.trim()
|
|||
|
|
console.log('Parsing repetition_period:', periodStr, 'Full task data:', data.task) // Отладка
|
|||
|
|
|
|||
|
|
// PostgreSQL может возвращать INTERVAL в разных форматах:
|
|||
|
|
// - "1 day" / "1 days" / "10 days"
|
|||
|
|
// - "02:00:00" (часы в формате времени)
|
|||
|
|
// - "21 days" (недели преобразуются в дни)
|
|||
|
|
// - "1 month" / "1 months" / "1 mon"
|
|||
|
|
|
|||
|
|
let parsed = false
|
|||
|
|
|
|||
|
|
// Пробуем парсить формат "N unit" или "N units"
|
|||
|
|
// Используем более гибкий regex для парсинга
|
|||
|
|
const match = periodStr.match(/^(\d+)\s+(minute|minutes|hour|hours|day|days|week|weeks|month|months|mon|year|years)/i)
|
|||
|
|
if (match) {
|
|||
|
|
const value = parseInt(match[1], 10)
|
|||
|
|
const unit = match[2].toLowerCase()
|
|||
|
|
|
|||
|
|
console.log('Matched value:', value, 'unit:', unit) // Отладка
|
|||
|
|
|
|||
|
|
if (!isNaN(value) && value >= 0) {
|
|||
|
|
// Преобразуем единицы PostgreSQL в наш формат
|
|||
|
|
if (unit.startsWith('minute')) {
|
|||
|
|
setRepetitionPeriodValue(String(value))
|
|||
|
|
setRepetitionPeriodType('minute')
|
|||
|
|
parsed = true
|
|||
|
|
} else if (unit.startsWith('hour')) {
|
|||
|
|
setRepetitionPeriodValue(String(value))
|
|||
|
|
setRepetitionPeriodType('hour')
|
|||
|
|
parsed = true
|
|||
|
|
} else if (unit.startsWith('day')) {
|
|||
|
|
// Может быть "1 day" или "10 days" или "21 days" (для недель)
|
|||
|
|
// Если значение кратно 7, это может быть неделя
|
|||
|
|
if (value % 7 === 0 && value >= 7) {
|
|||
|
|
setRepetitionPeriodValue(String(value / 7))
|
|||
|
|
setRepetitionPeriodType('week')
|
|||
|
|
} else {
|
|||
|
|
setRepetitionPeriodValue(String(value))
|
|||
|
|
setRepetitionPeriodType('day')
|
|||
|
|
}
|
|||
|
|
parsed = true
|
|||
|
|
} else if (unit.startsWith('week')) {
|
|||
|
|
setRepetitionPeriodValue(String(value))
|
|||
|
|
setRepetitionPeriodType('week')
|
|||
|
|
parsed = true
|
|||
|
|
} else if (unit.startsWith('month') || unit.startsWith('mon')) {
|
|||
|
|
// PostgreSQL возвращает "1 mon" для месяцев
|
|||
|
|
setRepetitionPeriodValue(String(value))
|
|||
|
|
setRepetitionPeriodType('month')
|
|||
|
|
parsed = true
|
|||
|
|
} else if (unit.startsWith('year')) {
|
|||
|
|
setRepetitionPeriodValue(String(value))
|
|||
|
|
setRepetitionPeriodType('year')
|
|||
|
|
parsed = true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// Если regex не сработал, пробуем старый способ через split
|
|||
|
|
const parts = periodStr.split(/\s+/)
|
|||
|
|
if (parts.length >= 2) {
|
|||
|
|
const value = parseInt(parts[0], 10)
|
|||
|
|
if (!isNaN(value) && value >= 0) {
|
|||
|
|
const unit = parts[1].toLowerCase()
|
|||
|
|
console.log('Fallback parsing - value:', value, 'unit:', unit) // Отладка
|
|||
|
|
|
|||
|
|
if (unit.startsWith('minute')) {
|
|||
|
|
setRepetitionPeriodValue(String(value))
|
|||
|
|
setRepetitionPeriodType('minute')
|
|||
|
|
parsed = true
|
|||
|
|
} else if (unit.startsWith('hour')) {
|
|||
|
|
setRepetitionPeriodValue(String(value))
|
|||
|
|
setRepetitionPeriodType('hour')
|
|||
|
|
parsed = true
|
|||
|
|
} else if (unit.startsWith('day')) {
|
|||
|
|
if (value % 7 === 0 && value >= 7) {
|
|||
|
|
setRepetitionPeriodValue(String(value / 7))
|
|||
|
|
setRepetitionPeriodType('week')
|
|||
|
|
} else {
|
|||
|
|
setRepetitionPeriodValue(String(value))
|
|||
|
|
setRepetitionPeriodType('day')
|
|||
|
|
}
|
|||
|
|
parsed = true
|
|||
|
|
} else if (unit.startsWith('week')) {
|
|||
|
|
setRepetitionPeriodValue(String(value))
|
|||
|
|
setRepetitionPeriodType('week')
|
|||
|
|
parsed = true
|
|||
|
|
} else if (unit.startsWith('month') || unit.startsWith('mon')) {
|
|||
|
|
setRepetitionPeriodValue(String(value))
|
|||
|
|
setRepetitionPeriodType('month')
|
|||
|
|
parsed = true
|
|||
|
|
} else if (unit.startsWith('year')) {
|
|||
|
|
setRepetitionPeriodValue(String(value))
|
|||
|
|
setRepetitionPeriodType('year')
|
|||
|
|
parsed = true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Если не удалось распарсить, пробуем формат времени "HH:MM:SS"
|
|||
|
|
if (!parsed && /^\d{1,2}:\d{2}:\d{2}/.test(periodStr)) {
|
|||
|
|
const timeParts = periodStr.split(':')
|
|||
|
|
if (timeParts.length >= 3) {
|
|||
|
|
const hours = parseInt(timeParts[0], 10)
|
|||
|
|
if (!isNaN(hours) && hours >= 0) {
|
|||
|
|
setRepetitionPeriodValue(String(hours))
|
|||
|
|
setRepetitionPeriodType('hour')
|
|||
|
|
parsed = true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Если не удалось распарсить, сбрасываем значения
|
|||
|
|
if (!parsed) {
|
|||
|
|
console.log('Failed to parse repetition_period:', periodStr) // Отладка
|
|||
|
|
setRepetitionPeriodValue('')
|
|||
|
|
setRepetitionPeriodType('day')
|
|||
|
|
} else {
|
|||
|
|
console.log('Successfully parsed repetition_period - value will be set') // Отладка
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
console.log('No repetition_period in task data') // Отладка
|
|||
|
|
setRepetitionPeriodValue('')
|
|||
|
|
setRepetitionPeriodType('day')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Загружаем rewards
|
|||
|
|
setRewards(data.rewards.map(r => ({
|
|||
|
|
position: r.position,
|
|||
|
|
project_name: r.project_name,
|
|||
|
|
value: String(r.value),
|
|||
|
|
use_progression: r.use_progression
|
|||
|
|
})))
|
|||
|
|
|
|||
|
|
// Загружаем подзадачи
|
|||
|
|
setSubtasks(data.subtasks.map(st => ({
|
|||
|
|
id: st.task.id,
|
|||
|
|
name: st.task.name || '',
|
|||
|
|
reward_message: st.task.reward_message || '',
|
|||
|
|
rewards: st.rewards.map(r => ({
|
|||
|
|
position: r.position,
|
|||
|
|
project_name: r.project_name,
|
|||
|
|
value: String(r.value),
|
|||
|
|
use_progression: r.use_progression
|
|||
|
|
}))
|
|||
|
|
})))
|
|||
|
|
} catch (err) {
|
|||
|
|
setError(err.message)
|
|||
|
|
} finally {
|
|||
|
|
setLoadingTask(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Пересчет rewards при изменении reward_message (debounce)
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (debounceTimer.current) {
|
|||
|
|
clearTimeout(debounceTimer.current)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
debounceTimer.current = setTimeout(() => {
|
|||
|
|
const maxIndex = findMaxPlaceholderIndex(rewardMessage)
|
|||
|
|
const currentRewards = [...rewards]
|
|||
|
|
|
|||
|
|
// Удаляем лишние rewards
|
|||
|
|
while (currentRewards.length > maxIndex + 1) {
|
|||
|
|
currentRewards.pop()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Добавляем недостающие rewards
|
|||
|
|
while (currentRewards.length < maxIndex + 1) {
|
|||
|
|
currentRewards.push({
|
|||
|
|
position: currentRewards.length,
|
|||
|
|
project_name: '',
|
|||
|
|
value: '0',
|
|||
|
|
use_progression: false
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setRewards(currentRewards)
|
|||
|
|
}, 500)
|
|||
|
|
|
|||
|
|
return () => {
|
|||
|
|
if (debounceTimer.current) {
|
|||
|
|
clearTimeout(debounceTimer.current)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, [rewardMessage])
|
|||
|
|
|
|||
|
|
const findMaxPlaceholderIndex = (message) => {
|
|||
|
|
if (!message) return -1
|
|||
|
|
const matches = message.match(/\$\{(\d+)\}/g)
|
|||
|
|
if (!matches) return -1
|
|||
|
|
const indices = matches.map(m => parseInt(m.match(/\d+/)[0]))
|
|||
|
|
return Math.max(...indices)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
const handleRewardChange = (index, field, value) => {
|
|||
|
|
const newRewards = [...rewards]
|
|||
|
|
newRewards[index] = { ...newRewards[index], [field]: value }
|
|||
|
|
setRewards(newRewards)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleRewardProgressionToggle = (index, checked) => {
|
|||
|
|
const newRewards = [...rewards]
|
|||
|
|
newRewards[index] = { ...newRewards[index], use_progression: checked }
|
|||
|
|
setRewards(newRewards)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleAddSubtask = () => {
|
|||
|
|
setSubtasks([...subtasks, {
|
|||
|
|
id: null,
|
|||
|
|
name: '',
|
|||
|
|
reward_message: '',
|
|||
|
|
rewards: []
|
|||
|
|
}])
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleSubtaskChange = (index, field, value) => {
|
|||
|
|
const newSubtasks = [...subtasks]
|
|||
|
|
newSubtasks[index] = { ...newSubtasks[index], [field]: value }
|
|||
|
|
setSubtasks(newSubtasks)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleSubtaskRewardMessageChange = (index, value) => {
|
|||
|
|
const newSubtasks = [...subtasks]
|
|||
|
|
newSubtasks[index] = { ...newSubtasks[index], reward_message: value }
|
|||
|
|
|
|||
|
|
// Пересчитываем rewards для подзадачи
|
|||
|
|
const maxIndex = findMaxPlaceholderIndex(value)
|
|||
|
|
const currentRewards = newSubtasks[index].rewards || []
|
|||
|
|
const newRewards = [...currentRewards]
|
|||
|
|
|
|||
|
|
while (newRewards.length < maxIndex + 1) {
|
|||
|
|
newRewards.push({
|
|||
|
|
position: newRewards.length,
|
|||
|
|
project_name: '',
|
|||
|
|
value: '0',
|
|||
|
|
use_progression: false
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
while (newRewards.length > maxIndex + 1) {
|
|||
|
|
newRewards.pop()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
newSubtasks[index] = { ...newSubtasks[index], rewards: newRewards }
|
|||
|
|
setSubtasks(newSubtasks)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleRemoveSubtask = (index) => {
|
|||
|
|
setSubtasks(subtasks.filter((_, i) => i !== index))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleSubmit = async (e) => {
|
|||
|
|
e.preventDefault()
|
|||
|
|
setError('')
|
|||
|
|
setLoading(true)
|
|||
|
|
|
|||
|
|
// Валидация
|
|||
|
|
if (!name.trim() || name.trim().length < 1) {
|
|||
|
|
setError('Название задачи обязательно (минимум 1 символ)')
|
|||
|
|
setLoading(false)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Проверяем, что все rewards заполнены
|
|||
|
|
for (const reward of rewards) {
|
|||
|
|
if (!reward.project_name.trim()) {
|
|||
|
|
setError('Все проекты в наградах должны быть заполнены')
|
|||
|
|
setLoading(false)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// Преобразуем период повторения в строку INTERVAL для PostgreSQL
|
|||
|
|
let repetitionPeriod = null
|
|||
|
|
if (repetitionPeriodValue && repetitionPeriodValue.trim() !== '') {
|
|||
|
|
const value = parseInt(repetitionPeriodValue.trim(), 10)
|
|||
|
|
if (!isNaN(value) && value >= 0) {
|
|||
|
|
const typeMap = {
|
|||
|
|
'minute': 'minute',
|
|||
|
|
'hour': 'hour',
|
|||
|
|
'day': 'day',
|
|||
|
|
'week': 'week',
|
|||
|
|
'month': 'month',
|
|||
|
|
'year': 'year'
|
|||
|
|
}
|
|||
|
|
const unit = typeMap[repetitionPeriodType] || 'day'
|
|||
|
|
repetitionPeriod = `${value} ${unit}`
|
|||
|
|
console.log('Sending repetition_period:', repetitionPeriod, 'from value:', repetitionPeriodValue, 'type:', repetitionPeriodType)
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
console.log('No repetition_period to send (value:', repetitionPeriodValue, 'type:', repetitionPeriodType, ')')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const payload = {
|
|||
|
|
name: name.trim(),
|
|||
|
|
reward_message: rewardMessage.trim() || null,
|
|||
|
|
progression_base: progressionBase ? parseFloat(progressionBase) : null,
|
|||
|
|
repetition_period: repetitionPeriod,
|
|||
|
|
rewards: rewards.map(r => ({
|
|||
|
|
position: r.position,
|
|||
|
|
project_name: r.project_name.trim(),
|
|||
|
|
value: parseFloat(r.value) || 0,
|
|||
|
|
use_progression: !!(progressionBase && r.use_progression)
|
|||
|
|
})),
|
|||
|
|
subtasks: subtasks.map(st => ({
|
|||
|
|
id: st.id || undefined,
|
|||
|
|
name: st.name.trim() || null,
|
|||
|
|
reward_message: st.reward_message.trim() || null,
|
|||
|
|
rewards: st.rewards.map(r => ({
|
|||
|
|
position: r.position,
|
|||
|
|
project_name: r.project_name.trim(),
|
|||
|
|
value: parseFloat(r.value) || 0,
|
|||
|
|
use_progression: !!(progressionBase && r.use_progression)
|
|||
|
|
}))
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const url = taskId ? `${API_URL}/${taskId}` : API_URL
|
|||
|
|
const method = taskId ? 'PUT' : '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) {
|
|||
|
|
// Если не удалось распарсить JSON, используем текст ответа
|
|||
|
|
const text = await response.text().catch(() => '')
|
|||
|
|
if (text) {
|
|||
|
|
errorMessage = text
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
throw new Error(errorMessage)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Возвращаемся к списку задач
|
|||
|
|
onNavigate?.('tasks')
|
|||
|
|
} catch (err) {
|
|||
|
|
setError(err.message)
|
|||
|
|
console.error('Error saving task:', err)
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleCancel = () => {
|
|||
|
|
resetForm()
|
|||
|
|
onNavigate?.('tasks')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleDelete = async () => {
|
|||
|
|
if (!taskId) return
|
|||
|
|
|
|||
|
|
if (!window.confirm(`Вы уверены, что хотите удалить задачу "${name}"?`)) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setIsDeleting(true)
|
|||
|
|
try {
|
|||
|
|
const response = await authFetch(`${API_URL}/${taskId}`, {
|
|||
|
|
method: 'DELETE',
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (!response.ok) {
|
|||
|
|
throw new Error('Ошибка при удалении задачи')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Возвращаемся к списку задач
|
|||
|
|
onNavigate?.('tasks')
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error deleting task:', err)
|
|||
|
|
setError('Ошибка при удалении задачи')
|
|||
|
|
setIsDeleting(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (loadingTask) {
|
|||
|
|
return (
|
|||
|
|
<div className="task-form">
|
|||
|
|
<div className="loading">Загрузка...</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="task-form">
|
|||
|
|
<button className="close-x-button" onClick={handleCancel}>
|
|||
|
|
✕
|
|||
|
|
</button>
|
|||
|
|
<h2>{taskId ? 'Редактировать задачу' : 'Новая задача'}</h2>
|
|||
|
|
|
|||
|
|
<form onSubmit={handleSubmit}>
|
|||
|
|
<div className="form-group">
|
|||
|
|
<label htmlFor="name">Название задачи *</label>
|
|||
|
|
<input
|
|||
|
|
id="name"
|
|||
|
|
type="text"
|
|||
|
|
value={name}
|
|||
|
|
onChange={(e) => setName(e.target.value)}
|
|||
|
|
required
|
|||
|
|
minLength={1}
|
|||
|
|
className="form-input"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="form-group">
|
|||
|
|
<label htmlFor="progression_base">Прогрессия</label>
|
|||
|
|
<input
|
|||
|
|
id="progression_base"
|
|||
|
|
type="number"
|
|||
|
|
step="any"
|
|||
|
|
value={progressionBase}
|
|||
|
|
onChange={(e) => setProgressionBase(e.target.value)}
|
|||
|
|
placeholder="Базовое значение"
|
|||
|
|
className="form-input"
|
|||
|
|
/>
|
|||
|
|
<small style={{ color: '#666', fontSize: '0.9em' }}>
|
|||
|
|
Оставьте пустым, если прогрессия не используется
|
|||
|
|
</small>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="form-group">
|
|||
|
|
<label htmlFor="repetition_period">Период повторения</label>
|
|||
|
|
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
|
|||
|
|
<input
|
|||
|
|
id="repetition_period"
|
|||
|
|
type="number"
|
|||
|
|
min="0"
|
|||
|
|
value={repetitionPeriodValue}
|
|||
|
|
onChange={(e) => setRepetitionPeriodValue(e.target.value)}
|
|||
|
|
placeholder="Число"
|
|||
|
|
className="form-input"
|
|||
|
|
style={{ flex: '1' }}
|
|||
|
|
/>
|
|||
|
|
{repetitionPeriodValue && repetitionPeriodValue.trim() !== '' && parseInt(repetitionPeriodValue.trim(), 10) !== 0 && (
|
|||
|
|
<select
|
|||
|
|
value={repetitionPeriodType}
|
|||
|
|
onChange={(e) => setRepetitionPeriodType(e.target.value)}
|
|||
|
|
className="form-input"
|
|||
|
|
style={{ width: '120px' }}
|
|||
|
|
>
|
|||
|
|
<option value="minute">Минута</option>
|
|||
|
|
<option value="hour">Час</option>
|
|||
|
|
<option value="day">День</option>
|
|||
|
|
<option value="week">Неделя</option>
|
|||
|
|
<option value="month">Месяц</option>
|
|||
|
|
<option value="year">Год</option>
|
|||
|
|
</select>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<small style={{ color: '#666', fontSize: '0.9em' }}>
|
|||
|
|
Оставьте пустым, если задача не повторяется. Введите 0, если задача никогда не переносится в выполненные.
|
|||
|
|
</small>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="form-group">
|
|||
|
|
<label htmlFor="reward_message">Сообщение награды</label>
|
|||
|
|
<textarea
|
|||
|
|
id="reward_message"
|
|||
|
|
value={rewardMessage}
|
|||
|
|
onChange={(e) => setRewardMessage(e.target.value)}
|
|||
|
|
placeholder="Используйте ${0}, ${1} для указания проектов"
|
|||
|
|
className="form-textarea"
|
|||
|
|
rows={3}
|
|||
|
|
/>
|
|||
|
|
{rewards.length > 0 && (
|
|||
|
|
<div className="rewards-container">
|
|||
|
|
{rewards.map((reward, index) => (
|
|||
|
|
<div key={index} className="reward-item">
|
|||
|
|
<span className="reward-number">{index}</span>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={reward.project_name}
|
|||
|
|
onChange={(e) => handleRewardChange(index, 'project_name', e.target.value)}
|
|||
|
|
placeholder="Проект"
|
|||
|
|
className="form-input reward-project-input"
|
|||
|
|
list={`projects-list-${index}`}
|
|||
|
|
/>
|
|||
|
|
<datalist id={`projects-list-${index}`}>
|
|||
|
|
{projects.map(p => (
|
|||
|
|
<option key={p.project_id} value={p.project_name} />
|
|||
|
|
))}
|
|||
|
|
</datalist>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
step="any"
|
|||
|
|
value={reward.value}
|
|||
|
|
onChange={(e) => handleRewardChange(index, 'value', e.target.value)}
|
|||
|
|
placeholder="Score"
|
|||
|
|
className="form-input reward-score-input"
|
|||
|
|
/>
|
|||
|
|
{progressionBase && (
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
tabIndex={0}
|
|||
|
|
className={`progression-button ${reward.use_progression ? 'progression-button-filled' : 'progression-button-outlined'}`}
|
|||
|
|
onMouseDown={(e) => {
|
|||
|
|
e.preventDefault()
|
|||
|
|
handleRewardProgressionToggle(index, !reward.use_progression)
|
|||
|
|
}}
|
|||
|
|
title={reward.use_progression ? 'Отключить прогрессию' : 'Включить прогрессию'}
|
|||
|
|
>
|
|||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|||
|
|
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
|
|||
|
|
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="form-group">
|
|||
|
|
<div className="subtasks-header">
|
|||
|
|
<label>Подзадачи</label>
|
|||
|
|
<button type="button" onClick={handleAddSubtask} className="add-subtask-button" title="Добавить подзадачу">
|
|||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|||
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|||
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
{subtasks.map((subtask, index) => (
|
|||
|
|
<div key={index} className="subtask-form-item">
|
|||
|
|
<div className="subtask-header-row">
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={subtask.name}
|
|||
|
|
onChange={(e) => handleSubtaskChange(index, 'name', e.target.value)}
|
|||
|
|
placeholder="Название подзадачи"
|
|||
|
|
className="form-input subtask-name-input"
|
|||
|
|
/>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => handleRemoveSubtask(index)}
|
|||
|
|
className="remove-subtask-button"
|
|||
|
|
title="Удалить подзадачу"
|
|||
|
|
>
|
|||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|||
|
|
<path d="M3 6h18"></path>
|
|||
|
|
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
|
|||
|
|
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
|
|||
|
|
<line x1="10" y1="11" x2="10" y2="17"></line>
|
|||
|
|
<line x1="14" y1="11" x2="14" y2="17"></line>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<textarea
|
|||
|
|
value={subtask.reward_message}
|
|||
|
|
onChange={(e) => handleSubtaskRewardMessageChange(index, e.target.value)}
|
|||
|
|
placeholder="Сообщение награды (опционально)"
|
|||
|
|
className="form-textarea"
|
|||
|
|
rows={2}
|
|||
|
|
/>
|
|||
|
|
{subtask.rewards && subtask.rewards.length > 0 && (
|
|||
|
|
<div className="subtask-rewards">
|
|||
|
|
{subtask.rewards.map((reward, rIndex) => (
|
|||
|
|
<div key={rIndex} className="reward-item">
|
|||
|
|
<span className="reward-number">{rIndex}</span>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={reward.project_name}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const newSubtasks = [...subtasks]
|
|||
|
|
newSubtasks[index].rewards[rIndex].project_name = e.target.value
|
|||
|
|
setSubtasks(newSubtasks)
|
|||
|
|
}}
|
|||
|
|
placeholder="Проект"
|
|||
|
|
className="form-input reward-project-input"
|
|||
|
|
list={`subtask-projects-${index}-${rIndex}`}
|
|||
|
|
/>
|
|||
|
|
<datalist id={`subtask-projects-${index}-${rIndex}`}>
|
|||
|
|
{projects.map(p => (
|
|||
|
|
<option key={p.project_id} value={p.project_name} />
|
|||
|
|
))}
|
|||
|
|
</datalist>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
step="any"
|
|||
|
|
value={reward.value}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const newSubtasks = [...subtasks]
|
|||
|
|
newSubtasks[index].rewards[rIndex].value = e.target.value
|
|||
|
|
setSubtasks(newSubtasks)
|
|||
|
|
}}
|
|||
|
|
placeholder="Score"
|
|||
|
|
className="form-input reward-score-input"
|
|||
|
|
/>
|
|||
|
|
{progressionBase && (
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
tabIndex={0}
|
|||
|
|
className={`progression-button progression-button-subtask ${reward.use_progression ? 'progression-button-filled' : 'progression-button-outlined'}`}
|
|||
|
|
onMouseDown={(e) => {
|
|||
|
|
e.preventDefault()
|
|||
|
|
const newSubtasks = [...subtasks]
|
|||
|
|
newSubtasks[index].rewards[rIndex].use_progression = !newSubtasks[index].rewards[rIndex].use_progression
|
|||
|
|
setSubtasks(newSubtasks)
|
|||
|
|
}}
|
|||
|
|
title={reward.use_progression ? 'Отключить прогрессию' : 'Включить прогрессию'}
|
|||
|
|
>
|
|||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|||
|
|
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
|
|||
|
|
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{error && <div className="error-message">{error}</div>}
|
|||
|
|
|
|||
|
|
<div className="form-actions">
|
|||
|
|
<button type="submit" disabled={loading || isDeleting} className="submit-button">
|
|||
|
|
{loading ? 'Сохранение...' : 'Сохранить'}
|
|||
|
|
</button>
|
|||
|
|
{taskId && (
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleDelete}
|
|||
|
|
className="delete-button"
|
|||
|
|
disabled={isDeleting || loading}
|
|||
|
|
title="Удалить задачу"
|
|||
|
|
>
|
|||
|
|
{isDeleting ? (
|
|||
|
|
<span>...</span>
|
|||
|
|
) : (
|
|||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|||
|
|
<path d="M3 6h18"></path>
|
|||
|
|
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
|
|||
|
|
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
|
|||
|
|
<line x1="10" y1="11" x2="10" y2="17"></line>
|
|||
|
|
<line x1="14" y1="11" x2="14" y2="17"></line>
|
|||
|
|
</svg>
|
|||
|
|
)}
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default TaskForm
|
|||
|
|
|