color task

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

@@ -9,6 +9,7 @@ import type { TaskDetailType } from "../../task/types/TaskTypes";
 import type { Column, Task } from "../../types";
 import AttachmentList from "./attachment/List";
 import CheckLists from "./checklist/List";
+import TaskDetailCoverColorBar from "./cover/TaskDetailCoverColorBar";
 import TaskDetailDescription from "./TaskDetailDescription";
 import TaskDetailHeader from "./TaskDetailHeader";
 import TaskDetailToolbar from "./TaskDetailToolbar";
@@ -28,6 +29,7 @@ const TaskDetailModal: FC<Props> = ({ open, task, columns, projectId, onClose, o
   const [activeTab, setActiveTab] = useState<TaskDetailTab | null>(null);
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
+  const [color, setColor] = useState<string | null>(null);
   const initialTitleRef = useRef("");
   const initialDescriptionRef = useRef("");
 
@@ -50,6 +52,7 @@ const TaskDetailModal: FC<Props> = ({ open, task, columns, projectId, onClose, o
       setActiveTab(null);
       setTitle("");
       setDescription("");
+      setColor(null);
       initialTitleRef.current = "";
       initialDescriptionRef.current = "";
     }
@@ -60,6 +63,7 @@ const TaskDetailModal: FC<Props> = ({ open, task, columns, projectId, onClose, o
 
     setTitle(taskDetail.title);
     setDescription(taskDetail.description ?? "");
+    setColor(taskDetail.color || null);
     initialTitleRef.current = taskDetail.title;
     initialDescriptionRef.current = taskDetail.description ?? "";
   }, [taskDetail]);
@@ -116,6 +120,24 @@ const TaskDetailModal: FC<Props> = ({ open, task, columns, projectId, onClose, o
     );
   };
 
+  const handleColorChange = (newColor: string | null) => {
+    const previousColor = color;
+    setColor(newColor);
+
+    updateTask.mutate(
+      { id: task.id, params: { color: newColor ?? "" } },
+      {
+        onSuccess: () => {
+          toast.success(t("success"));
+        },
+        onError: (error: ErrorType) => {
+          setColor(previousColor);
+          toast.error(error.response?.data?.error.message[0]);
+        },
+      },
+    );
+  };
+
   const handlePhaseChange = (taskPhaseId: string) => {
     if (taskPhaseId === selectedPhaseId) return;
 
@@ -144,11 +166,22 @@ const TaskDetailModal: FC<Props> = ({ open, task, columns, projectId, onClose, o
             selectedPhaseId={selectedPhaseId}
             onPhaseChange={handlePhaseChange}
             isChangingPhase={changeTaskPhase.isPending}
+            taskColor={color}
+            onColorSelect={(newColor) => handleColorChange(newColor)}
+            isUpdatingColor={updateTask.isPending}
             onClose={onClose}
             onDelete={handleDelete}
             isDeleting={deleteTask.isPending}
           />
 
+          {color ? (
+            <TaskDetailCoverColorBar
+              color={color}
+              onRemove={() => handleColorChange(null)}
+              isRemoving={updateTask.isPending}
+            />
+          ) : null}
+
           <input
             value={title}
             onChange={(e) => setTitle(e.target.value)}