update frontend

admin-frontend/src/pages/admin.tsx

@@ -1,18 +1,16 @@
 import React, { ReactElement, useContext, useEffect, useState } from "react";
 import { LoginContext, GlobalConfContext } from "../utils/context";
 import { Layout, Menu, Empty, Collapse, Card, Tag, Row, Col, Form, Tooltip, Button, Modal, Select,
-  Input} from 'antd';
+  Input, Popconfirm} from 'antd';
 import { SubscribeConfig, SubscribeResp, PlatformConfig, CategoryConfig } from '../utils/type';
-import { SettingOutlined, BugOutlined, DeleteOutlined, CopyOutlined, PlusOutlined } from '@ant-design/icons';
-import { getSubscribe, getTargetName } from '../api/config';
+import { SettingOutlined, BugOutlined, DeleteOutlined, CopyOutlined } from '@ant-design/icons';
+import { getSubscribe, getTargetName, addSubscribe, delSubscribe } from '../api/config';
 import { InputTag } from '../component/inputTag';
-import _ from "lodash";
 import './admin.css';
 
 export function Admin() {
   const { login } = useContext(LoginContext);
   const [ tab, changeTab ] = useState("manage");
-  const globalConfContext = useContext(GlobalConfContext);
   return (
   <Layout style={{ minHeight: '100vh' }}>
     <Layout.Sider className="layout-side">
@@ -21,7 +19,7 @@ export function Admin() {
       <Menu mode="inline" theme="dark" defaultSelectedKeys={[tab]}
         onClick={({key}) => changeTab(key)}>
         <Menu.Item key="manage" icon={<SettingOutlined />}>订阅管理</Menu.Item>
-        { login.type == 'admin' &&
+        { login.type === 'admin' &&
         <Menu.Item key="log" icon={<BugOutlined />}>查看日志</Menu.Item>
         }
       </Menu>
@@ -29,7 +27,7 @@ export function Admin() {
     <Layout.Content>
       <div style={{margin: '24px', background: '#fff', minHeight: '640px'}}>
       {
-        tab == 'manage' ? 
+        tab === 'manage' ? 
         <ConfigPage tab={tab}/>
         : null
       }
@@ -45,24 +43,37 @@ interface ConfigPageProp {
 function ConfigPage(prop: ConfigPageProp) {
   const [ configData, setConfigData ] = useState<SubscribeResp>({});
   const [ showModal, setShowModal ] = useState<boolean>(false);
+  const [ currentAddingGroupNumber, setCurrentAddingGroupNumber ] = useState('');
   const globalConf = useContext(GlobalConfContext);
-  useEffect(() => {
+  const loadData = () => {
     getSubscribe()
       .then(res => {
           setConfigData(_ => res);
         });
+  }
+  useEffect(() => {
+    loadData()
   }, [prop.tab]);
-  const clickNew = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const clickNew = (groupNumber: string) => (e: React.MouseEvent<HTMLButtonElement>) => {
     setShowModal(_ => true);
+    setCurrentAddingGroupNumber(groupNumber);
     e.stopPropagation();
   }
-  const genCard = (config: SubscribeConfig) => {
-    const platformConf = globalConf.platformConf[config.targetType] as PlatformConfig;
+  const handleDelete = (groupNumber: string, platformName: string, target: string) => () => {
+    delSubscribe(groupNumber, platformName, target).then(() => {
+      loadData() 
+    })
+  }
+  const genCard = (groupNumber: string) => (config: SubscribeConfig) => {
+    const platformConf = globalConf.platformConf[config.platformName] as PlatformConfig;
     return (
-    <Col span={6} key={`${config.targetType}-${config.target}`}> 
+    <Col span={6} key={`${config.platformName}-${config.target}`}> 
       <Card title={`${platformConf.name} - ${config.targetName}`}
         actions={[
-          <Tooltip title="删除"><DeleteOutlined /></Tooltip>,
+          <Popconfirm title={`确定要删除 ${platformConf.name} - ${config.targetName}`}
+            onConfirm={handleDelete(groupNumber, config.platformName, config.target || 'default')}>
+            <Tooltip title="删除" ><DeleteOutlined /></Tooltip>
+          </Popconfirm>, 
           <Tooltip title="添加到其他群"><CopyOutlined /></Tooltip>
           ]}>
         <Form labelCol={{ span: 6 }}>
@@ -87,9 +98,11 @@ function ConfigPage(prop: ConfigPageProp) {
     for (let key of Object.keys(configData)) {
       let value = configData[key];
       groups.push(
-        <Collapse.Panel header={<span>{`${key} - ${value.name}`}<Button style={{float: "right"}} onClick={clickNew}>添加</Button></span>} key={key}>
+        <Collapse.Panel header={
+          <span>{`${key} - ${value.name}`}<Button style={{float: "right"}} onClick={clickNew(key)}>添加</Button></span>
+          } key={key}>
           <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} align="middle">
-            {value.subscribes.map(genCard)}
+            {value.subscribes.map(genCard(key))}
           </Row>
         </Collapse.Panel>
         )
@@ -99,7 +112,8 @@ function ConfigPage(prop: ConfigPageProp) {
       <Collapse>
         {groups}
       </Collapse>
-      <AddModal showModal={showModal} setShowModal={(s: boolean) => setShowModal(_ => s)} />
+      <AddModal groupNumber={currentAddingGroupNumber} showModal={showModal} 
+        refresh={loadData} setShowModal={(s: boolean) => setShowModal(_ => s)} />
     </div>
     )
   }
@@ -107,7 +121,8 @@ function ConfigPage(prop: ConfigPageProp) {
 
 interface InputTagCustomProp {
   value?: Array<string>,
-  onChange?: (value: Array<string>) => void
+  onChange?: (value: Array<string>) => void,
+  disabled?: boolean
 }
 function InputTagCustom(prop: InputTagCustomProp) {
   const [value, setValue] = useState(prop.value || []);
@@ -119,27 +134,36 @@ function InputTagCustom(prop: InputTagCustomProp) {
   }
   return (
     <>
-      {value.length === 0 &&
-        <Tag color="green">全部标签</Tag>
-      }
-      <InputTag color="blue" addText="添加标签" value={value} onChange={handleSetValue} />
+      {
+        prop.disabled ? <Tag color="red">不支持标签</Tag>: 
+        <>
+        {value.length === 0 &&
+          <Tag color="green">全部标签</Tag>
+        }
+        <InputTag color="blue" addText="添加标签" value={value} onChange={handleSetValue} />
+      </>
+      } 
     </>
   )
 }
 
 interface AddModalProp {
   showModal: boolean,
-  setShowModal: (s: boolean) => void
+  groupNumber: string,
+  setShowModal: (s: boolean) => void,
+  refresh: () => void
 }
 function AddModal(prop: AddModalProp) {
   const [ confirmLoading, setConfirmLoading ] = useState<boolean>(false);
   const { platformConf } = useContext(GlobalConfContext);
   const [ hasTarget, setHasTarget ] = useState(false);
   const [ categories, setCategories ] = useState({} as CategoryConfig);
+  const [ enabledTag, setEnableTag ] = useState(false);
   const [ form ] = Form.useForm();
   const changePlatformSelect = (platform: string) => {
     setHasTarget(_ => platformConf[platform].hasTarget);
     setCategories(_ => platformConf[platform].categories);
+    setEnableTag(platformConf[platform].enabledTag)
     if (! platformConf[platform].hasTarget) {
       getTargetName(platform, 'default')
         .then(res => {
@@ -157,7 +181,19 @@ function AddModal(prop: AddModalProp) {
     }
   }
   const handleSubmit = (value: any) => {
-    console.log(value);
+    let newVal = Object.assign({}, value)
+    if (typeof newVal.tags != 'object') {
+      newVal.tags = []
+    }
+    if (newVal.target === '') {
+      newVal.target = 'default'
+    }
+    addSubscribe(prop.groupNumber, newVal)
+    .then(() => {
+      setConfirmLoading(false);
+      prop.setShowModal(false);
+      prop.refresh();
+      });
   }
   const handleModleFinish = () => {
     form.submit();
@@ -167,8 +203,9 @@ function AddModal(prop: AddModalProp) {
   return <Modal title="添加订阅" visible={prop.showModal} 
     confirmLoading={confirmLoading} onCancel={() => prop.setShowModal(false)}
     onOk={handleModleFinish}>
-    <Form form={form} labelCol={{ span: 6 }} name="b" onFinish={handleSubmit}>
-      <Form.Item label="平台" name="platformType" rules={[]}>
+    <Form form={form} labelCol={{ span: 6 }} name="b" onFinish={handleSubmit}
+      initialValues={{tags: [], categories: []}}>
+      <Form.Item label="平台" name="platformName" rules={[]}>
         <Select style={{ width: '80%' }} onChange={changePlatformSelect}>
           {Object.keys(platformConf).map(platformName => 
             <Select.Option key={platformName} value={platformName}>{platformConf[platformName].name}</Select.Option>
@@ -179,7 +216,7 @@ function AddModal(prop: AddModalProp) {
         {required: hasTarget, message: "请输入账号"},
         {validator: async (_, value) => {
           try {
-            const res = await getTargetName(form.getFieldValue('platformType'), value);
+            const res = await getTargetName(form.getFieldValue('platformName'), value);
             if (res.targetName) {
                 form.setFieldsValue({
                   targetName: res.targetName
@@ -218,7 +255,7 @@ function AddModal(prop: AddModalProp) {
         </Select>
       </Form.Item>
       <Form.Item label="订阅Tag" name="tags">
-        <InputTagCustom/>
+        <InputTagCustom disabled={!enabledTag}/>
       </Form.Item>
     </Form>
     </Modal>