112 lines
4.0 KiB
JavaScript
112 lines
4.0 KiB
JavaScript
import React from "react";
|
|
import {Form, Input, Modal, Select} from "antd";
|
|
import {useStore} from "../../utils/useStore";
|
|
|
|
export const MembershipModal = ({
|
|
visible,
|
|
onCreate,
|
|
onCancel,
|
|
initialData,
|
|
}) => {
|
|
const [form] = Form.useForm();
|
|
const {Option} = Select;
|
|
const store = useStore();
|
|
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
title={
|
|
initialData.isChangePassword
|
|
? "Change Member Password"
|
|
: initialData.id
|
|
? "Edit Member"
|
|
: "Create a new Membership"
|
|
}
|
|
okText={initialData.id ? "Edit" : "Create"}
|
|
cancelText="Cancel"
|
|
onCancel={() => {
|
|
form.resetFields();
|
|
onCancel();
|
|
}}
|
|
onOk={() => {
|
|
form
|
|
.validateFields()
|
|
.then((values) => {
|
|
let input = values;
|
|
if (initialData.id)
|
|
input.username = initialData.username;
|
|
|
|
onCreate(input);
|
|
form.resetFields();
|
|
})
|
|
.catch((info) => {
|
|
console.log("Validate Failed:", info);
|
|
});
|
|
}}
|
|
>
|
|
<Form
|
|
form={form}
|
|
layout="vertical"
|
|
name="form_in_modal"
|
|
initialValues={initialData}
|
|
>
|
|
{((initialData.id && !initialData.isChangePassword) ||
|
|
!initialData.id) && (
|
|
<Form.Item
|
|
name="name"
|
|
label="Name"
|
|
rules={[{required: true, message: "Please input Name!"}]}
|
|
>
|
|
<Input/>
|
|
</Form.Item>
|
|
)}
|
|
{!initialData.id && (
|
|
<Form.Item
|
|
name="username"
|
|
label="Username"
|
|
rules={[{required: true, message: "Please input Username!"}]}
|
|
>
|
|
<Input/>
|
|
</Form.Item>
|
|
)}
|
|
{((initialData.id && initialData.isChangePassword) ||
|
|
!initialData.id) && (
|
|
<Form.Item
|
|
name="password"
|
|
label="Password"
|
|
rules={[{required: false, message: "Please input password!"}]}
|
|
>
|
|
<Input.Password/>
|
|
</Form.Item>
|
|
)}
|
|
{((initialData.id && !initialData.isChangePassword) ||
|
|
!initialData.id) && (
|
|
<Form.Item
|
|
name="phone_number"
|
|
label="Phone Number"
|
|
rules={[{required: true, message: "Please input Phone Number!"}]}
|
|
>
|
|
<Input/>
|
|
</Form.Item>
|
|
)}
|
|
{((initialData.id && !initialData.isChangePassword) ||
|
|
!initialData.id) && (
|
|
<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>
|
|
</Modal>
|
|
);
|
|
};
|