diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/pages/my/transactions/index.js | 61 |
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 |