.

src/components/jobPopout/JobListPopout.jsx

@@ -5,6 +5,7 @@ import InputCom from "../Helpers/Inputs/InputCom/index";
 import SiteService from "../../services/SiteService";
 import { Form, Formik, Field } from "formik";
 import * as Yup from "yup";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 const validationSchema = Yup.object().shape({
   family: Yup.string().required("THis is required "),
@@ -21,13 +22,21 @@ const validationSchema = Yup.object().shape({
 
 function JobListPopout({ details, onClose, situation }) {
   const [familyList, setFamilyList] = useState([]);
-  const [loader, setLoader] = useState(false);
+  let [loader, setLoader] = useState({
+    member: false,
+    jobFields: {
+      family: false,
+      public: false,
+      individual: false,
+      group: false,
+    },
+  });
 
   const apiCall = useMemo(() => new SiteService(), []);
 
   // member listing
   const memberList = useCallback(async () => {
-    setLoader(true);
+    setLoader({ member: true, jobFields: false });
     try {
       let reqData = {
         limit: 20,
@@ -40,10 +49,10 @@ function JobListPopout({ details, onClose, situation }) {
       if (data?.internal_return >= 0 && data?.status == "OK") {
         let { result_list } = data;
         setFamilyList(result_list);
-        setLoader(false);
+        setLoader({ member: false, jobFields: false });
       } else return;
     } catch (error) {
-      setLoader(false);
+      setLoader({ member: false, jobFields: false });
       throw new Error(error);
     }
   }, [apiCall]);
@@ -66,43 +75,60 @@ function JobListPopout({ details, onClose, situation }) {
   };
 
   const jobFieldHandler = async (values, helpers) => {
-    setLoader(true);
     let { job_id, job_uid, job_description } = details;
+    let jobReq = {
+      job_id,
+      job_uid,
+      job_description: job_description !== null ? job_description : " ",
+    };
     let reqData;
 
     // for family input
-    values?.family !== "" && console.log(values?.family);
+    if (values?.family !== "") {
-
-    // for public input
-    if (values?.public !== "") {
       reqData = {
-        job_id,
+        ...jobReq,
-        job_uid,
+        family_uid: values?.family,
-        job_description,
+        action: 13025,
+        assign_mode: 110011,
+      };
+      setLoader({ jobFields: { family: true } });
+    } else if (values?.public !== "") {
+      // for public input
+      reqData = {
+        ...jobReq,
         duration: Number(values?.public),
         action: 13025,
         assign_mode: 110022,
       };
+      setLoader({ jobFields: { public: true } });
     } else if (values?.individual !== "") {
       // for individual input
       reqData = {
-        job_id,
+        ...jobReq,
-        job_uid,
-        job_description,
         email: values?.individual,
         action: 13025,
         assign_mode: 110033,
       };
+      setLoader({ jobFields: { individual: true } });
+    } else if (values?.group !== "") {
+      // for group input
+      reqData = {
+        ...jobReq,
+        email: values?.individual,
+        action: 13025,
+        assign_mode: 110033,
+      };
+      setLoader({ jobFields: { group: true } });
     }
 
     try {
       const res = await apiCall.assignJobTask(reqData);
       let { data } = await res;
-      setLoader(false);
+      setLoader({ member: false, jobFields: false });
-      console.log(data);
+      onClose();
       throw new Response(data);
     } catch (error) {
-      setLoader(false);
+      setLoader({ member: false, jobFields: false });
       throw new Error(error);
     }
   };
@@ -200,7 +226,8 @@ function JobListPopout({ details, onClose, situation }) {
                       value={props?.values.family}
                       data={familyList}
                       btnText="Assign to family"
-                      optionText="family"
+                      optionText="select family"
+                      loader={loader?.jobFields.family}
                     />
                   </Form>
                 );
@@ -223,7 +250,8 @@ function JobListPopout({ details, onClose, situation }) {
                       value={props?.values.public}
                       data={publicArray}
                       btnText="Show Task to Public"
-                      optionText="Public"
+                      optionText="select duration"
+                      loader={loader?.jobFields.public}
                     />
                   </Form>
                 );
@@ -244,8 +272,10 @@ function JobListPopout({ details, onClose, situation }) {
                       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}
                     />
                   </Form>
                 );
@@ -268,6 +298,7 @@ function JobListPopout({ details, onClose, situation }) {
                       value={props?.values.group}
                       btnText="Send Order to Group"
                       optionText="Group"
+                      loader={loader?.jobFields.group}
                     />
                   </Form>
                 );
@@ -288,6 +319,7 @@ const JobFieldInput = ({
   inputHandler,
   inputName,
   inputClass,
+  placeholder,
   input,
   select,
   label,
@@ -295,6 +327,7 @@ const JobFieldInput = ({
   btnText,
   parentClass,
   optionText,
+  loader,
   data,
 }) => {
   return (
@@ -327,7 +360,7 @@ const JobFieldInput = ({
                 {Array.isArray(data) &&
                   data?.map((item, idx) => (
                     <React.Fragment key={idx}>
-                      {inputName === "family" && (
+                      {inputName === "family" && item?.last_login !== "" && (
                         <option value={item?.family_uid} key={idx}>
                           {`${item?.firstname} ${item?.lastname}`}
                         </option>
@@ -357,7 +390,7 @@ const JobFieldInput = ({
           labelClass="tracking-wide"
           type="text"
           name={inputName}
-          placeholder=""
+          placeholder={placeholder}
           value={value}
           inputHandler={inputHandler}
           inputBg="bg-white"
@@ -371,7 +404,7 @@ const JobFieldInput = ({
           name={inputName}
           className="px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md"
         >
-          {btnText}
+          {loader ? <LoadingSpinner size={5} /> : btnText}
         </button>
       </div>
     </div>