Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into resources-page

This commit was merged in pull request #228.
This commit is contained in:
2023-07-01 10:38:29 +01:00
7 changed files with 557 additions and 42 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

@@ -7,15 +7,66 @@ import { PriceFormatter } from '../../Helpers/PriceFormatter'
function AssignTaskPopout({action, situation, familyDetails}) {
const apiCall = new usersService()
let [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: ''}) // HOLDS RESPONSE FOR SENDING API REQUEST
let [familyTask, setFamilyTask] = useState({loading: true, data: []})
let [activeTask, setActiveTask] = useState({id: 0, data: {}})
console.log('TESTING',activeTask.data)
const handleActiveTask = (id=0, data={}) => {
let [taskType, setTaskType] = useState('select') // SWITCHES BTW SELECT TASK AND NEW TASK
let [activeTask, setActiveTask] = useState({id: 0, data: {}}) // HOLDS SELECTED TASK
const switchTaskType = ({target:{value}}) => { // FUNCTION TO CHANGE SELECTED ACTIVE TASK
setTaskType(value)
}
const handleActiveTask = (id=0, data={}) => { // FUNCTION TO CHANGE SELECTED ACTIVE TASK
setActiveTask({id, data})
}
const assignFamilyTask = () => {
setRequestStatus({loading: true, status: false, message: ''})
let reqData = {}
if(taskType == 'select'){ // RUNS HERE IF TASK TYPE IS SELECT
if(!Object.keys(activeTask.data).length){
setRequestStatus({loading: false, status: false, message: 'No Task is seleted'})
return setTimeout(()=>{
setRequestStatus({loading: false, status: false, message: ''})
}, 3000)
}
reqData = { // API PAYLOADS
job_id: activeTask.data?.job_id,
job_uid: activeTask.data?.job_uid,
family_uid: familyDetails.uid,
job_description: activeTask.data?.description,
assign_mode: 110011,
}
apiCall.assignFamilyTask(reqData).then(res => {
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: ''})
}, 5000)
}
setRequestStatus({loading: false, status: true, message: 'action successful'})
setTimeout(()=>{
setRequestStatus({loading: false, status: false, message: ''})
action() // FUNCTION THAT CLOSES THE MODAL BOX
}, 5000)
}).catch(err => {
setRequestStatus({loading: false, status: false, message: 'An Error occured, try again'})
setTimeout(()=>{
setRequestStatus({loading: false, status: false, message: ''})
}, 5000)
})
}
if(taskType == 'new'){ // RUNS HERE IF TASK TYPE IS NEW TASK
console.log('TESTING')
}
}
useEffect(()=>{
const reqData = {
limit: 30,
@@ -25,7 +76,9 @@ console.log('TESTING',activeTask.data)
}
apiCall.getMyJobList(reqData).then(res => {
setFamilyTask({loading: false, data: res?.data?.result_list})
setActiveTask(prev => ({...prev, data:res?.data?.result_list[0]}))
if(res?.data?.result_list?.length){
setActiveTask(prev => ({...prev, data:res?.data?.result_list[0]}))
}
}).catch(err => {
setFamilyTask({loading: false, data: []})
console.log('Error', err)
@@ -37,7 +90,7 @@ console.log('TESTING',activeTask.data)
action={action}
situation={situation}
>
<div className="w-full h-full lg:min-w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
<div className="w-full h-full lg:w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
<div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
Assign task to {familyDetails?.firstname}
@@ -69,55 +122,64 @@ console.log('TESTING',activeTask.data)
</button>
</div>
{familyTask.loading ?
<div className='h-[100px] flex justify-center items-center'>
<div className='h-[100px] w-full flex justify-center items-center'>
<LoadingSpinner color='sky-blue' size='16' />
</div>
:
familyTask.data.length ?
<>
<div className="job-action-modal-body w-full md:grid md:grid-cols-2">
<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' className="w-[20px] h-[20px]" /><span>Select Task</span>
<input type="radio" name='task-type' value='select' className="w-[20px] h-[20px] cursor-pointer" checked={taskType=='select'} onChange={switchTaskType}/>
<span>Select Task</span>
</div>
<div className="flex items-center gap-2 text-sky-blue text-base">
<input type="radio" name='task-type' className="w-[20px] h-[20px]" /><span>New Task</span>
<input type="radio" name='task-type' value='new' className="w-[20px] h-[20px] cursor-pointer" checked={taskType=='new'} onChange={switchTaskType}/>
<span>New Task</span>
</div>
</div>
<div className='p-4 w-full h-[400px] overflow-y-auto bg-slate-100'>
{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="text-dark-gray tracking-wide">{item?.title}</p>
</div>
))
{
taskType == 'select' ?
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="text-dark-gray tracking-wide">{item?.title}</p>
</div>
))
:
<p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center">No Task found!</p>
:
<p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center">SPACE FOR NEW TASK</p>
}
</div>
</div>
{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 sm:flex items-center">
<div className="my-3">
<Detail label="Description" value={activeTask?.data?.description} />
</div>
<div className='flex items-center'>
<div className="my-3 w-full flex items-center gap-1">
<label className='text-slate-900 dark:text-white tracking-wide font-semibold'>Price</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 sm:flex items-center">
<Detail label="Price" value={PriceFormatter(activeTask?.data?.price*0.01, activeTask?.data?.currency, activeTask?.data?.curreny_code)} />
</div>
<div className="my-3 sm:flex items-center">
<Detail
label="Timeline"
value={`${activeTask?.data?.timeline_days} day(s)`}
/>
<div className="my-3 w-full flex items-center gap-1">
<label className='text-slate-900 dark:text-white tracking-wide font-semibold'>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="my-3 sm:flex items-center">
@@ -135,30 +197,62 @@ console.log('TESTING',activeTask.data)
className={`p-1 w-full text-sm text-slate-900 outline-none border border-slate-300 rounded-md`}
rows="5"
style={{ resize: "none" }}
defaultValue={activeTask?.data?.job_detail}
value={activeTask?.data?.job_detail}
readOnly
// onChange={handleInputChange}
/>
{/* <p>{errMsg.deliveryDetail}</p> */}
{/* <p>{}</p> */}
</div>
</div>
</div>
</div>
:
<></>
}
</div>
{/* BTN */}
<div className='p-2 border-t-2 flex justify-end items-center gap-3'>
<button onClick={action} type="button" className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white">
<span className='text-gradient'>Close</span>
</button>
{/* error or success display */}
{requestStatus.message != "" &&
(!requestStatus.status ? (
<div
className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
>
{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>
)
))}
{/* End of error or success display */}
<button
disabled={requestStatus.loading}
onClick={action} type="button"
className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white cursor-pointer"
>
<span className='text-gradient'>Close</span>
</button>
<div className=''>
{requestStatus.loading ?
<LoadingSpinner color='sky-blue' size='8' />
:
<button
type="button"
className="px-1 w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
disabled={requestStatus.loading}
onClick={assignFamilyTask}
className="px-1 w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
>
Assign
</button>
}
</div>
</div>
</>
:
<p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center">No Task found!</p>
}
</div>
</ModalCom>
+4 -2
View File
@@ -3,7 +3,8 @@ import datas from "../../data/product_data.json";
import TopSellerTopBuyerSliderSection from "./TopSellerTopBuyerSliderSection";
import CommonHead from "../UserHeader/CommonHead";
import FamilyActiveLSlde from "./FamilyActiveLSlde";
import OverviewSection from "../ActiveBids/OverviewSection";
import ParentWaiting from "../MyPendingJobs/ParentWaiting";
export default function FamilyDash(props) {
@@ -18,7 +19,8 @@ export default function FamilyDash(props) {
commonHeadData={props.commonHeadData}
/>
<FamilyActiveLSlde trending={trending} className="mb-10" />
<TopSellerTopBuyerSliderSection className="mb-10" />
{/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}
<ParentWaiting className="mb-10" />
</div>
</div>
);
@@ -0,0 +1,67 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
import activeAidsBanner from "../../assets/images/kids-waiting.jpg";
import HeroUser from "../../assets/images/hero-user.png";
import CountDown from "../Helpers/CountDown";
import ParentWaitingTable from "./ParentWaitingTable";
export default function ParentWaiting({ className }) {
const [addFavorite, setValue] = useState(false);
const favoriteHandler = () => {
if (!addFavorite) {
setValue(true);
toast.success("Added to Favorite List");
} else {
setValue(false);
toast.warn("Remove to Favorite List");
}
};
return (
<>
<div className={`overview-section w-full ${className || ""}`}>
<div>
<h1 className="text-26 font-bold text-dark-gray dark:text-white">Waiting for Parent to Get Started...</h1>
</div>
<div className="overview-section-wrapper lg:flex lg:h-[494px] lg:pace-x-2">
<div className="lg:w-[540px] w-full h-full bg-white dark:bg-dark-white rounded-2xl overflow-hidden mb-10">
<img
src={activeAidsBanner}
alt="banner"
className="w-full lg:h-full h-[400px]"
/>
</div>
<div className="overview-countdown lg:w-2/5 w-full h-full flex flex-col justify-between lg:pl-11 rounded-2xl bg-white dark:bg-dark-white ">
{<ParentWaitingTable />}
{/* <div className="lg:mb-0 mb-3">*/}
{/* <h1 className="text-2xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
{/* Lock and Lob x Fiesta Spurs*/}
{/* </h1>*/}
{/* <span className="text-[18px] font-thin tracking-wide text-dark-gray dark:text-white">*/}
{/* ID : 2320382*/}
{/*</span>*/}
{/* </div>*/}
{/* /!* user *!/*/}
{/* <div className="flex items-center space-x-3 lg:mb-0 mb-3">*/}
{/* <div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">*/}
{/* <img src={HeroUser} alt="" />*/}
{/* </div>*/}
{/* <div>*/}
{/* <p className="text-xl tracking-wide font-bold antise text-dark-gray dark:text-white">*/}
{/* Brokln Simons*/}
{/* </p>*/}
{/* <p className="text-sm tracking-wide text-dark-gray dark:text-white">*/}
{/* @broklinslam_75*/}
{/* </p>*/}
{/* </div>*/}
{/* </div>*/}
</div>
</div>
</div>
</>
);
}
@@ -0,0 +1,339 @@
import React, { useState } from "react";
import transaction1 from "../../assets/images/recent-transation-1.png";
import transaction2 from "../../assets/images/recent-transation-2.png";
import transaction3 from "../../assets/images/recent-transation-3.png";
export default function ParentWaitingTable() {
const transationFilterData = [
{
id: 1,
name: "all",
uniqueId: Math.random(),
},
{
id: 2,
name: "send",
uniqueId: Math.random(),
},
{
id: 3,
name: "recent",
uniqueId: Math.random(),
},
];
const [filterActive, setValue] = useState(transationFilterData[0].id);
const filterHander = (value) => {
setValue(value);
};
return (
<div className="rounded-2xl bg-white dark:bg-dark-white ">
{/* heading */}
<div className="heading sm:flex justify-between items-center">
<div>
<ul className="flex space-x-5 items-center">
{transationFilterData.map((value) => (
<li
onClick={() => filterHander(value.id)}
key={value.uniqueId}
className={`text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29] border-transparent hover:border-purple uppercase ${
filterActive === value.id ? "border-purple text-purple" : ""
}`}
>
{value.name}
</li>
))}
{/* <li className="text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29] border-transparent hover:border-purple uppercase">
All
</li>
<li className="text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29] border-transparent hover:border-purple uppercase">
SEND
</li>
<li className="text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29] border-transparent hover:border-purple uppercase">
recent
</li> */}
</ul>
</div>
</div>
{/* content */}
{filterActive === 2 ? (
<div className="content">
<ul>
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
<div className="flex justify-between items-center">
<div className="account-name flex space-x-4 items-center">
<div className="icon w-14 h-14 flex justify-center items-center">
<img src={transaction1} alt="" className="" />
</div>
<div>
<div className="name">
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
Add ETH from MetaMask
</p>
</div>
<div className="time">
<p className="text-sm text-thin-light-gray font-medium">
22 hours ago
</p>
</div>
</div>
</div>
<div>
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
$512.44
</p>
<p className="usd text-base text-light-green text-right">
+324.75
</p>
</div>
</div>
</li>
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
<div className="flex justify-between items-center">
<div className="account-name flex space-x-4 items-center">
<div className="icon w-14 h-14 flex justify-center items-center">
<img src={transaction2} alt="" className="" />
</div>
<div>
<div className="name">
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
Add BTC from Coinbase Wallet
</p>
</div>
<div className="time">
<p className="text-sm text-thin-light-gray font-medium">
22 hours ago
</p>
</div>
</div>
</div>
<div>
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
$512.44
</p>
<p className="usd text-base text-light-red text-right">
-824.78
</p>
</div>
</div>
</li>
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
<div className="flex justify-between items-center">
<div className="account-name flex space-x-4 items-center">
<div className="icon w-14 h-14 flex justify-center items-center">
<img src={transaction3} alt="" className="" />
</div>
<div>
<div className="name">
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
Buy Nft art from LTC
</p>
</div>
<div className="time">
<p className="text-sm text-thin-light-gray font-medium">
22 hours ago
</p>
</div>
</div>
</div>
<div>
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
$512.44
</p>
<p className="usd text-base text-light-red text-right">
-924.54
</p>
</div>
</div>
</li>
</ul>
</div>
) : filterActive === 3 ? (
<div className="content">
<ul>
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
<div className="flex justify-between items-center">
<div className="account-name flex space-x-4 items-center">
<div className="icon w-14 h-14 flex justify-center items-center">
<img src={transaction1} alt="" className="" />
</div>
<div>
<div className="name">
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
Add ETH from MetaMask
</p>
</div>
<div className="time">
<p className="text-sm text-thin-light-gray font-medium">
22 hours ago
</p>
</div>
</div>
</div>
<div>
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
$512.44
</p>
<p className="usd text-base text-light-green text-right">
+324.75
</p>
</div>
</div>
</li>
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
<div className="flex justify-between items-center">
<div className="account-name flex space-x-4 items-center">
<div className="icon w-14 h-14 flex justify-center items-center">
<img src={transaction2} alt="" className="" />
</div>
<div>
<div className="name">
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
Add BTC from Coinbase Wallet
</p>
</div>
<div className="time">
<p className="text-sm text-thin-light-gray font-medium">
22 hours ago
</p>
</div>
</div>
</div>
<div>
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
$512.44
</p>
<p className="usd text-base text-light-red text-right">
-824.78
</p>
</div>
</div>
</li>
</ul>
</div>
) : (
<div className="content">
<ul>
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
<div className="flex justify-between items-center">
<div className="account-name flex space-x-4 items-center">
<div className="icon w-14 h-14 flex justify-center items-center">
<img src={transaction1} alt="" className="" />
</div>
<div>
<div className="name">
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
Add ETH from MetaMask
</p>
</div>
<div className="time">
<p className="text-sm text-thin-light-gray font-medium">
22 hours ago
</p>
</div>
</div>
</div>
<div>
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
$512.44
</p>
<p className="usd text-base text-light-green text-right">
+324.75
</p>
</div>
</div>
</li>
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
<div className="flex justify-between items-center">
<div className="account-name flex space-x-4 items-center">
<div className="icon w-14 h-14 flex justify-center items-center">
<img src={transaction2} alt="" className="" />
</div>
<div>
<div className="name">
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
Add BTC from Coinbase Wallet
</p>
</div>
<div className="time">
<p className="text-sm text-thin-light-gray font-medium">
22 hours ago
</p>
</div>
</div>
</div>
<div>
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
$512.44
</p>
<p className="usd text-base text-light-red text-right">
-824.78
</p>
</div>
</div>
</li>
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
<div className="flex justify-between items-center">
<div className="account-name flex space-x-4 items-center">
<div className="icon w-14 h-14 flex justify-center items-center">
<img src={transaction3} alt="" className="" />
</div>
<div>
<div className="name">
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
Buy Nft art from LTC
</p>
</div>
<div className="time">
<p className="text-sm text-thin-light-gray font-medium">
22 hours ago
</p>
</div>
</div>
</div>
<div>
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
$512.44
</p>
<p className="usd text-base text-light-red text-right">
-924.54
</p>
</div>
</div>
</li>
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
<div className="flex justify-between items-center">
<div className="account-name flex space-x-4 items-center">
<div className="icon w-14 h-14 flex justify-center items-center">
<img src={transaction1} alt="" className="" />
</div>
<div>
<div className="name">
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
Add ETH from MetaMask
</p>
</div>
<div className="time">
<p className="text-sm text-thin-light-gray font-medium">
22 hours ago
</p>
</div>
</div>
</div>
<div>
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
$512.44
</p>
<p className="usd text-base text-light-green text-right">
+324.75
</p>
</div>
</div>
</li>
</ul>
</div>
)}
</div>
);
}
+13
View File
@@ -787,6 +787,19 @@ class usersService {
};
return this.postAuxEnd("/offerinterestlistmsg", postData);
}
// FUNCTION TO ASSIGN TASK TO FAMILY MEMBER
assignFamilyTask(reqData) {
var postData = {
uid: localStorage.getItem("uid"),
member_id: localStorage.getItem("member_id"),
sessionid: localStorage.getItem("session_token"),
action: 13025,
...reqData
};
return this.postAuxEnd("/assigntask", postData);
}
/*
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username)
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(password)