.
This commit was merged in pull request #108.
This commit is contained in:
Ebube
@@ -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({
|
||||
family: "",
|
||||
public: "",
|
||||
individual: "",
|
||||
group: "",
|
||||
});
|
||||
let [inputs, setInputs] = useState({});
|
||||
|
||||
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
|
||||
}) => (
|
||||
<div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
|
||||
{select && (
|
||||
<>
|
||||
<div className={`input-com ${parentClass}`}>
|
||||
<div
|
||||
className={`flex items-center justify-start mb-2.5 ${labelClass}`}
|
||||
>
|
||||
{label && (
|
||||
<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`}
|
||||
optionText,
|
||||
data,
|
||||
}) => {
|
||||
return (
|
||||
<div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
|
||||
{select && (
|
||||
<>
|
||||
<div className={`input-com ${parentClass}`}>
|
||||
<div
|
||||
className={`flex items-center justify-start mb-2.5 ${labelClass}`}
|
||||
>
|
||||
<option value="">{optionText}</option>
|
||||
{value && <option value={value}></option>}
|
||||
</Field>
|
||||
{label && (
|
||||
<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`}
|
||||
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 && (
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label={label}
|
||||
labelClass="tracking-wide"
|
||||
type="text"
|
||||
name={inputName}
|
||||
placeholder=""
|
||||
value={value}
|
||||
inputHandler={inputHandler}
|
||||
inputBg="bg-white"
|
||||
/>
|
||||
)}
|
||||
{/* btn */}
|
||||
<div className="my-1 flex justify-end items-center">
|
||||
<button className="px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md">
|
||||
{btnText}
|
||||
</button>
|
||||
{input && (
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label={label}
|
||||
labelClass="tracking-wide"
|
||||
type="text"
|
||||
name={inputName}
|
||||
placeholder=""
|
||||
value={value}
|
||||
inputHandler={inputHandler}
|
||||
inputBg="bg-white"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* btn */}
|
||||
<div className="my-1 flex justify-end items-center">
|
||||
<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" },
|
||||
];
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
//---------------------------------------- -----
|
||||
|
||||
Reference in New Issue
Block a user