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

list pagination implemented

Browse Source
This commit is contained in:
victorAnumudu
2023-05-07 18:42:39 +01:00
parent 26258b0700
commit c17f933537
15 changed files with 1078 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyActiveJobs/MyActiveJobTable.jsx
+56 -41
View File
@@ -5,15 +5,29 @@ import dataImage3 from "../../assets/images/data-table-user-3.png";
import dataImage4 from "../../assets/images/data-table-user-4.png";
import SelectBox from "../Helpers/SelectBox";
import PaginatedList from "../Pagination/PaginatedList";
import { handlePagingFunc } from "../Pagination/HandlePagination";
export default function MyActiveJobTable({MyJobList, className }) {
const filterCategories = ["All Categories", "Explore", "Featured"];
const [selectedCategory, setCategory] = useState(filterCategories[0]);
const [currentPage, setCurrentPage] = useState(0);
const indexOfFirstItem = Number(currentPage);
const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
const currentActiveJobList = MyJobList?.result_list?.slice(indexOfFirstItem, indexOfLastItem);
const handlePagination = (e) => {
handlePagingFunc(e,setCurrentPage)
}
return (
<div
className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
className || ""
}`}
>
{MyJobList && MyJobList?.result_list &&
<div className="relative w-full overflow-x-auto sm:rounded-lg">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<tbody>
@@ -26,50 +40,47 @@ export default function MyActiveJobTable({MyJobList, className }) {
<>
{MyJobList && MyJobList?.result_list &&
MyJobList.result_list.length > 0 &&
MyJobList.result_list.map((value) => (
<>
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
<td className=" py-4">
<div className="flex space-x-2 items-center">
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
<img
src={dataImage2}
alt="data"
className="w-full h-full"
/>
</div>
<div className="flex flex-col">
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
{value.title}
</h1>
<div>
{value.description}
</div>
<span className="text-sm text-thin-light-gray">
Price: <span className="text-purple">{value.price*0.01}</span>
</span>
<span className="text-sm text-thin-light-gray">
Duration: <span className="text-purple"> {value.timeline_days} day(s)</span>
</span>
<span className="text-sm text-thin-light-gray">
Expire: <span className="text-purple"> {value.expire}</span>
</span>
</div>
currentActiveJobList.map((value, index) => (
<tr key={index} className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
<td className=" py-4">
<div className="flex space-x-2 items-center">
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
<img
src={dataImage2}
alt="data"
className="w-full h-full"
/>
</div>
</td>
<div className="flex flex-col">
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
{value.title}
</h1>
<div>
{value.description}
</div>
<span className="text-sm text-thin-light-gray">
Price: <span className="text-purple">{value.price*0.01}</span>
</span>
<span className="text-sm text-thin-light-gray">
Duration: <span className="text-purple"> {value.timeline_days} day(s)</span>
</span>
<span className="text-sm text-thin-light-gray">
Expire: <span className="text-purple"> {value.expire}</span>
</span>
</div>
</div>
</td>
<td className="text-right py-4 px-2">
<button
type="button"
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
View
</button>
</td>
</tr>
</>
<td className="text-right py-4 px-2">
<button
type="button"
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
View
</button>
</td>
</tr>
))}
@@ -77,7 +88,11 @@ export default function MyActiveJobTable({MyJobList, className }) {
}
</tbody>
</table>
{/* PAGINATION BUTTON */}
<PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= MyJobList?.result_list.length ? true : false} data={MyJobList?.result_list} start={indexOfFirstItem} stop={indexOfLastItem} />
{/* END OF PAGINATION BUTTON */}
</div>
}
</div>
);
}