diff --git a/components/daily/DailyCheckboxItem.tsx b/components/daily/DailyCheckboxItem.tsx index a2deb9c..9b3e236 100644 --- a/components/daily/DailyCheckboxItem.tsx +++ b/components/daily/DailyCheckboxItem.tsx @@ -129,10 +129,10 @@ export function DailyCheckboxItem({ {checkbox.task && ( - #{checkbox.task.id.slice(-6)} + {checkbox.task.title} )} diff --git a/components/daily/EditCheckboxModal.tsx b/components/daily/EditCheckboxModal.tsx index 669ae08..b88f722 100644 --- a/components/daily/EditCheckboxModal.tsx +++ b/components/daily/EditCheckboxModal.tsx @@ -1,11 +1,11 @@ 'use client'; -import { useState } from 'react'; -import { DailyCheckbox, DailyCheckboxType } from '@/lib/types'; +import { useState, useEffect } from 'react'; +import { DailyCheckbox, DailyCheckboxType, Task } from '@/lib/types'; import { Button } from '@/components/ui/Button'; import { Input } from '@/components/ui/Input'; import { Modal } from '@/components/ui/Modal'; -import { TaskSelector } from './TaskSelector'; +import { tasksClient } from '@/clients/tasks-client'; interface EditCheckboxModalProps { checkbox: DailyCheckbox; @@ -25,6 +25,49 @@ export function EditCheckboxModal({ const [text, setText] = useState(checkbox.text); const [type, setType] = useState(checkbox.type); const [taskId, setTaskId] = useState(checkbox.taskId); + const [selectedTask, setSelectedTask] = useState(undefined); + const [allTasks, setAllTasks] = useState([]); + const [tasksLoading, setTasksLoading] = useState(false); + const [taskSearch, setTaskSearch] = useState(''); + + // Charger toutes les tâches au début + useEffect(() => { + if (isOpen) { + setTasksLoading(true); + tasksClient.getTasks() + .then(response => { + setAllTasks(response.data); + // Trouver la tâche sélectionnée si elle existe + if (taskId) { + const task = response.data.find((t: Task) => t.id === taskId); + setSelectedTask(task); + } + }) + .catch(console.error) + .finally(() => setTasksLoading(false)); + } + }, [isOpen, taskId]); + + // Mettre à jour la tâche sélectionnée quand taskId change + useEffect(() => { + if (taskId && allTasks.length > 0) { + const task = allTasks.find((t: Task) => t.id === taskId); + setSelectedTask(task); + } else { + setSelectedTask(undefined); + } + }, [taskId, allTasks]); + + // Filtrer les tâches selon la recherche + const filteredTasks = allTasks.filter(task => + task.title.toLowerCase().includes(taskSearch.toLowerCase()) || + (task.description && task.description.toLowerCase().includes(taskSearch.toLowerCase())) + ); + + const handleTaskSelect = (task: Task) => { + setTaskId(task.id); + setTaskSearch(''); // Fermer la recherche après sélection + }; const handleSave = async () => { if (!text.trim()) return; @@ -114,18 +157,89 @@ export function EditCheckboxModal({ -
- - {taskId && ( -
- Tâche liée : #{taskId.slice(-6)} + + {selectedTask ? ( + // Tâche déjà sélectionnée +
+
+
+
{selectedTask.title}
+ {selectedTask.description && ( +
+ {selectedTask.description} +
+ )} + + {selectedTask.status} + +
+
- )} -
+
+ ) : ( + // Interface de sélection simplifiée +
+ setTaskSearch(e.target.value)} + disabled={saving || tasksLoading} + className="w-full" + /> + + {taskSearch.trim() && ( +
+ {tasksLoading ? ( +
+ Chargement... +
+ ) : filteredTasks.length === 0 ? ( +
+ Aucune tâche trouvée +
+ ) : ( + filteredTasks.slice(0, 5).map((task) => ( + + )) + )} +
+ )} +
+ )}
)} diff --git a/components/daily/TaskSelector.tsx b/components/daily/TaskSelector.tsx deleted file mode 100644 index 63bf86f..0000000 --- a/components/daily/TaskSelector.tsx +++ /dev/null @@ -1,183 +0,0 @@ -'use client'; - -import { useState, useEffect } from 'react'; -import { Task } from '@/lib/types'; -import { tasksClient } from '@/clients/tasks-client'; -import { Button } from '@/components/ui/Button'; - -interface TaskSelectorProps { - selectedTaskId?: string; - onTaskSelect: (taskId: string | undefined) => void; - disabled?: boolean; -} - -export function TaskSelector({ selectedTaskId, onTaskSelect, disabled }: TaskSelectorProps) { - const [tasks, setTasks] = useState([]); - const [loading, setLoading] = useState(false); - const [isOpen, setIsOpen] = useState(false); - const [search, setSearch] = useState(''); - - const selectedTask = tasks.find(task => task.id === selectedTaskId); - - useEffect(() => { - if (isOpen && tasks.length === 0) { - loadTasks(); - } - }, [isOpen]); - - const loadTasks = async () => { - setLoading(true); - try { - const response = await tasksClient.getTasks({ - status: ['todo', 'in_progress', 'backlog'], - limit: 100 - }); - setTasks(response.data); - } catch (error) { - console.error('Erreur lors du chargement des tâches:', error); - } finally { - setLoading(false); - } - }; - - const filteredTasks = tasks.filter(task => - task.title.toLowerCase().includes(search.toLowerCase()) || - task.description?.toLowerCase().includes(search.toLowerCase()) - ); - - const handleTaskSelect = (taskId: string) => { - onTaskSelect(taskId); - setIsOpen(false); - setSearch(''); - }; - - const handleClear = () => { - onTaskSelect(undefined); - setIsOpen(false); - setSearch(''); - }; - - if (!isOpen) { - return ( -
- - {selectedTask && ( - - )} -
- ); - } - - return ( -
-
-
-
-

Lier à une tâche

- -
- - setSearch(e.target.value)} - className="w-full mb-2 px-2 py-1 text-xs border border-[var(--border)] rounded bg-[var(--background)] text-[var(--foreground)]" - autoFocus - /> - -
- {loading ? ( -
- Chargement... -
- ) : filteredTasks.length === 0 ? ( -
- Aucune tâche trouvée -
- ) : ( - filteredTasks.map((task) => ( - - )) - )} -
- -
- - -
-
-
-
- ); -}