Merge branches 'develop' and 'develop' of gitlab.com:empatnusabangsa/ppob/ppob-frontend into develop

src/component/ProductComponent.js

@@ -1,5 +1,5 @@
-import React, {useEffect, useState} from "react";
-import {Button, Form, Input, message, Modal, Select, Space, Table, Tag} from "antd";
+import React, {useState} from "react";
+import {Button, Col, Form, Input, message, Modal, Row, Select, Space, Table, Tag, Typography} from "antd";
 import {observer} from "mobx-react-lite";
 import {ExclamationCircleOutlined} from "@ant-design/icons";
 import {useHistory} from "react-router-dom";
@@ -7,6 +7,8 @@ import {capitalize} from "lodash";
 import {useStore} from "../utils/useStore";
 import {LINKS} from "../routes/app";
 
+const {Title, Text} = Typography;
+
 export const ProductComponent = observer((props) => {
     const store = useStore();
     const [form] = Form.useForm();
@@ -15,21 +17,9 @@ export const ProductComponent = observer((props) => {
     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 [filterSupplier, setFilterSupplier] = useState(null);
+    const [filterCategories, setFilterCategories] = useState(null);
+    const [filterSubCategories, setFilterSubCategories] = useState(null);
 
     const handleEditButton = (data) => {
         console.log(data, "isi data")
@@ -173,6 +163,42 @@ export const ProductComponent = observer((props) => {
         }
     }
 
+    const handleRemoveFilter = async () => {
+        store.product.filterSupplier = null;
+        store.product.filterCategory = null;
+        store.product.filterSubCategory = null;
+        setFilterSupplier(null);
+        setFilterCategories(null);
+        setFilterSubCategories(null);
+        await store.product.getData();
+        store.product.visibleModalFilterProduct = false;
+    };
+
+    const handleCancelFilter = () => {
+        setFilterSupplier(null);
+        setFilterCategories(null);
+        setFilterSubCategories(null);
+        store.product.visibleModalFilterProduct = false;
+    };
+
+    const handleSubmitFilter = async () => {
+        store.product.filterSupplier = filterSupplier;
+        store.product.filterCategory = filterCategories;
+        store.product.filterSubCategory = filterSubCategories;
+        await store.product.getData();
+        store.product.visibleModalFilterProduct = false;
+    };
+
+    const footerLayoutFilter = [
+        <Button key={'remove'} onClick={handleRemoveFilter} style={{
+            backgroundColor: '#e74e5e', color: '#fff'
+        }}>Remove Filter</Button>,
+        <Button key={'cancel'} onClick={handleCancelFilter}>Cancel</Button>,
+        <Button key={'submit'} onClick={handleSubmitFilter} style={{
+            backgroundColor: '#4e79e7', color: '#fff'
+        }}>Apply</Button>
+    ]
+
     return (
         <div>
             <Table
@@ -276,6 +302,66 @@ export const ProductComponent = observer((props) => {
                     </Form.Item>
                 </Form>
             </Modal>
+
+            <Modal
+                visible={store.product.visibleModalFilterProduct}
+                title={"Filter"}
+                footer={footerLayoutFilter}
+            >
+                <Row>
+                    <Col span={24}>
+                        <Title level={5} type={"secondary"} strong>Filter Supplier</Title>
+                        <Select
+                            mode={"multiple"}
+                            placeholder="Choose Supplier"
+                            onChange={(val) => {
+                                setFilterSupplier(val);
+                            }}
+                            style={{marginBottom: "20px", width: "100%"}}
+                        >
+                            {store.supplier.data.map((item) => (
+                                <Option value={item.id} key={item.id}>
+                                    {item.name}
+                                </Option>
+                            ))}
+                        </Select>
+                    </Col>
+                    <Col span={24}>
+                        <Title level={5} type={"secondary"} strong>Filter Categories</Title>
+                        <Select
+                            mode={"multiple"}
+                            placeholder="Choose Category"
+                            onChange={(val) => {
+                                setFilterCategories(val);
+                            }}
+                            style={{marginBottom: "20px", width: "100%"}}
+                        >
+                            {store.category.data.map((item) => (
+                                <Option value={item.id} key={item.id}>
+                                    {item.name}
+                                </Option>
+                            ))}
+                        </Select>
+                    </Col>
+                    <Col span={24}>
+                        <Title level={5} type={"secondary"} strong>Filter Sub-Categories</Title>
+                        <Select
+                            mode={"multiple"}
+                            placeholder="Choose Sub-Category"
+                            onChange={(val) => {
+                                setFilterSubCategories(val);
+                            }}
+                            style={{marginBottom: "20px", width: "100%"}}
+                        >
+                            {store.category.dataSubCategories.map((item) => (
+                                <Option value={item.id} key={item.id}>
+                                    {item.name}
+                                </Option>
+                            ))}
+                        </Select>
+                    </Col>
+                </Row>
+            </Modal>
         </div>
     );
 });