.

src/components/jobPopout/JobListPopout.jsx

@@ -1,12 +1,13 @@
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import Detail from "./popoutcomponent/Detail";
 import ModalCom from "../Helpers/ModalCom";
 import InputCom from "../Helpers/Inputs/InputCom/index";
+import SiteService from "../../services/SiteService";
 import { Form, Formik, Field } from "formik";
 import * as Yup from "yup";
 
 const validationSchema = Yup.object().shape({
-  family: Yup.string().required("Please assign a family"),
+  family: Yup.string().required("THis is required "),
   public: Yup.string(),
   individual: Yup.string()
     .email("Invalid email format")
@@ -19,24 +20,93 @@ const validationSchema = Yup.object().shape({
 });
 
 function JobListPopout({ details, onClose, situation }) {
+  const [familyList, setFamilyList] = useState([]);
+  const [loader, setLoader] = useState(false);
+
+  const apiCall = useMemo(() => new SiteService(), []);
+
+  // member listing
+  const memberList = useCallback(async () => {
+    setLoader(true);
+    try {
+      let reqData = {
+        limit: 20,
+        offset: 0,
+        action: 22010,
+      };
+
+      let res = await apiCall.familyListings(reqData);
+      const { data } = res;
+      if (data?.internal_return >= 0 && data?.status == "OK") {
+        let { result_list } = data;
+        setFamilyList(result_list);
+        setLoader(false);
+      } else return;
+    } catch (error) {
+      setLoader(false);
+      throw new Error(error);
+    }
+  }, [apiCall]);
+
+  useEffect(() => {
+    memberList();
+  }, [memberList]);
+
   let initialValues = {
-    family: [],
+    family: "",
     public: "",
     individual: "",
     group: "",
   };
 
-  let [inputs, setInputs] = useState({
+  let [inputs, setInputs] = useState({});
-    family: "",
-    public: "",
-    individual: "",
-    group: "",
-  });
 
   const handleInputChange = ({ target: { name, value } }) => {
     setInputs((prev) => ({ ...prev, [name]: value }));
   };
 
+  const jobFieldHandler = async (values, helpers) => {
+    setLoader(true);
+    let { job_id, job_uid, job_description } = details;
+    let reqData;
+
+    // for family input
+    values?.family !== "" && console.log(values?.family);
+
+    // for public input
+    if (values?.public !== "") {
+      reqData = {
+        job_id,
+        job_uid,
+        job_description,
+        duration: Number(values?.public),
+        action: 13025,
+        assign_mode: 110022,
+      };
+    } else if (values?.individual !== "") {
+      // for individual input
+      reqData = {
+        job_id,
+        job_uid,
+        job_description,
+        email: values?.individual,
+        action: 13025,
+        assign_mode: 110033,
+      };
+    }
+
+    try {
+      const res = await apiCall.assignJobTask(reqData);
+      let { data } = await res;
+      setLoader(false);
+      console.log(data);
+      throw new Response(data);
+    } catch (error) {
+      setLoader(false);
+      throw new Error(error);
+    }
+  };
+
   return (
     <ModalCom action={onClose} situation={situation} className="edit-popup">
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
@@ -116,50 +186,90 @@ function JobListPopout({ details, onClose, situation }) {
           <div className="p-4 w-full md:w-2/4 h-full">
             <Formik
               initialValues={initialValues}
-              validationSchema={validationSchema}
+              validationSchema={validationSchema.fields.family}
+              onSubmit={jobFieldHandler}
             >
               {(props) => {
                 return (
-                  <>
+                  <Form>
                     {/* Assign to Family */}
                     <JobFieldInput
                       label="Assign to family"
-                      select
+                      select={true}
                       inputName="family"
-                      value={props?.family}
+                      value={props?.values.family}
+                      data={familyList}
                       btnText="Assign to family"
                       optionText="family"
                     />
+                  </Form>
+                );
+              }}
+            </Formik>
 
+            <Formik
+              initialValues={initialValues}
+              validationSchema={validationSchema.fields.public}
+              onSubmit={jobFieldHandler}
+            >
+              {(props) => {
+                return (
+                  <Form>
                     {/* Offer this job to public input */}
                     <JobFieldInput
                       label="Offer this job to public"
-                      select
+                      select={true}
                       inputName="public"
-                      value={props?.public}
+                      value={props?.values.public}
+                      data={publicArray}
                       btnText="Show Task to Public"
                       optionText="Public"
                     />
+                  </Form>
+                );
+              }}
+            </Formik>
 
+            <Formik
+              initialValues={initialValues}
+              validationSchema={validationSchema.fields.individual}
+              onSubmit={jobFieldHandler}
+            >
+              {(props) => {
+                return (
+                  <Form>
                     {/* Offer this job to individual input */}
                     <JobFieldInput
                       label="Offer this job to individual"
-                      input
+                      input={true}
                       inputName="individual"
-                      value={props?.individual}
+                      value={props?.values.individual}
+                      inputHandler={props?.handleChange}
                       btnText="Send Offer to Individual"
                     />
+                  </Form>
+                );
+              }}
+            </Formik>
 
+            <Formik
+              initialValues={initialValues}
+              validationSchema={validationSchema.fields.group}
+              onSubmit={jobFieldHandler}
+            >
+              {(props) => {
+                return (
+                  <Form>
                     {/* Offer this job to your group input */}
                     <JobFieldInput
                       label="Offer this job to your Group"
-                      select
+                      select={true}
                       inputName="group"
-                      value={props?.group}
+                      value={props?.values.group}
                       btnText="Send Order to Group"
                       optionText="Group"
                     />
-                  </>
+                  </Form>
                 );
               }}
             </Formik>
@@ -184,58 +294,99 @@ const JobFieldInput = ({
   labelClass,
   btnText,
   parentClass,
-  optionText
+  optionText,
-}) => (
+  data,
-  <div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
+}) => {
-    {select && (
+  return (
-      <>
+    <div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
-        <div className={`input-com ${parentClass}`}>
+      {select && (
-          <div
+        <>
-            className={`flex items-center justify-start mb-2.5 ${labelClass}`}
+          <div className={`input-com ${parentClass}`}>
-          >
+            <div
-            {label && (
+              className={`flex items-center justify-start mb-2.5 ${labelClass}`}
-              <label
-                className="input-label 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}`}
-          >
-            <Field
-              component="select"
-              name={inputName}
-              className={`input-field placeholder:text-base text-dark-gray w-full h-full bg-white outline-none px-2`}
             >
-              <option value="">{optionText}</option>
+              {label && (
-              {value && <option value={value}></option>}
+                <label
-            </Field>
+                  className="input-label 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}`}
+            >
+              <Field
+                component="select"
+                name={inputName}
+                className={`input-field placeholder:text-base text-dark-gray w-full h-full bg-white outline-none px-2`}
+                value={value}
+              >
+                <option value="">{optionText}</option>
+                {Array.isArray(data) &&
+                  data?.map((item, idx) => (
+                    <React.Fragment key={idx}>
+                      {inputName === "family" && (
+                        <option value={item?.family_uid} key={idx}>
+                          {`${item?.firstname} ${item?.lastname}`}
+                        </option>
+                      )}
+                      {inputName === "public" && (
+                        <option value={item?.duration} key={idx}>
+                          {item?.name}
+                        </option>
+                      )}
+                      {inputName === "group" && (
+                        <option value={item?.family_uid} key={idx}>
+                          {item?.firstname}
+                        </option>
+                      )}
+                    </React.Fragment>
+                  ))}
+              </Field>
+            </div>
           </div>
-        </div>
+        </>
-      </>
+      )}
-    )}
 
-    {input && (
+      {input && (
-      <InputCom
+        <InputCom
-        fieldClass="px-6"
+          fieldClass="px-6"
-        label={label}
+          label={label}
-        labelClass="tracking-wide"
+          labelClass="tracking-wide"
-        type="text"
+          type="text"
-        name={inputName}
+          name={inputName}
-        placeholder=""
+          placeholder=""
-        value={value}
+          value={value}
-        inputHandler={inputHandler}
+          inputHandler={inputHandler}
-        inputBg="bg-white"
+          inputBg="bg-white"
-      />
+        />
-    )}
+      )}
-    {/* btn */}
+
-    <div className="my-1 flex justify-end items-center">
+      {/* btn */}
-      <button className="px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md">
+      <div className="my-1 flex justify-end items-center">
-        {btnText}
+        <button
-      </button>
+          type="submit"
+          name={inputName}
+          className="px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md"
+        >
+          {btnText}
+        </button>
+      </div>
     </div>
-  </div>
+  );
-);
+};
+
+const publicArray = [
+  { duration: 1, name: "1 day" },
+  { duration: 2, name: "2 days" },
+  { duration: 3, name: "3 days" },
+  { duration: 4, name: "4 days" },
+  { duration: 5, name: "5 days" },
+  { duration: 6, name: "6 days" },
+  { duration: 7, name: "1 week" },
+  { duration: 14, name: "2 weeks" },
+  { duration: 21, name: "3 weeks" },
+  { duration: 28, name: "4 weeks" },
+];

src/services/SiteService.js

@@ -33,7 +33,23 @@ class SiteService {
     }
 
     familyListings(reqData) {
-        return this.postAuxEnd('/familylist', reqData)
+        var postData = {
+            uid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+           ...reqData
+          };
+        return this.postAuxEnd('/familylist', postData)
+    }
+
+    assignJobTask(reqData) {
+        var postData = {
+            uid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+           ...reqData
+          };
+        return this.postAuxEnd('/assigntask', postData)
     }
 
     //----------------------------------------  -----