97 lines
3.4 KiB
JavaScript
97 lines
3.4 KiB
JavaScript
import React from 'react';
|
|
import {Form, Input, Modal, Select,} from 'antd';
|
|
import {capitalize} from "lodash";
|
|
import {useStore} from "../../utils/useStore";
|
|
|
|
export const MembershipModal = ({
|
|
visible,
|
|
onCreate,
|
|
onCancel,
|
|
initialData,
|
|
}) => {
|
|
const [form] = Form.useForm();
|
|
const {Option} = Select;
|
|
const dataStatus = ["true", "false"]
|
|
const store = useStore();
|
|
|
|
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
title={initialData.id ? "Edit Member" : "Create a new Membership"}
|
|
okText={initialData.id ? "Edit" : "Create"}
|
|
cancelText="Cancel"
|
|
onCancel={() => {
|
|
form.resetFields()
|
|
onCancel()
|
|
}}
|
|
onOk={() => {
|
|
form
|
|
.validateFields()
|
|
.then(values => {
|
|
onCreate(values);
|
|
form.resetFields()
|
|
})
|
|
.catch(info => {
|
|
console.log('Validate Failed:', info);
|
|
});
|
|
}}
|
|
>
|
|
<Form
|
|
form={form}
|
|
layout="vertical"
|
|
name="form_in_modal"
|
|
initialValues={initialData}
|
|
>
|
|
|
|
<Form.Item
|
|
name="username"
|
|
label="Username"
|
|
rules={[{required: true, message: 'Please input Username!'}]}
|
|
>
|
|
<Input/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="password"
|
|
label="Password"
|
|
rules={[{required: true, message: 'Please input password!'}]}
|
|
>
|
|
<Input/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="roleId"
|
|
label="Role"
|
|
rules={[{required: true, message: 'Please input role id!'}]}
|
|
>
|
|
<Select>
|
|
{store.role.data.map(item => (
|
|
<Option key={item.id} value={item.id}>{item.name}</Option>
|
|
))}
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="superior"
|
|
label="Superior"
|
|
rules={[{required: true, message: 'Please select superior status!'}]}
|
|
>
|
|
<Select
|
|
showSearch
|
|
placeholder="Select Status"
|
|
optionFilterProp="children"
|
|
filterOption={(input, option) =>
|
|
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
}
|
|
filterSort={(optionA, optionB) =>
|
|
optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())
|
|
}
|
|
>
|
|
{dataStatus.map(it => {
|
|
return <Option value={it}>{capitalize(it)}</Option>
|
|
})}
|
|
</Select>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
};
|