[incubator-apisix-dashboard] branch feat-route-list updated: feat: added table

[ju...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

juzhiyuan pushed a commit to branch feat-route-list
in repository https://gitbox.apache.org/repos/asf/incubator-apisix-dashboard.git


The following commit(s) were added to refs/heads/feat-route-list by this push:
     new a2e369d  feat: added table
a2e369d is described below

commit a2e369d978ee6b6024b92c269a9b84317946c195
Author: juzhiyuan <jj...@gmail.com>
AuthorDate: Thu Jun 4 17:33:30 2020 +0800

    feat: added table
---
 src/pages/Routes/List.tsx    | 63 +++++++++++++++++++++++++++++++++++++++++---
 src/pages/Routes/service.ts  |  4 +++
 src/pages/Routes/typing.d.ts |  1 +
 src/transforms/global.ts     |  5 ++--
 4 files changed, 67 insertions(+), 6 deletions(-)

diff --git a/src/pages/Routes/List.tsx b/src/pages/Routes/List.tsx
index 9d8e99f..cc6d6dc 100644
--- a/src/pages/Routes/List.tsx
+++ b/src/pages/Routes/List.tsx
@@ -1,22 +1,77 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import ProTable, { ProColumns } from '@ant-design/pro-table';
+import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
+import { history } from 'umi';
+import { Button, Popconfirm, notification } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
 
 import { ListItem } from '@/transforms/global';
+import { fetchRouteList, removeRoute } from './service';
 
 const RouteList: React.FC = () => {
+  const ref = useRef<ActionType>();
+
   const columns: ProColumns<ListItem<RouteModule.BaseData>>[] = [
     {
       title: 'ID',
-      dataIndex: 'displayKey',
+      dataIndex: 'id',
       sortOrder: 'descend',
       hideInSearch: true,
     },
+    {
+      title: '名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '描述',
+      dataIndex: 'desc',
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      render: (_, record) => (
+        <>
+          <Button
+            type="primary"
+            onClick={() => history.push(`/routes/${record.id}/edit`)}
+            style={{ marginRight: 10 }}
+          >
+            编辑
+          </Button>
+          <Popconfirm
+            title="确定删除该路由吗？"
+            onConfirm={() => {
+              removeRoute(record.id!).then(() => {
+                notification.success({ message: '删除路由成功' });
+                /* eslint-disable no-unused-expressions */
+                ref.current?.reload();
+              });
+            }}
+          >
+            <Button type="primary" danger>
+              删除
+            </Button>
+          </Popconfirm>
+        </>
+      ),
+    },
   ];
 
   return (
     <PageHeaderWrapper>
-      <ProTable<ListItem<RouteModule.BaseData>> columns={columns} search={false} />
+      <ProTable<ListItem<RouteModule.BaseData>>
+        actionRef={ref}
+        rowKey="id"
+        request={() => fetchRouteList()}
+        columns={columns}
+        search={false}
+        toolBarRender={() => [
+          <Button type="primary" onClick={() => history.push(`/routes/create`)}>
+            <PlusOutlined />
+            创建
+          </Button>,
+        ]}
+      />
     </PageHeaderWrapper>
   );
 };
diff --git a/src/pages/Routes/service.ts b/src/pages/Routes/service.ts
index f53c0f2..247f45b 100644
--- a/src/pages/Routes/service.ts
+++ b/src/pages/Routes/service.ts
@@ -16,3 +16,7 @@ export const updateRoute = (rid: number, data: Pick<RouteModule.Data, 'data'>, w
 
 export const fetchRoute = (rid: number, wid: number = 0) =>
   request(`/workspaces/${wid}/routes/${rid}`).then((data) => transformRouteData(data));
+
+export const fetchRouteList = (wid = 0) => request(`/workspaces/${wid}/routes`);
+
+export const removeRoute = (rid: number, wid = 0) => request(`/workspaces/${wid}/routes/${rid}`);
diff --git a/src/pages/Routes/typing.d.ts b/src/pages/Routes/typing.d.ts
index 652869c..9d28d4b 100644
--- a/src/pages/Routes/typing.d.ts
+++ b/src/pages/Routes/typing.d.ts
@@ -15,6 +15,7 @@ declare namespace RouteModule {
   type RequestProtocol = 'https' | 'http' | 'websocket';
 
   type BaseData = {
+    id?: number;
     name: string;
     desc: string;
   };
diff --git a/src/transforms/global.ts b/src/transforms/global.ts
index 4d8e3fd..13b29e3 100644
--- a/src/transforms/global.ts
+++ b/src/transforms/global.ts
@@ -22,6 +22,7 @@ interface ListData<T> {
 
 export interface ListItem<T> extends Node<T> {
   displayKey: string;
+  id?: number;
 }
 
 const key2id = (key: string) => parseInt(key.replace(/^(0+)/, ''), 10);
@@ -31,7 +32,7 @@ const key2id = (key: string) => parseInt(key.replace(/^(0+)/, ''), 10);
  */
 export const transformFetchListData = <T>(data: ListData<T>): RequestData<ListItem<T>> => {
   const results = (data.node.nodes || [])
-    .map(node => {
+    .map((node) => {
       const result = node.key.match(/\/([0-9]+)/);
       let displayKey = '';
 
@@ -46,7 +47,7 @@ export const transformFetchListData = <T>(data: ListData<T>): RequestData<ListIt
         displayKey,
       };
     })
-    .filter(item => item.displayKey);
+    .filter((item) => item.displayKey);
 
   return {
     data: results,