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
+59 -83
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,94 +30,72 @@ 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) => { return (
// find due date <tr
// const dueDate = value?.delivery_date.split(" ")[0]; className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
// the price key={value.uid}
// let thePrice = PriceFormatter( >
// value?.price * 0.01, <td className="py-4">
// value?.currency_code, <div className="w-full flex justify-between items-center">
// value?.currency <div className="account-name flex space-x-4 items-center">
// ); <div className="icon w-14 h-14 flex justify-center items-center">
return ( <img
<tr src={taskImg}
// key={index} alt="task_img"
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50 flex items-center" className="w-full object-cover"
> />
<td className=" py-4"> </div>
<div className="flex space-x-2 items-center w-full"> <div className="">
<div className="w-full h-[40px] overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px] min-w-[60px]"> <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
<img {value.title}
// src={dataImage2} </p>
alt="data" <p className="text-sm text-thin-light-gray font-medium">
className="w-full h-full" {value.description}
/> </p>
</div> </div>
</div> </div>
</td> <div className="px-2">
<td className="py-4"> <p className="text-sm font-bold text-dark-gray dark:text-white">
<div className="flex flex-col flex-[0.9]"> {addedDate}
<h1 className="font-bold text-xl text-dark-gray dark:text-white"> </p>
{/* {value.title} */} <p className="text-sm text-dark-gray dark:text-white">
title Status: {value.status}
</h1> </p>
<div className="flex gap-4 items-center"> </div>
desd </div>
</div> </td>
</div> <td className="text-right py-4 px-2">
</td> <button
<td className="flex flex-col gap-1 py-4"> type="button"
<span>Date</span> className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
<span>Status</span> >
</td> View
<td className="text-right py-4 px-2"> </button>
<button </td>
type="button" </tr>
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"
>
View
</button>
</td>
</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>
)} )}
</> </>