Perbaikan PPOB

src/pages/Payback/Payback.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import {
   Button,
   Card,
@@ -13,6 +13,9 @@ import {
   Space,
   Table,
   Tag,
+  Select,
+  Typography,
+  DatePicker,
 } from "antd";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
@@ -31,10 +34,14 @@ import { capitalize } from "lodash";
 import { PAYBACK_STATUS } from "../../constants/payback";
 
 const { Search } = Input;
-
+const { RangePicker } = DatePicker;
 export const Payback = observer(() => {
+  const { Option } = Select;
+  const { Title } = Typography;
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
+  const [filterSupplier, setFilterSupplier] = useState([]);
+  const [filterSubCategories, setFilterSubCategories] = useState([]);
 
   useEffect(() => {
     const init = async () => {
@@ -201,6 +208,67 @@ export const Payback = observer(() => {
     modalLoader.setLoading(false);
   };
 
+  const handleRemoveFilter = async () => {
+    store.product.filterSupplier = null;
+    store.product.filterSubCategory = null;
+    setFilterSupplier([]);
+    store.product.filterCategory = null;
+    setFilterSubCategories([]);
+    await store.product.getData();
+    store.product.visibleModalFilterProduct = false;
+  };
+
+  const handleCancelFilter = () => {
+    setFilterSupplier([]);
+    store.product.filterCategory = null;
+    setFilterSubCategories([]);
+    store.payback.visibleModalFilterPayback = false;
+  };
+
+  const handleSubmitFilter = async () => {
+    store.product.filterSupplier = filterSupplier;
+    store.product.filterSubCategory = filterSubCategories;
+    modalLoader.setLoading(true);
+    await store.product.getData();
+    modalLoader.setLoading(false);
+    store.product.visibleModalFilterProduct = false;
+  };
+
+  const handleFilterCategory = async (value) => {
+    if (value) {
+      store.product.filterCategory = value;
+      await store.product.getDataSubCategories();
+    } else {
+      store.product.filterCategory = null;
+      await store.product.getDataSubCategories();
+    }
+  };
+
+  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 className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
@@ -208,10 +276,14 @@ export const Payback = observer(() => {
         <div>
           <Row style={{ marginBottom: 20 }}>
             <Col span={12}>
-              {/* <Button>
+              <Button
+                onClick={() => {
+                  store.payback.visibleModalFilterPayback = true;
+                }}
+              >
                 <FilterOutlined />
                 Filter
-              </Button> */}
+              </Button>
             </Col>
             <Col span={12} style={{ textAlign: "right" }}>
               {/* <Search
@@ -386,6 +458,73 @@ export const Payback = observer(() => {
           )}
         </div>
       </Card>
+      <Modal
+        visible={store.payback.visibleModalFilterPayback}
+        title={"Filter"}
+        footer={footerLayoutFilter}
+      >
+        <Row>
+          <Col span={24}>
+            <Title level={5} type={"secondary"} strong>
+              From
+            </Title>
+            <Select
+              mode={"multiple"}
+              placeholder="Pilih Anggota"
+              onChange={(val) => {
+                setFilterSupplier(val);
+              }}
+              style={{ marginBottom: "20px", width: "100%" }}
+              value={filterSupplier}
+            >
+              {store.payback.dataConfirmation.map((item) => (
+                <Option value={item.id} key={item.id}>
+                  {item.userData_name}
+                </Option>
+              ))}
+            </Select>
+          </Col>
+          <Col span={24}>
+            <Title level={5} type={"secondary"} strong>
+              Date
+            </Title>
+            <RangePicker style={{ marginBottom: "20px", width: "100%" }} />
+            {/* <Select
+              mode={"multiple"}
+              placeholder="Choose Category"
+              onChange={async (val) => handleFilterCategory(val)}
+              style={{ marginBottom: "20px", width: "100%" }}
+              value={store.product.filterCategory || []}
+            >
+              {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%" }}
+              value={filterSubCategories}
+            >
+              {store.product.dataSubCategories.map((item) => (
+                <Option value={item.id} key={item.id}>
+                  {item.name}
+                </Option>
+              ))}
+            </Select>
+          </Col> */}
+        </Row>
+      </Modal>
     </div>
   );
 });