From 0e4b1af1cea976ac2abc36396cce4cc91bf183e3 Mon Sep 17 00:00:00 2001 From: Ebube Date: Wed, 24 Jan 2024 01:11:49 +0100 Subject: [PATCH] Jobs Manager Side task done --- src/components/JobGroups/DeleteGroup.jsx | 2 +- src/components/JobGroups/DeleteMember.jsx | 6 +- src/components/JobGroups/GroupList.jsx | 152 +++--- src/components/JobGroups/GroupMemberTable.jsx | 198 ++++---- src/components/JobGroups/JobGroups.jsx | 170 ++++--- src/components/JobGroups/MemberList.jsx | 2 +- .../MyActiveJobs/MyActiveJobTable.jsx | 10 +- .../MyPendingJobs/MyPendingJobTable.jsx | 14 +- src/components/jobPopout/JobListPopout.jsx | 471 ++++++++++-------- 9 files changed, 577 insertions(+), 448 deletions(-) diff --git a/src/components/JobGroups/DeleteGroup.jsx b/src/components/JobGroups/DeleteGroup.jsx index 6c646d3..c07064b 100644 --- a/src/components/JobGroups/DeleteGroup.jsx +++ b/src/components/JobGroups/DeleteGroup.jsx @@ -73,7 +73,7 @@ export default function DeleteGroup({action, situation, details}) {

- Are you sure, you want to delete
'{details?.group_name}' + Are you sure, you want to delete
'{details?.group_name}' group?

diff --git a/src/components/JobGroups/DeleteMember.jsx b/src/components/JobGroups/DeleteMember.jsx index e899cff..8d8f2fe 100644 --- a/src/components/JobGroups/DeleteMember.jsx +++ b/src/components/JobGroups/DeleteMember.jsx @@ -23,7 +23,7 @@ export default function DeleteMember({action, situation, details}) {

- Delete Member + Remove Member

)}
diff --git a/src/components/JobGroups/GroupList.jsx b/src/components/JobGroups/GroupList.jsx index 7dcfa73..749ccf8 100644 --- a/src/components/JobGroups/GroupList.jsx +++ b/src/components/JobGroups/GroupList.jsx @@ -1,72 +1,104 @@ -import React, { useState } from 'react' +import React, { useState } from "react"; -import InputCom from '../../components/Helpers/Inputs/InputCom/index' -import DeleteGroup from './DeleteGroup' -import AddGroup from './AddGroup' +import AddGroup from "./AddGroup"; +import DeleteGroup from "./DeleteGroup"; +import { localImgLoad } from "../../lib"; -export default function GroupList({groupList, selectedGroup, changeSelectedGroup, setUpdateList}) { +export default function GroupList({ + groupList, + selectedGroup, + changeSelectedGroup, + setUpdateList, +}) { + const [deletePopout, setDeletePopout] = useState({ + status: false, + data: {}, + }); - const [deletePopout, setDeletePopout] = useState({ - status: false, - data: {} - }) + const [addGroupPopout, setAddGroupPopout] = useState(false); - const [addGroupPopout, setAddGroupPopout] = useState(false) - - const handleAddGroup = () => { - setAddGroupPopout(true) - } - - const handleDeleteGroup = (item) => { - setDeletePopout({ - status: true, - data: {...item} - }) - } + const handleAddGroup = () => { + setAddGroupPopout(true); + }; + const handleDeleteGroup = (item) => { + setDeletePopout({ + status: true, + data: { ...item }, + }); + }; return ( <> -
- {/*

Jobs Groups

*/} -
- -
- - {groupList && groupList.length < 1 ? -

No Group Found!

- : -
-
- {groupList.map(item=> ( -
-
- -

{item.group_name}

-
- -
- ))} -
-
- } +
+ {/*

Jobs Groups

*/} +
+
- - {deletePopout.status && - setDeletePopout({status:false, data:{}})} - situation={deletePopout.status} - details={deletePopout.data} - /> - } - {addGroupPopout && - setAddGroupPopout(false)} - situation={addGroupPopout} - setUpdateList={setUpdateList} - /> - } + {groupList && groupList.length < 1 ? ( +

+ No Group Found! +

+ ) : ( +
+
+ {groupList.map((item) => ( +
+
+ +

+ {item.group_name} +

+
+ +
+ ))} +
+
+ )} +
+ + {deletePopout.status && ( + setDeletePopout({ status: false, data: {} })} + situation={deletePopout.status} + details={deletePopout.data} + /> + )} + + {addGroupPopout && ( + setAddGroupPopout(false)} + situation={addGroupPopout} + setUpdateList={setUpdateList} + /> + )} - ) + ); } diff --git a/src/components/JobGroups/GroupMemberTable.jsx b/src/components/JobGroups/GroupMemberTable.jsx index a9b43ee..012e740 100644 --- a/src/components/JobGroups/GroupMemberTable.jsx +++ b/src/components/JobGroups/GroupMemberTable.jsx @@ -1,98 +1,118 @@ -import React, { useState } from 'react' -import { handlePagingFunc } from '../Pagination/HandlePagination'; -import PaginatedList from '../Pagination/PaginatedList'; -import DeleteMember from './DeleteMember'; +import React, { useState } from "react"; +import { handlePagingFunc } from "../Pagination/HandlePagination"; +import PaginatedList from "../Pagination/PaginatedList"; +import DeleteMember from "./DeleteMember"; +import { localImgLoad } from "../../lib"; -export default function GroupMemberTable({selectedList}) { - - // Handle Pagination - const [currentPage, setCurrentPage] = useState(0); - const indexOfFirstItem = Number(currentPage); - const indexOfLastItem =Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); +export default function GroupMemberTable({ selectedList }) { + // Handle Pagination + const [currentPage, setCurrentPage] = useState(0); + const indexOfFirstItem = Number(currentPage); + const indexOfLastItem = + Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); - const currentSelectedList = selectedList?.slice(indexOfFirstItem, indexOfLastItem); - - const handlePagination = (e) => { - handlePagingFunc(e, setCurrentPage); - }; + const currentSelectedList = selectedList?.slice( + indexOfFirstItem, + indexOfLastItem + ); - const [deletePopout, setDeletePopout] = useState({ - status: false, - data: {} - }) + const handlePagination = (e) => { + handlePagingFunc(e, setCurrentPage); + }; - const handleDeleteMember = (item) => { - setDeletePopout({ - status: true, - data: {...item} - }) - } - - return ( -
-
- - - <> - {selectedList && selectedList?.length > 0 ? ( - currentSelectedList.map((value, index) => ( - - {/* + const [deletePopout, setDeletePopout] = useState({ + status: false, + data: {}, + }); + + const handleDeleteMember = (item) => { + setDeletePopout({ + status: true, + data: { ...item }, + }); + }; + + return ( +
+
+
{value?.firstname}
+ + <> + {selectedList && selectedList?.length > 0 ? ( + currentSelectedList.map((value, index) => ( + + {/* */} - - - - )) - ) : ( - - - - )} - - -
{value?.firstname} {value?.lastname} {value?.email} -
-

- {value.firstname && value.firstname} {value.lastname && value.lastname} -

- - {value.email && value.email} - -
- 		- -
No Members Found
- - {/* PAGINATION BUTTON */} - = - selectedList?.length - ? true - : false - } - data={selectedList} - start={indexOfFirstItem} - stop={indexOfLastItem} - /> - {/* END OF PAGINATION BUTTON */} -
- - {/* DELETE MEMBER POPOUT */} - {deletePopout.status && - setDeletePopout({status:false, data:{}})} - situation={deletePopout.status} - details={deletePopout.data} - /> - } - {/* END OF DELETE MEMBER POPOUT */} -
- ); - }; + +
+

