diff --git a/src/pages/taskmanager/components/task-detail/checklist/List.tsx b/src/pages/taskmanager/components/task-detail/checklist/List.tsx index 3f77143..45000d2 100644 --- a/src/pages/taskmanager/components/task-detail/checklist/List.tsx +++ b/src/pages/taskmanager/components/task-detail/checklist/List.tsx @@ -1,10 +1,11 @@ import { Edit } from "iconsax-react"; +import { useState } from "react"; import { useTranslation } from "react-i18next"; +import ModalConfrim from "../../../../../components/ModalConfrim"; import { toast } from '../../../../../components/Toast'; import ProgressBar from "../../../../../components/ProgressBar"; -import TrashWithConfrim from "../../../../../components/TrashWithConfrim"; import { ErrorType } from "../../../../../helpers/types"; -import { useUpdateCheckListItem } from "../../../task/hooks/useTaskData"; +import { useDeleteCheckListItem, useUpdateCheckListItem } from "../../../task/hooks/useTaskData"; import type { TaskChecklistItemType } from "../../../task/types/TaskTypes"; import ChecklistItem from "./ChecklistItem"; @@ -23,6 +24,8 @@ const CheckLists = ({ }: Props) => { const { t } = useTranslation("global"); const updateCheckListItem = useUpdateCheckListItem(); + const deleteCheckListItem = useDeleteCheckListItem(); + const [deleteItemId, setDeleteItemId] = useState(null); const items = checkListItems.map((item) => ({ id: item.id, @@ -45,6 +48,22 @@ const CheckLists = ({ ); }; + const handleDelete = () => { + if (!deleteItemId) return; + + deleteCheckListItem.mutate( + { id: deleteItemId, taskId }, + { + onSuccess: () => { + setDeleteItemId(null); + }, + onError: (error: ErrorType) => { + toast(error.response?.data?.error.message[0], 'error'); + }, + }, + ); + }; + if (checkListItems.length === 0) return null; return ( @@ -52,7 +71,6 @@ const CheckLists = ({
{t("taskmanager.task_detail.checklist")}
- {}} color="#FF0000" />
@@ -68,10 +86,17 @@ const CheckLists = ({ checked={item.checked} onToggle={() => handleToggle(item.id, item.checked)} onEdit={() => {}} - onDelete={() => {}} + onDelete={() => setDeleteItemId(item.id)} /> ))}
+ + setDeleteItemId(null)} + onConfrim={handleDelete} + isLoading={deleteCheckListItem.isPending} + /> ); }; diff --git a/src/pages/taskmanager/task/hooks/useTaskData.ts b/src/pages/taskmanager/task/hooks/useTaskData.ts index 2d1598e..f8ebfff 100644 --- a/src/pages/taskmanager/task/hooks/useTaskData.ts +++ b/src/pages/taskmanager/task/hooks/useTaskData.ts @@ -142,6 +142,18 @@ export const useUpdateCheckListItem = () => { }); }; +export const useDeleteCheckListItem = () => { + const queryClient = useQueryClient(); + + return useMutation({ + mutationFn: ({ id }: { id: string; taskId: string }) => api.deleteCheckListItem(id), + onSuccess: (_data, variables) => { + queryClient.invalidateQueries({ queryKey: ["task-detail", variables.taskId] }); + queryClient.invalidateQueries({ queryKey: ["project"] }); + }, + }); +}; + export const useCreateTaskAttachment = () => { const queryClient = useQueryClient(); diff --git a/src/pages/taskmanager/task/service/TaskService.ts b/src/pages/taskmanager/task/service/TaskService.ts index 6dbfad1..76a886e 100644 --- a/src/pages/taskmanager/task/service/TaskService.ts +++ b/src/pages/taskmanager/task/service/TaskService.ts @@ -76,6 +76,11 @@ export const updateCheckListItem = async ( return data; }; +export const deleteCheckListItem = async (id: string) => { + const { data } = await axios.delete(`/task-manager/check-list-items/${id}`); + return data; +}; + export const createTaskAttachment = async (params: CreateTaskAttachmentType) => { const { data } = await axios.post(`/task-manager/attachments`, params); return data;