Jobs Manager Side task done
This commit was merged in pull request #551.
This commit is contained in:
@@ -1,13 +1,13 @@
|
||||
import { Field, Form, Formik } from "formik";
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useDispatch } 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 { tableReload } from "../../store/TableReloads";
|
||||
import { useDispatch } from "react-redux";
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
family: Yup.string().required("This is required "),
|
||||
@@ -23,13 +23,15 @@ const validationSchema = Yup.object().shape({
|
||||
});
|
||||
|
||||
function JobListPopout({ details, onClose, situation }) {
|
||||
const [selectedTab, setSelectedTab] = useState("public");
|
||||
const tabs = ["public", "individual", "group"];
|
||||
|
||||
const [selectedTab, setSelectedTab] = useState('public')
|
||||
const tabs = ['public', 'individual', 'group']
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const dispatch = useDispatch()
|
||||
|
||||
const [requestStatus, setRequestStatus] = useState({message:'', status:false})
|
||||
const [requestStatus, setRequestStatus] = useState({
|
||||
message: "",
|
||||
status: false,
|
||||
});
|
||||
|
||||
const [familyList, setFamilyList] = useState([]);
|
||||
let [loader, setLoader] = useState({
|
||||
@@ -147,7 +149,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
|
||||
// for group input
|
||||
reqData = {
|
||||
...jobReq,
|
||||
email: '',
|
||||
email: "",
|
||||
group_id: values?.group,
|
||||
assign_mode: 110044,
|
||||
duration: details?.timeline_days,
|
||||
@@ -161,50 +163,61 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
|
||||
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(()=>{
|
||||
if (status != 200 || data.internal_return < 0) {
|
||||
setRequestStatus({ message: "Unable to complete", status: false });
|
||||
return setTimeout(() => {
|
||||
setLoader({ jobFields: false });
|
||||
setRequestStatus({message:'', status:false})
|
||||
},3000)
|
||||
setRequestStatus({ message: "", status: false });
|
||||
}, 3000);
|
||||
}
|
||||
dispatch(tableReload({ type: "JOBTABLE" }));
|
||||
setRequestStatus({message:'Successful', status:true})
|
||||
setTimeout(()=>{
|
||||
setRequestStatus({ message: "Successful", status: true });
|
||||
setTimeout(() => {
|
||||
setLoader({ jobFields: false });
|
||||
onClose();
|
||||
throw new Response(data);
|
||||
},3000)
|
||||
}, 3000);
|
||||
} catch (error) {
|
||||
setRequestStatus({message:'Unable to complete', status:false})
|
||||
setTimeout(()=>{
|
||||
setRequestStatus({message:'', status:false})
|
||||
setRequestStatus({ message: "Unable to complete", status: false });
|
||||
setTimeout(() => {
|
||||
setRequestStatus({ message: "", status: false });
|
||||
setLoader({ jobFields: false });
|
||||
throw new Error(error);
|
||||
},3000)
|
||||
}, 3000);
|
||||
}
|
||||
};
|
||||
|
||||
const [groupList, setGroupList] = useState({loading: true, groups: [], members: []})
|
||||
const [groupList, setGroupList] = useState({
|
||||
loading: true,
|
||||
groups: [],
|
||||
members: [],
|
||||
});
|
||||
|
||||
// FUNCTION TO POPULATE USER GROUP LIST
|
||||
useEffect(()=>{
|
||||
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
|
||||
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
|
||||
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: []})
|
||||
})
|
||||
},[])
|
||||
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 (
|
||||
@@ -241,7 +254,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
|
||||
</button>
|
||||
</div>
|
||||
<div className="md:grid grid-cols-2 bg-white dark:bg-dark-white rounded-lg shadow-lg">
|
||||
<div className="p-4 pb-3 w-full md:border-r-2">
|
||||
<div className="px-4 pb-3 w-full md:border-r-2">
|
||||
{/* <p className='text-lg font-semibold text-slate-900 tracking-wide'>{details.title}</p> */}
|
||||
|
||||
{/* INPUT SECTION */}
|
||||
@@ -264,7 +277,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
|
||||
<Detail
|
||||
label="Created"
|
||||
value={new Date(details?.created).toDateString()}
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
@@ -283,166 +296,185 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
|
||||
</div>
|
||||
|
||||
{/* ACTION SECTION */}
|
||||
<div className="p-4 w-ful flex flex-col justify-between">
|
||||
<h1 className="text-lg mt-3 font-medium tracking-wide text-black dark:text-white">Send this Task to:</h1>
|
||||
<div className="px-4 pb-3 w-ful flex flex-col justify-between">
|
||||
<h1 className="text-lg mt-3 font-medium tracking-wide text-black dark:text-white">
|
||||
Send this Task to:
|
||||
</h1>
|
||||
<div className="flex flex-col grow">
|
||||
<div className="grid grid-cols-3 mt-4">
|
||||
{tabs.map(item => (
|
||||
<button
|
||||
{tabs.map((item) => (
|
||||
<button
|
||||
// className={`px-4 py-1 rounded-t-2xl ${selectedTab == item ? 'btn-gradient border-[2px] text-white' : 'bg-white text-[#000] border-t-[2px]'}`}
|
||||
className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${selectedTab == item ? 'bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold' : 'bg-white text-[#000]'}`}
|
||||
value={item}
|
||||
className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${
|
||||
selectedTab == item
|
||||
? "bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold"
|
||||
: "bg-white text-[#000]"
|
||||
}`}
|
||||
value={item}
|
||||
name={item}
|
||||
onClick={()=>setSelectedTab(item)}
|
||||
onClick={() => setSelectedTab(item)}
|
||||
>
|
||||
<div className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${selectedTab == item ? 'border-white bg-emerald-500' : 'border-red-50 dark:border-[#D85A5A] bg-white'}`}></div>
|
||||
<div
|
||||
className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${
|
||||
selectedTab == item
|
||||
? "border-white bg-emerald-500"
|
||||
: "border-red-50 dark:border-[#D85A5A] bg-white"
|
||||
}`}
|
||||
></div>
|
||||
{item[0].toUpperCase() + item.slice(1)}
|
||||
</button>
|
||||
))}
|
||||
</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>
|
||||
}
|
||||
{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>
|
||||
)}
|
||||
|
||||
{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>
|
||||
)}
|
||||
|
||||
{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>
|
||||
}
|
||||
|
||||
{/* { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 && } */}
|
||||
{selectedTab == 'group' &&
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema.fields.group}
|
||||
onSubmit={jobFieldHandler}
|
||||
{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>
|
||||
)}
|
||||
<p
|
||||
className={`text-center w-full text-lg ${
|
||||
requestStatus.status ? "text-emerald-600" : "text-red-600"
|
||||
}`}
|
||||
>
|
||||
{(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>
|
||||
}
|
||||
{requestStatus.message && requestStatus.message}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/*
|
||||
{requestStatus.message &&
|
||||
<p className={`mt-4 w-full text-lg ${requestStatus.status ? 'text-emerald-600' : 'text-red-600'}`}>{requestStatus.message}</p>
|
||||
}
|
||||
} */}
|
||||
</div>
|
||||
{/* END OF ACTION SECTION */}
|
||||
</div>
|
||||
@@ -480,7 +512,7 @@ const JobFieldInput = ({
|
||||
>
|
||||
{label && (
|
||||
<label
|
||||
className="input-label border-2 w-full border-sky-700 py-4 px-2 text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block tracking-wide"
|
||||
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}
|
||||
@@ -497,51 +529,50 @@ const JobFieldInput = ({
|
||||
value={value}
|
||||
>
|
||||
{/* <option value="">{optionText}</option> */}
|
||||
{(inputName == 'family' || inputName == 'public') &&
|
||||
Array.isArray(data) &&
|
||||
<>
|
||||
<option value="">{optionText}</option>
|
||||
{ data?.map((item, idx) => (
|
||||
<React.Fragment key={idx}>
|
||||
{inputName === "family" && item?.last_login !== "" && (
|
||||
<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" && (
|
||||
{(inputName == "family" || inputName == "public") &&
|
||||
Array.isArray(data) && (
|
||||
<>
|
||||
<option value="">{optionText}</option>
|
||||
{data?.map((item, idx) => (
|
||||
<React.Fragment key={idx}>
|
||||
{inputName === "family" &&
|
||||
item?.last_login !== "" && (
|
||||
<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?.group_id} key={idx}>
|
||||
{item?.group_name}
|
||||
</option>
|
||||
)} */}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</>
|
||||
}
|
||||
{(inputName == 'group') &&
|
||||
<>
|
||||
{data.loading ?
|
||||
<option value={''}>
|
||||
Loading...
|
||||
</option>
|
||||
: data?.groups?.length > 0 ?
|
||||
<>
|
||||
<option value="">{optionText}</option>
|
||||
{ data?.groups?.map((item, index)=>(
|
||||
<option value={item?.group_id} key={index}>
|
||||
{item?.group_name}
|
||||
</option>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</>
|
||||
:
|
||||
<option value="">No Group Found</option>
|
||||
}
|
||||
</>
|
||||
}
|
||||
)}
|
||||
{inputName == "group" && (
|
||||
<>
|
||||
{data.loading ? (
|
||||
<option value={""}>Loading...</option>
|
||||
) : data?.groups?.length > 0 ? (
|
||||
<>
|
||||
<option value="">{optionText}</option>
|
||||
{data?.groups?.map((item, index) => (
|
||||
<option value={item?.group_id} key={index}>
|
||||
{item?.group_name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<option value="">No Group Found</option>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user