@@ -1259,5 +1294,139 @@ function TaskForm({ onNavigate, taskId, wishlistId, isTest: isTestFromProps = fa
)
}
+// Компонент автодополнения для выбора группы
+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 (
+
+
+
+ {inputValue && (
+
+ )}
+
+
+ {isOpen && filteredSuggestions.length > 0 && (
+
+ {filteredSuggestions.map((group, index) => (
+
handleSelectGroup(group)}
+ onMouseEnter={() => setHighlightedIndex(index)}
+ >
+ {group}
+
+ ))}
+
+ )}
+
+ )
+}
+
export default TaskForm
diff --git a/play-life-web/src/components/TaskList.css b/play-life-web/src/components/TaskList.css
index 1fc74dd..ac690da 100644
--- a/play-life-web/src/components/TaskList.css
+++ b/play-life-web/src/components/TaskList.css
@@ -21,7 +21,7 @@
.task-search-input {
width: 100%;
- padding: 0.75rem 2.5rem 0.75rem 3rem;
+ padding: 0.75rem 5rem 0.75rem 3rem;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
font-size: 1rem;
@@ -40,9 +40,34 @@
color: #9ca3af;
}
+/* Кнопка переключения группировки */
+.task-grouping-toggle {
+ position: absolute;
+ right: 1rem; /* Такой же отступ, как у иконки лупы */
+ top: 50%;
+ transform: translateY(-50%);
+ background: none;
+ border: none;
+ color: #6366f1;
+ cursor: pointer;
+ padding: 0.25rem;
+ border-radius: 0.25rem;
+ transition: all 0.2s;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+}
+
+.task-grouping-toggle:hover {
+ background: rgba(99, 102, 241, 0.1);
+ color: #4f46e5;
+}
+
.task-search-clear {
position: absolute;
- right: 0.75rem;
+ right: 0.75rem; /* Остаётся на месте */
top: 50%;
transform: translateY(-50%);
background: none;
diff --git a/play-life-web/src/components/TaskList.jsx b/play-life-web/src/components/TaskList.jsx
index 5d480b0..6fda98c 100644
--- a/play-life-web/src/components/TaskList.jsx
+++ b/play-life-web/src/components/TaskList.jsx
@@ -23,6 +23,25 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
const [isPostponing, setIsPostponing] = useState(false)
const [toast, setToast] = useState(null)
const [searchQuery, setSearchQuery] = useState('')
+ // Режим группировки: 'project' (по проекту - по умолчанию) или 'group' (по группе)
+ const [groupingMode, setGroupingMode] = useState(() => {
+ // Восстанавливаем из localStorage, по умолчанию 'project'
+ try {
+ const saved = localStorage.getItem('taskListGroupingMode')
+ return saved === 'group' ? 'group' : 'project'
+ } catch {
+ return 'project'
+ }
+ })
+
+ // Сохраняем режим группировки в localStorage при изменении
+ useEffect(() => {
+ try {
+ localStorage.setItem('taskListGroupingMode', groupingMode)
+ } catch {
+ // Игнорируем ошибки localStorage
+ }
+ }, [groupingMode])
useEffect(() => {
if (data) {
@@ -508,6 +527,16 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
return []
}
+ // Получаем название группы задачи (для режима группировки по группе)
+ const getTaskGroupName = (task) => {
+ // Если у задачи есть group_name - возвращаем его
+ if (task.group_name && task.group_name.trim()) {
+ return task.group_name.trim()
+ }
+ // Иначе возвращаем null - задача попадёт в "Остальные"
+ return null
+ }
+
// Функция для проверки, является ли период нулевым
const isZeroPeriod = (intervalStr) => {
if (!intervalStr) return false
@@ -548,7 +577,7 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
return !isNaN(numValue) && numValue === 0
}
- // Группируем задачи по проектам
+ // Группируем задачи по проектам или группам
const groupedTasks = useMemo(() => {
const today = new Date()
today.setHours(0, 0, 0, 0)
@@ -563,11 +592,18 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
const groups = {}
filteredTasks.forEach(task => {
- const projects = getTaskProjects(task)
+ let groupKeys = []
- // Если у задачи нет проектов, добавляем в группу "Без проекта"
- if (projects.length === 0) {
- projects.push('Без проекта')
+ if (groupingMode === 'project') {
+ // Группировка по проекту (текущее поведение)
+ groupKeys = getTaskProjects(task)
+ if (groupKeys.length === 0) {
+ groupKeys = ['Остальные'] // Было 'Без проекта'
+ }
+ } else {
+ // Группировка по group_name
+ const groupName = getTaskGroupName(task)
+ groupKeys = groupName ? [groupName] : ['Остальные']
}
// Определяем, в какую группу попадает задача
@@ -593,19 +629,19 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
isCompleted = false
}
- projects.forEach(projectName => {
- if (!groups[projectName]) {
- groups[projectName] = {
+ groupKeys.forEach(groupKey => {
+ if (!groups[groupKey]) {
+ groups[groupKey] = {
notCompleted: [],
completed: []
}
}
if (isCompleted) {
- groups[projectName].completed.push(task)
+ groups[groupKey].completed.push(task)
} else {
// Бесконечные задачи теперь идут в обычный список
- groups[projectName].notCompleted.push(task)
+ groups[groupKey].notCompleted.push(task)
}
})
})
@@ -651,7 +687,7 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
})
return groups
- }, [tasks, searchQuery])
+ }, [tasks, searchQuery, groupingMode])
// Сортируем проекты: сначала с невыполненными задачами, потом без них
// Группа "Без проекта" всегда последняя в своей категории
@@ -667,12 +703,12 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
if (!hasNotCompletedA && hasNotCompletedB) return 1
// Если обе группы в одной категории
- const isNoProjectA = a === 'Без проекта'
- const isNoProjectB = b === 'Без проекта'
+ const isOthersA = a === 'Остальные'
+ const isOthersB = b === 'Остальные'
- // "Без проекта" всегда последняя в своей категории
- if (isNoProjectA && !isNoProjectB) return 1
- if (!isNoProjectA && isNoProjectB) return -1
+ // "Остальные" всегда последняя в своей категории
+ if (isOthersA && !isOthersB) return 1
+ if (!isOthersA && isOthersB) return -1
// Остальные группы сортируем по алфавиту
return a.localeCompare(b)
@@ -953,6 +989,26 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, error, onRetry
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
+ {/* Кнопка переключения группировки */}
+
{searchQuery && (