Merge branch 'develop' of https://gitlab.com/empatnusabangsa/ppob/ppob-frontend into develop

src/pages/Product/Product.js

@@ -1,24 +1,38 @@
-import React, {useState} from "react";
-import {Button, Card, Col, Input, message, Row, Tabs} from "antd";
+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 {Pulsa} from "./Pulsa";
-import {PulsaModal} from "./PulsaModal";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
+import {ProductComponent} from "../../component/ProductComponent";
 
 const {TabPane} = Tabs;
 const {Search} = Input;
 
 export const Product = observer(() => {
-    const [visibleModal, setVisibleModal] = useState(false)
-    const [initialData, setInitialData] = useState({})
-    const [confirmLoading, setConfirmLoading] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const store = useStore();
-    const callback = (key) => {
+
+    useEffect(() => {
+        const init = async () => {
+            try {
+                setIsLoading(true);
+                await store.product.getDataCategories();
+                await store.product.getData();
+                setIsLoading(false);
+            } catch (e) {
+                setIsLoading(false);
+            }
+        };
+
+        init();
+    }, []);
+
+    const handleChangeTabPane = async (key) => {
+        store.product.filterCategory = key;
         console.log(key);
     };
+
     const routeData = [
         {
             route: "/app/home",
@@ -29,32 +43,7 @@ export const Product = observer(() => {
             name: <span style={{fontWeight: 'bold'}}>Product</span>,
         },
     ];
-    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);
-            setVisibleModal(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);
-            setVisibleModal(false);
-        }
-    }
+
     return (
         <div className={["ppob-container"].join(" ")}>
             <BreadcumbComponent data={routeData}/>
@@ -71,44 +60,28 @@ export const Product = observer(() => {
                             placeholder="input search text"
                             style={{width: 200, marginRight: 10}}
                         />
-                        <Button onClick={() => setVisibleModal(true)}>
+                        <Button onClick={() => store.product.visibleModal = true}>
                             <PlusSquareOutlined/> New
                         </Button>
                     </Col>
                 </Row>
                 <Tabs
-                    defaultActiveKey="1"
-                    onChange={callback}
+                    onChange={handleChangeTabPane}
                     size="default"
                     tabBarGutter="50"
                 >
-                    <TabPane tab="Pulsa" key="1">
-                        <Pulsa/>
-                    </TabPane>
-                    <TabPane tab="Game Voucher" key="2">
-                        Game Voucher
-                    </TabPane>
-                    <TabPane tab="Product" key="3">
-                        Product
-                    </TabPane>
-                    <TabPane tab="Prduct" key="4">
-                        Prduct
-                    </TabPane>
-                    <TabPane tab="Prdct" key="5">
-                        Prdct
-                    </TabPane>
+                    {store.product.dataCategories.map((item) => (
+                        <TabPane
+                            tab={item.name}
+                            key={item.id}
+                        >
+                            <ProductComponent
+                                data={store.product.data}
+                            />
+                        </TabPane>
+                    ))}
                 </Tabs>
             </Card>
-            <PulsaModal visible={visibleModal}
-                        confirmLoading={confirmLoading}
-                        initialData={initialData}
-                        onCreate={async (data) => {
-                            onSubmit(data)
-                        }}
-                        onCancel={() => {
-                            setInitialData({})
-                            setVisibleModal(false);
-                        }}/>
         </div>
     );
 });

src/pages/Product/Pulsa.js

@@ -1,129 +0,0 @@
-import React, {useEffect, useState} from "react";
-import {Button, message, Modal, Space, Table, Tag} from "antd";
-import {useStore} from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
-import {ExclamationCircleOutlined} from "@ant-design/icons";
-import {useHistory} from "react-router-dom";
-
-export const Pulsa = observer(() => {
-    const store = useStore();
-    const history = useHistory();
-    const [visibleModal, setVisibleModal] = useState(false);
-    const [initialData, setInitialData] = useState({});
-    const [confirmLoading, setConfirmLoading] = useState(false);
-    const [isLoading, setIsLoading] = useState(false);
-    useEffect(() => {
-        const init = async () => {
-            try {
-                setIsLoading(true);
-                await store.product.getData();
-                setIsLoading(false);
-            } catch (e) {
-                setIsLoading(false);
-            }
-        };
-
-        init();
-    }, []);
-    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: "mark_up_price",
-            key: "mark_up_price",
-        },
-        {
-            title: "Gangguan",
-            dataIndex: "status",
-            key: "status",
-            render: (text, record) => (
-                <Tag
-                    color={record?.status === "AKTIF" ? "processing" : "#E3E8EE"}
-                    style={{color: "#4F566B"}}
-                >
-                    {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>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");
-            },
-        });
-    };
-    return (
-        <div>
-            <Table
-                style={{textAlign: "center"}}
-                columns={columns}
-                dataSource={store.product.data}
-                bordered
-            />
-        </div>
-    );
-});

