- added filter by transaction code in transaction history

src/pages/Membership/DetailUser.js

@@ -15,7 +15,7 @@ import {
   Image,
   Modal,
   Form,
-  DatePicker,
+  DatePicker, Input,
 } from "antd";
 import { UserOutlined, FilterOutlined,ExportOutlined } from "@ant-design/icons";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
@@ -36,6 +36,7 @@ export const DetailUser = observer(() => {
   const store = useStore();
   const [form] = Form.useForm();
   const [formExport] = Form.useForm();
+  const [formFilterByTrxCode] = Form.useForm();
   const modalLoader = useContext(ModalLoaderContext);
   const { id } = useParams();
   const [visibleModal, setVisibleModal] = useState(false);
@@ -43,8 +44,10 @@ export const DetailUser = observer(() => {
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [filterStart, setFilterStart] = useState([]);
   const [filterEnd, setFilterEnd] = useState([]);
+  const [filterTrxId, setFilterTrxId] = useState([]);
   const [visibleHis, setVisibleHis] = useState(true);
   const [actionFilter, setAction] = useState(false);
+  const [actionFilterByCode, setActionFilterByCode] = useState(false);
   const [modalExport, setModalExport] = useState(false);
 
   useEffect(() => {
@@ -389,6 +392,21 @@ export const DetailUser = observer(() => {
     setAction(false);
   };
 
+  const handleRemoveFilterByTrxId = async () => {
+    store.transaction.filterStart = null;
+    store.transaction.filterEnd = null;
+    store.transaction.filterTrxId = null;
+    formFilterByTrxCode.resetFields();
+    setFilterStart([]);
+    setFilterEnd([]);
+    setFilterTrxId([]);
+    store.transaction.visibleModalFilterTransactionByCode = false;
+    setActionFilterByCode(false);
+    await store.transaction.getDetailHistoryTransaction(
+        store.authentication.dataProfit.id
+    );
+  };
+
   const handleCancelFilter = async () => {
     store.transaction.filterStart = null;
     store.transaction.filterEnd = null;
@@ -404,6 +422,15 @@ export const DetailUser = observer(() => {
     setAction(false);
   };
 
+  const handleCancelFilterByTrxId = async () => {
+    store.transaction.filterStart = null;
+    store.transaction.filterEnd = null;
+    store.transaction.filterTrxId = null;
+    store.transaction.visibleModalFilterTransactionByCode = false;
+
+    setActionFilterByCode(false);
+  };
+
   const handleSubmitFilter = async () => {
     const data = form.getFieldsValue();
     store.transaction.filterStart = moment(data.start_date).format(
@@ -424,6 +451,20 @@ export const DetailUser = observer(() => {
     store.transaction.visibleModalFilterTransaction = false;
     setAction(false);
   };
+
+  const handleSubmitFilterByTrxId = async (data) => {
+    store.transaction.filterStart = null
+    store.transaction.filterEnd = null
+    store.transaction.filterTrxId = data.trx_id
+    modalLoader.setLoading(true);
+
+    modalLoader.setLoading(false);
+    store.transaction.visibleModalFilterTransactionByCode = false;
+    setActionFilterByCode(false);
+    await store.transaction.getDetailHistoryTransaction(
+        store.authentication.dataProfit.id
+    );
+  };
   const footerLayoutFilter = [
     <Button
         key={"remove"}
@@ -449,6 +490,39 @@ export const DetailUser = observer(() => {
       Terapkan
     </Button>,
   ];
+
+  const footerLayoutFilterByTrxId = [
+    <Button
+        key={"remove"}
+        onClick={handleRemoveFilterByTrxId}
+        style={{
+          backgroundColor: "#e74e5e",
+          color: "#fff",
+        }}
+    >
+      Hapus Filter
+    </Button>,
+    <Button key={"cancel"} onClick={handleCancelFilterByTrxId}>
+      Batal
+    </Button>,
+    <Button
+        key={"submit"}
+        onClick={() => {
+          formFilterByTrxCode.validateFields().then((data) => {
+            handleSubmitFilterByTrxId(data)
+          }).catch((info) => {
+            console.error("Validate Failed:", info);
+          });
+        }}
+        style={{
+          backgroundColor: "#4e79e7",
+          color: "#fff",
+        }}
+    >
+      Terapkan
+    </Button>,
+  ];
+
   return (
       <div className={["ppob-container"].join(" ")}>
         <BreadcumbComponent
@@ -929,6 +1003,17 @@ export const DetailUser = observer(() => {
                           <FilterOutlined />
                           Filter
                         </Button>
+
+                        <Button
+                            style={{ marginBottom: "1rem", marginLeft: 5 }}
+                            onClick={() => {
+                              store.transaction.visibleModalFilterTransactionByCode = true;
+                              store.transaction.page = 0;
+                            }}
+                        >
+                          <FilterOutlined />
+                          Filter By Transaction Code
+                        </Button>
                         <Table
                             key="1"
                             hasEmpty
@@ -1135,6 +1220,39 @@ export const DetailUser = observer(() => {
             </Col>
           </Row>
         </Modal>
+
+        <Modal
+            visible={store.transaction.visibleModalFilterTransactionByCode}
+            title={"Filter by transaction code"}
+            footer={footerLayoutFilterByTrxId}
+            onCancel={async () => {
+              store.transaction.filterStart = null;
+              store.transaction.filterEnd = null;
+              store.transaction.filterTrxId = null;
+              store.transaction.visibleModalFilterTransactionByCode = false;
+              actionFilter === true
+                  ? await store.transaction.getDataHistoryTopUp(id)
+                  : await store.transaction.getDetailHistoryTransaction(
+                      store.authentication.dataProfit.id
+                  );
+              //await store.transaction.getDetailHistoryTransaction();
+            }}
+        >
+          <Row>
+            <Col span={24}>
+              <Form layout="vertical" name="filter" form={formFilterByTrxCode}>
+                <Form.Item
+                    name="trx_id"
+                    label="Kode Transaksi"
+                    rules={[{ required: true, message: "Please input transaction code!" }]}
+                >
+                  <Input />
+                </Form.Item>
+              </Form>
+            </Col>
+          </Row>
+        </Modal>
+
         <Modal
             visible={modalExport}
             title={"Export"}

src/pages/Profile/Profile.js

@@ -34,12 +34,15 @@ const { RangePicker } = DatePicker;
 export const Profile = observer(() => {
   const store = useStore();
   const [form] = Form.useForm();
+  const [formFilterByTrxCode] = Form.useForm();
   const [formExport] = Form.useForm();
   const { id } = useParams();
   const modalLoader = useContext(ModalLoaderContext);
   const [filterStart, setFilterStart] = useState([]);
   const [filterEnd, setFilterEnd] = useState([]);
+  const [filterTrxId, setFilterTrxId] = useState([]);
   const [actionFilter, setAction] = useState(false);
+  const [actionFilterByCode, setActionFilterByCode] = useState(false);
   const [visible, setVisible] = useState(false);
   const [modalExport, setModalExport] = useState(false);
 
@@ -93,6 +96,19 @@ export const Profile = observer(() => {
     setAction(false);
   };
 
+  const handleRemoveFilterByTrxId = async () => {
+    store.transaction.filterStart = null;
+    store.transaction.filterEnd = null;
+    store.transaction.filterTrxId = null;
+    formFilterByTrxCode.resetFields();
+    setFilterStart([]);
+    setFilterEnd([]);
+    setFilterTrxId([]);
+    store.transaction.visibleModalFilterTransactionByCode = false;
+    setActionFilterByCode(false);
+    await store.transaction.getDataHistoryTransaction();
+  };
+
   const handleCancelFilter = async () => {
     store.transaction.filterStart = null;
     //form.resetFields();
@@ -107,6 +123,15 @@ export const Profile = observer(() => {
     //await store.transaction.getDataHistoryTransaction();
   };
 
+  const handleCancelFilterByTrxId = async () => {
+    store.transaction.filterStart = null;
+    store.transaction.filterEnd = null;
+    store.transaction.filterTrxId = null;
+    store.transaction.visibleModalFilterTransactionByCode = false;
+
+    setActionFilterByCode(false);
+  };
+
   const handleSubmitFilter = async () => {
     const data = form.getFieldsValue();
     store.transaction.filterStart = moment(data.start_date).format(
@@ -129,6 +154,18 @@ export const Profile = observer(() => {
     setAction(false);
   };
 
+  const handleSubmitFilterByTrxId = async (data) => {
+      store.transaction.filterStart = null
+      store.transaction.filterEnd = null
+      store.transaction.filterTrxId = data.trx_id
+      modalLoader.setLoading(true);
+
+      modalLoader.setLoading(false);
+      store.transaction.visibleModalFilterTransactionByCode = false;
+      setActionFilterByCode(false);
+      await store.transaction.getDataHistoryTransaction();
+  };
+
   const footerLayoutFilter = [
     <Button
       key={"remove"}
@@ -154,6 +191,39 @@ export const Profile = observer(() => {
       Terapkan
     </Button>,
   ];
+
+  const footerLayoutFilterByTrxId = [
+    <Button
+        key={"remove"}
+        onClick={handleRemoveFilterByTrxId}
+        style={{
+          backgroundColor: "#e74e5e",
+          color: "#fff",
+        }}
+    >
+      Hapus Filter
+    </Button>,
+    <Button key={"cancel"} onClick={handleCancelFilterByTrxId}>
+      Batal
+    </Button>,
+    <Button
+        key={"submit"}
+        onClick={() => {
+          formFilterByTrxCode.validateFields().then((data) => {
+            handleSubmitFilterByTrxId(data)
+          }).catch((info) => {
+            console.error("Validate Failed:", info);
+          });
+        }}
+        style={{
+          backgroundColor: "#4e79e7",
+          color: "#fff",
+        }}
+    >
+      Terapkan
+    </Button>,
+  ];
+
   const columns = [
     {
       title: "Nama Produk",
@@ -705,6 +775,18 @@ export const Profile = observer(() => {
                   <FilterOutlined />
                   Filter
                 </Button>
+
+                <Button
+                    style={{ marginBottom: "1rem", marginLeft: 5 }}
+                    onClick={() => {
+                      store.transaction.visibleModalFilterTransactionByCode = true;
+                      store.transaction.page = 0;
+                      setActionFilterByCode(true);
+                    }}
+                >
+                  <FilterOutlined />
+                  Filter By Transaction Code
+                </Button>
                 {store.ui.mediaQuery.isDesktop && (
                   <Table
                     columns={columns}
@@ -982,6 +1064,38 @@ export const Profile = observer(() => {
         </Row>
       </Modal>
 
+      <Modal
+          visible={store.transaction.visibleModalFilterTransactionByCode}
+          title={"Filter by transaction code"}
+          footer={footerLayoutFilterByTrxId}
+          onCancel={async () => {
+            //form.resetFields();
+            store.transaction.filterStart = null;
+            store.transaction.filterEnd = null;
+            store.transaction.filterTrxId = null;
+            store.transaction.visibleModalFilterTransactionByCode = false;
+            actionFilterByCode === true
+                ? await store.transaction.getDataHistoryTopUpProfile(
+                    store.authentication.profileData?.id
+                )
+                : await store.transaction.getDataHistoryTransaction();
+          }}
+      >
+        <Row>
+          <Col span={24}>
+            <Form layout="vertical" name="filter" form={formFilterByTrxCode}>
+              <Form.Item
+                  name="trx_id"
+                  label="Kode Transaksi"
+                  rules={[{ required: true, message: "Please input transaction code!" }]}
+              >
+                <Input />
+              </Form.Item>
+            </Form>
+          </Col>
+        </Row>
+      </Modal>
+
       <Modal
         visible={visible}
         title={"Ganti Password"}

src/store/transaction.js

@@ -64,8 +64,10 @@ export class Transaction {
 
   //filter
   visibleModalFilterTransaction = false;
+  visibleModalFilterTransactionByCode = false;
   filterStart = null;
   filterEnd = null;
+  filterTrxId = null;
   filterStartDetailUser = null;
   filterEndDetailUser = null;
   constructor(ctx) {
@@ -163,7 +165,7 @@ export class Transaction {
   async getDataHistoryTransaction() {
     try {
       const response = await http.get(
-        `/transaction/history?page=${this.page}&pageSize=${this.pageSize}&start=${this.filterStart}&end=${this.filterEnd}`
+        `/transaction/history?page=${this.page}&pageSize=${this.pageSize}&start=${this.filterStart}&end=${this.filterEnd}&trxId=${this.filterTrxId}`
       );
       console.log(response);
       this.dataHistoryTransaction = response.body.data ?? [];
@@ -175,7 +177,7 @@ export class Transaction {
 
   async getDetailHistoryTransaction(id) {
     try {
-      const response = await http.get(`/transaction/history-user/${id}?page=${this.page}&pageSize=${this.pageSize}&start=${this.filterStart}&end=${this.filterEnd}`);
+      const response = await http.get(`/transaction/history-user/${id}?page=${this.page}&pageSize=${this.pageSize}&start=${this.filterStart}&end=${this.filterEnd}&trxId=${this.filterTrxId}`);
       console.log(response, 'Data Trans');
       this.dataDetailHistoryTransactionDetailUser = response.body.data ?? [];
       this.total_data = response?.body?.count ?? 0;