fixing Bug

2022-01-05 11:35:26 +07:00 · 2022-01-05 11:35:26 +07:00 · d47f838dc1
commit d47f838dc1
parent 2cb4f9319c
4 changed files with 193 additions and 70 deletions
--- a/src/pages/Membership/MembershipModal.js
+++ b/src/pages/Membership/MembershipModal.js
@ -102,8 +102,8 @@ export const MembershipModal = ({
              },
              {
                //pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
-                pattern: /^[\d]{2,12}$/,
-                message: "Phone number should be less than 12 character",
+                pattern: /^[\d]{10,12}$/,
+                message: "Phone number should be 10 - 12 character",
              },
            ]}
          >
--- a/src/pages/Payback/Payback.js
+++ b/src/pages/Payback/Payback.js
@ -234,9 +234,9 @@ export const Payback = observer(() => {
  const handleSubmitFilter = async () => {
    const data = form.getFieldsValue();
    //console.log(data);
-    store.transaction.filterMembership = filterMembership;
-    store.transaction.filterStart = data.start_date;
-    store.transaction.filterEnd = data.end_date;
+    store.payback.filterMembership = filterMembership;
+    store.payback.filterStart = data.start_date;
+    store.payback.filterEnd = data.end_date;
    modalLoader.setLoading(true);
    await store.payback.getDataConfirmation();
    modalLoader.setLoading(false);
--- a/src/pages/Payback/PaybackCreated.js
+++ b/src/pages/Payback/PaybackCreated.js
@ -1,19 +1,40 @@
-import React, {useContext, useEffect, useState} from "react";
-import {Button, Card, Col, Divider, Image, Input, List, message, Row, Table, Tag,} from "antd";
-import {useStore} from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
-import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
-import {PaybackModal} from "./PaybackModal";
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import {LINKS} from "../../routes/app";
-import {ModalLoaderContext} from "../../utils/modal";
-import {appConfig} from "../../config/app";
-import {PAYBACK_STATUS} from "../../constants/payback";
+import React, { useContext, useEffect, useState } from "react";
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Image,
+  Input,
+  List,
+  message,
+  DatePicker,
+  Row,
+  Table,
+  Tag,
+  Typography,
+  Select,
+  Form,
+  Modal,
+} from "antd";
+import { useStore } from "../../utils/useStore";
+import { observer } from "mobx-react-lite";
+import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
+import { PaybackModal } from "./PaybackModal";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { LINKS } from "../../routes/app";
+import { ModalLoaderContext } from "../../utils/modal";
+import { appConfig } from "../../config/app";
+import { PAYBACK_STATUS } from "../../constants/payback";

-const {Search} = Input;
+const { Search } = Input;

 export const PaybackCreated = observer(() => {
+  const { Option } = Select;
+  const { Title } = Typography;
+  const [form] = Form.useForm();
  const store = useStore();
+  const [filterMembership, setFilterMembership] = useState([]);
  const [initialData, setInitialData] = useState({});
  const modalLoader = useContext(ModalLoaderContext);

@ -45,11 +66,11 @@ export const PaybackCreated = observer(() => {
      dataIndex: "image_prove",
      key: "image_prove",
      render: (text, record) => (
-          <Image
-              src={`${appConfig.apiUrl}/config/image/${text}`}
-              style={{width: '5vw'}}
-              alt={record.id}
-          />
+        <Image
+          src={`${appConfig.apiUrl}/config/image/${text}`}
+          style={{ width: "5vw" }}
+          alt={record.id}
+        />
      ),
    },
    {
@ -57,23 +78,24 @@ export const PaybackCreated = observer(() => {
      dataIndex: "amount",
      key: "amount",
      render: (text) =>
-          new Intl.NumberFormat("id-ID", {
-            style: "currency",
-            currency: "IDR",
-          }).format(text),
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
    },
    {
      title: "Status",
      dataIndex: "status",
      key: "status",
-      width: '10%',
-      render: (text) =>
-          <Tag
-              color={PAYBACK_STATUS[text] === PAYBACK_STATUS[3] ? "cyan" : "red"}
-              style={{color: "#4F566B"}}
-          >
-            {PAYBACK_STATUS[text]}
-          </Tag>
+      width: "10%",
+      render: (text) => (
+        <Tag
+          color={PAYBACK_STATUS[text] === PAYBACK_STATUS[3] ? "cyan" : "red"}
+          style={{ color: "#4F566B" }}
+        >
+          {PAYBACK_STATUS[text]}
+        </Tag>
+      ),
    },
  ];

@ -84,23 +106,91 @@ export const PaybackCreated = observer(() => {
    },
    {
      route: LINKS.PAYBACK_CREATED,
-      name: <span style={{fontWeight: "bold"}}>Buat Pembayaran</span>,
+      name: <span style={{ fontWeight: "bold" }}>Buat Pembayaran</span>,
    },
  ];
+  const handleRemoveFilter = async () => {
+    store.payback.filterStart = null;
+    store.payback.filterEnd = null;
+    form.resetFields();
+    await store.payback.getDataCreated();
+    store.payback.visibleModalFilterCreate = false;
+  };
+
+  const handleCancelFilter = async () => {
+    store.payback.filterStart = null;
+    store.payback.filterEnd = null;
+    store.payback.visibleModalFilterCreate = false;
+    await store.payback.getDataCreated();
+  };
+
+  const handleSubmitFilter = async () => {
+    const data = form.getFieldsValue();
+    //console.log(data);
+    //store.payback.filterMembership = filterMembership;
+    store.payback.filterStart = data.start_date;
+    store.payback.filterEnd = data.end_date;
+    modalLoader.setLoading(true);
+    await store.payback.getDataCreated();
+    modalLoader.setLoading(false);
+    // form.resetFields();
+    // setFilterMembership([]);
+    store.payback.visibleModalFilterCreate = 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}/>
+      <BreadcumbComponent data={routeData} />
      <Card>
        <div>
-          <Row style={{marginBottom: 20}}>
+          <Row style={{ marginBottom: 20 }}>
            <Col span={12}>
-              <Button>
-                <FilterOutlined/>
+              <Button
+                 onClick={() => {
+                   store.payback.visibleModalFilterCreate = true;
+                 }}
+              >
+                <FilterOutlined />
                Filter
              </Button>
            </Col>
-            <Col span={12} style={{textAlign: "right"}}>
+            <Col span={12} style={{ textAlign: "right" }}>
              {/* <Search
                placeholder="input search text"
                style={{
@ -116,33 +206,33 @@ export const PaybackCreated = observer(() => {
                    store.payback.visibleModalPayback = true;
                  }}
                >
-                  <PlusSquareOutlined/> New
+                  <PlusSquareOutlined /> New
                </Button>
              )}
            </Col>
          </Row>
          {store.ui.mediaQuery.isDesktop && (
            <Table
-                key="1"
-                hasEmpty
-                columns={columns}
-                dataSource={store.payback.dataCreated}
-                bordered
-                pagination={{
-                  pageSize: store.payback.pageSizeCreated,
-                  total: store.payback.totalDataCreated,
-                  current: store.payback.pageCreated + 1,
-                  showSizeChanger: true,
-                  simple: false
-                }}
-                onChange={async (page) => {
-                  let pageNumber = page.current;
-                  store.payback.pageSizeCreated = page.pageSize;
-                  store.payback.pageCreated = pageNumber - 1;
-                  modalLoader.setLoading(true);
-                  await store.payback.getDataCreated();
-                  modalLoader.setLoading(false);
-                }}
+              key="1"
+              hasEmpty
+              columns={columns}
+              dataSource={store.payback.dataCreated}
+              bordered
+              pagination={{
+                pageSize: store.payback.pageSizeCreated,
+                total: store.payback.totalDataCreated,
+                current: store.payback.pageCreated + 1,
+                showSizeChanger: true,
+                simple: false,
+              }}
+              onChange={async (page) => {
+                let pageNumber = page.current;
+                store.payback.pageSizeCreated = page.pageSize;
+                store.payback.pageCreated = pageNumber - 1;
+                modalLoader.setLoading(true);
+                await store.payback.getDataCreated();
+                modalLoader.setLoading(false);
+              }}
            />
          )}

@ -161,10 +251,10 @@ export const PaybackCreated = observer(() => {
                pageSize: store.payback.pageSizeCreated,
                total: store.payback.totalDataCreated,
                current: store.payback.pageCreated + 1,
-                style: {marginBottom: "1rem", marginRight: "1rem"},
+                style: { marginBottom: "1rem", marginRight: "1rem" },
              }}
              dataSource={store.payback.dataCreated}
-              style={{padding: 0}}
+              style={{ padding: 0 }}
              renderItem={(item) => {
                return (
                  <div>
@ -185,11 +275,11 @@ export const PaybackCreated = observer(() => {
                        title={item.name}
                        description={
                          <div style={{}}>
-                            <Image src={item.image_prove} preview={false}/>
+                            <Image src={item.image_prove} preview={false} />
                          </div>
                        }
                      />
-                      <div style={{marginRight: 16}}>
+                      <div style={{ marginRight: 16 }}>
                        <p
                          style={{
                            fontSize: 9,
@ -200,7 +290,7 @@ export const PaybackCreated = observer(() => {
                        </p>
                      </div>
                    </List.Item>
-                    <Divider plain style={{margin: 0}}/>
+                    <Divider plain style={{ margin: 0 }} />
                  </div>
                );
              }}
@ -208,10 +298,40 @@ export const PaybackCreated = observer(() => {
          )}
        </div>
      </Card>
-
-      <PaybackModal
-        initialData={initialData}
-      />
+      <Modal
+        visible={store.payback.visibleModalFilterCreate}
+        title={"Filter"}
+        footer={footerLayoutFilter}
+        onCancel={async() => {
+          //form.resetFields();
+          store.payback.filterStart = null;
+          store.payback.filterEnd = null;
+          store.payback.visibleModalFilterCreate = false;
+          await store.payback.getDataCreated();
+        }}
+      >
+        <Row>
+          <Col span={24}>
+            <Form layout="vertical" name="filter" form={form}>
+              <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>
+        </Row>
+      </Modal>
+      <PaybackModal initialData={initialData} />
    </div>
  );
 });
--- a/src/store/payback.js
+++ b/src/store/payback.js
@ -20,6 +20,9 @@ export class Payback {
    filterMembership=null;
    filterStart=null;
    filterEnd=null;
+
+    //filter created
+    visibleModalFilterCreate=false
  constructor(ctx) {
    this.ctx = ctx;
    makeAutoObservable(this);