ppob-frontend/src/component/TopupsaldoModal.js
2021-12-16 19:48:58 +07:00

75 lines
2.0 KiB
JavaScript

import React from "react";
import { Form, Input, message, Modal } from "antd";
import { observer } from "mobx-react-lite";
import { useStore } from "../utils/useStore";
export const TopupsaldoModal = observer((props) => {
const store = useStore();
const [form] = Form.useForm();
const handleCancelTransaction = () => {
store.supplier.visibleModalTransaction = false;
};
const handleSubmitTransaction = async (data) => {
console.log(data, "isi data2");
try {
await store.supplier.createTransaction(data);
message.success("Success Top Up");
} catch (e) {
console.log(e, "apa errornya");
message.error("Failed Top Up");
}
store.supplier.visibleModalTransaction = false;
form.resetFields();
};
return (
<div>
<Modal
visible={store.supplier.visibleModalTransaction}
title="Top Up Saldo"
okText="Top Up"
cancelText="Cancel"
onCancel={() => {
form.resetFields();
handleCancelTransaction();
}}
onOk={() => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form");
handleSubmitTransaction(values);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
>
<Form
form={form}
layout="vertical"
initialValues={{ supplier: props.code }}
>
<Form.Item
name="supplier"
label="Supplier"
rules={[{ required: true, message: "Please input supplier!" }]}
>
<Input disabled={true} />
</Form.Item>
<Form.Item
name="amount"
label="Amount"
rules={[{ required: true, message: "Please input amount!" }]}
>
<Input />
</Form.Item>
</Form>
</Modal>
</div>
);
});