feat: create component product

src/component/ProductComponent.js

@@ -0,0 +1,162 @@
+import React, {useState} from "react";
+import {Button, 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 {store} from "../utils/useStore";
+import {PulsaModal} from "../pages/Product/PulsaModal";
+
+export const ProductComponent = observer((props) => {
+    const history = useHistory();
+    const [initialData, setInitialData] = useState({});
+    const [confirmLoading, setConfirmLoading] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+
+    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: "base_price",
+            key: "base_price",
+        },
+        {
+            title: "Gangguan",
+            dataIndex: "status",
+            key: "status",
+            render: (text, record) => (
+                <Tag
+                    color={record?.status === "AKTIF" ? "processing" : "#E3E8EE"}
+                    style={{color: "#4F566B"}}
+                >
+                    {capitalize(record?.status)}
+                </Tag>
+            ),
+        },
+        {
+            title: "Tersedia",
+            dataIndex: "tersedia",
+            key: "tersedia",
+            render: (text, record) => (
+                <Tag
+                    color={record?.status === "AKTIF" ? "processing" : "#E3E8EE"}
+                    style={{color: "#4F566B"}}
+                >
+                    {record?.status === "AKTIF" ? " Ya" : "Tidak"}
+                </Tag>
+            ),
+        },
+        {
+            title: "Action",
+            key: "action",
+            render: (text, record) => (
+                <Space size="middle">
+                    <Button
+                        onClick={() => {
+                            setInitialData(record);
+                            store.product.visibleModal = true;
+                        }}
+                    >Edit</Button>
+                    <Button
+                        onClick={async () => {
+                            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("/app/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 onSubmit = async (data) => {
+        if (initialData.id) {
+            setInitialData({})
+            setConfirmLoading(true);
+            try {
+                await store.product.update(initialData.id, data)
+                message.success("Success Update Data Member")
+            } catch (e) {
+                message.error("Failed Update Data Member")
+            }
+            setConfirmLoading(false);
+            store.product.visibleModal = false;
+        } else {
+            setInitialData({})
+            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.visibleModal = false;
+        }
+    }
+
+    return (
+        <div>
+            <Table
+                style={{textAlign: "center"}}
+                columns={columns}
+                dataSource={props.data}
+                bordered
+            />
+            <PulsaModal visible={store.product.visibleModal}
+                        confirmLoading={confirmLoading}
+                        initialData={initialData}
+                        onCreate={async (data) => {
+                            await onSubmit(data)
+                        }}
+                        onCancel={() => {
+                            setInitialData({})
+                            store.product.visibleModal = false;
+                        }}/>
+        </div>
+    );
+});