支持创建

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

@@ -1,22 +1,21 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ActionType, ProList } from "@ant-design/pro-components";
 import { useIntl } from "react-intl";
 import { Link } from "react-router-dom";
-import { Button, message, Modal, Popover } from "antd";
-import { Dropdown } from "antd";
-import {
-  ExclamationCircleOutlined,
-  DeleteOutlined,
-  PlusOutlined,
-} from "@ant-design/icons";
+import { Button, message, Modal, Popover, Space } from "antd";
+
+import { ExclamationCircleOutlined, PlusOutlined } from "@ant-design/icons";
 
 import { delete_, get } from "../../request";
-import { PublicityValueEnum } from "../studio/table";
+
 import { IDeleteResponse } from "../api/Article";
 import { getSorterUrl } from "../../utils";
-import { TransferOutLinedIcon } from "../../assets/icon";
+
 import { IProjectData, IProjectListResponse, TProjectType } from "../api/task";
 import ProjectCreate from "./ProjectCreate";
+import ProjectEditDrawer from "./ProjectEditDrawer";
+import User from "../auth/User";
+import TimeShow from "../general/TimeShow";
 
 export interface IResNumberResponse {
   ok: boolean;
@@ -26,22 +25,26 @@ export interface IResNumberResponse {
     collaboration: number;
   };
 }
