Pages Supplier
This commit is contained in:
parent
6f743301e4
commit
ac7e5714e7
|
|
@ -1,244 +1,178 @@
|
|||
import React, {useEffect, useState} from "react";
|
||||
import {Button, Form, Input, message, Modal, Select, Space, Table, Tag} from "antd";
|
||||
import {observer} from "mobx-react-lite";
|
||||
import {ExclamationCircleOutlined} from "@ant-design/icons";
|
||||
import {useHistory} from "react-router-dom";
|
||||
import {capitalize} from "lodash";
|
||||
import {useStore} from "../utils/useStore";
|
||||
import {LINKS} from "../routes/app";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
Select,
|
||||
Space,
|
||||
Table,
|
||||
} from "antd";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { ExclamationCircleOutlined } from "@ant-design/icons";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { capitalize } from "lodash";
|
||||
import { useStore } from "../utils/useStore";
|
||||
import { LINKS } from "../routes/app";
|
||||
|
||||
export const CommissionComponent = observer((props) => {
|
||||
const store = useStore();
|
||||
const [form] = Form.useForm();
|
||||
const {Option} = Select;
|
||||
const history = useHistory();
|
||||
const [idData, setIdData] = useState('');
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const store = useStore();
|
||||
const [form] = Form.useForm();
|
||||
const { Option } = Select;
|
||||
const history = useHistory();
|
||||
const [idData, setIdData] = useState("");
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
//await store.product.getDataSubCategories();
|
||||
setIsLoading(false);
|
||||
} catch (e) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
init();
|
||||
}, []);
|
||||
|
||||
const handleEditButton = (data) => {
|
||||
console.log(data, "isi data")
|
||||
form.setFieldsValue({
|
||||
name: data.name,
|
||||
npwp: data.npwp,
|
||||
address: data.address,
|
||||
|
||||
});
|
||||
store.commission.visibleModalCommission = true;
|
||||
setIdData(data.id);
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
},
|
||||
{
|
||||
title: "Npwp",
|
||||
dataIndex: "npwp",
|
||||
key: "npwp",
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
dataIndex: "address",
|
||||
key: "address",
|
||||
},
|
||||
{
|
||||
title: "Status",
|
||||
dataIndex: "status",
|
||||
key: "status",
|
||||
render: (text, record) => (
|
||||
<Tag
|
||||
color={record?.status === true ? "processing" : "#E3E8EE"}
|
||||
style={{ color: "#4F566B" }}
|
||||
>
|
||||
{record?.status === true ? " ACTIVE" : "INACTIVE"}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Action",
|
||||
key: "action",
|
||||
render: (text, record) => (
|
||||
<Space size="middle">
|
||||
<Button
|
||||
onClick={() => handleEditButton(record)}
|
||||
>Edit</Button>
|
||||
<Button
|
||||
onClick={() => handleDelete(record.id)}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const deleteData = async (id) => {
|
||||
try {
|
||||
console.log(id);
|
||||
await store.commission.delete(id);
|
||||
message.success("Data Berhasil Dihapus");
|
||||
history.push(LINKS.PRODUCT);
|
||||
} catch (err) {
|
||||
console.log("error", err);
|
||||
message.error("Gagal menghapus");
|
||||
}
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
//await store.product.getDataSubCategories();
|
||||
setIsLoading(false);
|
||||
} catch (e) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = (id) => {
|
||||
Modal.confirm({
|
||||
title: "Are you sure delete this record?",
|
||||
icon: <ExclamationCircleOutlined/>,
|
||||
okText: "Yes",
|
||||
okType: "primary",
|
||||
cancelText: "Cancel",
|
||||
onOk() {
|
||||
return deleteData(id);
|
||||
},
|
||||
onCancel() {
|
||||
console.log("Cancel");
|
||||
},
|
||||
});
|
||||
};
|
||||
init();
|
||||
}, []);
|
||||
|
||||
const handleCancel = () => {
|
||||
setIdData('')
|
||||
store.commission.visibleModalCommission = false;
|
||||
const handleEditButton = (data) => {
|
||||
console.log(data, "isi data");
|
||||
form.setFieldsValue({
|
||||
value: data.commission,
|
||||
});
|
||||
store.commission.visibleModalCommission = true;
|
||||
setIdData(data.id);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
},
|
||||
{
|
||||
title: "Amount",
|
||||
dataIndex: "commission",
|
||||
key: "commission",
|
||||
},
|
||||
{
|
||||
title: "Action",
|
||||
key: "action",
|
||||
render: (text, record) => (
|
||||
<Space size="middle">
|
||||
<Button onClick={() => handleEditButton(record)}>Edit</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const deleteData = async (id) => {
|
||||
try {
|
||||
console.log(id);
|
||||
await store.commission.delete(id);
|
||||
message.success("Data Berhasil Dihapus");
|
||||
history.push(LINKS.PRODUCT);
|
||||
} catch (err) {
|
||||
console.log("error", err);
|
||||
message.error("Gagal menghapus");
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (data) => {
|
||||
console.log(data, "isi data2")
|
||||
if (idData !== '') {
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
await store.commission.update(idData, data)
|
||||
message.success("Success Update Data Member")
|
||||
} catch (e) {
|
||||
message.error("Failed Update Data Member")
|
||||
}
|
||||
setConfirmLoading(false);
|
||||
store.commission.visibleModalCommission = false;
|
||||
setIdData('');
|
||||
form.resetFields();
|
||||
} else {
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
await store.commission.create(data)
|
||||
message.success("Success Add New Member")
|
||||
} catch (e) {
|
||||
console.log(e, "apa errornya")
|
||||
message.error("Failed Add Member")
|
||||
}
|
||||
setConfirmLoading(false);
|
||||
store.commission.visibleModalCommission = false;
|
||||
setIdData('');
|
||||
form.resetFields();
|
||||
}
|
||||
const handleCancel = () => {
|
||||
setIdData("");
|
||||
store.commission.visibleModalCommission = false;
|
||||
};
|
||||
|
||||
const handleSubmit = async (data) => {
|
||||
console.log(data, "isi data2");
|
||||
if (idData !== "") {
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
await store.commission.update(idData, data);
|
||||
message.success("Success Update Data Member");
|
||||
} catch (e) {
|
||||
message.error("Failed Update Data Member");
|
||||
}
|
||||
setConfirmLoading(false);
|
||||
store.commission.visibleModalCommission = false;
|
||||
setIdData("");
|
||||
form.resetFields();
|
||||
} else {
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
await store.commission.create(data);
|
||||
message.success("Success Add New Member");
|
||||
} catch (e) {
|
||||
console.log(e, "apa errornya");
|
||||
message.error("Failed Add Member");
|
||||
}
|
||||
setConfirmLoading(false);
|
||||
store.commission.visibleModalCommission = false;
|
||||
setIdData("");
|
||||
form.resetFields();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Table
|
||||
style={{textAlign: "center"}}
|
||||
columns={columns}
|
||||
dataSource={store.commission.data}
|
||||
bordered
|
||||
pagination={{
|
||||
pageSize: store.product.pageSize,
|
||||
total: store.product.total_data,
|
||||
current: store.product.page + 1,
|
||||
showSizeChanger: true,
|
||||
simple: false
|
||||
}}
|
||||
onChange={async (page) => {
|
||||
let pageNumber = page.current;
|
||||
store.commission.pageSize = page.pageSize;
|
||||
store.commission.page = pageNumber - 1;
|
||||
// store.membership.isLoading = true;
|
||||
await store.commission.getData();
|
||||
// store.membership.isLoading = false;
|
||||
}}
|
||||
/>
|
||||
return (
|
||||
<div>
|
||||
<Table
|
||||
style={{ textAlign: "center" }}
|
||||
columns={columns}
|
||||
dataSource={store.commission.data}
|
||||
bordered
|
||||
pagination={{
|
||||
pageSize: store.product.pageSize,
|
||||
total: store.product.total_data,
|
||||
current: store.product.page + 1,
|
||||
showSizeChanger: true,
|
||||
simple: false,
|
||||
}}
|
||||
onChange={async (page) => {
|
||||
let pageNumber = page.current;
|
||||
store.commission.pageSize = page.pageSize;
|
||||
store.commission.page = pageNumber - 1;
|
||||
// store.membership.isLoading = true;
|
||||
await store.commission.getData();
|
||||
// store.membership.isLoading = false;
|
||||
}}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
visible={store.commission.visibleModalCommission}
|
||||
title={idData ? "Edit Commission" : "Create a new commission"}
|
||||
okText={idData ? "Edit" : "Create"}
|
||||
cancelText="Cancel"
|
||||
onCancel={() => {
|
||||
form.resetFields();
|
||||
handleCancel();
|
||||
}}
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
.then((values) => {
|
||||
console.log(values, "isi form")
|
||||
handleSubmit(values);
|
||||
form.resetFields();
|
||||
})
|
||||
.catch((info) => {
|
||||
console.error("Validate Failed:", info);
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="Name"
|
||||
rules={[{required: true, message: 'Please input name!'}]}
|
||||
>
|
||||
<Input/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="owner"
|
||||
label="Owner"
|
||||
rules={[{required: true, message: 'Please input owner!'}]}
|
||||
>
|
||||
<Input/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="password_account"
|
||||
label="Password Account"
|
||||
rules={[{required: true, message: 'Please input password account!'}]}
|
||||
>
|
||||
<Input/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="npwp"
|
||||
label="Npwp"
|
||||
rules={[{required: true, message: 'Please input npwp!'}]}
|
||||
>
|
||||
<Input/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="address"
|
||||
label="address"
|
||||
rules={[{required: true, message: 'Please input password!'}]}
|
||||
>
|
||||
<Input/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
<Modal
|
||||
visible={store.commission.visibleModalCommission}
|
||||
title={idData ? "Edit Commission" : "Create a new commission"}
|
||||
okText={idData ? "Edit" : "Create"}
|
||||
cancelText="Cancel"
|
||||
onCancel={() => {
|
||||
form.resetFields();
|
||||
handleCancel();
|
||||
}}
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
.then((values) => {
|
||||
console.log(values, "isi form");
|
||||
handleSubmit(values);
|
||||
form.resetFields();
|
||||
})
|
||||
.catch((info) => {
|
||||
console.error("Validate Failed:", info);
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item
|
||||
name="value"
|
||||
label="Commission"
|
||||
rules={[{ required: true, message: "Please input commission!" }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,43 +1,23 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
Select,
|
||||
Space,
|
||||
Table,
|
||||
Tag,
|
||||
} from "antd";
|
||||
import { Button, Form, Input, message, Modal, Space, Table, Tag } from "antd";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { ExclamationCircleOutlined } from "@ant-design/icons";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { capitalize } from "lodash";
|
||||
import { useStore } from "../utils/useStore";
|
||||
import { LINKS } from "../routes/app";
|
||||
import { TopupsaldoModal } from "./TopupsaldoModal";
|
||||
|
||||
export const SupplierComponent = observer((props) => {
|
||||
const store = useStore();
|
||||
const [form] = Form.useForm();
|
||||
//const [formEdit] = Form.useForm();
|
||||
const { Option } = Select;
|
||||
const history = useHistory();
|
||||
const [idData, setIdData] = useState("");
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [code, setCode] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
await store.supplier.getData();
|
||||
setIsLoading(false);
|
||||
} catch (e) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
await store.supplier.getData();
|
||||
};
|
||||
|
||||
init();
|
||||
}, []);
|
||||
|
||||
|
|
@ -52,6 +32,14 @@ export const SupplierComponent = observer((props) => {
|
|||
setIdData(data.id);
|
||||
};
|
||||
|
||||
const handleTopup = (data) => {
|
||||
console.log(data, "isi data");
|
||||
form.setFieldsValue({
|
||||
code: data.code,
|
||||
});
|
||||
store.supplier.visibleModalTransaction = true;
|
||||
setCode(data.code);
|
||||
};
|
||||
const changeStatus = async (id, isActive) => {
|
||||
const status = isActive ? "inactive" : "active";
|
||||
const status2 = isActive ? "Inactivating" : "Activating";
|
||||
|
|
@ -78,6 +66,12 @@ export const SupplierComponent = observer((props) => {
|
|||
dataIndex: "code",
|
||||
key: "code",
|
||||
},
|
||||
,
|
||||
{
|
||||
title: "Saldo",
|
||||
dataIndex: "saldo",
|
||||
key: "saldo",
|
||||
},
|
||||
{
|
||||
title: "Status",
|
||||
dataIndex: "status",
|
||||
|
|
@ -85,8 +79,7 @@ export const SupplierComponent = observer((props) => {
|
|||
render: (text, record) => (
|
||||
<Tag
|
||||
color={record?.status === true ? "processing" : "#E3E8EE"}
|
||||
style={{ color: "#4F566B", cursor: "pointer" }}
|
||||
onClick={() => changeStatus(record?.id, record?.status)}
|
||||
style={{ color: "#4F566B"}}
|
||||
>
|
||||
{record?.status === true ? " ACTIVE" : "INACTIVE"}
|
||||
</Tag>
|
||||
|
|
@ -98,7 +91,13 @@ export const SupplierComponent = observer((props) => {
|
|||
render: (text, record) => (
|
||||
<Space size="middle">
|
||||
<Button onClick={() => handleEditButton(record)}>Edit</Button>
|
||||
<Button onClick={() => handleDelete(record.id)}>Delete</Button>
|
||||
<Button
|
||||
type={record?.status === true ? "danger" : "primary"}
|
||||
onClick={() => changeStatus(record?.id, record?.status)}
|
||||
>
|
||||
{record?.status === true ? "INACTIVE" : "ACTIVE"}
|
||||
</Button>
|
||||
<Button onClick={() => handleTopup(record)}> Top Up Saldo</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
|
|
@ -140,7 +139,6 @@ export const SupplierComponent = observer((props) => {
|
|||
const handleSubmit = async (data) => {
|
||||
console.log(data, "isi data2");
|
||||
if (idData !== "") {
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
await store.supplier.update(idData, data);
|
||||
message.success("Success Update Data Member");
|
||||
|
|
@ -148,21 +146,19 @@ export const SupplierComponent = observer((props) => {
|
|||
} catch (e) {
|
||||
message.error("Failed Update Data Member");
|
||||
}
|
||||
setConfirmLoading(false);
|
||||
|
||||
store.supplier.visibleModalSupplier = false;
|
||||
setIdData("");
|
||||
form.resetFields();
|
||||
} else {
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
await store.supplier.create(data);
|
||||
message.success("Success Add New Member");
|
||||
//await store.supplier.getData()
|
||||
} catch (e) {
|
||||
console.log(e, "apa errornya");
|
||||
message.error("Failed Add Member");
|
||||
}
|
||||
setConfirmLoading(false);
|
||||
|
||||
store.supplier.visibleModalSupplier = false;
|
||||
setIdData("");
|
||||
form.resetFields();
|
||||
|
|
@ -187,12 +183,9 @@ export const SupplierComponent = observer((props) => {
|
|||
let pageNumber = page.current;
|
||||
store.supplier.pageSize = page.pageSize;
|
||||
store.supplier.page = pageNumber - 1;
|
||||
// store.membership.isLoading = true;
|
||||
await store.supplier.getData();
|
||||
// store.membership.isLoading = false;
|
||||
}}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
visible={store.supplier.visibleModalSupplier}
|
||||
title={idData ? "Edit Supplier" : "Create a new Supplier"}
|
||||
|
|
@ -232,6 +225,7 @@ export const SupplierComponent = observer((props) => {
|
|||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
<TopupsaldoModal code={code} />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
74
src/component/TopupsaldoModal.js
Normal file
74
src/component/TopupsaldoModal.js
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
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 />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="amount"
|
||||
label="Amount"
|
||||
rules={[{ required: true, message: "Please input amount!" }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
@ -1,90 +1,73 @@
|
|||
import React, {useEffect, useState} from "react";
|
||||
import {Button, Card, Col, Input, Row, Tabs} from "antd";
|
||||
import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
|
||||
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
|
||||
import {useStore} from "../../utils/useStore";
|
||||
import {observer} from "mobx-react-lite";
|
||||
import {CommissionComponent} from "../../component/CommissionComponent";
|
||||
import {LINKS} from "../../routes/app";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Button, Card, Col, Input, Row, Tabs } from "antd";
|
||||
import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
|
||||
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
|
||||
import { useStore } from "../../utils/useStore";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { CommissionComponent } from "../../component/CommissionComponent";
|
||||
import { LINKS } from "../../routes/app";
|
||||
|
||||
const {TabPane} = Tabs;
|
||||
const {Search} = Input;
|
||||
const { TabPane } = Tabs;
|
||||
const { Search } = Input;
|
||||
|
||||
export const Commission = observer(() => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const store = useStore();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const store = useStore();
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
//await store.commission.getDataCategories();
|
||||
await store.commission.getData();
|
||||
setIsLoading(false);
|
||||
} catch (e) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
//await store.commission.getDataCategories();
|
||||
await store.commission.getData();
|
||||
setIsLoading(false);
|
||||
} catch (e) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
init();
|
||||
}, []);
|
||||
init();
|
||||
}, []);
|
||||
|
||||
// const handleChangeTabPane = async (key) => {
|
||||
// store.product.filterCategory = key;
|
||||
// console.log(key);
|
||||
// };
|
||||
const routeData = [
|
||||
{
|
||||
route: LINKS.HOME,
|
||||
name: "Home",
|
||||
},
|
||||
{
|
||||
route: LINKS.COMMISSION,
|
||||
name: <span style={{ fontWeight: "bold" }}>Commission</span>,
|
||||
},
|
||||
];
|
||||
|
||||
const routeData = [
|
||||
{
|
||||
route: LINKS.HOME,
|
||||
name: "Home",
|
||||
},
|
||||
{
|
||||
route: LINKS.COMMISSION,
|
||||
name: <span style={{fontWeight: 'bold'}}>Commission</span>,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={["ppob-container"].join(" ")}>
|
||||
<BreadcumbComponent data={routeData}/>
|
||||
<Card>
|
||||
<Row style={{marginBottom: 20}}>
|
||||
<Col span={12}>
|
||||
<Button>
|
||||
<FilterOutlined/>
|
||||
Filter
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={12} style={{textAlign: "right"}}>
|
||||
<Search
|
||||
placeholder="input search text"
|
||||
style={{
|
||||
width: store.ui.mediaQuery.isMobile ? 160 : 200,
|
||||
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
|
||||
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
|
||||
}}
|
||||
/>
|
||||
<Button onClick={() => store.partner.visibleModalPartner = true}>
|
||||
<PlusSquareOutlined/> New
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Tabs
|
||||
//onChange={handleChangeTabPane}
|
||||
size="default"
|
||||
tabBarGutter="50"
|
||||
>
|
||||
|
||||
<TabPane
|
||||
tab="Commision"
|
||||
key="1"
|
||||
>
|
||||
<CommissionComponent/>
|
||||
</TabPane>
|
||||
))
|
||||
</Tabs>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className={["ppob-container"].join(" ")}>
|
||||
<BreadcumbComponent data={routeData} />
|
||||
<Card>
|
||||
{/* <Row style={{ marginBottom: 20 }}> */}
|
||||
{/* <Col span={12}>
|
||||
<Button>
|
||||
<FilterOutlined />
|
||||
Filter
|
||||
</Button>
|
||||
</Col> */}
|
||||
{/* <Col span={24} style={{ textAlign: "right" }}>
|
||||
<Search
|
||||
placeholder="input search text"
|
||||
style={{
|
||||
width: store.ui.mediaQuery.isMobile ? 160 : 200,
|
||||
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
|
||||
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
|
||||
}}
|
||||
/>
|
||||
<Button onClick={() => (store.commission.visibleModalCommission = true)}>
|
||||
<PlusSquareOutlined /> New
|
||||
</Button>
|
||||
</Col>
|
||||
</Row> */}
|
||||
<div style={{marginTop:20}}> <CommissionComponent/></div>
|
||||
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -47,28 +47,6 @@ export const Supplier = observer(() => {
|
|||
init();
|
||||
}, []);
|
||||
|
||||
// const handleChangeTabPane = async (key) => {
|
||||
// store.product.filterCategory = key;
|
||||
// console.log(key);
|
||||
// };
|
||||
const handleCancelTransaction = () => {
|
||||
store.supplier.visibleModalTransaction = false;
|
||||
};
|
||||
const handleSubmitTransaction = async (data) => {
|
||||
console.log(data, "isi data2");
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
await store.supplier.createTransaction(data);
|
||||
message.success("Success Top Up");
|
||||
//await store.supplier.getData()
|
||||
} catch (e) {
|
||||
console.log(e, "apa errornya");
|
||||
message.error("Failed Top Up");
|
||||
}
|
||||
setConfirmLoading(false);
|
||||
store.supplier.visibleModalTransaction = false;
|
||||
form.resetFields();
|
||||
};
|
||||
const routeData = [
|
||||
{
|
||||
route: LINKS.HOME,
|
||||
|
|
@ -79,19 +57,19 @@ export const Supplier = observer(() => {
|
|||
name: <span style={{ fontWeight: "bold" }}>Supplier</span>,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<div className={["ppob-container"].join(" ")}>
|
||||
<BreadcumbComponent data={routeData} />
|
||||
<Card>
|
||||
<Row style={{ marginBottom: 20 }}>
|
||||
<Col span={12}>
|
||||
{/* <Col span={12}>
|
||||
<Button>
|
||||
<FilterOutlined />
|
||||
Filter
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={12} style={{ textAlign: "right" }}>
|
||||
</Col> */}
|
||||
<Col span={24} style={{ textAlign: "right" }}>
|
||||
<Search
|
||||
placeholder="input search text"
|
||||
style={{
|
||||
|
|
@ -102,76 +80,14 @@ export const Supplier = observer(() => {
|
|||
onSearch={(value) => console.log(value)}
|
||||
/>
|
||||
<Button
|
||||
//style={{ marginLeft: "10px" }}
|
||||
onClick={() => (store.supplier.visibleModalSupplier = true)}
|
||||
>
|
||||
<PlusSquareOutlined /> New
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Col span={24} style={{ textAlign: "right" }}>
|
||||
<Button
|
||||
onClick={() => (store.supplier.visibleModalTransaction = true)}
|
||||
>
|
||||
<DownloadOutlined /> Top Up Saldo
|
||||
</Button>
|
||||
</Col>
|
||||
<Tabs
|
||||
//onChange={handleChangeTabPane}
|
||||
size="default"
|
||||
tabBarGutter="50"
|
||||
>
|
||||
<TabPane tab="Supplier" key="1">
|
||||
<SupplierComponent />
|
||||
</TabPane>
|
||||
))
|
||||
</Tabs>
|
||||
<SupplierComponent />
|
||||
</Card>
|
||||
<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">
|
||||
<Form.Item
|
||||
name="supplier"
|
||||
label="Supplier"
|
||||
rules={[{ required: true, message: "Please input supplier!" }]}
|
||||
>
|
||||
<Select placeholder="Select Code Supplier" allowClear>
|
||||
{store.supplier.data.map((item) => (
|
||||
<Option value={item.code} key={item.code}>
|
||||
{item.code}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="amount"
|
||||
label="Amount"
|
||||
rules={[{ required: true, message: "Please input amount!" }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ import {
|
|||
Space,
|
||||
Table,
|
||||
Tag,
|
||||
Form,
|
||||
Select,
|
||||
} from "antd";
|
||||
import { useStore } from "../../utils/useStore";
|
||||
import { observer } from "mobx-react-lite";
|
||||
|
|
@ -19,14 +21,16 @@ import {
|
|||
ExclamationCircleOutlined,
|
||||
FilterOutlined,
|
||||
PlusSquareOutlined,
|
||||
DownloadOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { MembershipModal } from "./MembershipModal";
|
||||
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
|
||||
import { LINKS } from "../../routes/app";
|
||||
|
||||
const { Search } = Input;
|
||||
|
||||
const { Option } = Select;
|
||||
export const Membership = observer(() => {
|
||||
const [form] = Form.useForm();
|
||||
const store = useStore();
|
||||
const [visibleModal, setVisibleModal] = useState(false);
|
||||
const [initialData, setInitialData] = useState({});
|
||||
|
|
@ -62,6 +66,24 @@ export const Membership = observer(() => {
|
|||
message.error(`Failed ${status2} Membership`);
|
||||
}
|
||||
};
|
||||
const handleCancelTransaction = () => {
|
||||
store.supplier.visibleModalTransaction = false;
|
||||
};
|
||||
const handleSubmitTransaction = async (data) => {
|
||||
console.log(data, "isi data2");
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
await store.supplier.createTransaction(data);
|
||||
message.success("Success Top Up");
|
||||
//await store.supplier.getData()
|
||||
} catch (e) {
|
||||
console.log(e, "apa errornya");
|
||||
message.error("Failed Top Up");
|
||||
}
|
||||
setConfirmLoading(false);
|
||||
store.supplier.visibleModalTransaction = false;
|
||||
form.resetFields();
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
|
@ -219,6 +241,19 @@ export const Membership = observer(() => {
|
|||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Col
|
||||
span={24}
|
||||
style={{
|
||||
textAlign: "right",
|
||||
marginBottom: store.ui.mediaQuery.isMobile ? 30 : 10,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
onClick={() => (store.supplier.visibleModalTransaction = true)}
|
||||
>
|
||||
<DownloadOutlined /> Top Up Saldo
|
||||
</Button>
|
||||
</Col>
|
||||
{store.ui.mediaQuery.isDesktop && (
|
||||
<Table
|
||||
key="1"
|
||||
|
|
@ -306,6 +341,51 @@ export const Membership = observer(() => {
|
|||
)}
|
||||
</div>
|
||||
</Card>
|
||||
<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">
|
||||
<Form.Item
|
||||
name="supplier"
|
||||
label="Supplier"
|
||||
rules={[{ required: true, message: "Please input supplier!" }]}
|
||||
>
|
||||
<Select placeholder="Select Code Supplier" allowClear>
|
||||
{store.supplier.data.map((item) => (
|
||||
<Option value={item.code} key={item.code}>
|
||||
{item.code}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="amount"
|
||||
label="Amount"
|
||||
rules={[{ required: true, message: "Please input amount!" }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
<MembershipModal
|
||||
visible={visibleModal}
|
||||
confirmLoading={confirmLoading}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export class Commission {
|
|||
data = [];
|
||||
total_data = 0;
|
||||
filterCategory = null;
|
||||
visibleModalSupplier = false;
|
||||
visibleModalCommission = false;
|
||||
|
||||
pageCategories = 0;
|
||||
pageSizeCategories = 10
|
||||
|
|
@ -37,7 +37,7 @@ export class Commission {
|
|||
}
|
||||
|
||||
async update(id, data) {
|
||||
const response = await http.put(`/product/${id}`).send(data);
|
||||
const response = await http.put(`/config/commission/${id}`).send(data);
|
||||
await this.getData();
|
||||
return response;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user