From 5f1abfad7dd96daccb333813ea12556e154b2262 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 17 Sep 2021 20:13:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E7=BE=A4=E7=BB=84=E9=9D=A2=E6=9D=BF=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/i18n/langs/en-US/translation.json      |  4 +-
 shared/i18n/langs/zh-CN/translation.json      |  4 +-
 shared/index.tsx                              |  1 +
 shared/model/group.ts                         | 12 ++++
 .../GroupDetail/Panel/GroupPanelTree.tsx      | 57 ++++++++++++++++++-
 .../modals/GroupDetail/Panel/index.tsx        |  1 +
 6 files changed, 75 insertions(+), 4 deletions(-)

diff --git a/shared/i18n/langs/en-US/translation.json b/shared/i18n/langs/en-US/translation.json
index 1a65eda6..6490ce0f 100644
--- a/shared/i18n/langs/en-US/translation.json
+++ b/shared/i18n/langs/en-US/translation.json
@@ -14,6 +14,7 @@
   "k249e23b9": "E-mail format is incorrect",
   "k24ccd723": "Refresh now",
   "k267cc491": "Me",
+  "k28fd9e24": "Are you sure you want to delete the panel group {{name}} and all subordinate panels",
   "k2d6cfb27": "Chat Channel",
   "k3172297b": "This feature is not yet open",
   "k31a9d6a3": "The connect to the server is broken",
@@ -133,5 +134,6 @@
   "kf7d829eb": "Wait to process",
   "kf87f3059": "Plugin Store",
   "kfa01c850": "No private message found",
-  "kfaddd61d": "Chat Service"
+  "kfaddd61d": "Chat Service",
+  "kffafc3b3": "Are you sure you want to delete the panel {{name}}"
 }
diff --git a/shared/i18n/langs/zh-CN/translation.json b/shared/i18n/langs/zh-CN/translation.json
index 6c116679..1dd23f3c 100644
--- a/shared/i18n/langs/zh-CN/translation.json
+++ b/shared/i18n/langs/zh-CN/translation.json
@@ -14,6 +14,7 @@
   "k249e23b9": "邮箱格式不正确",
   "k24ccd723": "立即刷新",
   "k267cc491": "我",
+  "k28fd9e24": "确定要删除面板组 {{name}} 以及下级的所有面板么",
   "k2d6cfb27": "聊天频道",
   "k3172297b": "该功能暂未开放",
   "k31a9d6a3": "与服务器的链接已断开",
@@ -133,5 +134,6 @@
   "kf7d829eb": "待处理",
   "kf87f3059": "插件中心",
   "kfa01c850": "找不到私信会话",
-  "kfaddd61d": "聊天服务"
+  "kfaddd61d": "聊天服务",
+  "kffafc3b3": "确定要删除面板 {{name}} 么"
 }
diff --git a/shared/index.tsx b/shared/index.tsx
index 655dfdec..81bbeaf4 100644
--- a/shared/index.tsx
+++ b/shared/index.tsx
@@ -88,6 +88,7 @@ export {
   applyGroupInvite,
   modifyGroupField,
   createGroupPanel,
+  deleteGroupPanel,
 } from './model/group';
 export type { GroupPanel, GroupInfo, GroupBasicInfo } from './model/group';
 export type { ChatMessage } from './model/message';
diff --git a/shared/model/group.ts b/shared/model/group.ts
index 1eef8ecc..11faee10 100644
--- a/shared/model/group.ts
+++ b/shared/model/group.ts
@@ -169,3 +169,15 @@ export async function createGroupPanel(
     groupId,
   });
 }
+
+/**
+ * 删除群组面板
+ * @param groupId 群组Id
+ * @param panelId 面板Id
+ */
+export async function deleteGroupPanel(groupId: string, panelId: string) {
+  await request.post('/api/group/deleteGroupPanel', {
+    groupId,
+    panelId,
+  });
+}
diff --git a/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx b/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx
index 318c6986..d5eb5b3a 100644
--- a/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx
+++ b/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx
@@ -1,14 +1,22 @@
 import React, { useCallback, useMemo, useRef } from 'react';
-import { GroupPanel as GroupPanelInfo, showToasts } from 'tailchat-shared';
-import { Tree } from 'antd';
+import {
+  deleteGroupPanel,
+  GroupPanel as GroupPanelInfo,
+  showAlert,
+  showToasts,
+  t,
+} from 'tailchat-shared';
+import { Button, Tree } from 'antd';
 import type { NodeDragEventParams } from 'rc-tree/lib/contextTypes';
 import type { DataNode, EventDataNode } from 'antd/lib/tree';
 import type { Key } from 'rc-tree/lib/interface';
 import type { AllowDrop } from 'rc-tree/lib/Tree';
 import _cloneDeep from 'lodash/cloneDeep';
 import { buildTreeDataWithGroupPanel, rebuildGroupPanelOrder } from './utils';
+import { Icon } from '@iconify/react';
 
 interface GroupPanelTree {
+  groupId: string;
   groupPanels: GroupPanelInfo[];
   onChange: (newGroupPanels: GroupPanelInfo[]) => void;
 }
@@ -22,6 +30,49 @@ export const GroupPanelTree: React.FC<GroupPanelTree> = React.memo((props) => {
     [props.groupPanels]
   );
 
+  const handleDeletePanel = useCallback(
+    (panelId: string, panelName: string, isGroup: boolean) => {
+      showAlert({
+        message: isGroup
+          ? t('确定要删除面板组 【{{name}}】 以及下级的所有面板么', {
+              name: panelName,
+            })
+          : t('确定要删除面板 【{{name}}】 么', { name: panelName }),
+        onConfirm: async () => {
+          await deleteGroupPanel(props.groupId, panelId);
+        },
+      });
+    },
+    [props.groupId]
+  );
+
+  const titleRender = useCallback(
+    (node: DataNode): React.ReactNode => {
+      return (
+        <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:trash-can-outline" />}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                handleDeletePanel(
+                  String(node.key),
+                  String(node.title),
+                  !node.isLeaf
+                );
+              }}
+            />
+          </div>
+        </div>
+      );
+    },
+    [handleDeletePanel]
+  );
+
   const handleDragStart = useCallback(
     (info: NodeDragEventParams<HTMLDivElement>) => {
       draggingNode.current = info.node;
@@ -148,7 +199,9 @@ export const GroupPanelTree: React.FC<GroupPanelTree> = React.memo((props) => {
     <Tree
       treeData={treeData}
       defaultExpandAll={true}
+      blockNode={true}
       draggable={true}
+      titleRender={titleRender}
       onDrop={handleDrop}
       // TODO: 待简化 https://github.com/react-component/tree/pull/482
       onDragStart={handleDragStart}
diff --git a/web/src/components/modals/GroupDetail/Panel/index.tsx b/web/src/components/modals/GroupDetail/Panel/index.tsx
index 447cf77c..f8e457a5 100644
--- a/web/src/components/modals/GroupDetail/Panel/index.tsx
+++ b/web/src/components/modals/GroupDetail/Panel/index.tsx
@@ -73,6 +73,7 @@ export const GroupPanel: React.FC<{
       </FullModalCommonTitle>
 
       <GroupPanelTree
+        groupId={groupId}
         groupPanels={editingGroupPanels}
         onChange={handleChange}
       />