.
This commit is contained in:
@@ -3,11 +3,8 @@ import { Link } from "react-router-dom";
|
||||
import InputCom from "../Helpers/Inputs/InputCom";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
import usersService from "../../services/UsersService";
|
||||
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
|
||||
import { tableReload } from "../../store/TableReloads";
|
||||
|
||||
import { Field, Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
@@ -36,9 +33,10 @@ const validationSchema = Yup.object().shape({
|
||||
.typeError("you must specify a number")
|
||||
.min(1, "Price must be greater than 0")
|
||||
.required("Timeline is required"),
|
||||
category: Yup.array().min(1, "Select at least one checkbox"),
|
||||
});
|
||||
|
||||
function AddJob({ popUpHandler }) {
|
||||
function AddJob({ popUpHandler, categories }) {
|
||||
const ApiCall = new usersService();
|
||||
let dispatch = useDispatch();
|
||||
|
||||
@@ -58,6 +56,7 @@ function AddJob({ popUpHandler }) {
|
||||
description: "",
|
||||
job_detail: "",
|
||||
timeline_days: "",
|
||||
category: [],
|
||||
};
|
||||
|
||||
let [requestStatus, setRequestStatus] = useState({
|
||||
@@ -88,6 +87,7 @@ function AddJob({ popUpHandler }) {
|
||||
|
||||
// FUNCTION TO HANDLE ADD JOB FORM
|
||||
const handleAddJob = (values, helpers) => {
|
||||
values.category = values.category?.join("@");
|
||||
setRequestStatus({ loading: true, status: false, message: "" });
|
||||
ApiCall.jobManagerCreateJob(values)
|
||||
.then((res) => {
|
||||
@@ -127,6 +127,8 @@ function AddJob({ popUpHandler }) {
|
||||
getUserCountry();
|
||||
}, []);
|
||||
|
||||
console.log("This is for AddJob >>", categories);
|
||||
|
||||
return (
|
||||
<div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
|
||||
<Formik
|
||||
@@ -187,13 +189,6 @@ function AddJob({ popUpHandler }) {
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
<div className={`${!props.errors && "invisible"} h-5`}>
|
||||
{props.errors.country && props.touched.country && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.country}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Price */}
|
||||
@@ -209,14 +204,8 @@ function AddJob({ popUpHandler }) {
|
||||
value={props.values.price}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
errorBorder={props.errors.price && props.touched.price}
|
||||
/>
|
||||
<div className={`${!props.errors && "invisible"} h-5`}>
|
||||
{props.errors.price && props.touched.price && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.price}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -233,14 +222,8 @@ function AddJob({ popUpHandler }) {
|
||||
value={props.values.title}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
errorBorder={props.errors.title && props.touched.title}
|
||||
/>
|
||||
<div className={`${!props.errors && "invisible"} h-5`}>
|
||||
{props.errors.title && props.touched.title && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.title}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
@@ -255,42 +238,64 @@ function AddJob({ popUpHandler }) {
|
||||
value={props.values.description}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
errorBorder={props.errors.description && props.touched.description}
|
||||
/>
|
||||
<div className={`${!props.errors && "invisible"} h-5`}>
|
||||
{props.errors.description &&
|
||||
props.touched.description && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Details */}
|
||||
<div className="field w-full mb-[5px]">
|
||||
<label
|
||||
htmlFor="Job Delivery Details"
|
||||
className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
|
||||
>
|
||||
Job Delivery Details
|
||||
</label>
|
||||
<textarea
|
||||
id="Job Delivery Details"
|
||||
rows="7"
|
||||
className={`input-field p-6 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
|
||||
style={{ resize: "none" }}
|
||||
name="job_detail"
|
||||
value={props.values.job_detail}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
/>
|
||||
<div className={`${!props.errors && "invisible"} h-5`}>
|
||||
<div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
|
||||
<div className="sm:w-[60%] w-full">
|
||||
<label
|
||||
htmlFor="Job Delivery Details"
|
||||
className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
|
||||
>
|
||||
Job Delivery Details
|
||||
</label>
|
||||
<textarea
|
||||
id="Job Delivery Details"
|
||||
rows="5"
|
||||
className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] border border-[#dce4e9] rounded-[10px]`}
|
||||
style={{ resize: "none" }}
|
||||
name="job_detail"
|
||||
value={props.values.job_detail}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="sm:w-[35%] w-full">
|
||||
<div
|
||||
htmlFor="Job Categories"
|
||||
className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
|
||||
id="checked-group"
|
||||
>
|
||||
Categories
|
||||
</div>
|
||||
<div
|
||||
className="sm:flex-col flex flex-wrap px-3 mt-3"
|
||||
role="group"
|
||||
aria-labelledby="checked-group"
|
||||
>
|
||||
{Object.entries(categories).map(([key, value]) => (
|
||||
<label key={key} className="flex gap-1 w-full items-center">
|
||||
<Field
|
||||
type="checkbox"
|
||||
name="category"
|
||||
value={key}
|
||||
/>
|
||||
<span className="text-[13.975px]">{value}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <div className={`${!props.errors && "invisible"} h-5`}>
|
||||
{props.errors.job_detail && props.touched.job_detail && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.job_detail}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
<div className="field w-full mb-[5px]">
|
||||
@@ -322,14 +327,6 @@ function AddJob({ popUpHandler }) {
|
||||
</option>
|
||||
))}
|
||||
</Field>
|
||||
<div className={`${!props.errors && "invisible"} h-5`}>
|
||||
{props.errors.timeline_days &&
|
||||
props.touched.timeline_days && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.timeline_days}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* inputs ends here */}
|
||||
</div>
|
||||
@@ -356,13 +353,16 @@ function AddJob({ popUpHandler }) {
|
||||
))}
|
||||
{/* End of error or success display */}
|
||||
|
||||
<div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29] flex justify-end items-center">
|
||||
<div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29] flex justify-end items-center">
|
||||
<div className="flex items-center space-x-4 mr-9">
|
||||
<Link
|
||||
to="/myjobs"
|
||||
className="text-18 text-light-red tracking-wide "
|
||||
>
|
||||
<span className="border-b dark:border-[#5356fb29] border-light-red">
|
||||
<span
|
||||
className="border-b dark:border-[#5356fb29] border-light-red"
|
||||
onClick={popUpHandler}
|
||||
>
|
||||
{" "}
|
||||
Cancel
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user