Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

mod: update space create form #292

Merged
merged 1 commit into from
Sep 13, 2022
Merged

mod: update space create form #292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion app/config/locale/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,9 @@
"edgeTypeRequired": "Please select the edge type",
"srcIdRequired": "Please select the source VID",
"dstIdRequired": "Please select the destination VID",
"vidRequired": "Please select the VID"
"vidRequired": "Please select the VID",
"vidTypeRequired": "Vid type is required",
"fixStringLengthRequired": "fix string length limit is required"
},
"console": {
"execTime": "Execution Time",
Expand Down
10 changes: 6 additions & 4 deletions app/config/locale/zh-CN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,13 +88,15 @@
"nameRequired": "请输入名称",
"numberRequired": "请输入正整数",
"replicaLimit": "副本数量不得超过你当前 online 机器数量({number})",
"ttlRequired": "请选择TTL指定的属性, 且属性的数据类型需为integer或timestamp",
"ttlRequired": "请选择TTL指定的属性, 且属性的数据类型需为 integer 或 timestamp",
"ttlDurationRequired": "请输入时间(s)",
"dataTypeRequired": "请选择数据类型",
"edgeTypeRequired": "请选择边类型",
"srcIdRequired": "请选择起点VID",
"dstIdRequired": "请选择终点VID",
"vidRequired": "请选择VID"
"srcIdRequired": "请选择起点 VID",
"dstIdRequired": "请选择终点 VID",
"vidRequired": "请选择 VID",
"vidTypeRequired": "请选择 VID 类型",
"fixStringLengthRequired": "请输入字符串固定长度"
},
"console": {
"execTime": "执行时间消耗",
Expand Down
128 changes: 128 additions & 0 deletions app/pages/Schema/SpaceCreate/CreateForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
import { Col, Form, Input, Row, Select, FormProps } from 'antd';
import React, { useMemo } from 'react';
import { useStore } from '@app/stores';
import { nameRulesFn, numberRulesFn, replicaRulesFn } from '@app/config/rules';
import intl from 'react-intl-universal';
import styles from './index.module.less';
const Option = Select.Option;


const defaultFormItemLayout = {
labelCol: {
span: 10,
},
wrapperCol: {
span: 11,
},
};
interface IProps extends FormProps {
className?: string;
formItemLayout?: typeof defaultFormItemLayout;
activeMachineNum: number;
colSpan: 'full' | 'half';
}

const CreateForm = (props: IProps) => {
const { onFieldsChange, onFinish, className, formItemLayout, form, colSpan } = props;
const { schema } = useStore();
const { activeMachineNum } = schema;
const _colSpan = useMemo(() => colSpan === 'full' ? 24 : 12, [colSpan])
const vidColSpans = useMemo(() => {
if(colSpan === 'full') {
return [14, 9];
} else {
return [formItemLayout.wrapperCol.span || 11, 11];
}
}, [colSpan])
return (
<Form
className={className || styles.spaceForm}
form={form}
layout="vertical"
onFieldsChange={onFieldsChange}
onFinish={onFinish}
{...defaultFormItemLayout} {...formItemLayout}>
<Row>
<Col span={_colSpan}>
<Form.Item label={intl.get('common.name')} name="name" rules={nameRulesFn()}>
<Input placeholder={intl.get('schema.spaceNameEnter')} />
</Form.Item>
</Col>
<Col span={_colSpan} className={styles.vidItem}>
<Form.Item noStyle shouldUpdate={true}>
{({ getFieldValue }) => {
const vidType = getFieldValue('vidType');
return <>
<Form.Item
label="Vid Type"
name="vidType"
rules={[{ required: true, message: intl.get('formRules.vidTypeRequired') }]}
wrapperCol={vidType === 'FIXED_STRING' && { span: vidColSpans[0]}}
>
<Select placeholder={intl.get('schema.selectVidTypeTip')}>
<Option value="FIXED_STRING">FIXED_STRING</Option>
<Option value="INT64">INT64</Option>
</Select>
</Form.Item>
{vidType === 'FIXED_STRING'
? <Col span={vidColSpans[1]} offset={vidColSpans[0] + 1} className={styles.stringLength}>
<Form.Item label={intl.get('schema.length')} name="stringLength" rules={[
{
required: true,
message: intl.get('formRules.fixStringLengthRequired'),
},
...numberRulesFn(),
]}>
<Input />
</Form.Item>
</Col>
: null}
</>
}}
</Form.Item>

</Col>
</Row>
<Row>
<Col span={_colSpan}>
<Form.Item label={<span>
{intl.get('common.comment')}:
<span className={styles.optionalItem}>({intl.get('common.optional')})</span>
</span>} name="comment">
<Input />
</Form.Item>
</Col>
</Row>
<Row>
<Col span={_colSpan}>
<Form.Item
colon={false}
label={<span>
Partition_num:
<span className={styles.optionalItem}>({intl.get('common.optional')})</span>
</span>}
name="partitionNum"
rules={numberRulesFn()}
>
<Input placeholder="100" />
</Form.Item>
</Col>
<Col span={_colSpan}>
<Form.Item
colon={false}
label={<span>
Replica_factor:
<span className={styles.optionalItem}>({intl.get('common.optional')})</span>
</span>}
name="replicaFactor"
rules={replicaRulesFn(activeMachineNum)}
>
<Input placeholder="1" />
</Form.Item>
</Col>
</Row>
</Form>
);
};

export default CreateForm;
14 changes: 7 additions & 7 deletions app/pages/Schema/SpaceCreate/index.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@
.optionalItem {
color: @gray;
}
.stringLength {
position: absolute;
bottom: 0;
input {
margin-left: 10px;
}
}
}
}
}
.vidItem {
position: relative;
}
.stringLength {
position: absolute;
bottom: 0;
}
87 changes: 10 additions & 77 deletions app/pages/Schema/SpaceCreate/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
import { Button, Col, Form, Input, Row, Select, message } from 'antd';
import { Button, Form, message } from 'antd';
import React, { useEffect, useMemo, useState } from 'react';
import Breadcrumb from '@app/components/Breadcrumb';
import { observer } from 'mobx-react-lite';
import { useStore } from '@app/stores';
import { trackPageView } from '@app/utils/stat';
import { nameRulesFn, numberRulesFn, replicaRulesFn } from '@app/config/rules';
import { getSpaceCreateGQL } from '@app/utils/gql';
import GQLCodeMirror from '@app/components/GQLCodeMirror';
import intl from 'react-intl-universal';
import cls from 'classnames';
import { useHistory } from 'react-router-dom';
import FormItem from 'antd/lib/form/FormItem';
import Cookie from 'js-cookie';
import styles from './index.module.less';
const Option = Select.Option;
import CreateForm from './CreateForm';

