Perbaikan Modal

2021-12-31 09:23:24 +07:00 · 2021-12-31 09:23:24 +07:00 · b5e404c0c1
commit b5e404c0c1
parent 42795d9ca4
6 changed files with 93 additions and 67 deletions
--- 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
--- 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;
        }}
      >
--- 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
--- 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;
  };

--- 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;
--- 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);