Merge pull request #2273 from visuddhinanda/development

Development

dashboard-v4/dashboard/src/components/task/TaskTable.tsx

@@ -2,9 +2,7 @@ import { useEffect, useState } from "react";
 
 import { IProject, ITaskData } from "../api/task";
 import "../article/article.css";
-import User from "../auth/User";
-import Assignees from "./Assignees";
-import TaskStatusButton from "./TaskStatusButton";
+import TaskTableCell from "./TaskTableCell";
 
 interface ITaskHeading {
   id: string;
@@ -132,24 +130,7 @@ const TaskTable = ({ tasks, onChange }: IWidget) => {
                 );
                 return (
                   <td key={id}>
-                    <div>
-                      <div>
-                        {taskData?.executor ? (
-                          <User {...taskData.executor} />
-                        ) : taskData?.assignees ? (
-                          <Assignees task={taskData} />
-                        ) : (
-                          <></>
-                        )}
-                      </div>
-                      <div>
-                        <TaskStatusButton
-                          type="tag"
-                          task={taskData}
-                          onChange={onChange}
-                        />
-                      </div>
-                    </div>
+                    <TaskTableCell task={taskData} onChange={onChange} />
                   </td>
                 );
               })}

dashboard-v4/dashboard/src/components/task/TaskTableCell.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { ITaskData } from "../api/task";
+import User from "../auth/User";
+import Assignees from "./Assignees";
+import TaskStatusButton from "./TaskStatusButton";
+import { Button } from "antd";
+import TaskEditDrawer from "./TaskEditDrawer";
+
+interface IWidget {
+  task?: ITaskData;
+  onChange?: (treeData: ITaskData[]) => void;
+}
+const TaskTableCell = ({ task, onChange }: IWidget) => {
+  const [active, setActive] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div
+      onMouseEnter={() => setActive(true)}
+      onMouseLeave={() => setActive(false)}
+    >
+      <div>
+        {task?.executor ? (
+          <User {...task.executor} />
+        ) : task?.assignees ? (
+          <Assignees task={task} />
+        ) : (
+          <></>
+        )}
+      </div>
+      <div>
+        <TaskStatusButton type="tag" task={task} onChange={onChange} />
+        <Button
+          size="small"
+          type="link"
+          style={{ visibility: active ? "visible" : "hidden" }}
+          onClick={() => setOpen(true)}
+        >
+          查看
+        </Button>
+      </div>
+      <TaskEditDrawer
+        taskId={task?.id}
+        openDrawer={open}
+        onClose={() => setOpen(false)}
+        onChange={onChange}
+      />
+    </div>
+  );
+};
+
+export default TaskTableCell;