Skip to content

Commit

Permalink
feat: pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
Angga Maulana committed Apr 1, 2023
1 parent e04692c commit 618e201
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 29 deletions.
8 changes: 4 additions & 4 deletions components/Organizms/Table/Table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import PropTypes from "prop-types";

// components
export default function Table(props) {
const { color, children } = props
const { color, children, total, currentPage, lastPage, prev, next } = props

return (
<>
Expand Down Expand Up @@ -88,14 +88,14 @@ export default function Table(props) {

<div className="flex flex-col items-center">
<span className="text-sm text-gray-700 dark:text-gray-400">
Showing <span className="font-semibold text-gray-900 dark:text-gray-50">1</span> to <span className="font-semibold text-gray-900 dark:text-gray-50">10</span> of <span className="font-semibold text-gray-900 dark:text-gray-50">100</span> Entries
Showing <span className="font-semibold text-gray-900 dark:text-gray-50">1</span> to <span className="font-semibold text-gray-900 dark:text-gray-50">10</span> of <span className="font-semibold text-gray-900 dark:text-gray-50">{total}</span> Entries
</span>
<div className="bg-blueGray-600 inline-flex mt-2 xs:mt-0">
<button className="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-gray-800 rounded-l hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<button onClick={() => prev()} type="button" className="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-gray-800 rounded-l hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<svg aria-hidden="true" className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
Prev
</button>
<button className="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-gray-800 border-0 border-l border-gray-700 rounded-r hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<button onClick={() => next()} type="button" className="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-gray-800 border-0 border-l border-gray-700 rounded-r hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
Next
<svg aria-hidden="true" className="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
Expand Down
1 change: 0 additions & 1 deletion middleware.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ export function middleware(request) {
const { device } = userAgent(request)
const viewport = device.type === 'mobile' ? 'mobile' : 'desktop';
Cookies.set("viewport",viewport)
// console.log("VERFY",verify)
if (verify === undefined && request.nextUrl.pathname.startsWith('/member')) {
return NextResponse.redirect(new URL('/', request.url))
}
Expand Down
46 changes: 32 additions & 14 deletions pages/admin/admintransaction.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,13 @@ import { PaymentActions } from "store/redux/paymentReducer";
import { formatMoney } from "helper/numberFormat";
import moment from "moment";
import { FiCheckCircle, FiX } from "react-icons/fi";
import { useRouter } from "next/router";
import { useAlert } from "react-alert";

export default function Admintransaction() {
const dispatch = useDispatch()
const alert = useAlert()
const router = useRouter()
const { data } = useSelector(state => state.paymentReducer.order_list)
const [currentPage,setCurrentPage] = useState(1)
const [thead] = useState([
{
name: "No"
Expand Down Expand Up @@ -48,31 +47,44 @@ export default function Admintransaction() {
dispatch(PaymentActions.doGetOrderListRequest())
dispatch(PaymentActions.doGetTransactionListRequest())
},[])


const AppRoveTransaction = id => {
const AppRoveTransaction = (id,type) => {
dispatch(PaymentActions.doApproveTransactionRequest({
data: {
order_number: id,
status: "success"
status: type
},
message: (msg) => alert.success(msg),
navigate: () => {
router.replace("/admin/admintransaction")
}
}))
}

const nextPage = () => {
const lastPage = data?.data?.last_page
if(currentPage < lastPage){
const next = currentPage + 1;
setCurrentPage(next)
dispatch(PaymentActions.doGetOrderListRequest(next))
}
}

const prevPage = () => {
if(currentPage !== 1){
const prev = currentPage - 1;
setCurrentPage(prev)
dispatch(PaymentActions.doGetOrderListRequest(prev))
}
}

const renderPaymentStatus = item => {
switch (item) {
case 'success':{
return <p style={{backgroundColor: 'green',padding: 5, borderRadius: 5, color: 'white'}}>SUCCESS</p>
return <p style={{backgroundColor: 'green',padding: 5, borderRadius: 5, color: 'white', textAlign: 'center'}}>SUCCESS</p>
}
case 'pending':{
return <p style={{backgroundColor: '#e88e2e',padding: 5, borderRadius: 5, color: 'white'}}>PENDING</p>
return <p style={{backgroundColor: '#e88e2e',padding: 5, borderRadius: 5, color: 'white', textAlign: 'center'}}>PENDING</p>
}
case 'failed':{
return <p style={{backgroundColor: 'red',padding: 5, borderRadius: 5, color: 'white'}}>FAILED</p>
return <p style={{backgroundColor: 'red',padding: 5, borderRadius: 5, color: 'white', textAlign: 'center'}}>FAILED</p>
}
default:
break;
Expand All @@ -99,7 +111,13 @@ export default function Admintransaction() {
htmlFor="grid-password">
Payment History
</label>
<Table color="light">
<Table
color="light"
prev={prevPage}
next={nextPage}
total={data?.data?.total}
currentPage={currentPage}
lastPage={data?.data?.last_page}>
<table className="border-collapse items-center w-full bg-transparent">
<thead>
<tr>
Expand Down Expand Up @@ -143,11 +161,11 @@ export default function Admintransaction() {
<td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
<div>
<div className="flex row">
<button onClick={() => AppRoveTransaction(y?.order_number)} type="button" className="flex mx-auto" style={{width: 24, height: 24, backgroundColor: "green", alignItems: 'center', justifyContent: 'center', borderRadius: 5}}>
<button onClick={() => AppRoveTransaction(y?.order_number, "success")} type="button" className="flex mx-auto" style={{width: 24, height: 24, backgroundColor: "green", alignItems: 'center', justifyContent: 'center', borderRadius: 5}}>
<FiCheckCircle width={24} color="white" />
</button>
<div style={{width: 10}} />
<button className="flex mx-auto" style={{width: 24, height: 24, backgroundColor: "red", alignItems: 'center', justifyContent: 'center', borderRadius: 5}}>
<button onClick={() => AppRoveTransaction(y?.order_number, "failed")} type="button" className="flex mx-auto" style={{width: 24, height: 24, backgroundColor: "red", alignItems: 'center', justifyContent: 'center', borderRadius: 5}}>
<FiX width={24} color="white" />
</button>
</div>
Expand Down
5 changes: 3 additions & 2 deletions store/redux/paymentReducer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,9 @@ export const PaymentActions = {
error,
}),
// order list
doGetOrderListRequest: () => ({
type: Types.GET_ADMIN_ORDER_LIST_REQUEST
doGetOrderListRequest: data => ({
type: Types.GET_ADMIN_ORDER_LIST_REQUEST,
payload: data,
}),
doGetOrderListSuccess: data => {
return ({
Expand Down
17 changes: 9 additions & 8 deletions store/sagas/paymentSagas.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {call, put, takeLatest } from 'redux-saga/effects';
import {all, call, put, takeLatest } from 'redux-saga/effects';
import { api, URL } from "services/api";
import { Types } from "store/actionTypes";
import { PaymentActions } from 'store/redux/paymentReducer';
Expand All @@ -25,9 +25,10 @@ function* doUpgradePaketDeposit(data) {
}
}

function* doGetOrderList() {
function* doGetOrderList(data) {
try {
const response = yield call(api.get, URL.ORDER_LIST);
const { payload } = data
const response = yield call(api.get, `${URL.ORDER_LIST}?page=${payload}`);

yield put(PaymentActions.doGetOrderListSuccess(response?.data));
} catch (error) {
Expand All @@ -50,12 +51,12 @@ function* doApproveTransaction(data) {
const {payload} = data;
const response = yield call(api.post, URL.APPROVE_TRANSACTION, payload?.data);

yield put(PaymentActions.doApproveTransactionSuccess(response?.data));
yield all([
put(PaymentActions.doApproveTransactionSuccess(response?.data)),
put(PaymentActions.doGetOrderListRequest())
])

payload?.message("Approve Transaction success!")
setTimeout(() => {
payload?.navigate();
},700);
payload?.message("Change Status Transaction success!")
} catch (error) {
yield put(PaymentActions.doApproveTransactionFailure(error));
}
Expand Down

0 comments on commit 618e201

Please sign in to comment.