From 4c9f5ec5f2b988e9c57b90d66f0a8ccec3cdc578 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 17 Dec 2021 16:36:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E5=B1=9E=E6=80=A7=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shared/components/FastForm/index.tsx          | 19 +++--
 shared/index.tsx                              |  1 +
 shared/model/group.ts                         | 21 ++++++
 .../GroupDetail/Panel/GroupPanelTree.tsx      | 26 +++++++
 .../modals/GroupDetail/Panel/index.tsx        |  2 +-
 .../modals/GroupPanel/CreateGroupPanel.tsx    |  6 +-
 .../modals/GroupPanel/ModifyGroupPanel.tsx    | 69 +++++++++++++++++++
 .../components/modals/GroupPanel/helper.ts    | 18 ++++-
 web/src/components/modals/GroupPanel/types.ts |  2 +-
 9 files changed, 153 insertions(+), 11 deletions(-)
 create mode 100644 web/src/components/modals/GroupPanel/ModifyGroupPanel.tsx

diff --git a/shared/components/FastForm/index.tsx b/shared/components/FastForm/index.tsx
index 577803f0..ddad647d 100644
--- a/shared/components/FastForm/index.tsx
+++ b/shared/components/FastForm/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { useFormik } from 'formik';
 import _isNil from 'lodash/isNil';
 import _fromPairs from 'lodash/fromPairs';
@@ -22,6 +22,7 @@ export interface FastFormProps {
   schema?: ObjectSchema<any>; // yup schame object 用于表单校验
   layout?: 'horizontal' | 'vertical'; // 布局方式(默认水平)
   submitLabel?: string; // 提交按钮的标签名
+  initialValues?: any;
   onSubmit: (values: any) => Promise<void> | void; // 点击提交按钮的回调
   onChange?: (values: any) => void; // 数据更新回调
 }
