From 41a617a265118c060958b1994bf297c5a1bf7ec5 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Thu, 22 Aug 2024 11:39:15 +0100
Subject: [PATCH] depends on select tage added

---
 src/components/MyJobs/MyJobTable.jsx       |   1 +
 src/components/jobPopout/JobListPopout.jsx | 384 +++++++++++----------
 2 files changed, 202 insertions(+), 183 deletions(-)

diff --git a/src/components/MyJobs/MyJobTable.jsx b/src/components/MyJobs/MyJobTable.jsx
index ad49b1f..a403c0d 100644
--- a/src/components/MyJobs/MyJobTable.jsx
+++ b/src/components/MyJobs/MyJobTable.jsx
@@ -165,6 +165,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
           setWalletItem={setWalletItem}
           openWallet={openPopUp}
           situation={jobPopout.show}
+          myJobList={MyJobList}
         />
       )}
       {/* End of Job List Popout */}
diff --git a/src/components/jobPopout/JobListPopout.jsx b/src/components/jobPopout/JobListPopout.jsx
index 879517c..6145cf2 100644
--- a/src/components/jobPopout/JobListPopout.jsx
+++ b/src/components/jobPopout/JobListPopout.jsx
@@ -10,17 +10,19 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import Detail from "./popoutcomponent/Detail";
 import { SocketValues } from "../Contexts/SocketIOContext";
 
