diff options
| -rw-r--r-- | src/lib/transaction/api/cancelTransactionApi.js | 6 | ||||
| -rw-r--r-- | src/lib/transaction/api/transactionsApi.js | 6 | ||||
| -rw-r--r-- | src/lib/transaction/components/Transactions.jsx | 59 | ||||
| -rw-r--r-- | src/lib/transaction/hooks/useTransactions.js | 4 |
4 files changed, 58 insertions, 17 deletions
diff --git a/src/lib/transaction/api/cancelTransactionApi.js b/src/lib/transaction/api/cancelTransactionApi.js index 19891b5a..cd1798b5 100644 --- a/src/lib/transaction/api/cancelTransactionApi.js +++ b/src/lib/transaction/api/cancelTransactionApi.js @@ -1,7 +1,9 @@ import odooApi from "@/core/api/odooApi" +import { getAuth } from "@/core/utils/auth" -const cancelTransactionApi = async ({ partnerId, transaction }) => { - const dataCancelTransaction = await odooApi('POST', `/api/v1/partner/${partnerId}/sale_order/${transaction.id}/cancel`) +const cancelTransactionApi = async ({ transaction }) => { + const auth = getAuth() + const dataCancelTransaction = await odooApi('POST', `/api/v1/partner/${auth.partnerId}/sale_order/${transaction.id}/cancel`) return dataCancelTransaction } diff --git a/src/lib/transaction/api/transactionsApi.js b/src/lib/transaction/api/transactionsApi.js index d36c3664..995b4c5c 100644 --- a/src/lib/transaction/api/transactionsApi.js +++ b/src/lib/transaction/api/transactionsApi.js @@ -1,7 +1,9 @@ import odooApi from "@/core/api/odooApi" +import { getAuth } from "@/core/utils/auth" -const transactionsApi = async ({partnerId, query}) => { - const dataTransactions = await odooApi('GET', `/api/v1/partner/${partnerId}/sale_order?${query}`) +const transactionsApi = async ({ query }) => { + const auth = getAuth() + const dataTransactions = await odooApi('GET', `/api/v1/partner/${auth.partnerId}/sale_order?${query}`) return dataTransactions } diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx index 97eb5f91..45a6445c 100644 --- a/src/lib/transaction/components/Transactions.jsx +++ b/src/lib/transaction/components/Transactions.jsx @@ -1,8 +1,7 @@ import { useRouter } from "next/router" -import { getAuth } from "@/core/utils/auth" import { useState } from "react" import { toast } from "react-hot-toast" -import { EllipsisVerticalIcon } from "@heroicons/react/24/outline" +import { EllipsisVerticalIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline" import { downloadPurchaseOrder, downloadQuotation } from "../utils/transactions" import useTransactions from "../hooks/useTransactions" @@ -12,23 +11,28 @@ import TransactionStatusBadge from "./TransactionStatusBadge" import Spinner from "@/core/components/elements/Spinner/Spinner" import Link from "@/core/components/elements/Link/Link" import BottomPopup from "@/core/components/elements/Popup/BottomPopup" +import Pagination from "@/core/components/elements/Pagination/Pagination" +import { toQuery } from "lodash-contrib" +import _ from "lodash" const Transactions = () => { - const auth = getAuth() const router = useRouter() const { q = '', page = 1 } = router.query - const { transactions } = useTransactions({ - partnerId: auth?.partnerId, - query: { - name: q, - limit: 30, - offset: (page - 1) * 30 - } - }) + const limit = 10 + + const query = { + name: q, + offset: (page - 1) * limit, + limit + } + + const [ inputQuery, setInputQuery ] = useState(q) + + const { transactions } = useTransactions({ query }) const [ toOthers, setToOthers ] = useState(null) const [ toDelete, setToDelete ] = useState(null) @@ -45,9 +49,35 @@ const Transactions = () => { setToDelete(null) } + const pageCount = Math.ceil(transactions?.data?.saleOrderTotal / limit) + let pageQuery = _.omit(query, ['limit', 'offset']) + pageQuery = _.pickBy(pageQuery, _.identity) + pageQuery = toQuery(pageQuery) + + const handleSubmit = (e) => { + e.preventDefault() + if (!inputQuery) return + router.push(`/my/transactions?q=${inputQuery}`) + } + return ( <div className="p-4"> <div className="flex flex-col gap-y-4"> + <form className="flex gap-x-3" onSubmit={handleSubmit}> + <input + type="text" + className="form-input" + placeholder="Cari Transaksi..." + value={inputQuery} + onChange={(e) => setInputQuery(e.target.value)} + /> + <button + className="btn-light bg-transparent px-3" + type="submit" + > + <MagnifyingGlassIcon className="w-6" /> + </button> + </form> { transactions.isLoading && ( <div className="flex justify-center my-4"> <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" /> @@ -89,6 +119,13 @@ const Transactions = () => { </Link> </div> )) } + + <Pagination + pageCount={pageCount} + currentPage={parseInt(page)} + url={`/my/transactions${pageQuery}`} + className="mt-2 mb-2" + /> </div> <BottomPopup title="Lainnya" active={toOthers} close={() => setToOthers(null)}> diff --git a/src/lib/transaction/hooks/useTransactions.js b/src/lib/transaction/hooks/useTransactions.js index b5742cae..3f67fd3e 100644 --- a/src/lib/transaction/hooks/useTransactions.js +++ b/src/lib/transaction/hooks/useTransactions.js @@ -2,9 +2,9 @@ import { useQuery } from "react-query" import transactionsApi from "../api/transactionsApi" import _ from "lodash-contrib" -const useTransactions = ({ partnerId, query }) => { +const useTransactions = ({ query }) => { const queryString = _.toQuery(query) - const fetchTransactions = async () => await transactionsApi({ partnerId, query: queryString }) + const fetchTransactions = async () => await transactionsApi({ query: queryString }) const { data, isLoading, refetch } = useQuery(`transactions-${queryString}`, fetchTransactions) return { |