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

Family waitlist complete

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2023-07-05 13:51:10 +01:00
parent ae93de5f25
commit cc66ebbbde
1 changed files with 59 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
+38 -62
View File
@@ -4,22 +4,20 @@ import { handlePagingFunc, PaginatedList } from "../../Pagination";
import LoadingSpinner from "../../Spinners/LoadingSpinner"; import LoadingSpinner from "../../Spinners/LoadingSpinner";
const FamilyWaitlist = ({ familyData, className, loader }) => { const FamilyWaitlist = ({ familyData, className, loader }) => {
let navigate = useNavigate(); const navigate = useNavigate();
let { pathname } = useLocation(); const { pathname } = useLocation();
const [currentPage, setCurrentPage] = useState(0); const [currentPage, setCurrentPage] = useState(0);
const indexOfFirstItem = Number(currentPage); const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
const indexOfLastItem = const indexOfFirstItem = currentPage;
Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); const indexOfLastItem = currentPage + itemsPerPage;
const currentTask = familyData?.result_list.slice( const currentTask = familyData?.result_list?.slice(
indexOfFirstItem, indexOfFirstItem,
indexOfLastItem indexOfLastItem
); );
const handlePagination = (e) => handlePagingFunc(e, setCurrentPage); const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
console.log("I am in family waitlist", familyData);
return ( return (
<div <div
className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${ className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${
@@ -32,67 +30,52 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
</div> </div>
) : ( ) : (
<> <>
{familyData && familyData?.result_list && ( {familyData && familyData.result_list && (
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full"> <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400"> <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<tbody> <tbody>
{ {currentTask.map((value) => {
<> const addedDate = value?.added.split(" ")[0];
{familyData && const taskImg = require(`../../../assets/images/family/${
familyData?.result_list && value?.banner || "default.jpg"
familyData.result_list.length > 0 && }`);
currentTask.map((value, index) => {
// find due date
// const dueDate = value?.delivery_date.split(" ")[0];
// the price
// let thePrice = PriceFormatter(
// value?.price * 0.01,
// value?.currency_code,
// value?.currency
// );
return ( return (
<tr <tr
// key={index} className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50 flex items-center" key={value.uid}
> >
<td className="py-4"> <td className="py-4">
<div className="flex space-x-2 items-center w-full"> <div className="w-full flex justify-between items-center">
<div className="w-full h-[40px] overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px] min-w-[60px]"> <div className="account-name flex space-x-4 items-center">
<div className="icon w-14 h-14 flex justify-center items-center">
<img <img
// src={dataImage2} src={taskImg}
alt="data" alt="task_img"
className="w-full h-full" className="w-full object-cover"
/> />
</div> </div>
</div> <div className="">
</td> <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
<td className="py-4"> {value.title}
<div className="flex flex-col flex-[0.9]"> </p>
<h1 className="font-bold text-xl text-dark-gray dark:text-white"> <p className="text-sm text-thin-light-gray font-medium">
{/* {value.title} */} {value.description}
title </p>
</h1> </div>
<div className="flex gap-4 items-center"> </div>
desd <div className="px-2">
<p className="text-sm font-bold text-dark-gray dark:text-white">
{addedDate}
</p>
<p className="text-sm text-dark-gray dark:text-white">
Status: {value.status}
</p>
</div> </div>
</div> </div>
</td>
<td className="flex flex-col gap-1 py-4">
<span>Date</span>
<span>Status</span>
</td> </td>
<td className="text-right py-4 px-2"> <td className="text-right py-4 px-2">
<button <button
type="button" type="button"
onClick={() => {
navigate("/manage-active-job", {
state: {
// ...value,
pathname,
// accountDetails
},
});
}}
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white" className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
> >
View View
@@ -101,25 +84,18 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
</tr> </tr>
); );
})} })}
</>
}
</tbody> </tbody>
</table> </table>
{/* PAGINATION BUTTON */}
<PaginatedList <PaginatedList
onClick={handlePagination} onClick={handlePagination}
prev={currentPage == 0 ? true : false} prev={currentPage === 0}
next={ next={
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >= currentPage + itemsPerPage >= familyData?.result_list.length
familyData?.result_list.length
? true
: false
} }
data={familyData?.result_list} data={familyData?.result_list}
start={indexOfFirstItem} start={indexOfFirstItem}
stop={indexOfLastItem} stop={indexOfLastItem}
/> />
{/* END OF PAGINATION BUTTON */}
</div> </div>
)} )}
</> </>