update

admin-frontend/src/features/subsribeConfigManager/SubscribeManager.tsx

@@ -1,18 +1,34 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
-  Button, Empty, Space, Table, Tag,
+  Button, Empty, Message, Popconfirm, Space, Table, Tag, Typography,
 } from '@arco-design/web-react';
 import { useParams } from 'react-router-dom';
-import { useGetSubsQuery } from './subscribeConfigSlice';
+import { useDeleteSubMutation, useGetSubsQuery } from './subscribeConfigSlice';
 import { useAppSelector } from '../../app/hooks';
 import { selectPlatformConf } from '../globalConf/globalConfSlice';
 import { SubscribeConfig } from '../../utils/type';
+import SubscribeModal from './SubscribeModal';
 
 export default function SubscribeManager() {
   const { data: subs } = useGetSubsQuery();
+  const [deleteSub, { isLoading: deleteIsLoading }] = useDeleteSubMutation();
   const { groupNumber } = useParams();
   const platformConf = useAppSelector(selectPlatformConf);
 
+  const isLoading = deleteIsLoading;
+  const [showModal, setShowModal] = useState(false);
+  const [formInitVal, setFormInitVal] = useState(null as SubscribeConfig | null);
+
+  const handleNewSub = () => {
+    setFormInitVal(null);
+    setShowModal(true);
+  };
+
+  const handleEdit = (sub: SubscribeConfig) => () => {
+    setFormInitVal(sub);
+    setShowModal(true);
+  };
+
   const columns = [
     {
       title: '平台名称',
@@ -59,9 +75,20 @@ export default function SubscribeManager() {
       dataIndex: 'op',
       render: (_: any, record: SubscribeConfig) => (
         <Space>
-          <Button type="text">编辑</Button>
-          <Button type="text" status="success">复制</Button>
-          <Button type="text" status="danger" onClick={() => { console.log(record); }}>删除</Button>
+          <Button type="text" onClick={handleEdit(record)}>编辑</Button>
+          <Button type="text" status="success" onClick={() => Message.error('懒得写了')}>复制</Button>
+          <Popconfirm
+            title={`确认删除订阅 ${record.targetName} ?`}
+            onOk={() => {
+              deleteSub({
+                groupNumber: parseInt(groupNumber!, 10),
+                target: record.target,
+                platformName: record.platformName,
+              });
+            }}
+          >
+            <Button type="text" status="danger">删除</Button>
+          </Popconfirm>
         </Space>
       ),
     },
@@ -71,14 +98,21 @@ export default function SubscribeManager() {
     return (
       <>
         <span>
-          {subs[groupNumber].name}
-          {groupNumber}
+          <Typography.Title heading={3}>{subs[groupNumber].name}</Typography.Title>
+          <Typography.Text type="secondary">{groupNumber}</Typography.Text>
         </span>
-        <Button style={{ width: '90px', margin: '20px' }} type="primary">添加</Button>
+        <Button style={{ width: '90px', margin: '20px 10px' }} type="primary" onClick={handleNewSub}>添加</Button>
         <Table
           columns={columns}
           data={subs[groupNumber].subscribes}
           rowKey={(record: SubscribeConfig) => `${record.platformName}-${record.target}`}
+          loading={isLoading}
+        />
+        <SubscribeModal
+          visible={showModal}
+          setVisible={setShowModal}
+          groupNumber={groupNumber}
+          initval={formInitVal}
         />
       </>
     );

admin-frontend/src/features/subsribeConfigManager/SubscribeModal.tsx

@@ -0,0 +1,241 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Form, Input, InputTag, Modal, Select, Space, Tag,
+} from '@arco-design/web-react';
+import useForm from '@arco-design/web-react/es/Form/useForm';
+import { IconInfoCircle } from '@arco-design/web-react/icon';
+import { useAppSelector } from '../../app/hooks';
+import { selectPlatformConf } from '../globalConf/globalConfSlice';
+import { CategoryConfig, SubscribeConfig } from '../../utils/type';
+import getTargetName from '../targetName/targetNameReq';
+import { useUpdateSubMutation, useNewSubMutation } from './subscribeConfigSlice';
+
+function SubscribeTag({
+  value, onChange, disabled,
+}: {
+  value?: string[];
+  onChange?: (arg0: string[]) => void;
+  disabled?: boolean;
+}) {
+  const [valueState, setValueState] = useState(value || []);
+  const handleSetValue = (newVal: string[]) => {
+    setValueState(newVal);
+    if (onChange) {
+      onChange(newVal);
+    }
+  };
+  useEffect(() => {
+    if (value) {
+      setValueState(value);
+    }
+  }, [value]);
+
+  if (disabled) {
+    return <Tag color="gray">不支持标签</Tag>;
+  }
+  return (
+    <Space>
+      { valueState.length === 0 && <Tag color="green">全部标签</Tag> }
+      <InputTag
+        allowClear
+        placeholder="添加标签"
+        value={value}
+        onChange={handleSetValue}
+      />
+    </Space>
+  );
+}
+
+SubscribeTag.defaultProps = {
+  value: [],
+  onChange: null,
+  disabled: false,
+};
+
+interface SubscribeModalProp {
+  visible: boolean;
+  setVisible: (arg0: boolean) => void;
+  groupNumber: string;
+  initval?: SubscribeConfig | null;
+}
+
+function SubscribeModal({
+  visible, setVisible, groupNumber, initval,
+}: SubscribeModalProp) {
+  const [form] = useForm();
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const platformConf = useAppSelector(selectPlatformConf);
+  const [updateSub] = useUpdateSubMutation();
+  const [newSub] = useNewSubMutation();
+
+  const onSubmit = () => {
+    form.validate().then((value: SubscribeConfig) => {
+      const newVal = { ...value };
+      if (typeof newVal.tags !== 'object') {
+        newVal.tags = [];
+      }
+      if (typeof newVal.cats !== 'object') {
+        newVal.cats = [];
+      }
+      if (newVal.target === '') {
+        newVal.target = 'default';
+      }
+      let postPromise: Promise<any>;
+      if (initval) {
+        postPromise = updateSub({
+          groupNumber: parseInt(groupNumber, 10),
+          sub: newVal,
+        });
+      } else {
+        postPromise = newSub({
+          groupNumber: parseInt(groupNumber, 10),
+          sub: newVal,
+        });
+      }
+      setConfirmLoading(true);
+      postPromise.then(() => {
+        setConfirmLoading(false);
+        setVisible(false);
+        form.clearFields();
+      });
+    });
+  };
+
+  const [hasTarget, setHasTarget] = useState(false);
+  const [categories, setCategories] = useState({} as CategoryConfig);
+  const [enableTags, setEnableTags] = useState(false);
+
+  const setPlatformStates = (platform: string) => {
+    setHasTarget(platformConf[platform].hasTarget);
+    setCategories(platformConf[platform].categories);
+    setEnableTags(platformConf[platform].enabledTag);
+  };
+
+  const handlePlatformSelected = (platform: string) => {
+    setPlatformStates(platform);
+    form.setFieldValue('cats', []);
+    if (!platformConf[platform].hasTarget) {
+      getTargetName(platform, 'default').then((res) => {
+        form.setFieldsValue({
+          targetName: res,
+          target: '',
+        });
+      });
+    } else {
+      form.setFieldsValue({
+        targetName: '',
+        target: '',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (initval) {
+      const { platformName } = initval;
+      setPlatformStates(platformName);
+      form.setFieldsValue(initval);
+    } else {
+      form.clearFields();
+    }
+  }, [initval, form, platformConf]);
+
+  return (
+    <Modal
+      title="编辑订阅"
+      visible={visible}
+      onCancel={() => setVisible(false)}
+      confirmLoading={confirmLoading}
+      onOk={onSubmit}
+    >
+      <Form
+        form={form}
+      >
+        <Form.Item label="平台" field="platformName">
+          <Select placeholder="平台" onChange={handlePlatformSelected}>
+            { Object.keys(platformConf).map(
+              (platformName: string) => (
+                <Select.Option value={platformName} key={platformName}>
+                  {platformConf[platformName].name}
+                </Select.Option>
+              ),
+            ) }
+          </Select>
+        </Form.Item>
+        <Form.Item
+          label="帐号"
+          field="target"
+          rules={[
+            { required: hasTarget, message: '请输入账号' },
+            {
+              validator: (value, callback) => new Promise<void>((resolve) => {
+                getTargetName(form.getFieldValue('platformName'), value)
+                  .then((res) => {
+                    if (res) {
+                      form.setFieldsValue({
+                        targetName: res,
+                      });
+                      resolve();
+                    } else {
+                      form.setFieldsValue({
+                        targetName: '',
+                      });
+                      callback('账号不正确，请重新检查账号');
+                      resolve();
+                    }
+                  })
+                  .catch(() => {
+                    callback('服务器错误，请稍后再试');
+                    resolve();
+                  });
+              }),
+            },
+          ]}
+        >
+          <Input
+            disabled={!hasTarget}
+            suffix={<IconInfoCircle />}
+            placeholder={hasTarget ? '获取方式见文档' : '此平台不需要账号'}
+          />
+        </Form.Item>
+        <Form.Item label="帐号名称" field="targetName">
+          <Input disabled />
+        </Form.Item>
+        <Form.Item
+          label="订阅分类"
+          field="cats"
+          rules={[
+            {
+              required: Object.keys(categories).length > 0,
+              message: '请至少选择一个分类进行订阅',
+            },
+          ]}
+        >
+          <Select
+            mode="multiple"
+            disabled={Object.keys(categories).length === 0}
+            placeholder={
+              Object.keys(categories).length > 0
+                ? '请选择要订阅的分类'
+                : '本平台不支持分类'
+            }
+          >
+            { Object.keys(categories).length > 0
+              && Object.keys(categories).map((indexStr) => (
+                <Select.Option key={indexStr} value={parseInt(indexStr, 10)}>
+                  { categories[parseInt(indexStr, 10)] }
+                </Select.Option>
+              ))}
+          </Select>
+
+        </Form.Item>
+        <Form.Item label="标签" field="tags">
+          <SubscribeTag disabled={!enableTags} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
+SubscribeModal.defaultProps = {
+  initval: null,
+};
+export default SubscribeModal;