WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

coupon table

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2023-06-10 11:49:43 -04:00
parent 99ea92ae99
commit 796f220c1d
2 changed files with 84 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyCoupons/CouponTable.jsx
+67
View File
@@ -0,0 +1,67 @@
import React, {useState} from 'react'
//import PaginatedList from '../../Pagination/PaginatedList'
import PaginatedList from '../Pagination/PaginatedList';
import { handlePagingFunc } from '../Pagination/HandlePagination';
function CouponTable({coupon}) {
const [currentPage, setCurrentPage] = useState(0);
const indexOfFirstItem = Number(currentPage);
const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
const currentCoupon = coupon?.data?.slice(indexOfFirstItem, indexOfLastItem);
const handlePagination = (e) => {
handlePagingFunc(e,setCurrentPage)
}
return (
<div className='flex flex-col justify-between h-full'>
<table className="wallet-activity w-full table-auto border-collapse text-left">
<thead className='border-b-2'>
<tr className='text-slate-600'>
<th className="p-2">Date</th>
<th className="p-2">Description</th>
<th className="p-2">Amount</th>
<th className="p-2">Active</th>
</tr>
</thead>
{coupon.data.length ?
(
<tbody>
{currentCoupon.map((item, index) => (
<tr key={index} className='text-slate-500'>
<td className="p-2">{item.added}</td>
<td className="p-2">{item.code}</td>
<td className="p-2">{item.amount}</td>
<td className="p-2">{item.status}</td>
</tr>
))}
</tbody>
)
:
coupon.error ?
(
<tbody>
<tr className='text-slate-500'>
<td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
</tr>
</tbody>
)
:
<tbody>
<tr className='text-slate-500'>
<td className="p-2" colSpan={4}>No Purchase History Found!</td>
</tr>
</tbody>
}
</table>
{/* PAGINATION BUTTON */}
<PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= coupon?.data?.length ? true : false} data={coupon?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
{/* END OF PAGINATION BUTTON */}
</div>
)
}
export default CouponTable
src/components/MyCoupons/MyCoupons.jsx
+17 -3
View File
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'
import Layout from "../Partials/Layout";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import CouponTable from "../MyWallet/WalletComponent/CouponTable";
import CouponTable from "./CouponTable";
import usersService from '../../services/UsersService'
export default function MyCoupons() {
@@ -33,10 +33,24 @@ export default function MyCoupons() {
<>
<Layout>
<div className="my-wallet-wrapper w-full mb-10">
<div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
{/* heading */}
<div className="sm:flex justify-between items-center mb-6">
<div className="mb-5 sm:mb-0">
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
Coupons
</h1>
</div>
<div className="slider-btns flex space-x-4">
</div>
</div>
<div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
{/* COUPON SECTION */}
<div className="lg:w-3/4 w-full mb-10 lg:mb-0">
<div className="lg:w-4/4 w-full mb-10 lg:mb-0">
<div className="wallet w-full md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Coupons</h2>
{couponHistory.loading ?