+// .required("This is required ")
+
 const validationSchema = Yup.object().shape({
-  family: Yup.string().required("This is required "),
+  family: Yup.string(),
   public: Yup.string(),
   individual: Yup.string()
     .email("Invalid email format")
     .matches(
       /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/,
       "Invalid email format"
-    )
-    .required("Email is required"),
+    ),
   group: Yup.string(),
+  depend_uid: Yup.string(),
 });
 
 function JobListPopout({
@@ -29,6 +31,7 @@ function JobListPopout({
   situation,
   openWallet,
   setWalletItem,
+  myJobList
 }) {
 
   let {marketUpdate} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
@@ -46,12 +49,7 @@ function JobListPopout({
   const [familyList, setFamilyList] = useState([]);
   let [loader, setLoader] = useState({
     member: false,
-    jobFields: {
-      family: false,
-      public: false,
-      individual: false,
-      group: false,
-    },
+    jobFields: false
   });
 
   const apiCall = useMemo(() => new usersService(), []);
@@ -106,6 +104,7 @@ function JobListPopout({
     public: "",
     individual: "",
     group: "",
+    depend_uid: ''
   };
 
   let [textArea, setTextArea] = useState(details?.job_detail);
@@ -141,6 +140,7 @@ function JobListPopout({
   };
 
   const jobFieldHandler = async (values, helpers) => {
+    setLoader({ jobFields: true });
     let { job_id, job_uid } = details;
 
     if (!textArea) {
@@ -163,15 +163,14 @@ function JobListPopout({
         family_uid: values?.family,
         assign_mode: 110011,
       };
-      setLoader({ jobFields: { family: true } });
     } else if (values?.public !== "") {
       // for public input
       reqData = {
         ...jobReq,
         duration: Number(values?.public),
         assign_mode: 110022,
+        depend_uid: values?.depend_uid
       };
-      setLoader({ jobFields: { public: true } });
     } else if (values?.individual !== "") {
       // for individual input
       reqData = {
@@ -179,7 +178,6 @@ function JobListPopout({
         email: values?.individual,
         assign_mode: 110033,
       };
-      setLoader({ jobFields: { individual: true } });
     } else if (values?.group !== "") {
       // for group input
       reqData = {
@@ -190,8 +188,8 @@ function JobListPopout({
         duration: details?.timeline_days,
         // duration: 0,
       };
-      setLoader({ jobFields: { group: true } });
     } else {
+      setLoader({ jobFields: false });
       return;
     }
 
@@ -355,142 +353,198 @@ function JobListPopout({
                     ))}
                   </div>
                   <div className="grow flex flex-col bg-red-50 dark:bg-[#D85A5A] rounded-b-2xl">
-                    {selectedTab == "family" && (
-                      <Formik
-                        initialValues={initialValues}
-                        validationSchema={validationSchema.fields.family}
-                        onSubmit={jobFieldHandler}
-                      >
-                        {(props) => {
-                          return (
-                            <Form className="hidden">
-                              {/* Assign to Family */}
-                              <JobFieldInput
-                                label="Assign to family"
-                                select={true}
-                                inputName="family"
-                                value={props?.values.family}
-                                data={familyList}
-                                btnText="Assign to family"
-                                optionText="Select Family"
-                                loader={loader?.jobFields?.family}
-                                errorHandler={errorHandler}
-                                parentClass="w-full flex flex-col gap-4"
-                              />
-                              <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                                {" "}
-                                {props?.values?.family === "" && (
-                                  <span>{errMsg?.jobFields?.family}</span>
-                                )}
-                              </p>{" "}
-                            </Form>
-                          );
-                        }}
-                      </Formik>
-                    )}
 
-                    {selectedTab == "public" && (
-                      <Formik
-                        initialValues={initialValues}
-                        validationSchema={validationSchema.fields.public}
-                        onSubmit={jobFieldHandler}
-                      >
-                        {(props) => {
-                          return (
-                            <Form className="">
-                              {/* Offer this job to public input */}
-                              <JobFieldInput
-                                label="Offer this job to public"
-                                select={true}
-                                inputName="public"
-                                value={props?.values.public}
-                                data={publicArray}
-                                btnText="Show Task to Public"
-                                optionText="Select Duration"
-                                loader={loader?.jobFields?.public}
-                                errorHandler={errorHandler}
-                                parentClass="w-full flex flex-col gap-4"
-                              />
-                              <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                                {" "}
-                                {props?.values.public === "" && (
-                                  <span>{errMsg?.jobFields?.public}</span>
-                                )}
-                              </p>{" "}
-                            </Form>
-                          );
-                        }}
-                      </Formik>
-                    )}
+                    <Formik
+                      initialValues={initialValues}
+                      validationSchema={validationSchema.fields.public}
+                      onSubmit={jobFieldHandler}
+                    >
+                      {(props) => {
+                        return (
+                          <Form className="p-3">
+                            <div className='flex items-center justify-start mt-1 mb-2.5'>
+                              <label
+                                className="input-label border-2 w-full border-sky-700 rounded py-4 px-2 text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block tracking-wide"
+                                // htmlFor={''}
+                              >
+                                {selectedTab == 'family' ?
+                                  'Assign to family'
+                                  : selectedTab == 'public' ?
+                                  'Offer this job to public'
+                                  : selectedTab == 'individual' ?
+                                  'Offer this job to individual'
+                                  : selectedTab == 'group' ?
+                                  'Offer this job to your Group'
+                                  :
+                                  null
+                                }
+                              </label>
+                            </div>
+                            <div className='w-full'>
+                              {/* ASSIGN TO FAMILY */}
+                              {selectedTab == "family" && (
+                                <div className='hidden w-full'>
+                                  <JobFieldInput
+                                    select={true}
+                                    inputName="family"
+                                    value={props?.values.family}
+                                    data={familyList}
+                                    optionText="Select Family"
+                                    errorHandler={errorHandler}
+                                    parentClass="w-full flex flex-col gap-4"
+                                  />
+                                  <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                                    {" "}
+                                    {props?.values?.family === "" && (
+                                      <span>{errMsg?.jobFields?.family}</span>
+                                    )}
+                                  </p>{" "}
+                                </div>
+                              )}
 
-                    {selectedTab == "individual" && (
-                      <Formik
-                        initialValues={initialValues}
-                        validationSchema={validationSchema.fields.individual}
-                        onSubmit={jobFieldHandler}
-                      >
-                        {(props) => {
-                          return (
-                            <Form className="">
-                              {/* Offer this job to individual input */}
-                              <JobFieldInput
-                                label="Offer this job to individual"
-                                input={true}
-                                inputName="individual"
-                                value={props?.values.individual}
-                                placeholder="Enter email of individual"
-                                inputHandler={props?.handleChange}
-                                btnText="Send Offer to Individual"
-                                loader={loader?.jobFields?.individual}
-                                errorHandler={errorHandler}
-                                parentClass="w-full flex flex-col gap-4"
-                              />
-                              <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                                {" "}
-                                {props?.values.individual === "" && (
-                                  <span>{errMsg?.jobFields?.individual}</span>
-                                )}
-                              </p>{" "}
-                            </Form>
-                          );
-                        }}
-                      </Formik>
-                    )}
+                              {/* ASSIGN TO PUBLIC/MARKET */}
+                              {selectedTab == "public" && (
+                                <div className='w-full'>
+                                  <div className='mb-3 w-full flex flex-col xxs:flex-row items-center gap-1'>
+                                    <label className='w-full xxs:max-w-[120px] xxs:text-right'>Depends on</label>
+                                    {/* <JobFieldInput
+                                      input={true}
+                                      select={true}
+                                      inputName="depend_uid"
+                                      value={props?.values.depend_uid}
+                                      data={myJobList}
+                                      optionText="None"
+                                      parentClass="w-full flex flex-col gap-4"
+                                    /> */}
+                                    <div
+                                      className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-[1rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
+                                    >
+                                      <select 
+                                        className='px-2 w-full h-full bg-white border-0 outline-0'
+                                        name="depend_uid"
+                                        value={props?.values.depend_uid}
+                                        onChange={props.handleChange}
+                                      >
+                                        <>
+                                          {myJobList.loading ? (
+                                            <option value={""}>Loading...</option>
+                                          ) : myJobList?.data?.result_list?.length > 0 ? (
+                                            <>
+                                              <option value="">None</option>
+                                              {myJobList?.data?.result_list?.map((item, index) => (
+                                                <option value={item?.job_uid} key={item.job_uid}>
+                                                  {item?.title}
+                                                </option>
+                                              ))}
+                                            </>
+                                          ) : (
+                                            <option value="">No Job Found</option>
+                                          )}
+                                        </>
+                                      </select>
+                                    </div>
+                                  </div>
+                                  
+                                  <div className='mb-3 w-full flex flex-col xxs:flex-row items-center gap-1'>
+                                    <label className='w-full xxs:max-w-[120px] xxs:text-right'>Duration <span className='text-red-600 tracking-wide'>{(props?.values.public === "" && errMsg?.jobFields?.public) && '*'}</span></label>
+                                    <div className='w-full'>
+                                      <JobFieldInput
+                                        select={true}
+                                        inputName="public"
+                                        value={props?.values.public}
+                                        data={publicArray}
+                                        optionText="Select Duration"
+                                        parentClass="w-full flex flex-col gap-4"
+                                      />
+                                      {/* <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                                        {" "}
+                                        {props?.values.public === "" && (
+                                          <span>{errMsg?.jobFields?.public}</span>
+                                        )}
+                                      </p>{" "} */}
+                                    </div>
+                                  </div>
+                                </div>
+                              )}
 
-                    {/* { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 && } */}
-                    {selectedTab == "group" && (
-                      <Formik
-                        initialValues={initialValues}
-                        validationSchema={validationSchema.fields.group}
-                        onSubmit={jobFieldHandler}
-                      >
-                        {(props) => {
-                          return (
-                            <Form className="">
-                              {/* Offer this job to your group input */}
-                              <JobFieldInput
-                                label="Offer this job to your Group"
-                                select={true}
-                                inputName="group"
-                                value={props?.values.group}
-                                btnText="Send Order to Group"
-                                optionText="Select Group"
-                                loader={loader?.jobFields?.group}
-                                errorHandler={errorHandler}
-                                data={groupList}
-                                parentClass="w-full flex flex-col gap-4"
-                              />
-                              <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                                {" "}
-                                {props?.values.group === "" && (
-                                  <span>{errMsg?.jobFields?.group}</span>
-                                )}
-                              </p>
-                            </Form>
-                          );
-                        }}
-                      </Formik>
-                    )}
+                              {/* ASSIGN TO INDIVIDUAL */}
+                              {selectedTab == "individual" && (
+                                <div className='w-full'>
+                                  <JobFieldInput
+                                    input={true}
+                                    inputName="individual"
+                                    value={props?.values.individual}
+                                    placeholder="Enter email of individual"
+                                    inputHandler={props?.handleChange}
+                                    parentClass="w-full flex flex-col gap-4"
+                                  />
+                                  <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                                    {" "}
+                                    {props?.values.individual === "" && (
+                                      <span>{errMsg?.jobFields?.individual}</span>
+                                    )}
+                                  </p>{" "}
+                                </div>
+                              )}
+
+                              {/* ASSIGN TO GROUP */}
+                              {selectedTab == "group" && (
+                                <div className='w-full'>
+                                  <JobFieldInput
+                                    select={true}
+                                    inputName="group"
+                                    value={props?.values.group}
+                                    optionText="Select Group"
+                                    data={groupList}
+                                    parentClass="w-full flex flex-col gap-4"
+                                  />
+                                  <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                                    {" "}
+                                    {props?.values.group === "" && (
+                                      <span>{errMsg?.jobFields?.group}</span>
+                                    )}
+                                  </p>
+                                </div>
+                              )}
+                            </div>
+                            <div className="mt-3 mb-1 flex justify-end items-center">
+                              <button
+                                className={`px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
+                                type="submit"
+                                name={
+                                  selectedTab == 'family' ?
+                                  'family'
+                                  : selectedTab == 'public' ?
+                                  'public'
+                                  : selectedTab == 'individual' ?
+                                  'individual'
+                                  : selectedTab == 'group' ?
+                                  'group'
+                                  :
+                                  null
+                                }
+                                onClick={errorHandler}
+                                // disabled={!value}
+                              >
+                                {loader?.jobFields ? 
+                                  <LoadingSpinner size={5} /> 
+                                  : selectedTab == 'family' ?
+                                  'Assign to family'
+                                  : selectedTab == 'public' ?
+                                  'Show Task to Public'
+                                  : selectedTab == 'individual' ?
+                                  'Send Offer to Individual'
+                                  : selectedTab == 'group' ?
+                                  'Send Order to Group'
+                                  :
+                                  null
+                                }
+                              </button>
+                            </div>
+                          </Form>
+                        );
+                      }}
+                    </Formik>
                     <p
                       className={`text-center w-full text-lg ${
                         requestStatus.status
@@ -530,30 +584,15 @@ const JobFieldInput = ({
   select,
   label,
   labelClass,
-  btnText,
   parentClass,
   optionText,
-  errorHandler,
-  loader,
   data,
 }) => {
   return (
-    <div className="field w-full h-full px-3 pt-5 pb-3 flex flex-col justify-between gap-4">
+    <div className="field w-full flex flex-col justify-between gap-4">
       {select && (
         <>
           <div className={`input-com ${parentClass}`}>
-            <div
-              className={`flex items-center justify-start mb-2.5 ${labelClass}`}
-            >
-              {label && (
-                <label
-                  className="input-label border-2 w-full border-sky-700 rounded py-4 px-2 text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block tracking-wide"
-                  htmlFor={inputName}
-                >
-                  {label}
-                </label>
-              )}
-            </div>
             <div
               className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-[1rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
             >
@@ -616,8 +655,6 @@ const JobFieldInput = ({
       {input && (
         <InputCom
           fieldClass="px-6"
-          label={label}
-          labelClass="tracking-wide border-2 w-full border-sky-700 py-4 px-2"
           type="email"
           name={inputName}
           placeholder={placeholder}
@@ -627,25 +664,6 @@ const JobFieldInput = ({
           parentClass={`${parentClass}`}
         />
       )}
-
-      {/* btn */}
-      <div className="my-1 flex justify-end items-center">
-        <button
-          type="submit"
-          name={inputName}
-          onClick={errorHandler}
-          // className={`px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md ${
-          //   !value && "disabled:grayscale-[65%] transition duration-300"
-          // }`}
-          className={`px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white ${
-            !value && ""
-          }
-          `}
-          // disabled={!value}
-        >
-          {loader ? <LoadingSpinner size={5} /> : btnText}
-        </button>
-      </div>
     </div>
   );
 };
-- 
2.34.1