feat: Add complex dynamic form to SwitchForm #1739 (#2001)

### What problem does this PR solve?

feat: Add complex dynamic form to SwitchForm #1739

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/locales/en.ts

@@ -807,6 +807,7 @@ The above is the content you need to summarize.`,
       port: 'Port',
       password: 'Password',
       switch: 'Switch',
+      logicalOperator: 'Logical operator',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/locales/zh-traditional.ts

@@ -765,6 +765,7 @@ export default {
       port: '端口',
       password: '密碼',
       switch: '條件',
+      logicalOperator: '操作符',
     },
     footer: {
       profile: '“保留所有權利 @ react”',

web/src/locales/zh.ts

@@ -783,6 +783,7 @@ export default {
       port: '端口',
       password: '密码',
       switch: '条件',
+      logicalOperator: '操作符',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/pages/flow/constant.tsx

@@ -388,7 +388,7 @@ export const initialExeSqlValues = {
   top_n: 30,
 };
 
-export const initialSwitchValues = {};
+export const initialSwitchValues = { conditions: [{}] };
 
 export const CategorizeAnchorPointPositions = [
   { top: 1, right: 34 },

web/src/pages/flow/switch-form/index.tsx

@@ -1,5 +1,142 @@
-const SwitchForm = () => {
+import { CloseOutlined } from '@ant-design/icons';
-  return <div>Switch</div>;
+import { Button, Card, Form, Input, Typography } from 'antd';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { IOperatorForm } from '../interface';
+
+const subLabelCol = {
+  span: 7,
+};
+
+const subWrapperCol = {
+  span: 17,
+};
+
+const SwitchForm: React.FC = ({ form, onValuesChange }: IOperatorForm) => {
+  const { t } = useTranslation();
+
+  return (
+    <Form
+      labelCol={{ span: 8 }}
+      wrapperCol={{ span: 16 }}
+      form={form}
+      name="dynamic_form_complex"
+      autoComplete="off"
+      initialValues={{ conditions: [{}] }}
+      onValuesChange={onValuesChange}
+    >
+      <Form.Item label={t('flow.to')} name={['end_cpn_id']}>
+        <Input />
+      </Form.Item>
+      <Form.Item label={t('flow.no')} name={['no']}>
+        <Input />
+      </Form.Item>
+      <Form.List name="conditions">
+        {(fields, { add, remove }) => (
+          <div style={{ display: 'flex', rowGap: 16, flexDirection: 'column' }}>
+            {fields.map((field) => (
+              <Card
+                size="small"
+                title={`Item ${field.name + 1}`}
+                key={field.key}
+                extra={
+                  <CloseOutlined
+                    onClick={() => {
+                      remove(field.name);
+                    }}
+                  />
+                }
+              >
+                <Form.Item
+                  label={t('flow.logicalOperator')}
+                  name={[field.name, 'logical_operator']}
+                >
+                  <Input />
+                </Form.Item>
+
+                <Form.Item label={t('flow.to')} name={[field.name, 'to']}>
+                  <Input />
+                </Form.Item>
+                {/* Nest Form.List */}
+                <Form.Item label="Items">
+                  <Form.List name={[field.name, 'items']}>
+                    {(subFields, subOpt) => (
+                      <div
+                        style={{
+                          display: 'flex',
+                          flexDirection: 'column',
+                          rowGap: 16,
+                        }}
+                      >
+                        {subFields.map((subField) => (
+                          <Card
+                            key={subField.key}
+                            title={null}
+                            size="small"
+                            extra={
+                              <CloseOutlined
+                                onClick={() => {
+                                  subOpt.remove(subField.name);
+                                }}
+                              />
+                            }
+                          >
+                            <Form.Item
+                              label={'cpn_id'}
+                              name={[subField.name, 'cpn_id']}
+                              labelCol={subLabelCol}
+                              wrapperCol={subWrapperCol}
+                            >
+                              <Input placeholder="cpn_id" />
+                            </Form.Item>
+                            <Form.Item
+                              label={'operator'}
+                              name={[subField.name, 'operator']}
+                              labelCol={subLabelCol}
+                              wrapperCol={subWrapperCol}
+                            >
+                              <Input placeholder="operator" />
+                            </Form.Item>
+                            <Form.Item
+                              label={'value'}
+                              name={[subField.name, 'value']}
+                              labelCol={subLabelCol}
+                              wrapperCol={subWrapperCol}
+                            >
+                              <Input placeholder="value" />
+                            </Form.Item>
+                          </Card>
+                        ))}
+                        <Button
+                          type="dashed"
+                          onClick={() => subOpt.add()}
+                          block
+                        >
+                          + Add Sub Item
+                        </Button>
+                      </div>
+                    )}
+                  </Form.List>
+                </Form.Item>
+              </Card>
+            ))}
+
+            <Button type="dashed" onClick={() => add()} block>
+              + Add Item
+            </Button>
+          </div>
+        )}
+      </Form.List>
+
+      <Form.Item noStyle shouldUpdate>
+        {() => (
+          <Typography>
+            <pre>{JSON.stringify(form?.getFieldsValue(), null, 2)}</pre>
+          </Typography>
+        )}
+      </Form.Item>
+    </Form>
+  );
 };
 
 export default SwitchForm;