update task phase

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

@@ -4,9 +4,9 @@ import { toast } from "react-toastify";
 import DefaulModal from "../../../../components/DefaulModal";
 import PageLoading from "../../../../components/PageLoading";
 import { ErrorType } from "../../../../helpers/types";
-import { useDeleteTask, useGetTaskDetail, useUpdateTask } from "../../task/hooks/useTaskData";
+import { useChangeTaskPhase, useDeleteTask, useGetTaskDetail, useUpdateTask } from "../../task/hooks/useTaskData";
 import type { TaskDetailType } from "../../task/types/TaskTypes";
-import type { Task } from "../../types";
+import type { Column, Task } from "../../types";
 import AttachmentList from "./attachment/List";
 import CheckLists from "./checklist/List";
 import TaskDetailDescription from "./TaskDetailDescription";
@@ -17,11 +17,13 @@ import type { TaskDetailTab } from "./types";
 type Props = {
   open: boolean;
   task: Task | null;
-  statusLabel: string;
+  columns: Column[];
+  projectId: string;
   onClose: () => void;
+  onTaskPhaseChanged?: (taskId: string, taskPhaseId: string) => void;
 };
 
-const TaskDetailModal: FC<Props> = ({ open, task, statusLabel, onClose }) => {
+const TaskDetailModal: FC<Props> = ({ open, task, columns, projectId, onClose, onTaskPhaseChanged }) => {
   const { t } = useTranslation("global");
   const [activeTab, setActiveTab] = useState<TaskDetailTab | null>(null);
   const [title, setTitle] = useState("");
@@ -31,6 +33,7 @@ const TaskDetailModal: FC<Props> = ({ open, task, statusLabel, onClose }) => {
 
   const getTaskDetail = useGetTaskDetail(task?.id ?? "", open && !!task?.id);
   const updateTask = useUpdateTask();
+  const changeTaskPhase = useChangeTaskPhase();
   const deleteTask = useDeleteTask();
 
   const rawTaskDetail = getTaskDetail.data?.data?.task ?? getTaskDetail.data?.data;
@@ -61,12 +64,16 @@ const TaskDetailModal: FC<Props> = ({ open, task, statusLabel, onClose }) => {
     initialDescriptionRef.current = taskDetail.description ?? "";
   }, [taskDetail]);
 
+  if (!task) return null;
+
+  const selectedPhaseId = taskDetail?.taskPhaseId ?? task.columnId;
+
   const handleTabChange = (tab: TaskDetailTab) => {
     setActiveTab((prev) => (prev === tab ? null : tab));
   };
 
   const handleDelete = () => {
-    if (!task?.id) return;
+    if (!task.id) return;
 
     deleteTask.mutate(
       { id: task.id, projectId: taskDetail?.projectId ?? "" },
@@ -83,8 +90,6 @@ const TaskDetailModal: FC<Props> = ({ open, task, statusLabel, onClose }) => {
   };
 
   const saveField = (field: "title" | "description", value: string) => {
-    if (!task?.id) return;
-
     const initialValue = field === "title" ? initialTitleRef.current : initialDescriptionRef.current;
     if (value === initialValue) return;
 
@@ -111,7 +116,22 @@ const TaskDetailModal: FC<Props> = ({ open, task, statusLabel, onClose }) => {
     );
   };
 
-  if (!task) return null;
+  const handlePhaseChange = (taskPhaseId: string) => {
+    if (taskPhaseId === selectedPhaseId) return;
+
+    changeTaskPhase.mutate(
+      { id: task.id, params: { taskPhaseId }, projectId: taskDetail?.projectId ?? projectId },
+      {
+        onSuccess: () => {
+          onTaskPhaseChanged?.(task.id, taskPhaseId);
+          toast.success(t("success"));
+        },
+        onError: (error: ErrorType) => {
+          toast.error(error.response?.data?.error.message[0]);
+        },
+      },
+    );
+  };
 
   return (
     <DefaulModal open={open} close={onClose} width={680}>
@@ -120,7 +140,10 @@ const TaskDetailModal: FC<Props> = ({ open, task, statusLabel, onClose }) => {
       ) : (
         <>
           <TaskDetailHeader
-            statusLabel={statusLabel}
+            columns={columns}
+            selectedPhaseId={selectedPhaseId}
+            onPhaseChange={handlePhaseChange}
+            isChangingPhase={changeTaskPhase.isPending}
             onClose={onClose}
             onDelete={handleDelete}
             isDeleting={deleteTask.isPending}