update

admin-frontend/src/component/subscribeCard.tsx

@@ -1,55 +1,62 @@
 import {CopyOutlined, DeleteOutlined} from '@ant-design/icons';
 import {Card, Col, Form, message, Popconfirm, Select, Tag, Tooltip} from 'antd';
-import React, {ReactNode, useContext, useState} from "react";
+import Modal from 'antd/lib/modal/Modal';
+import React, {useContext, useState} from "react";
 import {addSubscribe, delSubscribe} from 'src/api/config';
 import {GlobalConfContext} from "src/utils/context";
 import {PlatformConfig, SubscribeConfig, SubscribeResp} from 'src/utils/type';
 
-interface TargetGroupSelectionProp {
+interface CopyModalProp {
+  setShowModal: (modalShow: boolean) => void
+  showModal: boolean
   config: SubscribeConfig,
   groups: SubscribeResp
-  children: ReactNode
+  currentGroupNumber: string
+  reload: () => void
 }
-
-function TargetGroupSelection({ config, groups, children }: TargetGroupSelectionProp) {
-  let [ selectedGroups, setSelectGroups ] = useState<Array<string>>([]);
-  const submitCopy = () => {
-    let promise = null
-    for (let selectGroup of selectedGroups) {
-      if (! promise) {
-        promise = addSubscribe(selectGroup, config)
-      } else {
-        promise = promise.then(() => addSubscribe(selectGroup, config))
-      }
+function CopyModal({setShowModal,config,
+    currentGroupNumber,groups,showModal,reload}: CopyModalProp) {
+  const [confirmLoading, setConfirmLoading] = useState(false)
+  const [ selectedGroups, setSelectGroups ] = useState<Array<string>>([]);
+  const postReqs = async (selectedGroups: Array<string>, config: SubscribeConfig) => {
+    for(let selectedGroup of selectedGroups) {
+      await addSubscribe(selectedGroup, config);
     }
-    if (promise) {
-      promise.then(() => message.success("复制订阅成功"))
-    }
-    return promise;
   }
-  return <>
-    <Popconfirm title={
-        <Select mode="multiple" onChange={(value: Array<string>) => setSelectGroups(value)}>
+  const handleOk = () => {
+    if (selectedGroups.length === 0) {
+      message.error("请至少选择一个目标群");
+    } else{
+      setConfirmLoading(true)
+      postReqs(selectedGroups, config).then(() => {
+        setConfirmLoading(false)
+        return reload() 
+      })
+    }
+  }
+  return <Modal title="复制订阅" visible={showModal} confirmLoading={confirmLoading}
+    onCancel={() => setShowModal(false)} onOk={handleOk}>
+        <Select mode="multiple" onChange={(value: Array<string>) => setSelectGroups(value)} 
+          style={{width: '80%'}}>
           {
-            Object.keys(groups).map((groupNumber) => 
+            Object.keys(groups).filter(groupNumber => groupNumber != currentGroupNumber)
+              .map((groupNumber) =>
               <Select.Option value={groupNumber} key={groupNumber}>
                 {`${groupNumber} - ${groups[groupNumber].name}`}
               </Select.Option>)
             }
         </Select>
-      } onConfirm={submitCopy} >
-      { children }
-    </Popconfirm>
-  </>
+    </Modal>
 }
 interface SubscribeCardProp {
   groupNumber: string
   config: SubscribeConfig
   groupSubscribes: SubscribeResp
-  reload: () => null
+  reload: () => void
 }
 export function SubscribeCard({groupNumber, config, reload, groupSubscribes}: SubscribeCardProp) {
   const globalConf = useContext(GlobalConfContext);
+  const [showModal, setShowModal] = useState(false)
   const platformConf = globalConf.platformConf[config.platformName] as PlatformConfig;
   const handleDelete = (groupNumber: string, platformName: string, target: string) => () => {
     delSubscribe(groupNumber, platformName, target).then(() => {
@@ -64,9 +71,9 @@ export function SubscribeCard({groupNumber, config, reload, groupSubscribes}: Su
           onConfirm={handleDelete(groupNumber, config.platformName, config.target || 'default')}>
           <Tooltip title="删除" ><DeleteOutlined /></Tooltip>
         </Popconfirm>, 
-        <TargetGroupSelection config={config} groups={groupSubscribes}>
-          <Tooltip title="添加到其他群"><CopyOutlined /></Tooltip>
-        </TargetGroupSelection>
+        <Tooltip title="添加到其他群">
+          <CopyOutlined onClick={()=>{setShowModal(state => !state)}}/>
+        </Tooltip>
         ]}>
       <Form labelCol={{ span: 6 }}>
       <Form.Item label="订阅类型">
@@ -80,6 +87,8 @@ export function SubscribeCard({groupNumber, config, reload, groupSubscribes}: Su
       </Form.Item>
       </Form>
     </Card>
+    <CopyModal setShowModal={setShowModal} reload={reload} currentGroupNumber={groupNumber}
+      showModal={showModal} config={config} groups={groupSubscribes}/>
   </Col>
   )
 }