ppob-frontend/src/component/ProductComponent.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 ProductComponent = 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);
                //store.product.pageCategories=StrToLower(props.category)
                await store.product.getDataSubCategories();
                setIsLoading(false);
            } catch (e) {
                setIsLoading(false);
            }
        };

        init();
    }, []);

    const handleEditButton = (data) => {
        console.log(data, "isi data")
        form.setFieldsValue({
            name: data.name,
            price: data.price,
            markUpPrice: data.basePrice,
            code: data.code,
            status: data.status,
            subCategoriesId: data.sub_categories.id,
        });
        store.product.visibleModalProduct = true;
        setIdData(data.id);
    }

    const columns = [
        {
            title: "Kode",
            dataIndex: "code",
            key: "code",
        },
        {
            title: "Produk",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Harga Beli",
            dataIndex: "price",
            key: "price",
        },
        {
            title: "Harga Jual",
            dataIndex: "basePrice",
            key: "basePrice",
        },
        {
            title: "Gangguan",
            dataIndex: "status",
            key: "status",
            render: (text, record) => (
                <Tag
                    color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
                    style={{color: "#4F566B"}}
                >
                    {capitalize(record?.status)}
                </Tag>
            ),
        },
        {
            title: "Tersedia",
            dataIndex: "tersedia",
            key: "tersedia",
            render: (text, record) => (
                <Tag
                    color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
                    style={{color: "#4F566B"}}
                >
                    {record?.status === "ACTIVE" ? " Ya" : "Tidak"}
                </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.product.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.product.visibleModalProduct = false;
    }

    const handleSubmit = async (data) => {
        console.log(data, "isi data2")
        if (idData !== '') {
            setConfirmLoading(true);
            try {
                await store.product.update(idData, data)
                message.success("Success Update Data Member")
            } catch (e) {
                message.error("Failed Update Data Member")
            }
            setConfirmLoading(false);
            store.product.visibleModalProduct = false;
            setIdData('');
            form.resetFields();
        } else {
            setConfirmLoading(true);
            try {
                await store.product.create(data)
                message.success("Success Add New Member")
            } catch (e) {
                console.log(e, "apa errornya")
                message.error("Failed Add Member")
            }
            setConfirmLoading(false);
            store.product.visibleModalProduct = false;
            setIdData('');
            form.resetFields();
        }
    }

    return (
        <div>
            <Table
                style={{textAlign: "center"}}
                columns={columns}
                dataSource={store.product.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.product.pageSize = page.pageSize;
                    store.product.page = pageNumber - 1;
                    // store.membership.isLoading = true;
                    await store.product.getData();
                    // store.membership.isLoading = false;
                }}
            />

            <Modal
                visible={store.product.visibleModalProduct}
                title={idData ? "Edit Product" : "Create a new Product"}
                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="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 categories!"}]}
                    >
                        <Select placeholder="Select Sub Category" allowClear>
                            {store.product.dataSubCategories.map((item) => (
                                <Option value={item.id} key={item.id}>
                                    {item.name}
                                </Option>
                            ))}
                        </Select>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
});