前端结构调整以及支持版本删除 link #36

frontend/src/components/Plugin/EditForm/EditPluginInfoForm.tsx

@@ -8,6 +8,11 @@ import {PluginInfoFormParams} from "../EditPluginForm";
 type LayoutType = Parameters<typeof ProForm>[0]['layout'];
 
 export default function(props:PluginInfoFormParams) {
+    const {refresh} = props
+    const doRefresh = ()=>{
+        if(refresh) refresh()
+    }
+    const {status} = props.info
     const {id} = props.info
     const [formLayout ] = useState<LayoutType>('horizontal');
     const history = useHistory()
@@ -22,9 +27,10 @@ export default function(props:PluginInfoFormParams) {
         try{
             await axios.patch('/v1/admin/setstate',{
                 pluginId:props.info.id,
-                state:2
+                state:status==='Accepted'?1:2
             })
-            message.success('切换状态成功');
+            message.success('切换状态成功')
+            doRefresh()
         }catch (err) {
             message.error(err.response.data.message)
         }
@@ -46,7 +52,8 @@ export default function(props:PluginInfoFormParams) {
                         name:values.name,
                         info:values.info
                     })
-                    message.success('提交成功');
+                    message.success('提交成功')
+                    doRefresh()
                 }catch (err) {
                     message.error(err.response.data.message)
                 }
