From 07040832d76225d4191c95bce4029ee3e747531c Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Mon, 26 Aug 2024 15:42:20 +0100 Subject: [PATCH] timeline added --- src/components/MyJobs/MyJobTable.jsx | 5 +- src/components/jobPopout/NewJobListPopout.jsx | 472 ++++++++++++++++++ .../popoutcomponent/AssignToFamily.jsx | 67 +++ .../popoutcomponent/AssignToGroup.jsx | 67 +++ .../popoutcomponent/AssignToIndividual.jsx | 71 +++ .../popoutcomponent/AssignToPublic.jsx | 140 ++++++ .../popoutcomponent/JobFieldInput.jsx | 105 ++++ 7 files changed, 925 insertions(+), 2 deletions(-) create mode 100644 src/components/jobPopout/NewJobListPopout.jsx create mode 100644 src/components/jobPopout/popoutcomponent/AssignToFamily.jsx create mode 100644 src/components/jobPopout/popoutcomponent/AssignToGroup.jsx create mode 100644 src/components/jobPopout/popoutcomponent/AssignToIndividual.jsx create mode 100644 src/components/jobPopout/popoutcomponent/AssignToPublic.jsx create mode 100644 src/components/jobPopout/popoutcomponent/JobFieldInput.jsx diff --git a/src/components/MyJobs/MyJobTable.jsx b/src/components/MyJobs/MyJobTable.jsx index a403c0d..5a79a7c 100644 --- a/src/components/MyJobs/MyJobTable.jsx +++ b/src/components/MyJobs/MyJobTable.jsx @@ -13,7 +13,8 @@ import DeleteIcon from "../../assets/images/icon-delete.svg"; import EditIcon from "../../assets/images/icon-edit.svg"; import { tableReload } from "../AddJob/settings"; import CreditPopup from "../MyWallet/Popup/CreditPopup"; -import JobListPopout from "../jobPopout/JobListPopout"; +// import JobListPopout from "../jobPopout/JobListPopout"; +import NewJobListPopout from "../jobPopout/NewJobListPopout"; import EditJobPopoutNew from "../jobPopout/EditJobPopoutNew"; export default function MyJobTable({ MyJobList, reloadJobList, className }) { @@ -157,7 +158,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { {/* Job List Popout */} {jobPopout.show && ( - { setJobPopout({ show: false, data: {} }); diff --git a/src/components/jobPopout/NewJobListPopout.jsx b/src/components/jobPopout/NewJobListPopout.jsx new file mode 100644 index 0000000..2e05f7c --- /dev/null +++ b/src/components/jobPopout/NewJobListPopout.jsx @@ -0,0 +1,472 @@ +import { Field, Form, Formik } from "formik"; +import React, { useCallback, useEffect, useMemo, useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import * as Yup from "yup"; +import usersService from "../../services/UsersService"; +import { tableReload } from "../../store/TableReloads"; +import InputCom from "../Helpers/Inputs/InputCom/index"; +import ModalCom from "../Helpers/ModalCom"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; +import Detail from "./popoutcomponent/Detail"; +import { SocketValues } from "../Contexts/SocketIOContext"; +import JobFieldInput from "./popoutcomponent/JobFieldInput"; +import AssignToFamily from "./popoutcomponent/AssignToFamily"; +import AssignToIndividual from "./popoutcomponent/AssignToIndividual"; +import AssignToPublic from "./popoutcomponent/AssignToPublic"; +import AssignToGroup from "./popoutcomponent/AssignToGroup"; + +function NewJobListPopout({ + details, + onClose, + situation, + openWallet, + setWalletItem, + myJobList +}) { + + let {marketUpdate} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET + + const [selectedTab, setSelectedTab] = useState("public"); + const tabs = ["public", "individual", "group"]; + + const dispatch = useDispatch(); + + const [requestStatus, setRequestStatus] = useState({ + message: "", + status: false, + }); + + const [familyList, setFamilyList] = useState([]); + let [loader, setLoader] = useState({ + member: false, + jobFields: false + }); + + const apiCall = useMemo(() => new usersService(), []); + const { walletDetails } = useSelector((state) => state.walletDetails); + + const getWalletDetail = (currency) => { + // A FUNCTION TO GET USER BALANCE BASED ON TASK CURRENCY + const walletChecker = walletDetails?.data.find( + (item) => item.description === currency + ); + return walletChecker + ? { + description: walletChecker.description, + country: walletChecker.country, + code: walletChecker.code, + amount: walletChecker.amount, + } + : 0; + }; + + const taskWalletSelector = getWalletDetail(details?.currency); + + const openCreditPopup = () => { + onClose(); + setWalletItem(taskWalletSelector); + openWallet(); + }; + + // member listing + const memberList = useCallback(async () => { + setLoader({ member: true, jobFields: false }); + try { + let res = await apiCall.familyListings(); + const { data } = res; + if (data?.internal_return >= 0 && data?.status == "OK") { + let { result_list } = data; + setFamilyList(result_list); + setLoader({ member: false, jobFields: false }); + } else return; + } catch (error) { + setLoader({ member: false, jobFields: false }); + throw new Error(error); + } + }, [apiCall]); + + useEffect(() => { + memberList(); + }, [memberList]); + + let [textArea, setTextArea] = useState(details?.job_detail); + const [errMsg, setErrMsg] = useState({ + deliveryDetail: "", + jobFields: { + family: "", + public: "", + individual: "", + group: "", + }, + }); + + const handleInputChange = ({ target: { value } }) => { + setTextArea(value); + }; + + const errorHandler = ({ target: { name } }) => { + try { + if (name === "family") + setErrMsg({ jobFields: { family: "please select a family member" } }); + else if (name === "public") + setErrMsg({ jobFields: { public: "please select duration" } }); + else if (name === "individual") + setErrMsg({ jobFields: { individual: "please enter email" } }); + else if (name === "group") + setErrMsg({ jobFields: { group: "please select a group" } }); + } finally { + setTimeout(() => { + setErrMsg({ jobFields: "" }); + }, 5000); + } + }; + + const jobFieldHandler = async (values, helpers) => { + setLoader({ jobFields: true }); + let { job_id, job_uid } = details; + + if (!textArea) { + setErrMsg({ deliveryDetail: "delivery detail is required!" }); + return; + } + + let jobReq = { + job_id, + job_uid, + job_description: textArea, + }; + + let reqData; + + // for family input + if (values?.family) { + reqData = { + ...jobReq, + family_uid: values?.family, + assign_mode: 110011, + }; + } else if (values?.public) { + // for public input + reqData = { + ...jobReq, + duration: Number(values?.public), + assign_mode: 110022, + depend_uid: values?.depend_uid, + strict_timeline: values?.timeline, + }; + } else if (values?.individual) { + // for individual input + reqData = { + ...jobReq, + email: values?.individual, + assign_mode: 110033, + }; + } else if (values?.group) { + // for group input + reqData = { + ...jobReq, + email: "", + group_id: values?.group, + assign_mode: 110044, + duration: details?.timeline_days, + // duration: 0, + }; + } else { + setLoader({ jobFields: false }); + return; + } + + try { + const res = await apiCall.assignJobTask(reqData); + let { status, data } = await res; + if (status != 200 || data.internal_return < 0) { + setRequestStatus({ message: data?.status ? data?.status : "Unable to assign offer", status: false }); + return setTimeout(() => { + setLoader({ jobFields: false }); + setRequestStatus({ message: "", status: false }); + }, 5000); + } + marketUpdate('market', 'full-markets-jobs') // sends an event to the socket to update market lists + dispatch(tableReload({ type: "JOBTABLE" })); // reloads my job page + dispatch(tableReload({ type: "MARKETTABLELIST" })); // reloads market page + setRequestStatus({ message: data?.status_msg ? data?.status_msg : "Offer Assigned Successful", status: true }); + setTimeout(() => { + setLoader({ jobFields: false }); + onClose(); + // throw new Response(data); + }, 5000); + } catch (error) { + setRequestStatus({ message: "Unable to complete", status: false }); + setTimeout(() => { + setRequestStatus({ message: "", status: false }); + setLoader({ jobFields: false }); + throw new Error(error); + }, 5000); + } + }; + + const [groupList, setGroupList] = useState({ + loading: true, + groups: [], + members: [], + }); + + const DetailsSection = ({ label, value }) => ( +
+ +
+ ); + + // FUNCTION TO POPULATE USER GROUP LIST + useEffect(() => { + // setGroupList({loading: true, groups: [], members: []}) + apiCall + .jobGroupList({}) + .then((res) => { + const { status, data } = res; + if (status != 200 || data?.internal_return < 0) { + setGroupList({ loading: false, groups: [], members: [] }); + return; + } + if (data.result_list.length < 0) { + setGroupList({ loading: false, groups: [], members: [] }); + return; + } + setGroupList({ + loading: false, + groups: data.result_list, + members: data.result_list_member, + }); + }) + .catch((error) => { + setGroupList({ loading: false, groups: [], members: [] }); + }); + }, []); + + const DetailsComponent = () => { + const detailsArray = [ + { label: "Description", value: details.description }, + { label: "Price", value: details.thePrice }, + { label: "Timeline", value: `${details.timeline_days} day(s)` }, + { label: "Created", value: new Date(details?.created).toDateString() }, + ]; + + return ( +
+ {/*

{details.title}

*/} + + {/* INPUT SECTION */} + {detailsArray.map((detail, index) => ( + + ))} + +
+ +