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

Added assign popup dropdown, fixed the right api for my task page

Browse Source
This commit was merged in pull request #636.
This commit is contained in:
Chukwumdiebube Ojinta
2024-03-11 18:15:31 +01:00
parent 00c7f65092
commit 4f675b30ef
6 changed files with 89 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
+51 -16
View File
@@ -1,12 +1,13 @@
import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { useLocation } from "react-router-dom";
import usersService from "../../../services/UsersService";
import { tableReload } from "../../../store/TableReloads";
import ModalCom from "../../Helpers/ModalCom";
import { PriceFormatter } from "../../Helpers/PriceFormatter";
import LoadingSpinner from "../../Spinners/LoadingSpinner";
import Detail from "../../jobPopout/popoutcomponent/Detail";
import { NewTasks } from "./forms";
import { tableReload } from "../../../store/TableReloads";
import { useDispatch } from "react-redux";
const AssignTaskPopout = React.memo(
({
@@ -17,11 +18,27 @@ const AssignTaskPopout = React.memo(
familyTask,
activeTask,
setActiveTask,
setUpdatePage
setUpdatePage,
assignTaskChecker,
}) => {
const apiCall = new usersService();
let { pathname, state } = useLocation();
const dispatch = useDispatch()
const [selectedFamilyUid, setSelectedFamilyUid] = useState(null);
const handleFamChange = (event) => {
setSelectedFamilyUid(event.target.value);
};
const dispatch = useDispatch();
const getFamilySession = JSON.parse(sessionStorage.getItem("family_list"));
const familyList = getFamilySession?.map((member) => (
<option key={member?.family_uid} value={member?.family_uid}>
{member?.firstname} {member?.lastname}
</option>
));
let [requestStatus, setRequestStatus] = useState({
loading: false,
@@ -73,7 +90,9 @@ const AssignTaskPopout = React.memo(
// API PAYLOADS
job_id: activeTask.data?.job_id,
job_uid: activeTask.data?.job_uid,
family_uid: familyDetailsData?.uid || details?.family_uid,
family_uid: selectedFamilyUid
? selectedFamilyUid
: familyDetailsData?.uid || details?.family_uid,
job_description: activeTask.data?.description,
assign_mode: 110011,
};
@@ -94,11 +113,11 @@ const AssignTaskPopout = React.memo(
const requiredFields = {
banner,
// category,
currency:country,
currency: country,
description,
'job detail':job_detail,
"job detail": job_detail,
price,
timeline:timeline_days,
timeline: timeline_days,
title,
};
@@ -108,7 +127,9 @@ const AssignTaskPopout = React.memo(
setRequestStatus({
loading: false,
status: false,
message: `${field[0].toUpperCase()+field.slice(1).toLowerCase()} is empty`,
message: `${
field[0].toUpperCase() + field.slice(1).toLowerCase()
} is empty`,
});
return setTimeout(() => {
setRequestStatus({ loading: false, status: false, message: "" });
@@ -148,7 +169,7 @@ const AssignTaskPopout = React.memo(
status: true,
message: "action successful",
});
setUpdatePage(prev => !prev) // Updates family task page by calling the useeffect hook
setUpdatePage((prev) => !prev); // Updates family task page by calling the useeffect hook
dispatch(tableReload({ type: "WALLETTABLE" })); // RELOADS USER WALLET
setTimeout(() => {
setRequestStatus({ loading: false, status: false, message: "" });
@@ -169,15 +190,29 @@ const AssignTaskPopout = React.memo(
return (
<>
<ModalCom
action={action}
situation={situation}
>
<ModalCom action={action} situation={situation}>
<div className="w-11/12 lg:w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
<div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide flex items-center">
Assign task to{" "}
{familyDetailsData?.firstname || details?.firstName}
{pathname === "/acc-family/activities" ? (
<div className="w-[200px] h-[30px] ml-2">
<select
name=""
id=""
className="text-black/70 bg-transparent px-2 transition-all cursor-pointer focus:outline-none border border-gray-200 rounded-lg w-full h-full text-[1.2rem]"
onChange={handleFamChange}
value={selectedFamilyUid}
>
<option value="" disabled selected>
Select a member
</option>
{familyList}
</select>
</div>
) : (
<>{familyDetailsData?.firstname || details?.firstName}</>
)}
</h1>
<button
type="button"
src/components/FamilyAcc/FamilyTableNew.jsx
+10 -2
View File
@@ -3,6 +3,7 @@ import { apiConst } from "../../lib/apiConst";
import usersService from "../../services/UsersService";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
import { useLocation } from "react-router-dom";
// Lazy Imports for components
const FamilyWaitlist = lazy(() => import("./Tabs/FamilyNewWaitlist"));
@@ -10,12 +11,17 @@ const FamilyTasks = lazy(() => import("./Tabs/FamilyNewTasks"));
const FamilyPending = lazy(() => import("./Tabs/FamilyNewPending"));
export default function FamilyTableNew() {
let { pathname } = useLocation();
// Initial state for family details
const initialDetailState = {
loading: false,
data: null,
link: "",
};
const [assignTaskChecker, setAssignTaskChecker] = useState(false);
// console.log('accountDetails',accountDetails)
// State for family details, tasks, waitlist, and pending
const [details, setDetails] = useState({
@@ -80,6 +86,7 @@ export default function FamilyTableNew() {
loader={details.familyTasks.loading}
familyData={details.familyTasks.data}
action={familyPopUpHandler}
setAssignTaskChecker={setAssignTaskChecker}
/>
),
Waiting: (
@@ -120,7 +127,7 @@ export default function FamilyTableNew() {
const [familyTasksData, familyWaitingRes, familyPendingRes] =
await Promise.all([
apiCall.getMyActiveTaskList(),
apiCall.getMyActiveJobList(),
apiCall.ManageFamilyNewWaitlist(),
apiCall.ManageFamilyPending(),
]);
@@ -269,8 +276,9 @@ export default function FamilyTableNew() {
setFamilyTask={setFamilyTask}
setActiveTask={setActiveTask}
activeTask={activeTask}
// familyDetailsData={details.familyDetails.data}
setUpdatePage={setUpdatePage}
pathname={pathname}
assignTaskChecker={assignTaskChecker}
/>
)}
</div>
src/components/FamilyAcc/Tabs/FamilyNewPending.jsx
+1 -1
View File
@@ -25,7 +25,7 @@ export default function FamilyPending({ familyData, image_link, loader }) {
handlePagingFunc(e, setCurrentPage);
};
console.log(image_link)
console.log(image_link);
return (
<div
src/components/FamilyAcc/Tabs/FamilyNewTasks.jsx
+14 -17
View File
@@ -10,33 +10,33 @@ export default function FamilyNewTasks({
familyData,
className,
loader,
accountDetails,
action,
image_link,
}) {
let navigate = useNavigate();
let { pathname } = useLocation();
// ...
const filteredFamilyData = useMemo(
() =>
familyData?.result_list?.filter(
(data) => data?.family_uid === accountDetails?.family_uid
),
[familyData, accountDetails]
let filteredFamilyData = useMemo(
() => familyData?.filter((data) => data.family_uid !== ""),
[familyData]
);
const [currentPage, setCurrentPage] = useState(0);
const indexOfFirstItem = Number(currentPage);
const indexOfLastItem =
Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
const currentTasks = familyData?.slice(indexOfFirstItem, indexOfLastItem);
const currentTasks = filteredFamilyData?.slice(
indexOfFirstItem,
indexOfLastItem
);
const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
return (
<div
className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[538px] overflow-hidden rounded-2xl section-shadow p-3 ${
familyData && "flex items-center justify-center"
familyData?.length <= 0 && "flex items-center justify-center"
}`}
>
{loader ? (
@@ -76,11 +76,9 @@ export default function FamilyNewTasks({
value?.currency_code,
value?.currency
);
let image = `${
familyData.session_image_server
}${localStorage.getItem("session_token")}/job/${
value.job_uid
}`;
let image = `${image_link}${localStorage.getItem(
"session_token"
)}/job/${value.job_uid}`;
return (
<tr
key={index}
@@ -133,7 +131,6 @@ export default function FamilyNewTasks({
state: {
...value,
pathname,
accountDetails,
},
});
}}
@@ -156,11 +153,11 @@ export default function FamilyNewTasks({
prev={currentPage == 0 ? true : false}
next={
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
familyData?.result_list?.length
filteredFamilyData?.length
? true
: false
}
data={familyData?.result_list}
data={filteredFamilyData}
start={indexOfFirstItem}
stop={indexOfLastItem}
/>
src/components/FamilyAcc/index.jsx
+2 -1
View File
@@ -109,6 +109,7 @@ export default function FamilyAcc() {
if (data?.internal_return >= 0 && data?.status === "OK") {
const { result_list, session_image_server } = data;
setFamilyList({ result_list, session_image_server });
sessionStorage.setItem("family_list", JSON.stringify(result_list))
setLoader(false);
} else {
return;
@@ -165,7 +166,7 @@ export default function FamilyAcc() {
</div>
<div className="flex gap-4 items-center">
<Link to="/acc-family/activities" className={`nav-item flex items-center rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)] bg-[#76a5df] text-white px-2 gap-2`}>
<Link state={familyList} to="/acc-family/activities" className={`nav-item flex items-center rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)] bg-[#76a5df] text-white px-2 gap-2`}>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name="pending-job" />
</span>
src/components/FamilyPopup/SuggestTask.jsx
+11 -4
View File
@@ -254,10 +254,17 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
>
{pathname === "/acc-family/activities" ? (
<>
{" "}
<>
Continue <Icons name="chevron-right" />
</>
{submitTask.loading ? (
"Sending..."
) : submitTask.state === "success" ? (
"Completed"
) : submitTask.state === "bad" ? (
"An Error Occurred"
) : (
<>
Continue <Icons name="chevron-right" />
</>
)}
</>
) : (
<>