search and pagination transaction

1 files changed, 56 insertions, 5 deletions

diff --git a/src/pages/my/transactions/index.js b/src/pages/my/transactions/index.js
index b1e31661..c31336f2 100644
--- a/src/pages/my/transactions/index.js
+++ b/src/pages/my/transactions/index.js
@@ -3,36 +3,83 @@ import AppBar from "@/components/layouts/AppBar";
 import BottomPopup from "@/components/elements/BottomPopup";
 import Layout from "@/components/layouts/Layout";
 import WithAuth from "@/components/auth/WithAuth";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useAuth } from "@/core/utils/auth";
 import apiOdoo from "@/core/utils/apiOdoo";
 import currencyFormat from "@/core/utils/currencyFormat";
-import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+import { EllipsisVerticalIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import Link from "@/components/elements/Link";
+import Pagination from "@/components/elements/Pagination";
+import Alert from "@/components/elements/Alert";
 
 export default function Transactions() {
   const [ auth ] = useAuth();
   const router = useRouter();
+  const { 
+    q, 
+    page = 1 
+  } = router.query;
 
   const [ transactions, setTransactions ] = useState([]);
   const [ activePopupId, setActivePopupId ] = useState(null);
 
+  const [ pageCount, setPageCount ] = useState(0);
+  const [ isLoading, setIsLoading ] = useState(true);
+
+  const searchQueryRef = useRef();
+
   useEffect(() => {
     const loadTransactions = async () => {
       if (auth) {
-        const dataTransactions = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/sale_order`);
+        const limit = 10;
+        let offset = (page - 1) * 10;
+        let queryParams = [`limit=${limit}`, `offset=${offset}`];
+        if (q) queryParams.push(`name=${q}`);
+        queryParams = queryParams.join('&');
+        queryParams = queryParams ? '?' + queryParams : '';
+
+        const dataTransactions = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/sale_order${queryParams}`);
         setTransactions(dataTransactions);
+        setPageCount(Math.ceil(dataTransactions.sale_order_total / limit));
+        setIsLoading(false);
       };
     }
     loadTransactions();
-  }, [ auth ]);
+  }, [ auth, q, page ]);
+
+  const actionSearch = (e) => {
+    e.preventDefault();
+    let queryParams = [];
+    if (searchQueryRef.current.value) queryParams.push(`q=${searchQueryRef.current.value}`);
+    queryParams = queryParams.join('&');
+    queryParams = queryParams ? `?${queryParams}` : '';
+    router.push(`/my/transactions${queryParams}`);
+  };
 
   return (
     <WithAuth>
       <Layout>
         <AppBar title="Transaksi" />
 
-        <div className="p-4 flex flex-col gap-y-4">
+        <form onSubmit={actionSearch} className="p-4 pb-0 flex gap-x-4">
+          <input 
+            type="text" 
+            className="form-input" 
+            placeholder="Cari Transaksi" 
+            ref={searchQueryRef}
+            defaultValue={q}
+          />
+          <button type="submit" className="border border-gray_r-7 rounded px-3">
+            <MagnifyingGlassIcon className="w-5"/>
+          </button>
+        </form>
+
+        <div className="p-4 flex flex-col gap-y-5">
+          { transactions?.sale_order_total === 0 && !isLoading && (
+            <Alert type="info" className="text-center">
+              Transaksi tidak ditemukan
+            </Alert>
+          ) }
           { transactions?.sale_orders?.map((transaction, index) => (
             <div className="p-4 border border-gray_r-7 rounded-md" key={index}>
               <div className="grid grid-cols-2">
@@ -58,6 +105,10 @@ export default function Transactions() {
             </div>
           )) }
         </div>
+
+        <div className="pb-6">
+          <Pagination currentPage={page} pageCount={pageCount} url={`/my/transactions${q ? `?q=${q}` : ''}`} />
+        </div>
         
         { transactions?.sale_orders?.length > 0 && (
           <BottomPopup