finish first admin frontend

2026-05-09 18:27:56 +08:00 · 2021-11-29 12:10:54 +08:00
parent 96a49fc78c
commit 82a13ceb66
10 changed files with 123 additions and 31 deletions
@@ -31,3 +31,8 @@ export async function delSubscribe(groupNumber: string, platformName: string, ta
  const res = await axios.delete(`${baseUrl}subs`, {params: {groupNumber, platformName, target}});
  return res.data;
 }
+
+export async function updateSubscribe(groupNumber: string, req: SubscribeConfig) {
+  return axios.patch(`${baseUrl}subs`, req, {params: {groupNumber}})
+    .then(res => res.data);
+}
@@ -1,9 +1,9 @@
-import { Form, Input, Modal, Select, Tag } from 'antd';
-import React, { useContext, useState } from "react";
-import { addSubscribe, getTargetName } from 'src/api/config';
-import { InputTag } from 'src/component/inputTag';
-import { GlobalConfContext } from "src/utils/context";
-import { CategoryConfig } from 'src/utils/type';
+import {Form, Input, Modal, Select, Tag} from 'antd';
+import React, {useContext, useEffect, useState} from "react";
+import {addSubscribe, getTargetName, updateSubscribe} from 'src/api/config';
+import {InputTag} from 'src/component/inputTag';
+import {GlobalConfContext} from "src/utils/context";
+import {CategoryConfig, SubscribeConfig} from 'src/utils/type';

 interface InputTagCustomProp {
  value?: Array<string>,
@@ -18,6 +18,11 @@ function InputTagCustom(prop: InputTagCustomProp) {
      prop.onChange(newVal);
    }
  }
