Compare commits

..

2 Commits

Author SHA1 Message Date
victorAnumudu 27f87ee92d added media tab on assign task to kid 2024-03-26 20:16:53 +01:00
ameye edf23352ef Merge branch 'error-msg' of WrenchBoard/Users-Wrench into master 2024-03-26 11:56:31 +00:00
6 changed files with 913 additions and 268 deletions
@@ -0,0 +1,287 @@
import React, { useEffect, useState } 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';
export default function AssignMediaTask({
commonMedia,
requestStatus,
assignFamilyTask,
activeMedia,
handleActiveMedia,
closeModal
}) {
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
// const handleInputChange = (event) => {
// const { name, value } = event.target;
// setFormState((prevState) => ({
// ...prevState,
// [name]: value,
// }));
// };
return (
<>
{commonMedia?.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 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 h-28 rounded-2xl flex items-center justify-center">
<img
className="w-full h-full object-cover"
loading="lazy"
src={imageSrc}
alt='job image'
/>
</div>
</div>
<div className="grid grid-cols-2 gap-3">
{/* Price */}
<div className="field w-full">
<label htmlFor="price" className="job-label">Price</label>
<InputCom
fieldClass="px-6 text-right"
// label="Price"
// labelClass="tracking-wide"
inputBg="bg-slate-100"
type="number"
name="price"
placeholder="0"
// value={formState.price}
// inputHandler={handleInputChange}
// blurHandler={props.handleBlur}
// error={props.errors.price && props.touched.price && props.errors.price}
/>
</div>
{/* Currency */}
<div className="field w-full">
<label
htmlFor="country"
className="job-label"
>
Currency
{/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
</label>
<select
id="country"
name="country"
// value={formState.country}
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={handleInputChange}
>
{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! Try Again
</option>
)}
</select>
</div>
</div>
{/* Duration */}
<div className="field w-full">
<label
htmlFor="timeline_days"
className="job-label"
>
Timeline
{/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
</label>
<select
id="timeline_days"
name="timeline_days"
// value={formState.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={handleInputChange}
>
{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">
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={activeMedia?.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>
)
}
</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" },
];
@@ -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,
@@ -169,6 +187,13 @@ const AssignTaskPopout = ({
};
}
if(assignType == 'media'){ // FOR ASSIGNING MEDIA TASK
setRequestStatus({ loading: false, status: false, message: "You cannnot assign, work still process" });
return setTimeout(()=>{
setRequestStatus({ loading: false, status: false, message: "" });
},2000)
}
apiCall
.assignFamilyTask(reqData)
.then((res) => {
@@ -225,10 +250,11 @@ 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()
}
useEffect(()=>{ // effect to update family UID when components mounts
if(familyDetailsData?.uid){
@@ -240,6 +266,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 +332,49 @@ 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}
>
<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}
>
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}
assignFamilyTask={assignFamilyTask}
activeMedia={activeMedia}
handleActiveMedia={handleActiveMedia}
closeModal={closeModal}
/>
}
</div>
</div>
</div>
</ModalCom>
</>
@@ -0,0 +1,232 @@
{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">
<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>
</>
)}
@@ -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>
))}
</>
+13
View File
@@ -1330,6 +1330,19 @@ 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);
}
/*
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username)