function getVidType(type: string, length?: string) {
let result;
Expand Down Expand Up @@ -99,79 +97,14 @@ const SpaceCreate = () => {
<div className={styles.spaceCreate}>
<Breadcrumb routes={routes} />
<div className={cls(styles.configContainer, 'studioCenterLayout')}>
<Form className={styles.spaceForm} form={form} layout="vertical" onFieldsChange={updateGql} {...formItemLayout}>
<Row>
<Col span={12}>
<Form.Item label={intl.get('common.name')} name="name" rules={nameRulesFn()}>
<Input placeholder={intl.get('schema.spaceNameEnter')} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="Vid Type"
name="vidType"
rules={[{ required: true }]}
>
<Select placeholder={intl.get('schema.selectVidTypeTip')}>
<Option value="FIXED_STRING">FIXED_STRING</Option>
<Option value="INT64">INT64</Option>
</Select>
</Form.Item>
<FormItem noStyle dependencies={['vidType']}>
{({ getFieldValue }) => {
const vidType = getFieldValue('vidType');
return vidType === 'FIXED_STRING' ? <Col offset={11} className={styles.stringLength}>
<Form.Item label={intl.get('schema.length')} name="stringLength" rules={[
{
required: true,
message: 'fix string length limit is required',
},
...numberRulesFn(),
]}>
<Input />
</Form.Item>
</Col>
: null;
}}
</FormItem>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item label={intl.get('common.comment')} name="comment">
<Input />
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item
colon={false}
label={<span>
Partition_num:
<span className={styles.optionalItem}>({intl.get('common.optional')})</span>
</span>}
name="partitionNum"
rules={numberRulesFn()}
>
<Input placeholder="100" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
colon={false}
label={<span>
Replica_factor:
<span className={styles.optionalItem}>({intl.get('common.optional')})</span>
</span>}
name="replicaFactor"
rules={replicaRulesFn(activeMachineNum)}
>
<Input placeholder="1" />
</Form.Item>
</Col>
</Row>
</Form>
<CreateForm
form={form}
colSpan='half'
onFieldsChange={updateGql}
className={styles.spaceForm}
formItemLayout={formItemLayout}
activeMachineNum={activeMachineNum}
/>
<GQLCodeMirror currentGQL={gql} />
</div>
<div className="studioFormFooter">
Expand Down