[incubator-apisix-dashboard] branch next updated: feat: add search feature (#196)

[ju...@apache.org]

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

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


The following commit(s) were added to refs/heads/next by this push:
     new 12460e5  feat: add search feature (#196)
12460e5 is described below

commit 12460e5ca327271d4f78d59bdfb4ccbaeacaf68d
Author: litesun <31...@users.noreply.github.com>
AuthorDate: Tue May 19 22:19:54 2020 +0800

    feat: add search feature (#196)
    
    * feat: limit upload file
    
    * feat: intercept default upload api request
    
    * feat: limit upload file type
    
    * fix: show file when parse SSL file  fail
    
    * feat: add search feature
    
    * feat: format code
---
 src/pages/SSLModule/list/index.tsx | 39 +++++++++++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/pages/SSLModule/list/index.tsx b/src/pages/SSLModule/list/index.tsx
index b7423af..178c5fa 100644
--- a/src/pages/SSLModule/list/index.tsx
+++ b/src/pages/SSLModule/list/index.tsx
@@ -1,16 +1,22 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
 import { Button, Modal, notification, Switch } from 'antd';
 import { history, useIntl } from 'umi';
 import { PlusOutlined } from '@ant-design/icons';
-
 import { fetchList as fetchSSLList, remove as removeSSL } from '@/services/ssl';
 import { SSL } from '@/models/ssl';
 import { ListItem } from '@/transforms/global';
 
+interface SearchParamsProps {
+  current: number;
+  pageSize: number;
+  sni: string;
+}
+
 const List: React.FC = () => {
   const tableRef = useRef<ActionType>();
+  const [list, setList] = useState<ListItem<SSL>[]>([]);
   const { formatMessage } = useIntl();
   const onRemove = (key: string) => {
     Modal.confirm({
@@ -38,19 +44,22 @@ const List: React.FC = () => {
       title: 'ID',
       dataIndex: 'displayKey',
       sortOrder: 'descend',
+      hideInSearch: true,
     },
     {
       title: 'SNI',
       dataIndex: ['value', 'sni'],
+      key: 'sni',
     },
-    // TODO: need to check api response
     {
       title: '关联路由',
-      dataIndex: [],
+      dataIndex: 'relatedRouting',
+      hideInSearch: true,
     },
     {
       title: '过期时间',
-      dataIndex: [],
+      dataIndex: 'expiredTime',
+      hideInSearch: true,
     },
     {
       title: '是否启用',
@@ -74,11 +83,27 @@ const List: React.FC = () => {
     },
   ];
 
+  const fetchPageSSLList = (params: Partial<SearchParamsProps> | undefined) => {
+    if (list.length) {
+      const result = list.filter((item) => {
+        if (params?.sni) {
+          return item.value.sni.includes(params.sni);
+        }
+        return true;
+      });
+      return Promise.resolve({ data: result, total: list.length });
+    }
+    return fetchSSLList().then((data) => {
+      setList(data.data);
+      return data;
+    });
+  };
+
   return (
     <PageHeaderWrapper>
       <ProTable<ListItem<SSL>>
-        request={() => fetchSSLList()}
-        search={false}
+        request={(params) => fetchPageSSLList(params)}
+        search
         columns={columns}
         actionRef={tableRef}
         toolBarRender={() => [