109 lines
3.2 KiB
JavaScript
109 lines
3.2 KiB
JavaScript
import React, {useEffect, useState} from "react";
|
|
import {Form, Input, Modal, Select} from "antd";
|
|
import {useStore} from "../../utils/useStore";
|
|
|
|
export const PulsaModal = ({visible, onCreate, onCancel}) => {
|
|
const [form] = Form.useForm();
|
|
const {Option} = Select;
|
|
const dataStatus = ["Active", "Inactive"];
|
|
const store = useStore();
|
|
const [visibleModal, setVisibleModal] = useState(false);
|
|
const [initialData, setInitialData] = useState({});
|
|
const [confirmLoading, setConfirmLoading] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const init = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
await store.categories.getData();
|
|
setIsLoading(false);
|
|
} catch (e) {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
init();
|
|
}, []);
|
|
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
title={initialData.id ? "Edit Member" : "Create a new Member"}
|
|
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="name"
|
|
label="Name"
|
|
rules={[{required: true, message: "Please input name!"}]}
|
|
>
|
|
<Input/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="price"
|
|
label="Price"
|
|
rules={[{required: true, message: "Please input price!"}]}
|
|
>
|
|
<Input/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="markUpPrice"
|
|
label="Mark Up Price"
|
|
rules={[{required: true, message: "Please input mark up price!"}]}
|
|
>
|
|
<Input/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="code"
|
|
label="Code"
|
|
rules={[{required: true, message: "Please input code!"}]}
|
|
>
|
|
<Input/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="status"
|
|
label="Status"
|
|
rules={[{required: true, message: "Please select Status!"}]}
|
|
>
|
|
<Select placeholder="Select Sub Category" allowClear>
|
|
<Option value="ACTIVE">ACTIVE</Option>
|
|
<Option value="INACTIVE">INACTIVE</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="subCategoriesId"
|
|
label="Sub Categories"
|
|
rules={[{required: true, message: "Please select Sub Category!"}]}
|
|
>
|
|
<Select placeholder="Select Sub Category" allowClear>
|
|
{store.categories.data.map((it) => {
|
|
return <Option value={it.id}>{it.name}</Option>;
|
|
})}
|
|
</Select>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
};
|