import { Field, Form, Formik } from "formik"; import React, { useCallback, useEffect, useMemo, useState } from "react"; import * as Yup from "yup"; import usersService from "../../services/UsersService"; import InputCom from "../Helpers/Inputs/InputCom/index"; import ModalCom from "../Helpers/ModalCom"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import Detail from "./popoutcomponent/Detail"; import { tableReload } from "../../store/TableReloads"; import { useDispatch } from "react-redux"; const validationSchema = Yup.object().shape({ family: Yup.string().required("This is required "), 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(), }); function JobListPopout({ details, onClose, situation }) { 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: { family: false, public: false, individual: false, group: false, }, }); const apiCall = useMemo(() => new usersService(), []); // member listing const memberList = useCallback(async () => { setLoader({ member: true, jobFields: false }); 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({ member: false, jobFields: false }); } else return; } catch (error) { setLoader({ member: false, jobFields: false }); throw new Error(error); } }, [apiCall]); useEffect(() => { memberList(); }, [memberList]); let initialValues = { family: "", public: "", individual: "", group: "", }; 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: "" }); }, 3000); } }; const jobFieldHandler = async (values, helpers) => { 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, 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 = { ...jobReq, email: values?.individual, action: 13025, assign_mode: 110033, }; setLoader({ jobFields: { individual: true } }); } else if (values?.group !== "") { // for group input reqData = { ...jobReq, email: '', group_id: values?.group, action: 13025, assign_mode: 110044, duration: details?.timeline_days, // duration: 0, }; setLoader({ jobFields: { group: true } }); } else { return; } try { const res = await apiCall.assignJobTask(reqData); let { status, data } = await res; if(status != 200 || data.internal_return < 0){ setRequestStatus({message:'Unable to complete', status:false}) return setTimeout(()=>{ setLoader({ jobFields: false }); setRequestStatus({message:'', status:false}) },3000) } dispatch(tableReload({ type: "JOBTABLE" })); setRequestStatus({message:'Successful', status:true}) setTimeout(()=>{ setLoader({ jobFields: false }); onClose(); throw new Response(data); },3000) } catch (error) { setRequestStatus({message:'Unable to complete', status:false}) setTimeout(()=>{ setRequestStatus({message:'', status:false}) setLoader({ jobFields: false }); throw new Error(error); },3000) } }; const [groupList, setGroupList] = useState({loading: true, groups: [], members: []}) // 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: []}) }) },[]) // console.log("Job List P >> ", details) return (

{details.title}

{/*

{details.title}

*/} {/* INPUT SECTION */}