From a868713ae314923df65919e1fb2b1d8aed1f16d7 Mon Sep 17 00:00:00 2001 From: Ebube Date: Thu, 6 Jul 2023 15:02:26 +0100 Subject: [PATCH] Added family pending component --- src/components/FamilyAcc/FamilyManageTabs.jsx | 34 +++- .../FamilyAcc/Tabs/FamilyPending.jsx | 154 ++++++++++++++++++ .../FamilyAcc/Tabs/FamilyWaitlist.jsx | 39 +++-- src/components/FamilyAcc/Tabs/index.js | 2 + src/services/UsersService.js | 12 ++ 5 files changed, 216 insertions(+), 25 deletions(-) create mode 100644 src/components/FamilyAcc/Tabs/FamilyPending.jsx diff --git a/src/components/FamilyAcc/FamilyManageTabs.jsx b/src/components/FamilyAcc/FamilyManageTabs.jsx index 01475d6..ce4b8e7 100644 --- a/src/components/FamilyAcc/FamilyManageTabs.jsx +++ b/src/components/FamilyAcc/FamilyManageTabs.jsx @@ -17,6 +17,7 @@ import { FamilyProfile, FamilyTasks, ProfileInfo, + FamilyPending, } from "./Tabs"; export default function FamilyManageTabs({ @@ -29,6 +30,7 @@ export default function FamilyManageTabs({ familyDetails: { loading: false, data: null }, familyTasks: { loading: false, data: null }, familyWaitList: { loading: false, data: null }, + familyPending: { loading: false, data: null }, }); const [errMsg, setErrMsg] = useState(""); const [familyTaskPopout, setFamilyTaskPopout] = useState(false); @@ -62,25 +64,30 @@ export default function FamilyManageTabs({ familyDetails: { loading: true }, familyTasks: { loading: true }, familyWaitList: { loading: true }, + familyPending: { loading: true }, }); const { family_uid } = accountDetails; const reqData = { family_uid }; - const [familyRes, tasksRes, familyWaitRes] = await Promise.all([ - apiCall.ManageFamily(reqData), - apiCall.ManageTasks(reqData), - apiCall.ManageFamilyWaitlist(), - ]); + const [familyRes, tasksRes, familyWaitRes, familyPending] = + await Promise.all([ + apiCall.ManageFamily(reqData), + apiCall.ManageTasks(reqData), + apiCall.ManageFamilyWaitlist(), + apiCall.ManageFamilyPending(), + ]); const familyData = familyRes.data; const tasksData = tasksRes.data; const familyWaitData = familyWaitRes.data; + const familyPendingData = familyPending.data; if ( familyData?.internal_return < 0 || tasksData?.internal_return < 0 || - familyWaitData?.internal_return < 0 + familyWaitData?.internal_return < 0 || + familyPendingData?.internal_return < 0 ) return; @@ -88,12 +95,14 @@ export default function FamilyManageTabs({ familyDetails: { loading: false, data: familyData }, familyTasks: { loading: false, data: tasksData }, familyWaitList: { loading: false, data: familyWaitData }, + familyPending: { loading: false, data: familyPendingData }, }); } catch (error) { setDetails({ familyDetails: { loading: false }, familyTasks: { loading: false }, familyWaitList: { loading: false }, + familyPending: { loading: false }, }); setErrMsg("An error occurred"); throw new Error(error); @@ -109,8 +118,9 @@ export default function FamilyManageTabs({ const tabs = [ { id: 1, name: "Tasks" }, { id: 2, name: "Waiting" }, - { id: 3, name: "Account" }, - { id: 4, name: "Profile" }, + { id: 3, name: "Pending" }, + { id: 4, name: "Account" }, + { id: 5, name: "Profile" }, ]; const [tab, setTab] = useState(tabs[0].name); @@ -131,6 +141,14 @@ export default function FamilyManageTabs({ Waiting: ( + ), + Pending: ( + ), diff --git a/src/components/FamilyAcc/Tabs/FamilyPending.jsx b/src/components/FamilyAcc/Tabs/FamilyPending.jsx new file mode 100644 index 0000000..1d344be --- /dev/null +++ b/src/components/FamilyAcc/Tabs/FamilyPending.jsx @@ -0,0 +1,154 @@ +import { useState } from "react"; +import { PaginatedList, handlePagingFunc } from "../../Pagination"; +import { PriceFormatter } from "../../Helpers/PriceFormatter"; +import dataImage2 from "../../../assets/images/data-table-user-2.png"; +import PendingJobsPopout from "../../jobPopout/PendingJobsPopout"; + +export default function FamilyPending({ + familyData, + className, + accountDetails, + loader, +}) { + let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW + + let filteredFamilyData = familyData?.result_list?.filter( + (data) => data?.family_uid === accountDetails?.family_uid + ); + + const [currentPage, setCurrentPage] = useState(0); + const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE); + const indexOfFirstItem = Number(currentPage); + const indexOfLastItem = + Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); + const currentPendingTasks = filteredFamilyData?.slice( + indexOfFirstItem, + indexOfLastItem + ); + + const handlePagination = (e) => { + handlePagingFunc(e, setCurrentPage); + }; + + return ( +
+ {filteredFamilyData && ( +
+ + + { + <> + {currentPendingTasks.length > 0 ? ( + currentPendingTasks.map((value, index) => { + let deliveryDate = value?.expire?.split(" ")[0]; + let thePrice = PriceFormatter( + value?.price * 0.01, + value?.currency_code, + value?.currency + ); + return ( + + + + + + ); + }) + ) : ( + + + + )} + + } + +
+
+
+ data +
+
+

+ {value.title} +

+
{value.description}
+ + Price:{" "} + + {thePrice} + + +
+ + Duration:{" "} + + {" "} + {value.timeline_days} day(s) + + + + Expire:{" "} + + {" "} + {deliveryDate} + + + + Sent to:{" "} + + {" "} + {value.job_to} + + +
+
+
+ 		+ +
No Pending Task!
+ {/* PAGINATION BUTTON */} + = filteredFamilyData.length} + data={filteredFamilyData} + start={indexOfFirstItem} + stop={indexOfLastItem} + /> + {/* END OF PAGINATION BUTTON */} +
+ )} + + {/* Active Job Popout */} + {jobPopout.show && ( + { + setJobPopout({ show: false, data: {} }); + }} + situation={jobPopout.show} + /> + )} + {/* End of Active Job Popout */} +
+ ); +} diff --git a/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx b/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx index 2efad21..84cdb1c 100644 --- a/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx +++ b/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx @@ -1,29 +1,26 @@ import { useState } from "react"; -import { useLocation, useNavigate } from "react-router-dom"; import { handlePagingFunc, PaginatedList } from "../../Pagination"; import LoadingSpinner from "../../Spinners/LoadingSpinner"; import SuggestTask from "../../FamilyPopup/SuggestTask"; -const FamilyWaitlist = ({ familyData, className, loader }) => { - const navigate = useNavigate(); - const { pathname } = useLocation(); +const FamilyWaitlist = ({ familyData, className, accountDetails, loader }) => { const [popUp, setPopUp] = useState({ show: false, data: {} }); - + + let filteredFamilyData = familyData?.result_list?.filter( + (data) => data?.family_uid === accountDetails?.family_uid + ); + const [currentPage, setCurrentPage] = useState(0); const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE); const indexOfFirstItem = currentPage; const indexOfLastItem = currentPage + itemsPerPage; - const currentTask = familyData?.result_list?.slice( + const currentTask = filteredFamilyData?.slice( indexOfFirstItem, indexOfLastItem ); const handlePagination = (e) => handlePagingFunc(e, setCurrentPage); - const popUpHandler = () => { - setPopUp((prev) => !prev); - }; - return (
{
) : ( <> - {familyData && familyData.result_list && ( + {filteredFamilyData && (
@@ -81,7 +78,9 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {