You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by ju...@apache.org on 2020/06/02 01:18:33 UTC
[incubator-apisix-dashboard] branch next updated: feat: add edit
modal (#231)
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 45f5397 feat: add edit modal (#231)
45f5397 is described below
commit 45f5397daf35ddbb4607d769dcac7a92c6b8eaba
Author: litesun <31...@users.noreply.github.com>
AuthorDate: Tue Jun 2 09:18:25 2020 +0800
feat: add edit modal (#231)
* 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
* fix: remove list item not work
* feat: remove relatedRouting
* feat: add routes step1 page
* feat: update route
* feat: format code
* feat: update
* feat: update
* feat: add checkbox rule
* feat: handle Modal close event
* feat: format code
* feat: add page skip
* feat: format code
* merge
* feat: clean code
* fix: step4 error
* feat: add edit modal
---
src/pages/Routes/Create.tsx | 1 -
.../Routes/components/Step1/MatchingRulesView.tsx | 28 ++++++++++++++++------
src/pages/Routes/components/Step1/MetaView.tsx | 1 +
src/pages/Routes/components/Step1/index.tsx | 10 ++------
.../components/Step2/HttpHeaderRewriteView.tsx | 26 ++++++++++++++------
src/pages/Routes/components/Step2/index.tsx | 2 +-
src/pages/Routes/typing.d.ts | 2 ++
7 files changed, 46 insertions(+), 24 deletions(-)
diff --git a/src/pages/Routes/Create.tsx b/src/pages/Routes/Create.tsx
index e17c242..bd07bda 100644
--- a/src/pages/Routes/Create.tsx
+++ b/src/pages/Routes/Create.tsx
@@ -32,7 +32,6 @@ const Create: React.FC = () => {
<Step1
data={data}
onChange={(_data: RouteModule.Step1Data) => {
- console.log(_data);
setStep1Data(_data);
}}
/>
diff --git a/src/pages/Routes/components/Step1/MatchingRulesView.tsx b/src/pages/Routes/components/Step1/MatchingRulesView.tsx
index 6e95710..e956d3a 100644
--- a/src/pages/Routes/components/Step1/MatchingRulesView.tsx
+++ b/src/pages/Routes/components/Step1/MatchingRulesView.tsx
@@ -9,23 +9,34 @@ const MatchingRulesView: React.FC<Props> = ({ data, disabled, onChange }) => {
const { advancedMatchingRules } = data.step1Data;
const [visible, setVisible] = useState(false);
+
+ const [mode, setMode] = useState<RouteModule.ModalType>('create');
const [modalForm] = Form.useForm();
const { Option } = Select;
const onOk = () => {
modalForm.validateFields().then((value) => {
- const rule = {
- ...(value as RouteModule.MatchingRule),
- key: Math.random().toString(36).slice(2),
- };
- onChange({ ...data.step1Data, advancedMatchingRules: advancedMatchingRules.concat(rule) });
+ if (mode === 'edit') {
+ const key = modalForm.getFieldValue('key');
+ const newAdvancedMatchingRules = advancedMatchingRules.concat();
+ const findIndex = newAdvancedMatchingRules.findIndex((item) => item.key === key);
+ newAdvancedMatchingRules[findIndex] = { ...(value as RouteModule.MatchingRule), key };
+ onChange({ ...data.step1Data, advancedMatchingRules: newAdvancedMatchingRules });
+ } else {
+ const rule = {
+ ...(value as RouteModule.MatchingRule),
+ key: Math.random().toString(36).slice(2),
+ };
+ onChange({ ...data.step1Data, advancedMatchingRules: advancedMatchingRules.concat(rule) });
+ }
modalForm.resetFields();
setVisible(false);
});
};
const handleEdit = (record: RouteModule.MatchingRule) => {
+ setMode('edit');
setVisible(true);
modalForm.setFieldsValue(record);
};
@@ -73,7 +84,7 @@ const MatchingRulesView: React.FC<Props> = ({ data, disabled, onChange }) => {
const renderModal = () => {
return (
<Modal
- title="新增"
+ title={mode === 'edit' ? '编辑' : '新增'}
centered
visible={visible}
onOk={onOk}
@@ -132,7 +143,10 @@ const MatchingRulesView: React.FC<Props> = ({ data, disabled, onChange }) => {
<PanelSection title="高级路由匹配条件">
{!disabled && (
<Button
- onClick={() => setVisible(true)}
+ onClick={() => {
+ setMode('create');
+ setVisible(true);
+ }}
type="primary"
style={{
marginBottom: 16,
diff --git a/src/pages/Routes/components/Step1/MetaView.tsx b/src/pages/Routes/components/Step1/MetaView.tsx
index 69e64c7..3c1679d 100644
--- a/src/pages/Routes/components/Step1/MetaView.tsx
+++ b/src/pages/Routes/components/Step1/MetaView.tsx
@@ -2,6 +2,7 @@ import React from 'react';
import Form from 'antd/es/form';
import { Input } from 'antd';
+// import { FORM_ITEM_LAYOUT } from '@/pages/Routes/constants';
import PanelSection from '../PanelSection';
interface Props extends RouteModule.Data {}
diff --git a/src/pages/Routes/components/Step1/index.tsx b/src/pages/Routes/components/Step1/index.tsx
index 05d0669..78b817b 100644
--- a/src/pages/Routes/components/Step1/index.tsx
+++ b/src/pages/Routes/components/Step1/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
import { Form } from 'antd';
import { FORM_ITEM_LAYOUT } from '@/pages/Routes/constants';
@@ -9,15 +9,9 @@ import RequestConfigView from './RequestConfigView';
import MatchingRulesView from './MatchingRulesView';
const Step1: React.FC<RouteModule.Data> = (props) => {
- const { onChange, data } = props;
+ const { data } = props;
const [form] = Form.useForm();
- useEffect(() => {
- return () => {
- onChange(form.getFieldsValue());
- };
- }, []);
-
return (
<>
<Form
diff --git a/src/pages/Routes/components/Step2/HttpHeaderRewriteView.tsx b/src/pages/Routes/components/Step2/HttpHeaderRewriteView.tsx
index 10d8bd1..2f83eec 100644
--- a/src/pages/Routes/components/Step2/HttpHeaderRewriteView.tsx
+++ b/src/pages/Routes/components/Step2/HttpHeaderRewriteView.tsx
@@ -11,8 +11,10 @@ const HttpHeaderRewriteView: React.FC<Props> = ({ data, disabled, onChange }) =>
const { upstream_header } = data.step2Data;
const [visible, setVisible] = useState(false);
const [modalForm] = Form.useForm();
+ const [mode, setMode] = useState<RouteModule.ModalType>('create');
const handleEdit = (record: RouteModule.UpstreamHeader) => {
+ setMode('edit');
setVisible(true);
modalForm.setFieldsValue(record);
};
@@ -65,19 +67,28 @@ const HttpHeaderRewriteView: React.FC<Props> = ({ data, disabled, onChange }) =>
const renderModal = () => {
const handleOk = () => {
modalForm.validateFields().then((value) => {
- onChange({
- upstream_header: upstream_header.concat({
- ...(value as RouteModule.UpstreamHeader),
- key: Math.random().toString(36).slice(2),
- }),
- });
+ if (mode === 'edit') {
+ const key = modalForm.getFieldValue('key');
+ const newUpstreamHeader = upstream_header.concat();
+ const findIndex = newUpstreamHeader.findIndex((item) => item.key === key);
+ newUpstreamHeader[findIndex] = { ...(value as RouteModule.UpstreamHeader), key };
+ onChange({ upstream_header: newUpstreamHeader, key });
+ } else {
+ onChange({
+ upstream_header: upstream_header.concat({
+ ...(value as RouteModule.UpstreamHeader),
+ key: Math.random().toString(36).slice(2),
+ }),
+ });
+ }
+ modalForm.resetFields();
setVisible(false);
});
};
return (
<Modal
- title="新增"
+ title={mode === 'edit' ? '编辑' : '新增'}
centered
visible={visible}
onOk={handleOk}
@@ -115,6 +126,7 @@ const HttpHeaderRewriteView: React.FC<Props> = ({ data, disabled, onChange }) =>
{!disabled && (
<Button
onClick={() => {
+ setMode('create');
setVisible(true);
}}
type="primary"
diff --git a/src/pages/Routes/components/Step2/index.tsx b/src/pages/Routes/components/Step2/index.tsx
index 7fe4f0c..e3c3dcc 100644
--- a/src/pages/Routes/components/Step2/index.tsx
+++ b/src/pages/Routes/components/Step2/index.tsx
@@ -10,7 +10,7 @@ const Step2: React.FC<RouteModule.Data> = (props) => {
return (
<>
<RequestRewriteView form={form} {...props} />
- <HttpHeaderRewriteView form={form} {...props} />
+ <HttpHeaderRewriteView {...props} />
</>
);
};
diff --git a/src/pages/Routes/typing.d.ts b/src/pages/Routes/typing.d.ts
index b7fb371..9552d0e 100644
--- a/src/pages/Routes/typing.d.ts
+++ b/src/pages/Routes/typing.d.ts
@@ -58,4 +58,6 @@ declare namespace RouteModule {
read: number;
};
};
+
+ type ModalType = 'create' | 'edit';
}