使用 EditableAvatarGroup 组件

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

@@ -1,16 +1,28 @@
-import { Avatar, Space, Typography } from "antd";
+import { message, Space, Typography } from "antd";
 import { TeamOutlined } from "@ant-design/icons";
 
-import { ITaskData } from "../api/task";
-import User from "../auth/User";
+import { ITaskData, ITaskResponse, ITaskUpdateRequest } from "../api/task";
+import { IUser } from "../auth/User";
+import EditableAvatarGroup from "../like/EditableAvatarGroup";
+import { useEffect, useState } from "react";
+import { IDataType } from "../like/WatchAdd";
+import { patch } from "../../request";
 const { Text } = Typography;
 
 interface IWidget {
   task?: ITaskData;
   showIcon?: boolean;
   readonly?: boolean;
+  onChange?: (data: ITaskData[]) => void;
 }
-const Assignees = ({ task, showIcon = false, readonly = false }: IWidget) => {
+const Assignees = ({
+  task,
+  showIcon = false,
+  readonly = false,
+  onChange,
+}: IWidget) => {
+  const [data, setData] = useState<IUser[] | null>();
+  useEffect(() => setData(task?.assignees), [task]);
   return (
     <Space>
       {showIcon ? (
@@ -21,11 +33,40 @@ const Assignees = ({ task, showIcon = false, readonly = false }: IWidget) => {
       ) : (
         <></>
       )}
-      <Avatar.Group>
-        {task?.assignees?.map((item, id) => {
-          return <User {...item} key={id} showName={false} />;
-        })}
-      </Avatar.Group>
+      <EditableAvatarGroup
+        users={data ?? undefined}
+        onFinish={async (values: IDataType) => {
+          if (!task) {
+            console.error("no task");
+            return;
+          }
+          let users: string[] = [];
+          if (task.assignees_id) {
+            users = task.assignees_id;
+          }
+          if (values.user_id) {
+            users = [...users, values.user_id];
+          }
+          let setting: ITaskUpdateRequest = {
+            id: task.id,
+            studio_name: "",
+            assignees_id: users,
+          };
+          const url = `/v2/task/${setting.id}`;
+          console.info("api request", url, setting);
+          patch<ITaskUpdateRequest, ITaskResponse>(url, setting).then(
+            (json) => {
+              console.info("api response", json);
+              if (json.ok) {
+                message.success("Success");
+                onChange && onChange([json.data]);
+              } else {
+                message.error(json.message);
+              }
+            }
+          );
+        }}
+      />
     </Space>
   );
 };