+ {value.firstname && value.firstname}{" "} + {value.lastname && value.lastname} +

+ + {value.email && value.email} + +
+ + + + + + )) + ) : ( + + No Members Found + + )} + + + + + {/* PAGINATION BUTTON */} + = + selectedList?.length + ? true + : false + } + data={selectedList} + start={indexOfFirstItem} + stop={indexOfLastItem} + /> + {/* END OF PAGINATION BUTTON */} +
+ + {/* DELETE MEMBER POPOUT */} + {deletePopout.status && ( + setDeletePopout({ status: false, data: {} })} + situation={deletePopout.status} + details={deletePopout.data} + /> + )} + {/* END OF DELETE MEMBER POPOUT */} +
+ ); +} diff --git a/src/components/JobGroups/JobGroups.jsx b/src/components/JobGroups/JobGroups.jsx index 4d80a2a..3a1eae6 100644 --- a/src/components/JobGroups/JobGroups.jsx +++ b/src/components/JobGroups/JobGroups.jsx @@ -1,79 +1,119 @@ -import React, { useEffect, useState } from 'react' -import Layout from '../Partials/Layout' +import React, { useEffect, useState } from "react"; +import Layout from "../Partials/Layout"; -import GroupList from './GroupList' -import MemberList from './MemberList' -import LoadingSpinner from '../Spinners/LoadingSpinner' +import GroupList from "./GroupList"; +import MemberList from "./MemberList"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; -import usersService from '../../services/UsersService' +import usersService from "../../services/UsersService"; export default function JobGroups() { + const userApi = new usersService(); - const userApi = new usersService(); + const [updateList, setUpdateList] = useState(false); - const [updateList, setUpdateList] = useState(false) + const [groupList, setGroupList] = useState({ + loading: true, + groups: [], + members: [], + }); - - const [groupList, setGroupList] = useState({ - loading:true, - groups: [], - members: [] - }) + const [selectedGroup, setSelectedGroup] = useState({ + id: "", + name: "", + data: [], + }); - const [selectedGroup, setSelectedGroup] = useState({id:'', name:'', data: []}) + const changeSelectedGroup = (e) => { + let groupID = e.target.value; + const activeMembers = groupList?.members?.filter( + (item) => item.group_id == groupID + ); + const activeGroup = groupList?.groups?.filter( + (item) => item.group_id == groupID + ); + setSelectedGroup({ + id: groupID, + name: activeGroup[0]?.group_name, + data: activeMembers, + }); + }; - const changeSelectedGroup = (e) => { - let groupID = e.target.value - const activeMembers = groupList?.members?.filter(item => item.group_id == groupID) - const activeGroup = groupList?.groups?.filter(item => item.group_id == groupID) - setSelectedGroup({id: groupID, name:activeGroup[0]?.group_name, data:activeMembers}) - } - - useEffect(()=>{ - setGroupList({loading: true, groups: [], members: []}) - userApi.jobGroupList({}).then(res => { - const {status, data} = res - if(status != 200 || data?.internal_return < 0){ - setGroupList({loading: false, groups: [], members: []}) - return - } - if(data.result_list.length < 0){ - setGroupList({loading: false, groups: [], members: []}) - return - } - setGroupList({loading: false, groups: data.result_list, members: data.result_list_member}) - if(selectedGroup.id == ''){ - let activeGroupId = data.result_list[0].group_id - let activeGroup = data.result_list[0].group_name - let activeMembers = data.result_list_member?.filter(item => item.group_id == activeGroupId) - setSelectedGroup({id: activeGroupId, name:activeGroup, data:activeMembers}) - }else{ - let activeMembers = data.result_list_member?.filter(item => item.group_id == selectedGroup?.id) - setSelectedGroup({id: selectedGroup?.id, name:selectedGroup?.name, data:activeMembers}) - } - }).catch(error => { - setGroupList({loading: false, groups: [], members: []}) - console.log(error) - }) - },[updateList]) + useEffect(() => { + setGroupList({ loading: true, groups: [], members: [] }); + userApi + .jobGroupList({}) + .then((res) => { + const { status, data } = res; + if (status != 200 || data?.internal_return < 0) { + setGroupList({ loading: false, groups: [], members: [] }); + return; + } + if (data.result_list.length < 0) { + setGroupList({ loading: false, groups: [], members: [] }); + return; + } + setGroupList({ + loading: false, + groups: data.result_list, + members: data.result_list_member, + }); + if (selectedGroup.id == "") { + let activeGroupId = data.result_list[0].group_id; + let activeGroup = data.result_list[0].group_name; + let activeMembers = data.result_list_member?.filter( + (item) => item.group_id == activeGroupId + ); + setSelectedGroup({ + id: activeGroupId, + name: activeGroup, + data: activeMembers, + }); + } else { + let activeMembers = data.result_list_member?.filter( + (item) => item.group_id == selectedGroup?.id + ); + setSelectedGroup({ + id: selectedGroup?.id, + name: selectedGroup?.name, + data: activeMembers, + }); + } + }) + .catch((error) => { + setGroupList({ loading: false, groups: [], members: [] }); + console.log(error); + }); + }, [updateList]); return ( -
-

Jobs Groups

-
-
- {groupList.loading ? -
- -
- : - <> - - - - } -
+
+

+ Jobs Groups +

+
+
+ {groupList.loading ? ( +
+ +
+ ) : ( + <> + + + + )} +
- ) + ); } diff --git a/src/components/JobGroups/MemberList.jsx b/src/components/JobGroups/MemberList.jsx index faec8c7..3293b69 100644 --- a/src/components/JobGroups/MemberList.jsx +++ b/src/components/JobGroups/MemberList.jsx @@ -6,8 +6,8 @@ import GroupMemberTable from "./GroupMemberTable"; import EmailValidator from "../../lib/EmailValidator"; -import usersService from "../../services/UsersService"; import { apiConst } from "../../lib/apiConst"; +import usersService from "../../services/UsersService"; export default function MemberList({ groupList, diff --git a/src/components/MyActiveJobs/MyActiveJobTable.jsx b/src/components/MyActiveJobs/MyActiveJobTable.jsx index 0807476..55b4833 100644 --- a/src/components/MyActiveJobs/MyActiveJobTable.jsx +++ b/src/components/MyActiveJobs/MyActiveJobTable.jsx @@ -1,12 +1,10 @@ import React, { useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; -import localImgLoad from "../../lib/localImgLoad"; import { PriceFormatter } from "../Helpers/PriceFormatter"; import { handlePagingFunc } from "../Pagination/HandlePagination"; import PaginatedList from "../Pagination/PaginatedList"; export default function MyActiveJobTable({ MyJobList, className }) { - const navigate = useNavigate(); let { pathname } = useLocation(); @@ -45,7 +43,11 @@ export default function MyActiveJobTable({ MyJobList, className }) { value?.currency_code, value?.currency ); - let image = `${MyJobList.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}` + let image = `${ + MyJobList.session_image_server + }${localStorage.getItem("session_token")}/job/${ + value.job_uid + }`; return ( {value.owner_status == "OWNER" - ? "Manage" + ? "Review" : "Send Updates"}
diff --git a/src/components/MyPendingJobs/MyPendingJobTable.jsx b/src/components/MyPendingJobs/MyPendingJobTable.jsx index 0d69e14..035ca40 100644 --- a/src/components/MyPendingJobs/MyPendingJobTable.jsx +++ b/src/components/MyPendingJobs/MyPendingJobTable.jsx @@ -6,9 +6,7 @@ import PendingJobsPopout from "../jobPopout/PendingJobsPopout"; import { PriceFormatter } from "../Helpers/PriceFormatter"; import localImgLoad from "../../lib/localImgLoad"; - export default function MyPendingJobTable({ MyJobList, className }) { - let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW const [currentPage, setCurrentPage] = useState(0); @@ -19,7 +17,7 @@ export default function MyPendingJobTable({ MyJobList, className }) { indexOfFirstItem, indexOfLastItem ); - + const handlePagination = (e) => { handlePagingFunc(e, setCurrentPage); }; @@ -46,7 +44,11 @@ export default function MyPendingJobTable({ MyJobList, className }) { value?.currency_code, value?.currency ); - let image = `${MyJobList.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}` + let image = `${ + MyJobList.session_image_server + }${localStorage.getItem("session_token")}/job/${ + value.job_uid + }`; return ( - {value.owner_status == 'OWNER' ? 'Manage' : 'Send Updates'} + {value.owner_status == "OWNER" + ? "Manage" + : "View"} diff --git a/src/components/jobPopout/JobListPopout.jsx b/src/components/jobPopout/JobListPopout.jsx index 8df3e9b..3e991a9 100644 --- a/src/components/jobPopout/JobListPopout.jsx +++ b/src/components/jobPopout/JobListPopout.jsx @@ -1,13 +1,13 @@ import { Field, Form, Formik } from "formik"; import React, { useCallback, useEffect, useMemo, useState } from "react"; +import { useDispatch } from "react-redux"; import * as Yup from "yup"; import usersService from "../../services/UsersService"; +import { tableReload } from "../../store/TableReloads"; import InputCom from "../Helpers/Inputs/InputCom/index"; import ModalCom from "../Helpers/ModalCom"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import Detail from "./popoutcomponent/Detail"; -import { tableReload } from "../../store/TableReloads"; -import { useDispatch } from "react-redux"; const validationSchema = Yup.object().shape({ family: Yup.string().required("This is required "), @@ -23,13 +23,15 @@ const validationSchema = Yup.object().shape({ }); function JobListPopout({ details, onClose, situation }) { + const [selectedTab, setSelectedTab] = useState("public"); + const tabs = ["public", "individual", "group"]; - const [selectedTab, setSelectedTab] = useState('public') - const tabs = ['public', 'individual', 'group'] + const dispatch = useDispatch(); -const dispatch = useDispatch() - -const [requestStatus, setRequestStatus] = useState({message:'', status:false}) + const [requestStatus, setRequestStatus] = useState({ + message: "", + status: false, + }); const [familyList, setFamilyList] = useState([]); let [loader, setLoader] = useState({ @@ -147,7 +149,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false}) // for group input reqData = { ...jobReq, - email: '', + email: "", group_id: values?.group, assign_mode: 110044, duration: details?.timeline_days, @@ -161,50 +163,61 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false}) try { const res = await apiCall.assignJobTask(reqData); let { status, data } = await res; - if(status != 200 || data.internal_return < 0){ - setRequestStatus({message:'Unable to complete', status:false}) - return setTimeout(()=>{ + if (status != 200 || data.internal_return < 0) { + setRequestStatus({ message: "Unable to complete", status: false }); + return setTimeout(() => { setLoader({ jobFields: false }); - setRequestStatus({message:'', status:false}) - },3000) + setRequestStatus({ message: "", status: false }); + }, 3000); } dispatch(tableReload({ type: "JOBTABLE" })); - setRequestStatus({message:'Successful', status:true}) - setTimeout(()=>{ + setRequestStatus({ message: "Successful", status: true }); + setTimeout(() => { setLoader({ jobFields: false }); onClose(); throw new Response(data); - },3000) + }, 3000); } catch (error) { - setRequestStatus({message:'Unable to complete', status:false}) - setTimeout(()=>{ - setRequestStatus({message:'', status:false}) + setRequestStatus({ message: "Unable to complete", status: false }); + setTimeout(() => { + setRequestStatus({ message: "", status: false }); setLoader({ jobFields: false }); throw new Error(error); - },3000) + }, 3000); } }; - const [groupList, setGroupList] = useState({loading: true, groups: [], members: []}) + const [groupList, setGroupList] = useState({ + loading: true, + groups: [], + members: [], + }); // FUNCTION TO POPULATE USER GROUP LIST - useEffect(()=>{ + useEffect(() => { // setGroupList({loading: true, groups: [], members: []}) - apiCall.jobGroupList({}).then(res => { - const {status, data} = res - if(status != 200 || data?.internal_return < 0){ - setGroupList({loading: false, groups: [], members: []}) - return + apiCall + .jobGroupList({}) + .then((res) => { + const { status, data } = res; + if (status != 200 || data?.internal_return < 0) { + setGroupList({ loading: false, groups: [], members: [] }); + return; } - if(data.result_list.length < 0){ - setGroupList({loading: false, groups: [], members: []}) - return + if (data.result_list.length < 0) { + setGroupList({ loading: false, groups: [], members: [] }); + return; } - setGroupList({loading: false, groups: data.result_list, members: data.result_list_member}) - }).catch(error => { - setGroupList({loading: false, groups: [], members: []}) - }) -},[]) + setGroupList({ + loading: false, + groups: data.result_list, + members: data.result_list_member, + }); + }) + .catch((error) => { + setGroupList({ loading: false, groups: [], members: [] }); + }); + }, []); // console.log("Job List P >> ", details) return ( @@ -241,7 +254,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
-
+
{/*

{details.title}

*/} {/* INPUT SECTION */} @@ -264,7 +277,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false}) + />
@@ -283,166 +296,185 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
{/* ACTION SECTION */} -
-

Send this Task to:

+
+

+ Send this Task to: +

- {tabs.map(item => ( - ))}
- {selectedTab == 'family' && - - {(props) => { - return ( -
- {/* Assign to Family */} - -

- {" "} - {props?.values?.family === "" && ( - {errMsg?.jobFields?.family} - )} -

{" "} - - ); - }} -
- } - - {selectedTab == 'public' && - - {(props) => { - return ( -
- {/* Offer this job to public input */} - -

- {" "} - {props?.values.public === "" && ( - {errMsg?.jobFields?.public} - )} -

{" "} - - ); - }} -
- } + {selectedTab == "family" && ( + + {(props) => { + return ( +
+ {/* Assign to Family */} + +

+ {" "} + {props?.values?.family === "" && ( + {errMsg?.jobFields?.family} + )} +

{" "} + + ); + }} +
+ )} + + {selectedTab == "public" && ( + + {(props) => { + return ( +
+ {/* Offer this job to public input */} + +

+ {" "} + {props?.values.public === "" && ( + {errMsg?.jobFields?.public} + )} +

{" "} + + ); + }} +
+ )} + + {selectedTab == "individual" && ( + + {(props) => { + return ( +
+ {/* Offer this job to individual input */} + +

+ {" "} + {props?.values.individual === "" && ( + {errMsg?.jobFields?.individual} + )} +

{" "} + + ); + }} +
+ )} - {selectedTab == 'individual' && - - {(props) => { - return ( -
- {/* Offer this job to individual input */} - -

- {" "} - {props?.values.individual === "" && ( - {errMsg?.jobFields?.individual} - )} -

{" "} - - ); - }} -
- } - {/* { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 && } */} - {selectedTab == 'group' && - + {(props) => { + return ( +
+ {/* Offer this job to your group input */} + +

+ {" "} + {props?.values.group === "" && ( + {errMsg?.jobFields?.group} + )} +

+ + ); + }} +
+ )} +

- {(props) => { - return ( -

- {/* Offer this job to your group input */} - -

- {" "} - {props?.values.group === "" && ( - {errMsg?.jobFields?.group} - )} -

- - ); - }} - - } + {requestStatus.message && requestStatus.message} +

- + {/* {requestStatus.message &&

{requestStatus.message}

- } + } */}
{/* END OF ACTION SECTION */}
@@ -480,7 +512,7 @@ const JobFieldInput = ({ > {label && (