Merge pull request #1045 from visuddhinanda/agile

添加 group加人按钮

dashboard/src/components/api/Auth.ts

@@ -6,6 +6,21 @@ export interface IUserRequest {
   nickName?: string;
   avatar?: string;
 }
+export interface IUserApiData {
+  id?: string;
+  userName?: string;
+  nickName?: string;
+  avatar?: string;
+}
+export interface IUserListResponse {
+  ok: boolean;
+  message: string;
+  data: {
+    rows: IUserApiData[];
+    count: number;
+  };
+}
+
 export interface IUserApiResponse {
   id: string;
   userName: string;

dashboard/src/components/group/AddMember.tsx

@@ -0,0 +1,75 @@
+import { useIntl } from "react-intl";
+import {
+  ProForm,
+  ProFormSelect,
+  ProFormText,
+} from "@ant-design/pro-components";
+import { Button, message, Popover } from "antd";
+import { UserAddOutlined } from "@ant-design/icons";
+import { get } from "../../request";
+import { IUserListResponse } from "../api/Auth";
+
+interface IFormData {
+  userId: string;
+}
+
+interface IWidget {
+  groupId?: string;
+}
+const Widget = ({ groupId }: IWidget) => {
+  const intl = useIntl();
+
+  const form = (
+    <ProForm<IFormData>
+      onFinish={async (values: IFormData) => {
+        // TODO
+        console.log(values);
+        message.success(intl.formatMessage({ id: "flashes.success" }));
+      }}
+    >
+      <ProForm.Group>
+        <ProFormSelect
+          name="userId"
+          label={intl.formatMessage({ id: "forms.fields.user.label" })}
+          showSearch
+          debounceTime={300}
+          request={async ({ keyWord }) => {
+            console.log("keyWord", keyWord);
+            const json = await get<IUserListResponse>(`/v2/user?view=key&key=`);
+            const userList = json.data.rows.map((item) => {
+              return {
+                value: item.id,
+                label: `${item.userName}-${item.nickName}`,
+              };
+            });
+            console.log("json", userList);
+            return userList;
+          }}
+          placeholder={intl.formatMessage({ id: "forms.fields.user.required" })}
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage({
+                id: "forms.message.user.required",
+              }),
+            },
+          ]}
+        />
+      </ProForm.Group>
+    </ProForm>
+  );
+  return (
+    <Popover
+      placement="bottom"
+      arrowPointAtCenter
+      content={form}
+      trigger="click"
+    >
+      <Button icon={<UserAddOutlined />} key="add" type="primary">
+        {intl.formatMessage({ id: "buttons.group.add.member" })}
+      </Button>
+    </Popover>
+  );
+};
+
+export default Widget;

dashboard/src/components/group/GroupMember.tsx

@@ -1,7 +1,9 @@
 import { useIntl } from "react-intl";
 import { useState } from "react";
 import { ProList } from "@ant-design/pro-components";
+import { UserAddOutlined } from "@ant-design/icons";
 import { Space, Tag, Button, Layout } from "antd";
+import GroupAddMember from "./AddMember";
 
 const { Content } = Layout;
 
@@ -50,19 +52,22 @@ const defaultData = [
   },
 ];
 type DataItem = typeof defaultData[number];
-type IWidgetGroupFile = {
-  groupid?: string;
-};
-const Widget = ({ groupid = "" }: IWidgetGroupFile) => {
+interface IWidgetGroupFile {
+  groupId?: string;
+}
+const Widget = ({ groupId }: IWidgetGroupFile) => {
   const intl = useIntl(); //i18n
   const [dataSource, setDataSource] = useState<DataItem[]>(defaultData);
 
   return (
     <Content>
-      <Space>{groupid}</Space>
+      <Space>{groupId}</Space>
       <ProList<DataItem>
         rowKey="id"
         headerTitle={intl.formatMessage({ id: "group.member" })}
+        toolBarRender={() => {
+          return [<GroupAddMember groupId={groupId} />];
+        }}
         dataSource={dataSource}
         showActions="hover"
         onDataSourceChange={setDataSource}
@@ -89,12 +94,15 @@ const Widget = ({ groupid = "" }: IWidgetGroupFile) => {
           actions: {
             render: (text, row, index, action) => [
               <Button
+                style={{ padding: 0, margin: 0 }}
+                type="link"
+                danger
                 onClick={() => {
                   action?.startEditable(row.id);
                 }}
                 key="link"
               >
-                删除
+                {intl.formatMessage({ id: "buttons.remove" })}
               </Button>,
             ],
           },

dashboard/src/locales/zh-Hans/buttons.ts

@@ -6,6 +6,7 @@ const items = {
   "buttons.read": "阅读",
   "buttons.wbw": "逐词解析",
   "buttons.delete": "删除",
+  "buttons.remove": "移除",
   "buttons.delete.all": "批量删除",
   "buttons.selected": "已经选择",
   "buttons.select": "选择",
@@ -19,6 +20,8 @@ const items = {
   "buttons.sign-out": "退出登录",
   "buttons.welcome": "欢迎遨游法的海洋",
   "buttons.click.upload": "点击上传",
+  "buttons.group.exit": "退群",
+  "buttons.group.add.member": "加人",
 };
 
 export default items;

dashboard/src/locales/zh-Hans/forms.ts

@@ -40,6 +40,8 @@ const items = {
   "forms.fields.parent.tooltip": "最长为 256个字符",
   "forms.fields.case.label": "格位",
   "forms.fields.case.tooltip": "语法信息参见……",
+  "forms.fields.user.label": "用户",
+  "forms.message.user.required": "请选择用户",
 };
 
 export default items;

dashboard/src/pages/studio/group/show.tsx

@@ -1,3 +1,4 @@
+import { useIntl } from "react-intl";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { Button, Card } from "antd";
@@ -10,6 +11,7 @@ import GroupMember from "../../../components/group/GroupMember";
 import GoBack from "../../../components/studio/GoBack";
 
 const Widget = () => {
+  const intl = useIntl();
   const { studioname, groupid } = useParams(); //url 参数
   const [title, setTitle] = useState("loading");
   useEffect(() => {
@@ -22,7 +24,7 @@ const Widget = () => {
       title={<GoBack to={`/studio/${studioname}/group/list`} title={title} />}
       extra={
         <Button type="link" danger>
-          退群
+          {intl.formatMessage({ id: "buttons.group.exit" })}
         </Button>
       }
     >
@@ -31,7 +33,7 @@ const Widget = () => {
           <GroupFile groupid={groupid} />
         </Col>
         <Col flex="400px">
-          <GroupMember groupid={groupid} />
+          <GroupMember groupId={groupid} />
         </Col>
       </Row>
     </Card>