Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
66bd8cf6ec | ||
 ameye
|
3d7ad25517 | ||
|
victorAnumudu
|
2d5c828089 | ||
|
victorAnumudu
|
e39a8358f7 | ||
 tokslaw
|
e9c57550a2 | ||
|
victorAnumudu
|
27f87ee92d | ||
|
ameye
|
edf23352ef |
@@ -0,0 +1,340 @@
|
||||
import React, { useEffect, useState, lazy, Suspense } from 'react'
|
||||
import LoadingSpinner from '../../Spinners/LoadingSpinner'
|
||||
import { NewTasks } from './forms'
|
||||
import { PriceFormatter } from '../../Helpers/PriceFormatter'
|
||||
import { useSelector } from 'react-redux';
|
||||
import { InputCom } from '../../AddJob/settings';
|
||||
import * as Yup from "yup";
|
||||
import { Form, Formik } from "formik";
|
||||
|
||||
|
||||
// To get the validation schema
|
||||
const validationSchema = Yup.object().shape({
|
||||
currency: Yup.string()
|
||||
.min(1, "Minimum 3 characters")
|
||||
.max(25, "Maximum 25 characters")
|
||||
.required("required"),
|
||||
amount: Yup.number()
|
||||
.typeError("Invalid number")
|
||||
.min(1, "Must be greater than 0")
|
||||
.test("no-e", "Invalid number", (value) => {
|
||||
if (value && /\d+e/.test(value)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.required("required"),
|
||||
job_description: Yup.string()
|
||||
.min(3, "Minimum 3 characters")
|
||||
.max(499, "Maximum 499 characters")
|
||||
.required("required"),
|
||||
timeline_days: Yup.number()
|
||||
.typeError("you must specify a number")
|
||||
.min(1, "Must be greater than 0")
|
||||
.required("required"),
|
||||
});
|
||||
|
||||
|
||||
|
||||
const VideoElement = lazy(() => import("../../VideoCom/VideoElement")); // LAZY IMPORTING VIDEO COMPONENT
|
||||
|
||||
export default function AssignMediaTask({
|
||||
commonMedia,
|
||||
requestStatus,
|
||||
setRequestStatus,
|
||||
assignMediaTask,
|
||||
activeMedia,
|
||||
handleActiveMedia,
|
||||
closeModal,
|
||||
family_uid
|
||||
}) {
|
||||
|
||||
// For form initial values
|
||||
const initialValues = {
|
||||
// initial values for formik
|
||||
currency: "",
|
||||
amount: "",
|
||||
job_description: "",
|
||||
timeline_days: "",
|
||||
media_uid: activeMedia.uid,
|
||||
family_uid: family_uid,
|
||||
media_type: "COMMON"
|
||||
};
|
||||
|
||||
|
||||
const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
|
||||
|
||||
const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
|
||||
|
||||
// let imageSrc = (localStorage.getItem("session_token")
|
||||
// ? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeMedia.uid}` : ""); // FOR GETTING JOB IMAGE
|
||||
|
||||
return (
|
||||
<>
|
||||
{commonMedia?.loading ? (
|
||||
<div className="h-[30rem] w-full flex justify-center items-center">
|
||||
<LoadingSpinner color="sky-blue" size="16" />
|
||||
</div>
|
||||
) : (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={(values, helpers)=>{assignMediaTask(values, helpers)}}
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form>
|
||||
<>
|
||||
<div
|
||||
className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid md:grid-cols-2`}
|
||||
>
|
||||
<div className="p-4 pt-0">
|
||||
<div className="p-4 w-full min-h-[400px] max-h-[400px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
|
||||
{commonMedia?.data?.length ? (
|
||||
commonMedia?.data?.map((item, index) => (
|
||||
<div
|
||||
key={item.uid}
|
||||
className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
|
||||
onClick={() => handleActiveMedia(item)}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="media-list"
|
||||
checked={activeMedia?.uid == item?.uid}
|
||||
onChange={() =>
|
||||
handleActiveMedia(item)
|
||||
}
|
||||
className="w-[15px] h-[15px] cursor-pointer"
|
||||
/>
|
||||
<p className="w-full text-dark-gray dark:text-white tracking-wide">
|
||||
{item?.title}
|
||||
</p>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center cursor-default">
|
||||
No Media found!
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/*Right Hand Side for details && Task Type === select */}
|
||||
<>
|
||||
{commonMedia?.data?.length > 0 ? (
|
||||
<div className="p-4 py-0 h-full">
|
||||
<div className="w-full">
|
||||
<div className="mb-3 w-full">
|
||||
<label className="job-label">
|
||||
Description
|
||||
</label>
|
||||
<p className="p-1 text-sm text-slate-900 dark:text-white">
|
||||
{activeMedia?.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="my-3 w-full flex items-center justify-center">
|
||||
<div className="w-full max-w-xs h-28 rounded-2xl flex items-center justify-center">
|
||||
<Suspense fallback={<p>Loading...</p>}>
|
||||
<VideoElement videoId={activeMedia?.uid} />
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{/* Price */}
|
||||
<div className="field w-full">
|
||||
<label htmlFor="price" className="job-label flex gap-1">
|
||||
Price
|
||||
<span className='text-red-500 text-[10px]'>{props.errors.amount && props.touched.amount && props.errors.amount}</span>
|
||||
</label>
|
||||
<InputCom
|
||||
fieldClass="px-6 text-right"
|
||||
// label="Price"
|
||||
// labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
type="number"
|
||||
name="amount"
|
||||
placeholder="0"
|
||||
value={props.values.amount}
|
||||
inputHandler={props.handleChange}
|
||||
// error={props.errors.price && props.touched.price && props.errors.price}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Currency */}
|
||||
<div className="field w-full">
|
||||
<label
|
||||
htmlFor="currency"
|
||||
className="job-label flex gap-1"
|
||||
>
|
||||
Currency
|
||||
{props.errors.currency && props.touched.currency && <span className="text-[10px] text-red-500">{props.errors.currency}</span>}
|
||||
</label>
|
||||
<select
|
||||
id="currency"
|
||||
name="currency"
|
||||
value={props.values.currency}
|
||||
className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
|
||||
onChange={props.handleChange}
|
||||
>
|
||||
{walletDetails?.loading ? (
|
||||
<option className="text-slate-500 text-[13.975px]" value="">
|
||||
Loading...
|
||||
</option>
|
||||
) : walletDetails.data.length ? (
|
||||
<>
|
||||
<option className="text-slate-500 text-[13.975px]" value="">
|
||||
Currency
|
||||
</option>
|
||||
{walletDetails.data?.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
className="text-slate-500 text-lg"
|
||||
value={item?.country}
|
||||
>
|
||||
{item?.code}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
No Options Found!
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Duration */}
|
||||
<div className="field w-full">
|
||||
<label
|
||||
htmlFor="timeline_days"
|
||||
className="job-label flex gap-1"
|
||||
>
|
||||
Timeline
|
||||
{props.errors.timeline_days && props.touched.timeline_days && <span className="text-[12px] text-red-500">{props.errors.timeline_days}</span>}
|
||||
</label>
|
||||
<select
|
||||
id="timeline_days"
|
||||
name="timeline_days"
|
||||
value={props.values.timeline_days}
|
||||
className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
|
||||
onChange={props.handleChange}
|
||||
>
|
||||
{publicArray.length && (
|
||||
<>
|
||||
<option className="text-slate-500 text-[13.975px]" value="">
|
||||
Duration
|
||||
</option>
|
||||
{publicArray.map(({ name, duration }, idx) => (
|
||||
<option
|
||||
key={idx}
|
||||
className="text-slate-500 text-[13.975px]"
|
||||
value={duration}
|
||||
>
|
||||
{name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Delivery Detail */}
|
||||
<div className="my-3">
|
||||
<label className="w-full job-label flex gap-1">
|
||||
Delivery Detail
|
||||
{props.errors.job_description && props.touched.job_description && <span className="text-[12px] text-red-500">{props.errors.job_description}</span>}
|
||||
</label>
|
||||
<textarea
|
||||
className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
|
||||
rows="5"
|
||||
style={{ resize: "none" }}
|
||||
value={props.values.job_description}
|
||||
onChange={props.handleChange}
|
||||
name='job_description'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
|
||||
{/* BTN */}
|
||||
<div className="modal-footer-wrapper">
|
||||
{/* error or success display */}
|
||||
<div className="w-auto h-auto flex items-center">
|
||||
{requestStatus.message != "" &&
|
||||
(!requestStatus.status ? (
|
||||
<div
|
||||
className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px] self-start`}
|
||||
>
|
||||
{requestStatus.message}
|
||||
</div>
|
||||
) : (
|
||||
requestStatus.status && (
|
||||
<div
|
||||
className={`relative p-2 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||
>
|
||||
{requestStatus.message}
|
||||
</div>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* End of error or success display */}
|
||||
<div className="w-auto h-auto flex items-center gap-20">
|
||||
<button
|
||||
disabled={requestStatus.loading}
|
||||
onClick={()=>closeModal()}
|
||||
type="button"
|
||||
className="custom-btn border-gradient"
|
||||
>
|
||||
<span className="text-gradient">Close</span>
|
||||
</button>
|
||||
<div className="">
|
||||
{requestStatus.loading ? (
|
||||
<LoadingSpinner color="sky-blue" size="8" />
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={requestStatus.loading}
|
||||
// onClick={assignFamilyTask}
|
||||
className="custom-btn btn-gradient text-white"
|
||||
>
|
||||
Assign
|
||||
</button>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
}
|
||||
</Formik>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
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" },
|
||||
];
|
||||
@@ -0,0 +1,263 @@
|
||||
import React from 'react'
|
||||
import LoadingSpinner from '../../Spinners/LoadingSpinner'
|
||||
import { NewTasks } from './forms'
|
||||
import { PriceFormatter } from '../../Helpers/PriceFormatter'
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
export default function AssignPrevNewTask({
|
||||
familyTask,
|
||||
requestStatus,
|
||||
assignFamilyTask,
|
||||
taskType,
|
||||
switchTaskType,
|
||||
formState,
|
||||
setFormState,
|
||||
activeTask,
|
||||
handleActiveTask,
|
||||
closeModal
|
||||
}) {
|
||||
|
||||
const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
|
||||
|
||||
|
||||
let imageSrc = (localStorage.getItem("session_token")
|
||||
? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeTask.data.job_uid}` : ""); // FOR GETTING JOB IMAGE
|
||||
|
||||
return (
|
||||
<>
|
||||
{familyTask?.loading ? (
|
||||
<div className="h-[30rem] w-full flex justify-center items-center">
|
||||
<LoadingSpinner color="sky-blue" size="16" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid ${
|
||||
taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
|
||||
}`}
|
||||
>
|
||||
<div className="p-4 pt-0">
|
||||
<div className="mb-2 w-full flex items-center gap-4">
|
||||
<div className="flex items-center gap-2 text-sky-blue text-base">
|
||||
<input
|
||||
type="radio"
|
||||
name="task-type"
|
||||
value="select"
|
||||
className="w-[20px] h-[20px] cursor-pointer"
|
||||
checked={taskType == "select"}
|
||||
onChange={switchTaskType}
|
||||
/>
|
||||
<span className="text-lg tracking-wide font-semibold">Previous Task</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sky-blue text-base">
|
||||
<input
|
||||
type="radio"
|
||||
name="task-type"
|
||||
value="new"
|
||||
className="w-[20px] h-[20px] cursor-pointer"
|
||||
checked={taskType == "new"}
|
||||
onChange={switchTaskType}
|
||||
/>
|
||||
<span className="text-lg tracking-wide font-semibold">New Task</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Task Type === select */}
|
||||
{taskType == "select" && (
|
||||
<div className="p-4 w-full h-[400px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
|
||||
{familyTask?.data?.length ? (
|
||||
familyTask?.data?.map((item, index) => (
|
||||
<div
|
||||
key={item.job_uid}
|
||||
className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
|
||||
onClick={() => handleActiveTask(item.job_uid, item)}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="task-list"
|
||||
checked={
|
||||
activeTask.id == item.job_uid ||
|
||||
(activeTask.id == index && true)
|
||||
}
|
||||
onChange={() =>
|
||||
handleActiveTask(item.job_uid, item)
|
||||
}
|
||||
className="w-[15px] h-[15px] cursor-pointer"
|
||||
/>
|
||||
<p className="w-full text-dark-gray dark:text-white tracking-wide">
|
||||
{item?.title}
|
||||
</p>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center cursor-default">
|
||||
No Task found!
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{taskType == "new" && (
|
||||
<div className="p-4 w-full h-full">
|
||||
<NewTasks
|
||||
formState={formState}
|
||||
setFormState={setFormState}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/*Right Hand Side for details && Task Type === select */}
|
||||
{taskType == "select" && (
|
||||
<>
|
||||
{familyTask?.data?.length > 0 ? (
|
||||
<div className="p-4 pt-0 h-full">
|
||||
<div className="w-full">
|
||||
<p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">
|
||||
{activeTask?.data?.title}
|
||||
</p>
|
||||
{/* <div className="my-3">
|
||||
<Detail
|
||||
label="Description"
|
||||
value={activeTask?.data?.description}
|
||||
/>
|
||||
</div> */}
|
||||
<div className="my-3 w-full">
|
||||
<label className="job-label">
|
||||
Description
|
||||
</label>
|
||||
<p className="p-1 text-sm text-slate-900 dark:text-white">
|
||||
{activeTask?.data?.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2">
|
||||
<div className="w-full">
|
||||
<div className="my-3 w-full flex items-center gap-1">
|
||||
<label className="job-label">
|
||||
Reward
|
||||
</label>
|
||||
<p className="p-1 text-sm text-slate-900 dark:text-white">
|
||||
{PriceFormatter(
|
||||
activeTask?.data?.price * 0.01,
|
||||
activeTask?.data?.currency,
|
||||
activeTask?.data?.curreny_code
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="my-3 w-full flex items-center gap-1">
|
||||
<label className="job-label">
|
||||
Timeline
|
||||
</label>
|
||||
<p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex items-center justify-center">
|
||||
<div className="w-28 h-28 rounded-2xl flex items-center justify-center">
|
||||
<img
|
||||
className="w-full h-auto"
|
||||
loading="lazy"
|
||||
src={imageSrc}
|
||||
alt='job image'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dummy, no value found for created! thus commented*/}
|
||||
{/* <div className="my-3 sm:flex items-center">
|
||||
<Detail
|
||||
label="Created"
|
||||
value={`Dummy, no value found for created!`}
|
||||
/>
|
||||
</div> */}
|
||||
|
||||
<div className="my-3">
|
||||
<label className="w-full job-label">
|
||||
Delivery Detail
|
||||
</label>
|
||||
<textarea
|
||||
className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
|
||||
rows="5"
|
||||
style={{ resize: "none" }}
|
||||
value={activeTask?.data?.job_detail}
|
||||
readOnly
|
||||
// onChange={handleInputChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* BTN */}
|
||||
<div className="modal-footer-wrapper">
|
||||
{/* error or success display */}
|
||||
<div className="w-auto h-auto flex items-center">
|
||||
{requestStatus.message != "" &&
|
||||
(!requestStatus.status ? (
|
||||
<div
|
||||
className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px] self-start`}
|
||||
>
|
||||
{requestStatus.message}
|
||||
</div>
|
||||
) : (
|
||||
requestStatus.status && (
|
||||
<div
|
||||
className={`relative p-2 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||
>
|
||||
{requestStatus.message}
|
||||
</div>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* End of error or success display */}
|
||||
<div className="w-auto h-auto flex items-center gap-20">
|
||||
<button
|
||||
disabled={requestStatus.loading}
|
||||
onClick={()=>closeModal()}
|
||||
type="button"
|
||||
className="custom-btn border-gradient"
|
||||
>
|
||||
<span className="text-gradient">Close</span>
|
||||
</button>
|
||||
<div className="">
|
||||
{requestStatus.loading ? (
|
||||
<LoadingSpinner color="sky-blue" size="8" />
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
disabled={requestStatus.loading}
|
||||
onClick={assignFamilyTask}
|
||||
className="custom-btn btn-gradient text-white"
|
||||
>
|
||||
Assign
|
||||
</button>
|
||||
)
|
||||
// : (
|
||||
// <button
|
||||
// type="button"
|
||||
// disabled={requestStatus.loading}
|
||||
// onClick={assignFamilyTask}
|
||||
// className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
|
||||
// >
|
||||
// {details
|
||||
// ? `Assign task to ${details?.firstname}`
|
||||
// : familyDetailsData
|
||||
// ? `Assign task to ${familyDetailsData.firstname}`
|
||||
// : "Assign"}
|
||||
// </button>
|
||||
// )
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -11,6 +11,9 @@ import { NewTasks } from "./forms";
|
||||
import { SocketValues } from "../../Contexts/SocketIOContext";
|
||||
import { errorMsg } from "../../../lib/errorMsg";
|
||||
|
||||
import AssignPrevNewTask from "./AssignPrevNewTask";
|
||||
import AssignMediaTask from "./AssignMediaTask";
|
||||
|
||||
const AssignTaskPopout = ({
|
||||
action,
|
||||
details,
|
||||
@@ -20,7 +23,7 @@ const AssignTaskPopout = ({
|
||||
activeTask,
|
||||
setActiveTask,
|
||||
setUpdatePage,
|
||||
assignTaskChecker,
|
||||
// assignTaskChecker,
|
||||
|
||||
}) => {
|
||||
const {parentAssignJobToKid} = SocketValues()
|
||||
@@ -54,6 +57,21 @@ const AssignTaskPopout = ({
|
||||
message: "",
|
||||
}); // HOLDS RESPONSE FOR SENDING API REQUEST
|
||||
|
||||
let [commonMedia, setCommonMedia] = useState({loading: true, data: [], image: ''}) // HOLDS COMMON MEDIA DATA
|
||||
let [activeMedia, setActiveMedia] = useState({}) // HOLDS ACTIVE COMMON MEDIA DATA
|
||||
const handleActiveMedia = (data = {}) => {
|
||||
// FUNCTION TO CHANGE SELECTED ACTIVE MEDIA
|
||||
setActiveMedia({...data});
|
||||
};
|
||||
|
||||
|
||||
let [assignType, setAssignType] = useState("task"); // SWITCHES BTW TASK AND MEDIA ASSIGNMENT
|
||||
|
||||
const switchAssignType = ({ target: { name } }) => {
|
||||
// FUNCTION TO CHANGE ASSIGN TASK TYPE
|
||||
setAssignType(name);
|
||||
};
|
||||
|
||||
let [taskType, setTaskType] = useState(details ? "new" : "select"); // SWITCHES BTW SELECT TASK AND NEW TASK
|
||||
|
||||
const switchTaskType = ({ target: { value } }) => {
|
||||
@@ -90,13 +108,13 @@ const AssignTaskPopout = ({
|
||||
}
|
||||
|
||||
let reqData = {};
|
||||
if (taskType == "select") {
|
||||
if (taskType == "select" && assignType == 'task') {
|
||||
// RUNS HERE IF TASK TYPE IS SELECT
|
||||
if (!Object.keys(activeTask.data).length) {
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "No Task is seleted",
|
||||
message: "No Task is selected",
|
||||
});
|
||||
return setTimeout(() => {
|
||||
setRequestStatus({ loading: false, status: false, message: "" });
|
||||
@@ -114,7 +132,7 @@ const AssignTaskPopout = ({
|
||||
};
|
||||
}
|
||||
|
||||
if (taskType === "new") {
|
||||
if (taskType === "new" && assignType == 'task') {
|
||||
const {
|
||||
banner,
|
||||
category,
|
||||
@@ -225,10 +243,43 @@ const AssignTaskPopout = ({
|
||||
setRequestStatus({ loading: false, status: false, message: "" });
|
||||
}, 5000);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
let imageSrc = (localStorage.getItem("session_token")
|
||||
? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeTask.data.job_uid}` : ""); // FOR GETTING JOB IMAGE
|
||||
const closeModal = () => { // FOR CLOSING ASSIGN TASK MODAL
|
||||
action()
|
||||
}
|
||||
|
||||
const assignMediaTask = (values, helpers) => { // FUNCTION TO HANDLE ASSIGNING MEDIA TASK
|
||||
setRequestStatus({ loading: true, status: false, message: "" });
|
||||
|
||||
if(!selectedFamilyUid){ // If no family found, throw error
|
||||
setRequestStatus({ loading: false, status: false, message: "Please Select a Kid" });
|
||||
return setTimeout(() => {
|
||||
setRequestStatus({ loading: false, status: false, message: "" });
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
let reqData = {...values, assign_mode:'110012', family_uid:selectedFamilyUid, media_uid:activeMedia.uid, amount:values.amount * 100}
|
||||
|
||||
apiCall.parentAssignMediaTask(reqData).then(res => { // API CALL TO ASSIGN MEDIA TASK
|
||||
if(res.status != 200 || res.data.internal_return < 0){
|
||||
setRequestStatus({ loading: false, status: false, message: "Failed to Assign Task" });
|
||||
return setTimeout(()=>{
|
||||
setRequestStatus({ loading: false, status: false, message: "" });
|
||||
}, 3000)
|
||||
}
|
||||
setRequestStatus({ loading: false, status: true, message: "Task Assigned Successfully" });
|
||||
return setTimeout(()=>{
|
||||
setRequestStatus({ loading: false, status: false, message: "" });
|
||||
closeModal() // FOR CLOSING ASSIGN MODAL
|
||||
}, 3000)
|
||||
}).catch(err => {
|
||||
setRequestStatus({ loading: false, status: false, message: "Failed, something went wrong. Try Again" });
|
||||
return setTimeout(()=>{
|
||||
setRequestStatus({ loading: false, status: false, message: "" });
|
||||
}, 3000)
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(()=>{ // effect to update family UID when components mounts
|
||||
if(familyDetailsData?.uid){
|
||||
@@ -240,6 +291,15 @@ const AssignTaskPopout = ({
|
||||
}
|
||||
},[])
|
||||
|
||||
useEffect(()=>{
|
||||
apiCall.getParentCommonMedia().then((res)=>{
|
||||
// console.log('RESPONSE', res)
|
||||
setCommonMedia({loading: false, data: res?.data?.result, image: ''})
|
||||
setActiveMedia(res?.data?.result[0])
|
||||
}).catch(err => {
|
||||
setCommonMedia({loading: false, data: [], image: ''})
|
||||
})
|
||||
},[])
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -297,238 +357,52 @@ const AssignTaskPopout = ({
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{familyTask?.loading ? (
|
||||
<div className="h-[100px] w-full flex justify-center items-center">
|
||||
<LoadingSpinner color="sky-blue" size="16" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid ${
|
||||
taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
|
||||
}`}
|
||||
<div className="modal-body">
|
||||
<div className="px-4 py-2 w-full flex items-center gap-4">
|
||||
<button
|
||||
name='task'
|
||||
className={`py-1 px-2 font-medium bg-transparent border border-purple text-purple transition-all rounded-md duration-300 ${assignType=='task' && 'bg-yellow-500'}`}
|
||||
onClick={switchAssignType}
|
||||
disabled={requestStatus.loading}
|
||||
>
|
||||
<div className="p-4">
|
||||
<div className="mb-2 w-full flex items-center gap-4">
|
||||
<div className="flex items-center gap-2 text-sky-blue text-base">
|
||||
<input
|
||||
type="radio"
|
||||
name="task-type"
|
||||
value="select"
|
||||
className="w-[20px] h-[20px] cursor-pointer"
|
||||
checked={taskType == "select"}
|
||||
onChange={switchTaskType}
|
||||
/>
|
||||
<span className="text-lg tracking-wide font-semibold">Previous Task</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sky-blue text-base">
|
||||
<input
|
||||
type="radio"
|
||||
name="task-type"
|
||||
value="new"
|
||||
className="w-[20px] h-[20px] cursor-pointer"
|
||||
checked={taskType == "new"}
|
||||
onChange={switchTaskType}
|
||||
/>
|
||||
<span className="text-lg tracking-wide font-semibold">New Task</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Task Type === select */}
|
||||
{taskType == "select" && (
|
||||
<div className="p-4 w-full h-[380px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
|
||||
{familyTask?.data?.length ? (
|
||||
familyTask?.data?.map((item, index) => (
|
||||
<div
|
||||
key={item.job_uid}
|
||||
className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
|
||||
onClick={() => handleActiveTask(item.job_uid, item)}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="task-list"
|
||||
checked={
|
||||
activeTask.id == item.job_uid ||
|
||||
(activeTask.id == index && true)
|
||||
}
|
||||
onChange={() =>
|
||||
handleActiveTask(item.job_uid, item)
|
||||
}
|
||||
className="w-[15px] h-[15px] cursor-pointer"
|
||||
/>
|
||||
<p className="w-full text-dark-gray dark:text-white tracking-wide">
|
||||
{item?.title}
|
||||
</p>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center cursor-default">
|
||||
No Task found!
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{taskType == "new" && (
|
||||
<div className="p-4 w-full">
|
||||
<NewTasks
|
||||
formState={formState}
|
||||
setFormState={setFormState}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/*Right Hand Side for details && Task Type === select */}
|
||||
{taskType == "select" && (
|
||||
<>
|
||||
{familyTask?.data?.length > 0 ? (
|
||||
<div className="p-4">
|
||||
<div className="w-full">
|
||||
<p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">
|
||||
{activeTask?.data?.title}
|
||||
</p>
|
||||
{/* <div className="my-3">
|
||||
<Detail
|
||||
label="Description"
|
||||
value={activeTask?.data?.description}
|
||||
/>
|
||||
</div> */}
|
||||
<div className="my-3 w-full">
|
||||
<label className="job-label">
|
||||
Description
|
||||
</label>
|
||||
<p className="p-1 text-sm text-slate-900 dark:text-white">
|
||||
{activeTask?.data?.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2">
|
||||
<div className="w-full">
|
||||
<div className="my-3 w-full flex items-center gap-1">
|
||||
<label className="job-label">
|
||||
Reward
|
||||
</label>
|
||||
<p className="p-1 text-sm text-slate-900 dark:text-white">
|
||||
{PriceFormatter(
|
||||
activeTask?.data?.price * 0.01,
|
||||
activeTask?.data?.currency,
|
||||
activeTask?.data?.curreny_code
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="my-3 w-full flex items-center gap-1">
|
||||
<label className="job-label">
|
||||
Timeline
|
||||
</label>
|
||||
<p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex items-center justify-center">
|
||||
<div className="w-28 h-28 rounded-2xl flex items-center justify-center">
|
||||
<img
|
||||
className="w-full h-auto"
|
||||
loading="lazy"
|
||||
src={imageSrc}
|
||||
alt='job image'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dummy, no value found for created! thus commented*/}
|
||||
{/* <div className="my-3 sm:flex items-center">
|
||||
<Detail
|
||||
label="Created"
|
||||
value={`Dummy, no value found for created!`}
|
||||
/>
|
||||
</div> */}
|
||||
|
||||
<div className="my-3">
|
||||
<label className="w-full job-label">
|
||||
Delivery Detail
|
||||
</label>
|
||||
<textarea
|
||||
className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
|
||||
rows="5"
|
||||
style={{ resize: "none" }}
|
||||
value={activeTask?.data?.job_detail}
|
||||
readOnly
|
||||
// onChange={handleInputChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* BTN */}
|
||||
<div className="modal-footer-wrapper">
|
||||
{/* error or success display */}
|
||||
<div className="w-auto h-auto flex items-center">
|
||||
{requestStatus.message != "" &&
|
||||
(!requestStatus.status ? (
|
||||
<div
|
||||
className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px] self-start`}
|
||||
>
|
||||
{requestStatus.message}
|
||||
</div>
|
||||
) : (
|
||||
requestStatus.status && (
|
||||
<div
|
||||
className={`relative p-2 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||
>
|
||||
{requestStatus.message}
|
||||
</div>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* End of error or success display */}
|
||||
<div className="w-auto h-auto flex items-center gap-20">
|
||||
<button
|
||||
disabled={requestStatus.loading}
|
||||
onClick={action}
|
||||
type="button"
|
||||
className="custom-btn border-gradient"
|
||||
>
|
||||
<span className="text-gradient">Close</span>
|
||||
</button>
|
||||
<div className="">
|
||||
{requestStatus.loading ? (
|
||||
<LoadingSpinner color="sky-blue" size="8" />
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
disabled={requestStatus.loading}
|
||||
onClick={assignFamilyTask}
|
||||
className="custom-btn btn-gradient text-white"
|
||||
>
|
||||
Assign
|
||||
</button>
|
||||
)
|
||||
// : (
|
||||
// <button
|
||||
// type="button"
|
||||
// disabled={requestStatus.loading}
|
||||
// onClick={assignFamilyTask}
|
||||
// className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
|
||||
// >
|
||||
// {details
|
||||
// ? `Assign task to ${details?.firstname}`
|
||||
// : familyDetailsData
|
||||
// ? `Assign task to ${familyDetailsData.firstname}`
|
||||
// : "Assign"}
|
||||
// </button>
|
||||
// )
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
Task
|
||||
</button>
|
||||
<button
|
||||
name='media'
|
||||
className={`py-1 px-2 font-medium bg-transparent border border-purple text-purple transition-all rounded-md duration-300 ${assignType=='media' && 'bg-yellow-500'}`}
|
||||
onClick={switchAssignType}
|
||||
disabled={requestStatus.loading}
|
||||
>
|
||||
Media
|
||||
</button>
|
||||
</div>
|
||||
<div className="">
|
||||
{assignType == 'task' ?
|
||||
<AssignPrevNewTask
|
||||
familyTask={familyTask}
|
||||
requestStatus={requestStatus}
|
||||
assignFamilyTask={assignFamilyTask}
|
||||
taskType={taskType}
|
||||
switchTaskType={switchTaskType}
|
||||
formState={formState}
|
||||
setFormState={setFormState}
|
||||
activeTask={activeTask}
|
||||
handleActiveTask={handleActiveTask}
|
||||
closeModal={closeModal}
|
||||
/>
|
||||
:
|
||||
<AssignMediaTask
|
||||
commonMedia={commonMedia}
|
||||
requestStatus={requestStatus}
|
||||
assignMediaTask={assignMediaTask}
|
||||
activeMedia={activeMedia}
|
||||
handleActiveMedia={handleActiveMedia}
|
||||
closeModal={closeModal}
|
||||
family_uid = {selectedFamilyUid}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModalCom>
|
||||
</>
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import usersService from "../../../../services/UsersService";
|
||||
import InputCom from "../../../Helpers/Inputs/InputCom";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
export default function NewTasks({ formState, setFormState }) {
|
||||
let [currency, setCurrency] = useState({
|
||||
loading: true,
|
||||
status: false,
|
||||
data: null,
|
||||
});
|
||||
|
||||
const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
|
||||
|
||||
// let [currency, setCurrency] = useState({
|
||||
// loading: true,
|
||||
// status: false,
|
||||
// data: null,
|
||||
// });
|
||||
|
||||
const selectImage = require(`../../../../assets/images/taskbanners/${
|
||||
formState.banner || "default.jpg"
|
||||
@@ -15,25 +19,25 @@ export default function NewTasks({ formState, setFormState }) {
|
||||
const ApiCall = new usersService();
|
||||
|
||||
// FUNCTION TO GET Currency
|
||||
const getUserCurrency = () => {
|
||||
setCurrency((prev) => ({ ...prev, loading: true }));
|
||||
ApiCall.getUserWallets()
|
||||
.then((res) => {
|
||||
if (res.data.internal_return < 0) {
|
||||
setCurrency({ loading: false, status: true, data: [] });
|
||||
return;
|
||||
}
|
||||
// const getUserCurrency = () => {
|
||||
// setCurrency((prev) => ({ ...prev, loading: true }));
|
||||
// ApiCall.getUserWallets()
|
||||
// .then((res) => {
|
||||
// if (res.data.internal_return < 0) {
|
||||
// setCurrency({ loading: false, status: true, data: [] });
|
||||
// return;
|
||||
// }
|
||||
|
||||
setCurrency({
|
||||
loading: false,
|
||||
status: true,
|
||||
data: res.data.result_list,
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
setCurrency({ loading: false, status: false, data: [] });
|
||||
});
|
||||
};
|
||||
// setCurrency({
|
||||
// loading: false,
|
||||
// status: true,
|
||||
// data: res.data.result_list,
|
||||
// });
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// setCurrency({ loading: false, status: false, data: [] });
|
||||
// });
|
||||
// };
|
||||
|
||||
const handleInputChange = (event) => {
|
||||
const { name, value } = event.target;
|
||||
@@ -43,9 +47,9 @@ export default function NewTasks({ formState, setFormState }) {
|
||||
}));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getUserCurrency();
|
||||
}, []);
|
||||
// useEffect(() => {
|
||||
// getUserCurrency();
|
||||
// }, []);
|
||||
|
||||
return (
|
||||
<form className="w-full flex justify-between items-start">
|
||||
@@ -149,22 +153,22 @@ export default function NewTasks({ formState, setFormState }) {
|
||||
onChange={handleInputChange}
|
||||
// onBlur={props.handleBlur}
|
||||
>
|
||||
{currency?.loading ? (
|
||||
{walletDetails?.loading ? (
|
||||
<option className="text-slate-500 text-[13.975px]" value="">
|
||||
Loading...
|
||||
</option>
|
||||
) : currency.data.length ? (
|
||||
) : walletDetails.data.length ? (
|
||||
<>
|
||||
<option className="text-slate-500 text-[13.975px]" value="">
|
||||
Currency
|
||||
</option>
|
||||
{currency.data?.map((item, index) => (
|
||||
{walletDetails.data?.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
className="text-slate-500 text-lg"
|
||||
value={item?.country}
|
||||
>
|
||||
{item?.description}
|
||||
{item?.code}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
import React, { useEffect, useRef } from 'react'
|
||||
|
||||
|
||||
export default function VideoElement({videoId}) {
|
||||
let videoRef = useRef(null)
|
||||
|
||||
useEffect(()=>{
|
||||
if(videoRef.current){
|
||||
videoRef.current.pause()
|
||||
videoRef.current.removeAttribute('src')
|
||||
videoRef.current.load()
|
||||
}
|
||||
},[videoId])
|
||||
|
||||
return (
|
||||
<video ref={videoRef} className='w-full h-full' controls>
|
||||
<source src={`https://dev-media.wrenchboard.com/videos/${videoId}`} type='video/mp4'></source>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1330,7 +1330,32 @@ class usersService {
|
||||
};
|
||||
return this.postAuxEnd("/familywallet/redeem/options", postData);
|
||||
}
|
||||
|
||||
|
||||
// API FUNCTION FOR PARENT TO CALL COMMON MEDIA
|
||||
getParentCommonMedia() {
|
||||
var postData = {
|
||||
uid: localStorage.getItem("uid"),
|
||||
member_id: localStorage.getItem("member_id"),
|
||||
sessionid: localStorage.getItem("session_token"),
|
||||
action: apiConst.WRENCHBOARD_ACCOUNT_FAMILY_RESOURCES,
|
||||
offset: 1,
|
||||
limit: 20,
|
||||
};
|
||||
return this.postAuxEnd("/commonmedia", postData);
|
||||
}
|
||||
|
||||
// API FUNCTION FOR PARENT TO ASSIGN MEDIA TASK
|
||||
parentAssignMediaTask(reqData) {
|
||||
var postData = {
|
||||
uid: localStorage.getItem("uid"),
|
||||
member_id: localStorage.getItem("member_id"),
|
||||
sessionid: localStorage.getItem("session_token"),
|
||||
action: apiConst.WRENCHBOARD_JOB_OFFER_SYSTEM,
|
||||
...reqData
|
||||
};
|
||||
return this.postAuxEnd("/assignmediatask", postData);
|
||||
}
|
||||
|
||||
/*
|
||||
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username)
|
||||
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(password)
|
||||
|
||||
Reference in New Issue
Block a user