src/pages/Product/PulsaModal.js

@@ -1,30 +1,50 @@
 import React, {useEffect, useState} from "react";
 import {Form, Input, Modal, Select} from "antd";
 import {useStore} from "../../utils/useStore";
+import {observer} from "mobx-react-lite";
 
-export const PulsaModal = ({visible, onCreate, onCancel}) => {
+export const PulsaModal = observer(({visible, onCreate, onCancel, initialData}) => {
   const [form] = Form.useForm();
   const {Option} = Select;
-  const dataStatus = ["Active", "Inactive"];
   const store = useStore();
   const [visibleModal, setVisibleModal] = useState(false);
-  const [initialData, setInitialData] = useState({});
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const init = async () => {
-    try {
-      setIsLoading(true);
-      await store.categories.getData();
-      setIsLoading(false);
-    } catch (e) {
-      setIsLoading(false);
-    }
-  };
 
   useEffect(() => {
+    const init = async () => {
+      try {
+        setIsLoading(true);
+        await store.product.getDataSubCategories();
+        setIsLoading(false);
+      } catch (e) {
+        setIsLoading(false);
+      }
+    };
+
     init();
   }, []);
 
+
+  const subCategoriesOption = [
+    <Option key={123} value={123}>
+      {123}
+    </Option>,
+    <Option key={431} value={123}>
+      {123}
+    </Option>
+  ];
+
+  const subCategoriesOption2 = store.product.dataSubCategories.slice().map(subCategory => {
+    return (
+        <Option key={subCategory.id} value={subCategory.id}>
+          {subCategory.name}
+        </Option>
+    )
+  });
+
+  console.log(store.product.dataSubCategories, 'subCategoriesOption2');
+
   return (
       <Modal
           visible={visible}
@@ -68,7 +88,7 @@ export const PulsaModal = ({visible, onCreate, onCancel}) => {
             <Input/>
           </Form.Item>
           <Form.Item
-              name="markUpPrice"
+              name="base_price"
               label="Mark Up Price"
               rules={[{required: true, message: "Please input mark up price!"}]}
           >
@@ -92,17 +112,24 @@ export const PulsaModal = ({visible, onCreate, onCancel}) => {
             </Select>
           </Form.Item>
           <Form.Item
-              name="subCategoriesId"
-              label="Sub Categories"
-              rules={[{required: true, message: "Please select Sub Category!"}]}
+              name="sub_category"
+              label="Sub categories"
+              rules={[{required: true, message: "Please select sub categories!"}]}
           >
             <Select placeholder="Select Sub Category" allowClear>
-              {store.categories.data.map((it) => {
-                return <Option value={it.id}>{it.name}</Option>;
-              })}
+              {subCategoriesOption2}
             </Select>
           </Form.Item>
+          {/*<Form.Item*/}
+          {/*    name="subCategories"*/}
+          {/*    label="Sub Categories"*/}
+          {/*    rules={[{required: true, message: "Please select Sub Category!"}]}*/}
+          {/*>*/}
+          {/*  <Select placeholder="Select Sub Category" allowClear>*/}
+          {/*    {subCategoriesOption2}*/}
+          {/*  </Select>*/}
+          {/*</Form.Item>*/}
         </Form>
       </Modal>
   );
-};
+});