From b5e404c0c165c2532ea3bb539a2f3a40ad46e92d Mon Sep 17 00:00:00 2001
From: "ajat91.sudrajat" <ajat91.sudrajat@gmail.com>
Date: Fri, 31 Dec 2021 09:23:24 +0700
Subject: [PATCH] Perbaikan Modal

---
 src/component/ProductComponent.js  |  50 ++++++--------
 src/pages/Membership/Membership.js |   1 +
 src/pages/Payback/Payback.js       | 102 +++++++++++++++++++----------
 src/pages/Profile/Profile.js       |   1 +
 src/store/membership.js            |   3 +-
 src/store/payback.js               |   3 +
 6 files changed, 93 insertions(+), 67 deletions(-)

diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index a5f6f93..f2daca7 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -210,16 +210,16 @@ export const ProductComponent = observer((props) => {
     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;
+    store.product.filterSubCategory = null;
+    store.product.filterSupplier = null;
     setFilterSubCategories([]);
+    setFilterSupplier([]);
     store.product.visibleModalFilterProduct = false;
   };
 
@@ -229,18 +229,20 @@ export const ProductComponent = observer((props) => {
     modalLoader.setLoading(true);
     await store.product.getData();
     modalLoader.setLoading(false);
+    setFilterSupplier([]);
+    setFilterSubCategories([]);
     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 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
@@ -465,11 +467,15 @@ export const ProductComponent = observer((props) => {
           </Form.Item>
         </Form>
       </Modal>
-
       <Modal
         visible={store.product.visibleModalFilterProduct}
         title={"Filter"}
         footer={footerLayoutFilter}
+        onCancel={() => {
+          setFilterSupplier([]);
+          setFilterSubCategories([]);
+          store.product.visibleModalFilterProduct = false;
+        }}
       >
         <Row>
           <Col span={24}>
@@ -492,24 +498,6 @@ export const ProductComponent = observer((props) => {
               ))}
             </Select>
           </Col>
-          {/* <Col span={24}>
-            <Title level={5} type={"secondary"} strong>
-              Filter Categories
-            </Title>
-            <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
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index b664d30..2fa7696 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -507,6 +507,7 @@ export const Membership = observer(() => {
         title={"Filter"}
         footer={footerLayoutFilter}
         onCancel={() => {
+          form.resetFields();
           store.membership.visibleModalFilterMembership = false;
         }}
       >
diff --git a/src/pages/Payback/Payback.js b/src/pages/Payback/Payback.js
index 7a3e6a8..0269547 100644
--- a/src/pages/Payback/Payback.js
+++ b/src/pages/Payback/Payback.js
@@ -16,6 +16,7 @@ import {
   Select,
   Typography,
   DatePicker,
+  Form,
 } from "antd";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
@@ -38,15 +39,17 @@ const { RangePicker } = DatePicker;
 export const Payback = observer(() => {
   const { Option } = Select;
   const { Title } = Typography;
+  const [form] = Form.useForm();
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
-  const [filterSupplier, setFilterSupplier] = useState([]);
+  const [filterMembership, setFilterMembership] = useState([]);
   const [filterSubCategories, setFilterSubCategories] = useState([]);
 
   useEffect(() => {
     const init = async () => {
       try {
         modalLoader.setLoading(true);
+        await store.membership.getData();
         await store.payback.getDataConfirmation();
         modalLoader.setLoading(false);
       } catch (e) {
@@ -209,29 +212,36 @@ export const Payback = observer(() => {
   };
 
   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;
+    store.payback.filterMembership = null;
+    store.payback.filterStart = null;
+    store.payback.filterEnd = null;
+    setFilterMembership([]);
+    form.resetFields();
+    await store.payback.getDataConfirmation();
+    store.payback.visibleModalFilterPayback = false;
   };
 
   const handleCancelFilter = () => {
-    setFilterSupplier([]);
-    store.product.filterCategory = null;
-    setFilterSubCategories([]);
+    setFilterMembership([]);
+    form.resetFields();
+    store.payback.filterMembership = null;
+    store.payback.filterStart = null;
+    store.payback.filterEnd = null;
     store.payback.visibleModalFilterPayback = false;
   };
 
   const handleSubmitFilter = async () => {
-    store.product.filterSupplier = filterSupplier;
-    store.product.filterSubCategory = filterSubCategories;
+    const data = form.getFieldsValue();
+    //console.log(data);
+    store.transaction.filterMembership = filterMembership;
+    store.transaction.filterStart = data.start_date;
+    store.transaction.filterEnd = data.end_date;
     modalLoader.setLoading(true);
-    await store.product.getData();
+    await store.payback.getDataConfirmation();
     modalLoader.setLoading(false);
-    store.product.visibleModalFilterProduct = false;
+    form.resetFields();
+    setFilterMembership([]);
+    store.payback.visibleModalFilterPayback = false;
   };
 
   const handleFilterCategory = async (value) => {
@@ -462,34 +472,56 @@ export const Payback = observer(() => {
         visible={store.payback.visibleModalFilterPayback}
         title={"Filter"}
         footer={footerLayoutFilter}
+        onCancel={() => {
+          form.resetFields();
+          setFilterMembership([]);
+          store.payback.visibleModalFilterPayback = false;
+        }}
       >
         <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>
+            <Form layout="vertical" name="filter" form={form}>
+              <Select
+                mode={"multiple"}
+                placeholder="Pilih Anggota"
+                onChange={(val) => {
+                  setFilterMembership(val);
+                }}
+                style={{ marginBottom: "20px", width: "100%" }}
+                value={filterMembership}
+              >
+                {store.membership.data.map((item) => (
+                  <Option value={item.id} key={item.id}>
+                    {item.name}
+                  </Option>
+                ))}
+              </Select>
+              <Form.Item
+                name="start_date"
+                label="Dari"
+                rules={[{ required: true, message: "Please input Date!" }]}
+              >
+                <DatePicker style={{ width: "100%" }} />
+              </Form.Item>
+              <Form.Item
+                name="end_date"
+                label="Sampai"
+                rules={[{ required: true, message: "Please input Date!" }]}
+              >
+                <DatePicker style={{ width: "100%" }} />
+              </Form.Item>
+            </Form>
           </Col>
-          <Col span={24}>
-            <Title level={5} type={"secondary"} strong>
+          {/* <Col span={24}> */}
+
+          {/* <Title level={5} type={"secondary"} strong>
               Date
             </Title>
-            <RangePicker style={{ marginBottom: "20px", width: "100%" }} />
-            {/* <Select
+            <RangePicker style={{ marginBottom: "20px", width: "100%" }} /> */}
+          {/* <Select
               mode={"multiple"}
               placeholder="Choose Category"
               onChange={async (val) => handleFilterCategory(val)}
@@ -502,7 +534,7 @@ export const Payback = observer(() => {
                 </Option>
               ))}
             </Select> */}
-          </Col>
+          {/* </Col> */}
           {/* <Col span={24}>
             <Title level={5} type={"secondary"} strong>
               Filter Sub-Categories
diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index 1fb1a08..3f93e1a 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -74,6 +74,7 @@ export const Profile = observer(() => {
     modalLoader.setLoading(true);
     await store.transaction.getDataHistoryTransaction();
     modalLoader.setLoading(false);
+    form.resetFields();
     store.transaction.visibleModalFilterTransaction = false;
   };
 
diff --git a/src/store/membership.js b/src/store/membership.js
index a9f78cb..2c86220 100644
--- a/src/store/membership.js
+++ b/src/store/membership.js
@@ -24,7 +24,7 @@ export class Membership {
             const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}&superior=${this.filterMembership}&type=${this.filterPartner}`);
             // console.log(this.filterMembership)
             // console.log(this.filterPartner)
-            // console.log(response)
+             console.log(response)
             this.data = response.body.data.map((item, idx) => {
                 item.key = idx;
                 item.name = item?.user_detail?.name;
@@ -53,6 +53,7 @@ export class Membership {
     async getDataBySuperior() {
         try {
             const response = await http.get(`/users/find-by-supperior?page=${this.page}&pageSize=${this.pageSize}`);
+            //console.log(response)
             this.data = response.body.data.map((item, idx) => {
                 item.key = idx;
                 item.name = item?.user_detail?.name;
diff --git a/src/store/payback.js b/src/store/payback.js
index 3ef65d0..74b0624 100644
--- a/src/store/payback.js
+++ b/src/store/payback.js
@@ -17,6 +17,9 @@ export class Payback {
 
     //filter
     visibleModalFilterPayback = false;
+    filterMembership=null;
+    filterStart=null;
+    filterEnd=null;
   constructor(ctx) {
     this.ctx = ctx;
     makeAutoObservable(this);