@@ -55,7 +62,7 @@ export default function(props:PluginInfoFormParams) {
                 render: (props, doms) => {
                     return [
                         <Button key={"status"} htmlType="button" onClick={() => setStatus()}>
-                            设置状态为启用(admin)
+                            设置状态为{status==='Accepted'?"禁用":"启用"}(admin)
                         </Button>,
                         <Button key={"preview"} htmlType="button" onClick={() => history.push('/app/info/'+id)}>
                             查看该插件信息

frontend/src/components/Plugin/EditForm/PluginVersionControlForm.tsx

@@ -1,42 +1,16 @@
-import {Button, Form, Input, message, Upload} from "antd";
 import ProCard from "@ant-design/pro-card";
-import React, {useState} from "react";
+import React from "react";
 import {PluginInfoFormParams} from "../EditPluginForm";
-import {UploadOutlined} from "@ant-design/icons";
-import axios from "axios";
 import VersionList from "./VersionControl/VersionList";
+import VersionCreate from "./VersionControl/VersionCreate";
 
 export default function(props:PluginInfoFormParams) {
-    const {id} = props.info
-    const [hasPluginVersion, setHasPluginVersion] = useState(false)
-    const [form] = Form.useForm();
-    const [version, setVersion] = useState("")
-    const onFinish = async (values: any) => {
-        try{
-            await axios.put("/v1/plugins/"+id+"/"+values.version)
-            setVersion(values.version)
-            setHasPluginVersion(true)
-        }catch (e) {
-            message.error(e.response.data.message)
-        }
-    };
-
+    const {refresh} = props
+    const doRefresh = ()=>{
+        if(refresh) refresh()
+    }
     return <ProCard style={{ marginTop: 8 }} loading={props.loading}>
-        <VersionList {...props}/>
-        <Form form={form} onFinish={onFinish}>
-            <Form.Item
-                label="版本号"
-                name="version"
-                rules={[{ required: true, message: '请输入版本号!' }]}>
-                <Input disabled={hasPluginVersion} placeholder="输入版本号" />
-            </Form.Item>
-            {hasPluginVersion?
-                <Upload
-                action={"/v1/plugins/"+id+"/"+version+"/test.zip"}
-                method={"put"}
-            >
-                <Button icon={<UploadOutlined />}>点击上传</Button>
-            </Upload>:<Button  htmlType="submit">确定</Button>}
-        </Form>
+        <VersionList refresh={doRefresh} {...props}/>
+        <VersionCreate refresh={doRefresh} {...props}/>
     </ProCard>
 }

frontend/src/components/Plugin/EditForm/VersionControl/FileList.tsx

@@ -2,8 +2,9 @@ import {useEffect, useState} from "react";
 import axios from "axios";
 
 export interface VersionFilesProps{
-    id:string,
+    id:string
     version:string
+    refresh?:()=>void
 }
 export default function(props:VersionFilesProps){
     const [fileList, setFileList] = useState(Array<string>())

frontend/src/components/Plugin/EditForm/VersionControl/VersionCreate.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import {Modal, Button, Form, Input, message} from 'antd';
+import {PluginInfoFormParams} from "../../EditPluginForm";
+import axios from "axios";
+export default function(props:PluginInfoFormParams) {
+    const [form] = Form.useForm();
+    const [isModalVisible, setIsModalVisible] = useState(false);
+
+    const showModal = () => {
+        setIsModalVisible(true);
+    };
+
+    const handleOk = () => {
+        setIsModalVisible(false);
+    };
+
+    const handleCancel = () => {
+        setIsModalVisible(false);
+    };
+
+    const onFinish = async (values: any) => {
+        try{
+            await axios.put("/v1/plugins/"+props.info.id+"/"+values.version)
+            setIsModalVisible(false)
+            if(props.refresh) {
+                props.refresh()
+            }
+        }catch (e) {
+            message.error(e.response.data.message)
+        }
+    };
+
+    return (
+        <>
+            <Button type="primary" onClick={showModal}>
+                添加新版本
+            </Button>
+            <Modal title="请输入版本号" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} footer={null}>
+                <Form form={form} onFinish={onFinish}>
+                    <Form.Item
+                        label="版本号"
+                        name="version"
+                        rules={[{ required: true, message: '请输入版本号!' }]}>
+                        <Input placeholder="输入版本号" />
+                    </Form.Item>
+                    <Button  htmlType="submit">确定</Button>
+                </Form>
+            </Modal>
+        </>
+    );
+};

frontend/src/components/Plugin/EditForm/VersionControl/VersionList.tsx

@@ -4,9 +4,14 @@ import axios from "axios";
 import {Collapse} from "antd";
 import CollapsePanel from "antd/es/collapse/CollapsePanel";
 import FileList from "./FileList";
+import VersionOperation from "./VersionOperation";
 
 export default function(props:PluginInfoFormParams){
     const [versionList,setVersionList] = useState(Array<string>())
+    const {refresh} = props
+    const doRefresh = ()=>{
+        if(refresh) refresh()
+    }
     useEffect( ()=>{
         axios.get("/v1/plugins/"+props.info.id+"/versionList").then(res=>setVersionList(res.data.response))
     },[])
@@ -19,7 +24,8 @@ export default function(props:PluginInfoFormParams){
         <Collapse defaultActiveKey={[]} onChange={callback}>
             {versionList.map((item,index)=>{
                 return <CollapsePanel header={item} key={index}>
-                    <FileList id={props.info.id} version={item}/>
+                    <FileList refresh={doRefresh} id={props.info.id} version={item}/>
+                    <VersionOperation refresh={doRefresh} id={props.info.id} version={item}/>
                 </CollapsePanel>
             })}
         </Collapse>

frontend/src/components/Plugin/EditForm/VersionControl/VersionOperation.tsx

@@ -0,0 +1,53 @@
+import {VersionFilesProps} from "./FileList";
+
+import {Modal, Button, Space, message} from 'antd';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import axios from "axios";
+
+const { confirm } = Modal;
+
+function showConfirm() {
+    confirm({
+        title: 'Do you Want to delete these items?',
+        icon: <ExclamationCircleOutlined />,
+        content: 'Some descriptions',
+        onOk() {
+            console.log('OK');
+        },
+        onCancel() {
+            console.log('Cancel');
+        },
+    });
+}
+
+export default function (props:VersionFilesProps){
+    const showDeleteConfirm = () => confirm({
+        title: '你确认要删除'+props.version+'版本吗？',
+        icon: <ExclamationCircleOutlined />,
+        content: '删除该版本同时会将该版本下所有文件删除。',
+        okText: '确认',
+        okType: 'danger',
+        cancelText: '取消',
+        onOk: async ()=>{
+            try{
+                await axios.delete("/v1/plugins/"+props.id+"/"+props.version)
+                message.success("删除成功")
+                if(props.refresh) {
+                    props.refresh()
+                }
+            }catch (e) {
+                message.error(e.response.data.message)
+            }
+        },
+        onCancel() {
+            console.log('Cancel');
+        },
+    });
+    return (
+        <Space wrap>
+            <Button onClick={showConfirm}>新增版本文件</Button>
+            <Button onClick={showDeleteConfirm} type="dashed">
+                删除版本
+            </Button>
+        </Space>)
+}

frontend/src/components/Plugin/EditPluginForm.tsx

@@ -1,16 +1,21 @@
 import React from "react";
-import {BasicPluginInfo} from "../../models/Plugin";
+import {PluginInfo} from "../../models/Plugin";
 import EditPluginInfoForm from "./EditForm/EditPluginInfoForm";
 import PluginVersionControlForm from "./EditForm/PluginVersionControlForm";
 
 export interface PluginInfoFormParams {
     loading:boolean
-    info:BasicPluginInfo
+    info:PluginInfo
+    refresh ?: ()=>void
 }
 
 export default function(props:PluginInfoFormParams) {
+    const {refresh} = props
+    const doRefresh = ()=>{
+        if(refresh) refresh()
+    }
     return <>
-        <EditPluginInfoForm {...props}/>
-        <PluginVersionControlForm {...props}/>
+        <EditPluginInfoForm refresh={doRefresh} {...props}/>
+        <PluginVersionControlForm refresh={doRefresh} {...props}/>
     </>
 }

frontend/src/scenes/app/pages/developer/EditPluginPage.tsx

@@ -3,8 +3,8 @@ import {PageContainer} from "@ant-design/pro-layout";
 import axios from "axios";
 import PluginNotFound from "../../../../components/Plugin/PluginNotFound";
 import EditPluginForm from "../../../../components/Plugin/EditPluginForm";
-
 export default (props:any) => {
+    const [key, setKey] = useState(0)
     const id = props.match.params.id
     const [success, setSuccess] = useState(true)
     const [loading, setLoading] = useState(true)
@@ -16,23 +16,25 @@ export default (props:any) => {
         status: "Accepted",
     })
     console.log(id)
-    useEffect(()=>{
+    const doRefresh = ()=>{
+        setKey(key+1)
         axios.get('/v1/plugins/'+id).then((res)=>{
             setData(res.data.response)
             setLoading(false)
             console.log(data)
         }).catch(()=>{
             setSuccess(false)
         })
-    },[])
+    }
+    useEffect(doRefresh,[])
 
     return (
         <PageContainer
             title={"编辑插件"}
             waterMarkProps={{
                 content: '',
             }}>
-            {success?<EditPluginForm loading={loading} info={data}/>:<PluginNotFound/>}
+            {success?<EditPluginForm key={key} refresh={doRefresh} loading={loading} info={data}/>:<PluginNotFound/>}
         </PageContainer>
     );
 };