+  useEffect(() => {
+    if (prop.value) {
+      setValue(prop.value);
+    }
+  }, [prop.value])
  return (
    <>
      {
@@ -38,14 +43,18 @@ interface AddModalProp {
  groupNumber: string,
  setShowModal: (s: boolean) => void,
  refresh: () => void
+  initVal?: SubscribeConfig
 }
-export function AddModal(prop: AddModalProp) {
+export function AddModal({
+  showModal, groupNumber, setShowModal, refresh, initVal
+}: 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 [ inited, setInited ] = useState(false);
  const changePlatformSelect = (platform: string) => {
    setHasTarget(_ => platformConf[platform].hasTarget);
    setCategories(_ => platformConf[platform].categories);
@@ -74,23 +83,42 @@ export function AddModal(prop: AddModalProp) {
    if (newVal.target === '') {
      newVal.target = 'default'
    }
-    addSubscribe(prop.groupNumber, newVal)
-    .then(() => {
-      setConfirmLoading(false);
-      prop.setShowModal(false);
-      prop.refresh();
-      });
+    if (initVal) { // patch
+      updateSubscribe(groupNumber, newVal)
+        .then(() => {
+          setConfirmLoading(false);
+          setShowModal(false);
+          form.resetFields();
+          refresh();
+        });
+    } else {
+      addSubscribe(groupNumber, newVal)
+      .then(() => {
+        setConfirmLoading(false);
+        setShowModal(false);
+        form.resetFields();
+        refresh();
+        });
+    }
  }
  const handleModleFinish = () => {
    form.submit();
    setConfirmLoading(() => true);
  }
-
-  return <Modal title="添加订阅" visible={prop.showModal} 
-    confirmLoading={confirmLoading} onCancel={() => prop.setShowModal(false)}
+  useEffect(() => {
+    if (initVal && !inited) {
+      const platformName = initVal.platformName;
+      setHasTarget(platformConf[platformName].hasTarget);
+      setCategories(platformConf[platformName].categories);
+      setEnableTag(platformConf[platformName].enabledTag);
+      setInited(true)
+      form.setFieldsValue(initVal)
+    }
+  }, [initVal, form, platformConf, inited])
+  return <Modal title="添加订阅" visible={showModal} 
+    confirmLoading={confirmLoading} onCancel={() => setShowModal(false)}
    onOk={handleModleFinish}>
-    <Form form={form} labelCol={{ span: 6 }} name="b" onFinish={handleSubmit}
-      initialValues={{tags: [], cats: []}}>
+    <Form form={form} labelCol={{ span: 6 }} name="b" onFinish={handleSubmit} >
      <Form.Item label="平台" name="platformName" rules={[]}>
        <Select style={{ width: '80%' }} onChange={changePlatformSelect}>
          {Object.keys(platformConf).map(platformName => 
@@ -18,6 +18,11 @@ export function InputTag(prop: InputTagProp) {
  const [ editInputValue, setEditInputValue ] = useState('');
  const inputRef = useRef(null as any);
  const editInputRef = useRef(null as any);
+  useEffect(() => {
+    if (prop.value) {
+      setValue(prop.value);
+    }
+  }, [prop.value])
  useEffect(() => {
    if (inputVisible) {
      inputRef.current.focus()
@@ -1,10 +1,11 @@
-import {CopyOutlined, DeleteOutlined} from '@ant-design/icons';
+import {CopyOutlined, DeleteOutlined, EditOutlined} from '@ant-design/icons';
 import {Card, Col, Form, message, Popconfirm, Select, Tag, Tooltip} from 'antd';
 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';
+import {AddModal} from './addSubsModal';

 interface CopyModalProp {
  setShowModal: (modalShow: boolean) => void
@@ -30,6 +31,7 @@ function CopyModal({setShowModal,config,
      setConfirmLoading(true)
      postReqs(selectedGroups, config).then(() => {
        setConfirmLoading(false)
+        setShowModal(false)
        return reload() 
      })
    }
@@ -57,6 +59,7 @@ interface SubscribeCardProp {
 export function SubscribeCard({groupNumber, config, reload, groupSubscribes}: SubscribeCardProp) {
  const globalConf = useContext(GlobalConfContext);
  const [showModal, setShowModal] = useState(false)
+  const [showEditModal, setShowEditModal] = useState(false)
  const platformConf = globalConf.platformConf[config.platformName] as PlatformConfig;
  const handleDelete = (groupNumber: string, platformName: string, target: string) => () => {
    delSubscribe(groupNumber, platformName, target).then(() => {
@@ -67,13 +70,16 @@ export function SubscribeCard({groupNumber, config, reload, groupSubscribes}: Su
  <Col span={6} key={`${config.platformName}-${config.target}`}> 
    <Card title={`${platformConf.name} - ${config.targetName}`}
      actions={[
+        <Tooltip title="编辑">
+          <EditOutlined onClick={()=>{setShowEditModal(state => !state)}}/>
+        </Tooltip>,
+        <Tooltip title="添加到其他群">
+          <CopyOutlined onClick={()=>{setShowModal(state => !state)}}/>
+        </Tooltip>,
        <Popconfirm title={`确定要删除 ${platformConf.name} - ${config.targetName}`}
          onConfirm={handleDelete(groupNumber, config.platformName, config.target || 'default')}>
          <Tooltip title="删除" ><DeleteOutlined /></Tooltip>
        </Popconfirm>, 
-        <Tooltip title="添加到其他群">
-          <CopyOutlined onClick={()=>{setShowModal(state => !state)}}/>
-        </Tooltip>
        ]}>
      <Form labelCol={{ span: 6 }}>
      <Form.Item label="订阅类型">
@@ -89,6 +95,8 @@ export function SubscribeCard({groupNumber, config, reload, groupSubscribes}: Su
    </Card>
    <CopyModal setShowModal={setShowModal} reload={reload} currentGroupNumber={groupNumber}
      showModal={showModal} config={config} groups={groupSubscribes}/>
+    <AddModal showModal={showEditModal} setShowModal={setShowEditModal} 
+      groupNumber={groupNumber} refresh={reload} initVal={config}/>
  </Col>
  )
 }
@@ -3,7 +3,7 @@ import React, {ReactElement, useEffect, useState} from "react";
 import {getSubscribe} from 'src/api/config';
 import {SubscribeCard} from 'src/component/subscribeCard';
 import {SubscribeResp} from 'src/utils/type';
-import {AddModal} from './AddSubsModal';
+import {AddModal} from 'src/component/addSubsModal';

 interface ConfigPageProp {
  tab: string
@@ -34,11 +34,11 @@ export function ConfigPage(prop: ConfigPageProp) {
    for (let key of Object.keys(configData)) {
      let value = configData[key];
      groups.push(
-        <Collapse.Panel header={
+        <Collapse.Panel key={key} 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((subs) => <SubscribeCard
+            {value.subscribes.map((subs, idx) => <SubscribeCard key={idx}
              groupNumber={key} config={subs} groupSubscribes={configData} reload={loadData}
              />)}
          </Row>