ppob-frontend/src/component/CommissionComponent.js

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";

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);

    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");
        }
    };

    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");
            },
        });
    };

    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;
                }}
            />

            <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>
    );
});