-
+export type TView = "studio" | "shared" | "community";
 interface IWidget {
   studioName?: string;
   type?: TProjectType;
+  view?: TView;
   readonly?: boolean;
   onSelect?: (data: IProjectData) => void;
 }
 
 const ProjectListWidget = ({
   studioName,
+  view = "studio",
   type = "instance",
   readonly = false,
   onSelect,
 }: IWidget) => {
   const intl = useIntl();
   const [openCreate, setOpenCreate] = useState(false);
+  const [editId, setEditId] = useState<string>();
+  const [open, setOpen] = useState(false);
   const showDeleteConfirm = (id: string, title: string) => {
     Modal.confirm({
       icon: <ExclamationCircleOutlined />,
@@ -81,6 +84,9 @@ const ProjectListWidget = ({
 
   const ref = useRef<ActionType>();
 
+  useEffect(() => {
+    ref.current?.reload();
+  }, [view]);
   return (
     <>
       <ProList<IProjectData>
@@ -98,13 +104,45 @@ const ProjectListWidget = ({
             },
           },
           description: {
-            dataIndex: "summary",
+            dataIndex: "description",
+            render(dom, entity, index, action, schema) {
+              return (
+                <Space>
+                  <User {...entity.editor} showAvatar={false} />
+                  <TimeShow
+                    createdAt={entity.created_at}
+                    updatedAt={entity.updated_at}
+                  />
+                </Space>
+              );
+            },
+          },
+          content: {
+            dataIndex: "description",
           },
           subTitle: {
             render: (text, row, index, action) => {
               return <></>;
             },
           },
+          actions: {
+            render: (text, row) => [
+              <Button
+                size="small"
+                type="link"
+                key="edit"
+                onClick={() => {
+                  setEditId(row.id);
+                  setOpen(true);
+                }}
+              >
+                编辑
+              </Button>,
+              <Button size="small" type="link" key="clone">
+                克隆
+              </Button>,
+            ],
+          },
         }}
         onRow={(record) => {
           return {
@@ -114,116 +152,10 @@ const ProjectListWidget = ({
             },
           };
         }}
-        columns={[
-          {
-            title: intl.formatMessage({
-              id: "forms.fields.title.label",
-            }),
-            dataIndex: "title",
-            width: 250,
-            key: "title",
-            tooltip: "过长会自动收缩",
-            ellipsis: true,
-            render(dom, entity, index, action, schema) {
-              return (
-                <Link to={`/studio/${studioName}/task/project/${entity.id}`}>
-                  {entity.title}
-                </Link>
-              );
-            },
-          },
-          {
-            title: intl.formatMessage({
-              id: "forms.fields.executors.label",
-            }),
-            dataIndex: "executors",
-            key: "executors",
-          },
-          {
-            title: intl.formatMessage({
-              id: "forms.fields.milestone.label",
-            }),
-            dataIndex: "milestone",
-            key: "milestone",
-            width: 80,
-            search: false,
-          },
-          {
-            title: intl.formatMessage({
-              id: "forms.fields.status.label",
-            }),
-            dataIndex: "status",
-            key: "status",
-            width: 80,
-            search: false,
-            filters: true,
-            onFilter: true,
-            valueEnum: PublicityValueEnum(),
-          },
-          {
-            title: intl.formatMessage({
-              id: "forms.fields.updated-at.label",
-            }),
-            key: "updated_at",
-            width: 100,
-            search: false,
-            dataIndex: "updated_at",
-            valueType: "date",
-            sorter: true,
-          },
-          {
-            title: intl.formatMessage({ id: "buttons.option" }),
-            key: "option",
-            width: 100,
-            valueType: "option",
-            render: (text, row, index, action) => {
-              return [
-                <Dropdown.Button
-                  key={index}
-                  type="link"
-                  trigger={["click", "contextMenu"]}
-                  menu={{
-                    items: [
-                      {
-                        key: "transfer",
-                        label: intl.formatMessage({
-                          id: "columns.studio.transfer.title",
-                        }),
-                        icon: <TransferOutLinedIcon />,
-                      },
-                      {
-                        key: "remove",
-                        label: intl.formatMessage({
-                          id: "buttons.delete",
-                        }),
-                        icon: <DeleteOutlined />,
-                        danger: true,
-                      },
-                    ],
-                    onClick: (e) => {
-                      switch (e.key) {
-                        case "remove":
-                          showDeleteConfirm(row.id, row.title);
-                          break;
-                        default:
-                          break;
-                      }
-                    },
-                  }}
-                >
-                  <Link to={`/studio/${studioName}/channel/${row.id}/setting`}>
-                    {intl.formatMessage({
-                      id: "buttons.setting",
-                    })}
-                  </Link>
-                </Dropdown.Button>,
-              ];
-            },
-          },
-        ]}
         request={async (params = {}, sorter, filter) => {
           console.log(params, sorter, filter);
-          let url = `/v2/project?view=studio&type=${type}`;
+          let url = `/v2/project?view=${view}&type=${type}`;
+          url += `&studio=${studioName}`;
           const offset =
             ((params.current ? params.current : 1) - 1) *
             (params.pageSize ? params.pageSize : 20);
@@ -231,7 +163,7 @@ const ProjectListWidget = ({
 
           url += params.keyword ? "&keyword=" + params.keyword : "";
           url += getSorterUrl(sorter);
-          console.log("project list api request", url);
+          console.info("project list api request", url);
           const res = await get<IProjectListResponse>(url);
           console.info("project list api response", res);
           return {
@@ -250,34 +182,42 @@ const ProjectListWidget = ({
         options={{
           search: true,
         }}
-        toolBarRender={() => [
-          readonly ? (
-            <></>
-          ) : (
-            <Popover
-              content={
-                <ProjectCreate
-                  studio={studioName}
-                  type={type}
-                  onCreate={() => {
-                    setOpenCreate(false);
-                    ref.current?.reload();
-                  }}
-                />
-              }
-              placement="bottomRight"
-              trigger="click"
-              open={openCreate}
-              onOpenChange={(open: boolean) => {
-                setOpenCreate(open);
-              }}
-            >
-              <Button key="button" icon={<PlusOutlined />} type="primary">
-                {intl.formatMessage({ id: "buttons.create" })}
-              </Button>
-            </Popover>
-          ),
-        ]}
+        toolbar={{
+          actions: [
+            view === "studio" ? (
+              <Popover
+                content={
+                  <ProjectCreate
+                    studio={studioName}
+                    type={"workflow"}
+                    onCreate={() => {
+                      setOpenCreate(false);
+                      ref.current?.reload();
+                    }}
+                  />
+                }
+                placement="bottomRight"
+                trigger="click"
+                open={openCreate}
+                onOpenChange={(open: boolean) => {
+                  setOpenCreate(open);
+                }}
+              >
+                <Button key="button" icon={<PlusOutlined />} type="primary">
+                  {intl.formatMessage({ id: "buttons.create" })}
+                </Button>
+              </Popover>
+            ) : (
+              <></>
+            ),
+          ],
+        }}
+      />
+      <ProjectEditDrawer
+        studioName={studioName}
+        projectId={editId}
+        openDrawer={open}
+        onClose={() => setOpen(false)}
       />
     </>
   );