@@ -32,13 +33,21 @@ export interface FastFormProps {
  */
 export const FastForm: React.FC<FastFormProps> = React.memo((props) => {
   const initialValues = useMemo(() => {
-    return _fromPairs(
-      props.fields.map((field) => [field.name, field.defaultValue ?? ''])
-    );
-  }, [props.fields]);
+    return {
+      ..._fromPairs(
+        props.fields.map((field) => [field.name, field.defaultValue ?? ''])
+      ),
+      ...props.initialValues,
+    };
+  }, [props.fields, props.initialValues]);
 
   const [loading, setLoading] = useState(false);
 
+  useLayoutEffect(() => {
+    // 加载时提交一次initialValues
+    typeof props.onChange === 'function' && props.onChange(initialValues);
+  }, []);
+
   const formik = useFormik({
     initialValues,
     validationSchema: props.schema,
diff --git a/shared/index.tsx b/shared/index.tsx
index 283a14a0..965594c7 100644
--- a/shared/index.tsx
+++ b/shared/index.tsx
@@ -110,6 +110,7 @@ export {
   applyGroupInvite,
   modifyGroupField,
   createGroupPanel,
+  modifyGroupPanel,
   deleteGroupPanel,
 } from './model/group';
 export type { GroupPanel, GroupInfo, GroupBasicInfo } from './model/group';
diff --git a/shared/model/group.ts b/shared/model/group.ts
index 11faee10..2396f05f 100644
--- a/shared/model/group.ts
+++ b/shared/model/group.ts
@@ -170,6 +170,27 @@ export async function createGroupPanel(
   });
 }
 
+/**
+ * 创建群组面板
+ */
+export async function modifyGroupPanel(
+  groupId: string,
+  panelId: string,
+  options: {
+    name: string;
+    parentId?: string;
+    provider?: string;
+    pluginPanelName?: string;
+    meta?: Record<string, unknown>;
+  }
+) {
+  await request.post('/api/group/modifyGroupPanel', {
+    ...options,
+    groupId,
+    panelId,
+  });
+}
+
 /**
  * 删除群组面板
  * @param groupId 群组Id
diff --git a/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx b/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx
index bbf0ce0e..28eb6c63 100644
--- a/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx
+++ b/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx
@@ -10,6 +10,8 @@ import type { DataNode } from 'antd/lib/tree';
 import { buildTreeDataWithGroupPanel } from './utils';
 import { Icon } from '@iconify/react';
 import { useGroupPanelTreeDrag } from './useGroupPanelTreeDrag';
+import { closeModal, openModal } from '@/components/Modal';
+import { ModalModifyGroupPanel } from '../../GroupPanel/ModifyGroupPanel';
 
 interface GroupPanelTree {
   groupId: string;
@@ -25,6 +27,19 @@ export const GroupPanelTree: React.FC<GroupPanelTree> = React.memo((props) => {
     [props.groupPanels]
   );
 
+  const handleModifyPanel = useCallback(
+    (panelId: string) => {
+      const key = openModal(
+        <ModalModifyGroupPanel
+          groupId={props.groupId}
+          groupPanelId={panelId}
+          onSuccess={() => closeModal(key)}
+        />
+      );
+    },
+    [props.groupId]
+  );
+
   const handleDeletePanel = useCallback(
     (panelId: string, panelName: string, isGroup: boolean) => {
       showAlert({
@@ -47,6 +62,17 @@ export const GroupPanelTree: React.FC<GroupPanelTree> = React.memo((props) => {
         <div className="flex group">
           <span>{node.title}</span>
           <div className="opacity-0 group-hover:opacity-100">
+            <Button
+              type="text"
+              size="small"
+              icon={<Icon className="anticon" icon="mdi:pencil-outline" />}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                handleModifyPanel(String(node.key));
+              }}
+            />
+
             <Button
               type="text"
               size="small"
diff --git a/web/src/components/modals/GroupDetail/Panel/index.tsx b/web/src/components/modals/GroupDetail/Panel/index.tsx
index c6c5f97f..9ae2f1b9 100644
--- a/web/src/components/modals/GroupDetail/Panel/index.tsx
+++ b/web/src/components/modals/GroupDetail/Panel/index.tsx
@@ -52,7 +52,7 @@ export const GroupPanel: React.FC<{
     const key = openModal(
       <ModalCreateGroupPanel
         groupId={groupId}
-        onCreateSuccess={() => {
+        onSuccess={() => {
           closeModal(key);
           isEditingRef.current = false;
         }}
diff --git a/web/src/components/modals/GroupPanel/CreateGroupPanel.tsx b/web/src/components/modals/GroupPanel/CreateGroupPanel.tsx
index 89f32266..b7659db4 100644
--- a/web/src/components/modals/GroupPanel/CreateGroupPanel.tsx
+++ b/web/src/components/modals/GroupPanel/CreateGroupPanel.tsx
@@ -28,7 +28,7 @@ const schema = createFastFormSchema({
  */
 export const ModalCreateGroupPanel: React.FC<{
   groupId: string;
-  onCreateSuccess: () => void;
+  onSuccess?: () => void;
 }> = React.memo((props) => {
   const [currentValues, setValues] = useState<Partial<GroupPanelValues>>({});
 
@@ -36,9 +36,9 @@ export const ModalCreateGroupPanel: React.FC<{
     async (values: GroupPanelValues) => {
       await createGroupPanel(props.groupId, buildDataFromValues(values));
       showToasts(t('创建成功'), 'success');
-      props.onCreateSuccess();
+      typeof props.onSuccess === 'function' && props.onSuccess();
     },
-    [props.groupId, props.onCreateSuccess]
+    [props.groupId, props.onSuccess]
   );
 
   const fields = useGroupPanelFields(props.groupId, currentValues);
diff --git a/web/src/components/modals/GroupPanel/ModifyGroupPanel.tsx b/web/src/components/modals/GroupPanel/ModifyGroupPanel.tsx
new file mode 100644
index 00000000..ecf54642
--- /dev/null
+++ b/web/src/components/modals/GroupPanel/ModifyGroupPanel.tsx
@@ -0,0 +1,69 @@
+import { LoadingSpinner } from '@/components/LoadingSpinner';
+import React, { useEffect, useLayoutEffect, useState } from 'react';
+import {
+  t,
+  useAsyncRequest,
+  modifyGroupPanel,
+  createFastFormSchema,
+  fieldSchema,
+  showToasts,
+  useGroupPanel,
+} from 'tailchat-shared';
+import { ModalWrapper } from '../../Modal';
+import { WebFastForm } from '../../WebFastForm';
+import { buildDataFromValues, pickValuesFromGroupPanelInfo } from './helper';
+import type { GroupPanelValues } from './types';
+import { useGroupPanelFields } from './useGroupPanelFields';
+import _omit from 'lodash/omit';
+
+const schema = createFastFormSchema({
+  name: fieldSchema
+    .string()
+    .required(t('面板名不能为空'))
+    .max(20, t('面板名过长')),
+  type: fieldSchema.string().required(t('面板类型不能为空')),
+});
+
+/**
+ * 修改群组面板
+ */
+export const ModalModifyGroupPanel: React.FC<{
+  groupId: string;
+  groupPanelId: string;
+  onSuccess?: () => void;
+}> = React.memo((props) => {
+  const groupPanelInfo = useGroupPanel(props.groupId, props.groupPanelId);
+  const [currentValues, setValues] = useState<Partial<GroupPanelValues>>({});
+
+  const [, handleSubmit] = useAsyncRequest(
+    async (values: GroupPanelValues) => {
+      await modifyGroupPanel(
+        props.groupId,
+        props.groupPanelId,
+        _omit(buildDataFromValues(values), 'type') // 发送时不传type
+      );
+      showToasts(t('修改成功'), 'success');
+      typeof props.onSuccess === 'function' && props.onSuccess();
+    },
+    [props.groupId, props.groupPanelId, props.onSuccess]
+  );
+
+  const fields = useGroupPanelFields(props.groupId, currentValues);
+
+  if (!groupPanelInfo) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <ModalWrapper title={t('创建群组面板')} style={{ maxWidth: 440 }}>
+      <WebFastForm
+        schema={schema}
+        fields={fields.filter((f) => f.type !== 'type')} // 变更时不显示类型
+        initialValues={pickValuesFromGroupPanelInfo(groupPanelInfo)}
+        onChange={setValues}
+        onSubmit={handleSubmit}
+      />
+    </ModalWrapper>
+  );
+});
+ModalModifyGroupPanel.displayName = 'ModalModifyGroupPanel';
diff --git a/web/src/components/modals/GroupPanel/helper.ts b/web/src/components/modals/GroupPanel/helper.ts
index 5f74dd10..4da63893 100644
--- a/web/src/components/modals/GroupPanel/helper.ts
+++ b/web/src/components/modals/GroupPanel/helper.ts
@@ -1,5 +1,5 @@
 import { findPluginPanelInfoByName } from '@/utils/plugin-helper';
-import { GroupPanelType } from 'tailchat-shared';
+import { GroupPanel, GroupPanelType } from 'tailchat-shared';
 import type { GroupPanelValues } from './types';
 
 /**
@@ -32,3 +32,19 @@ export function buildDataFromValues(values: GroupPanelValues) {
     meta,
   };
 }
+
+/**
+ * 从群组面板信息中获取面板属性修改相关信息
+ */
+export function pickValuesFromGroupPanelInfo(
+  groupPanelInfo: GroupPanel
+): GroupPanelValues {
+  return {
+    ...groupPanelInfo.meta,
+    name: groupPanelInfo.name,
+    type:
+      groupPanelInfo.type === GroupPanelType.PLUGIN
+        ? String(groupPanelInfo.pluginPanelName)
+        : groupPanelInfo.type,
+  };
+}
diff --git a/web/src/components/modals/GroupPanel/types.ts b/web/src/components/modals/GroupPanel/types.ts
index 95b84600..3cd1c02f 100644
--- a/web/src/components/modals/GroupPanel/types.ts
+++ b/web/src/components/modals/GroupPanel/types.ts
@@ -2,6 +2,6 @@ import type { GroupPanelType } from 'tailchat-shared';
 
 export interface GroupPanelValues {
   name: string;
-  type: string | GroupPanelType;
+  type: string | GroupPanelType.TEXT | GroupPanelType.GROUP;
   [key: string]: unknown;
 }