change status checklist

src/pages/taskmanager/components/task-detail/TaskDetailModal.tsx

@@ -151,6 +151,7 @@ const TaskDetailModal: FC<Props> = ({ open, task, statusLabel, onClose }) => {
           <AttachmentList attachments={taskDetail?.attachments} />
 
           <CheckLists
+            taskId={task.id}
             checkListItems={taskDetail?.checkListItems}
             checkListItemCount={taskDetail?.checkListItemCount}
             completedCheckListItemCount={taskDetail?.completedCheckListItemCount}

src/pages/taskmanager/components/task-detail/checklist/List.tsx

@@ -1,20 +1,29 @@
 import { Edit } from "iconsax-react";
+import { useTranslation } from "react-i18next";
+import { toast } from "react-toastify";
 import ProgressBar from "../../../../../components/ProgressBar";
 import TrashWithConfrim from "../../../../../components/TrashWithConfrim";
+import { ErrorType } from "../../../../../helpers/types";
+import { useUpdateCheckListItem } from "../../../task/hooks/useTaskData";
 import type { TaskChecklistItemType } from "../../../task/types/TaskTypes";
 import ChecklistItem from "./ChecklistItem";
 
 type Props = {
+  taskId: string;
   checkListItems?: TaskChecklistItemType[];
   checkListItemCount?: number;
   completedCheckListItemCount?: number;
 };
 
 const CheckLists = ({
+  taskId,
   checkListItems = [],
   checkListItemCount,
   completedCheckListItemCount,
 }: Props) => {
+  const { t } = useTranslation("global");
+  const updateCheckListItem = useUpdateCheckListItem();
+
   const items = checkListItems.map((item) => ({
     id: item.id,
     title: item.title,
@@ -25,12 +34,23 @@ const CheckLists = ({
   const doneCount = completedCheckListItemCount ?? items.filter((item) => item.checked).length;
   const progress = totalCount > 0 ? Math.round((doneCount / totalCount) * 100) : 0;
 
+  const handleToggle = (id: string, checked: boolean) => {
+    updateCheckListItem.mutate(
+      { id, params: { isDone: !checked }, taskId },
+      {
+        onError: (error: ErrorType) => {
+          toast.error(error.response?.data?.error.message[0]);
+        },
+      },
+    );
+  };
+
   if (checkListItems.length === 0) return null;
 
   return (
     <div className="mt-6">
       <div className="flex gap-2 items-center">
-        <div className="text-sm font-bold mt-px">چک لیست</div>
+        <div className="text-sm font-bold mt-px">{t("taskmanager.task_detail.checklist")}</div>
         <Edit size={20} color="#0047FF" />
         <TrashWithConfrim onDelete={() => {}} color="#FF0000" />
       </div>
@@ -46,7 +66,7 @@ const CheckLists = ({
             key={item.id}
             title={item.title}
             checked={item.checked}
-            onToggle={() => {}}
+            onToggle={() => handleToggle(item.id, item.checked)}
             onEdit={() => {}}
             onDelete={() => {}}
           />

src/pages/taskmanager/task/hooks/useTaskData.ts

@@ -1,6 +1,12 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as api from "../service/TaskService";
-import { CreateCheckListItemType, CreateTaskRemarkType, CreateTaskType, UpdateTaskType } from "../types/TaskTypes";
+import {
+  CreateCheckListItemType,
+  CreateTaskRemarkType,
+  CreateTaskType,
+  UpdateCheckListItemType,
+  UpdateTaskType,
+} from "../types/TaskTypes";
 
 export const useGetTaskDetail = (id: string, enabled = true) => {
   return useQuery({
@@ -69,3 +75,16 @@ export const useCreateCheckListItem = () => {
     },
   });
 };
+
+export const useUpdateCheckListItem = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, params }: { id: string; params: UpdateCheckListItemType; taskId: string }) =>
+      api.updateCheckListItem(id, params),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["task-detail", variables.taskId] });
+      queryClient.invalidateQueries({ queryKey: ["project"] });
+    },
+  });
+};

src/pages/taskmanager/task/service/TaskService.ts

@@ -6,6 +6,8 @@ import {
   CreateTaskRemarkType,
   CreateTaskType,
   GetTaskDetailResponse,
+  UpdateCheckListItemResponse,
+  UpdateCheckListItemType,
   UpdateTaskType,
 } from "../types/TaskTypes";
 
@@ -38,3 +40,11 @@ export const createCheckListItem = async (params: CreateCheckListItemType): Prom
   const { data } = await axios.post(`/task-manager/check-list-items`, params);
   return data;
 };
+
+export const updateCheckListItem = async (
+  id: string,
+  params: UpdateCheckListItemType,
+): Promise<UpdateCheckListItemResponse> => {
+  const { data } = await axios.patch(`/task-manager/check-list-items/${id}`, params);
+  return data;
+};

src/pages/taskmanager/task/types/TaskTypes.ts

@@ -57,6 +57,14 @@ export interface CreateCheckListItemResponse extends IResponse<{ checkListItem:
   statusCode: number;
 }
 
+export type UpdateCheckListItemType = {
+  isDone: boolean;
+};
+
+export interface UpdateCheckListItemResponse extends IResponse<{ checkListItem: TaskChecklistItemType }> {
+  statusCode: number;
+}
+
 export type TaskChecklistType = {
   id: string;
   title: string;