feat: add tag operator (#267)

Co-authored-by: mahaitao617 <[email protected]>
apache · Jan 14, 2023 · 0b0d276 · 0b0d276
1 parent 19725cf
commit 0b0d276
Show file tree

Hide file tree

Showing 11 changed files with 602 additions and 225 deletions.
diff --git a/src/index.less b/src/index.less
@@ -23,7 +23,7 @@ body,
 
 :global {
   .plug-content-wrap {
-    padding: 24px
+    padding: 24px;
   }
 
   .open {
@@ -33,11 +33,6 @@ body,
   .close {
     color: #ff586d;
   }
-
-  .ant-btn-danger {
-    background: #f5222d !important;
-    color: #fff !important;
-  }
 }
 
 :global(.ant-layout) {
@@ -79,7 +74,7 @@ ol {
 }
 
 :global {
-  .ant-table-small>.ant-table-content>.ant-table-body {
+  .ant-table-small > .ant-table-content > .ant-table-body {
     margin: 0 !important;
   }
 }
@@ -146,4 +141,4 @@ body {
   .ant-modal {
     max-width: calc(100vw - 32px);
   }
-}
+}
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
@@ -324,6 +324,10 @@
   "SHENYU.DOCUMENT.APIDOC.APIDESC": "apiDesc",
   "SHENYU.DOCUMENT.APIDOC.APISOURCE": "apiSource",
   "SHENYU.DOCUMENT.APIDOC.DOCUMENT": "document",
+  "SHENYU.DOCUMENT.TAG.NAME": "name",
+  "SHENYU.DOCUMENT.TAG.DESC": "tagDesc",
+  "SHENYU.DOCUMENT.TAG.PARENT.ID": "parentTagId",
+  "SHENYU.DOCUMENT.TAG.ext": "ext",
   "SHENYU.COMMON.REQUIRED": "Required",
   "SHENYU.COMMON.MAX.LENGTH": "Max Length",
   "SHENYU.COMMON.MAX.EXAMPLE": "Example",

diff --git a/src/locales/zh-CN.json b/src/locales/zh-CN.json
@@ -312,6 +312,10 @@
   "SHENYU.DOCUMENT.APIDOC.APIDESC": "api描述",
   "SHENYU.DOCUMENT.APIDOC.APISOURCE": "api来源",
   "SHENYU.DOCUMENT.APIDOC.DOCUMENT": "文档说明",
+  "SHENYU.DOCUMENT.TAG.NAME": "标签名称",
+  "SHENYU.DOCUMENT.TAG.DESC": "标签描述",
+  "SHENYU.DOCUMENT.TAG.EXT": "标签扩展信息",
+  "SHENYU.DOCUMENT.TAG.PARENT.ID": "父节点id",
   "SHENYU.COMMON.REQUIRED": "必填",
   "SHENYU.COMMON.MAX.LENGTH": "最大长度",
   "SHENYU.COMMON.MAX.EXAMPLE": "示例值",

diff --git a/src/routes/Document/ApiDoc.js b/src/routes/Document/ApiDoc.js
@@ -15,38 +15,30 @@
  * limitations under the License.
  */
 
+/* eslint-disable no-unused-expressions */
+
 import { Col, Row, Card, BackTop, Empty, message } from "antd";
 import React, { useEffect, useState } from "react";
 import SearchApi from "./components/SearchApi";
-import AddAndUpdateApiDoc from "./components/AddAndUpdateApiDoc";
 import ApiInfo from "./components/ApiInfo";
-import { getDocMenus, getApiDetail, addApi, updateApi, deleteApi, getApiMockRequest} from "../../services/api";
+import TagInfo from "./components/TagInfo";
+import {
+  getDocMenus,
+  getApiDetail,
+  deleteApi,
+  getTagDetail,
+  deleteTag,
+  getApiMockRequest
+} from "../../services/api";
 import ApiContext from "./components/ApiContext";
 
 function ApiDoc() {
+  const [tagDetail, setTagDetail] = useState({});
   const [apiDetail, setApiDetail] = useState({});
   const [apiData, setApiData] = useState({});
   const [apiMock, setApiMock] = useState({});
-  const [open, setOpen] = useState(false);
-  const [flag, setflag] = useState('add');
 
-  const [initialValue, setInitialValue] = useState({
-    id: '',
-    contextPath: '',
-    apiPath: '',
-    httpMethod: '',
-    consume: '',
-    produce: '',
-    version: '',
-    rpcType: '',
-    state: '',
-    ext: '',
-    apiOwner: '',
-    apiDesc: '',
-    apiSource: '',
-    document: '',
-    tagIds: []
-  })
+  const searchApiRef = React.createRef();
 
   const initData = async () => {
     const { code, data = {} } = await getDocMenus();
@@ -69,69 +61,74 @@ function ApiDoc() {
       setApiData(data);
     }
   };
+
   const handleSelectNode = async (_, e) => {
     const {
       node: {
-        props: {
-          dataRef: { id, isLeaf }
-        }
+        props: { id, isLeaf }
       }
     } = e;
-    if (!isLeaf) {
-      return;
+    if (isLeaf) {
+      const { code, message: msg, data } = await getApiDetail(id);
+      if (code !== 200) {
+        message.error(msg);
+        return;
+      }
+      setApiDetail(data);
+      setTagDetail({});
+
+      const {
+        code: mockCode,
+        message: mockMsg,
+        data: mockData
+      } = await getApiMockRequest(id);
+      if (mockCode !== 200) {
+        message.error(mockMsg);
+        return;
+      }
+      setApiMock(mockData);
+    } else {
+      const { code, message: msg, data } = await getTagDetail(id);
+      if (code !== 200) {
+        message.error(msg);
+        return;
+      }
+      setTagDetail(data);
+      setApiDetail({});
+    }
+  };
+
+  const handleDelete = async () => {
+    let res = {};
+    if (tagDetail.id) {
+      res = await deleteTag([tagDetail.id]);
     }
-    if (!id) {
-      const targetId = _
-      handleAddApi(targetId)
-      return;
+    if (apiDetail.id) {
+      res = await deleteApi([apiDetail.id]);
     }
-    const { code, message: msg, data } = await getApiDetail(id);
+    const { code, message: msg } = res;
     if (code !== 200) {
       message.error(msg);
-      return;
+    } else {
+      message.success(msg);
+      searchApiRef.current?.updateTree();
     }
-    setInitialValue({
-      id
-    });
-    setApiDetail(data);
+  };
 
-    const { code: mockCode, message: mockMsg, data: mockData} = await getApiMockRequest(id);
-    if (mockCode !== 200) {
-      message.error(mockMsg);
-      return;
+  const handleUpdate = () => {
+    if (tagDetail.id) {
+      searchApiRef.current?.addOrUpdateTag(tagDetail);
     }
-    setApiMock(mockData);
-  };
-  const handleAddApi = (targetId) => {
-    setflag('add')
-    setInitialValue({
-      tagIds: [targetId]
-    });
-    setOpen(true)
-  };
-  const callSaveOrUpdateApi = async (params) => {
-    let rs = (flag === 'add' ? await addApi({ ...params, tagIds: initialValue.tagIds[0] }) : await updateApi({ ...params, id: initialValue.id, tagIds: initialValue.tagIds }));
-    if (rs.code !== 200) {
-      message.error(rs.msg);
-    } else {
-      setOpen(false)
-      location.reload()
+    if (apiDetail.id) {
+      searchApiRef.current?.addOrUpdateApi(apiDetail);
     }
   };
-  const handleDeleteApi = async () => {
-    const { code, message: msg } = await deleteApi([initialValue.id]);
-    if (code !== 200) {
-      message.error(msg);
-    } else {
-      location.reload()
-    }
+
+  // eslint-disable-next-line no-unused-vars
+  const handleAfterUpdate = data => {
+    setApiDetail({});
+    setTagDetail({});
   };
-  const handleUpdateApi = async () => {
-    let queryData = await getApiDetail(initialValue.id)
-    setInitialValue(queryData.data);
-    setOpen(true)
-    setflag('update')
-  }
 
   useEffect(() => {
     initData();
@@ -142,24 +139,36 @@ function ApiDoc() {
       value={{
         apiDetail,
         apiData,
-        apiMock
+        apiMock,
+        tagDetail
       }}
     >
       <Card style={{ margin: 24 }}>
-        {open && <AddAndUpdateApiDoc onCancel={() => setOpen(false)} handleOk={callSaveOrUpdateApi} {...initialValue} />
-        }
         <Row gutter={24}>
           <Col span={6}>
-            <SearchApi onSelect={handleSelectNode} />
+            <SearchApi
+              onSelect={handleSelectNode}
+              ref={searchApiRef}
+              afterUpdate={handleAfterUpdate}
+            />
           </Col>
           <Col span={18}>
+            {tagDetail.id ? (
+              <TagInfo
+                handleUpdate={handleUpdate}
+                handleDelete={handleDelete}
+              />
+            ) : null}
             {apiDetail.id ? (
-              <>
-                <ApiInfo handleUpdateApi={handleUpdateApi} handleDeleteApi={handleDeleteApi} />
-              </>
-            ) : (
-              <Empty description={false} style={{ padding: "160px 0" }} />
-            )}
+              <ApiInfo
+                handleUpdate={handleUpdate}
+                handleDelete={handleDelete}
+              />
+            ) : null}
+            {!tagDetail.id &&
+              !apiDetail.id && (
+                <Empty description={false} style={{ padding: "160px 0" }} />
+              )}
           </Col>
         </Row>
         <BackTop />