victorAnumudu
294 lines
9.9 KiB
React
294 lines
9.9 KiB
React
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
import dataImage2 from "../../assets/images/data-table-user-2.png";
|
|
import SelectBox from "../Helpers/SelectBox";
|
|
import DeleteJobPopout from "../jobPopout/DeleteJobPopout";
|
|
import JobListPopout from "../jobPopout/JobListPopout";
|
|
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
|
import { useSelector } from "react-redux";
|
|
import usersService from "../../services/UsersService";
|
|
import { handlePagingFunc } from "../Pagination/HandlePagination";
|
|
import PaginatedList from "../Pagination/PaginatedList";
|
|
import EditJobPopOut from "../jobPopout/EditJobPopout";
|
|
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
|
|
|
import EditIcon from '../../assets/images/icon-edit.svg'
|
|
import DeleteIcon from '../../assets/images/icon-delete.svg'
|
|
import localImgLoad from "../../lib/localImgLoad";
|
|
|
|
export default function MyJobTable({ MyJobList, reloadJobList, className }) {
|
|
// Getting the categories
|
|
const currentJobCart = MyJobList?.data?.categories;
|
|
// DropDown Box
|
|
const filterCategories = { All: "All Categories", ...currentJobCart };
|
|
|
|
const [selectedCategory, setCategory] = useState(
|
|
Object.keys(filterCategories)[0]
|
|
);
|
|
|
|
let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
|
|
|
|
let [deleteJobPopout, setDeleteJobPopout] = useState({
|
|
show: false,
|
|
data: {},
|
|
}); // STATE TO HOLD THE VALUE OF THE ITEM DETAILS TO DELETE AND DETERMINE WHEN TO SHOW
|
|
const [editJob, setEditJob] = useState({ show: false, data: {} });
|
|
|
|
const [myCountry, setCountries] = useState("");
|
|
const {
|
|
userDetails: { country },
|
|
} = useSelector((state) => state?.userDetails);
|
|
|
|
const userApi = useMemo(() => new usersService(), []);
|
|
|
|
// Get Country Api
|
|
const getCountryList = useCallback(async () => {
|
|
const res = await userApi.getSignupCountryData();
|
|
|
|
try {
|
|
if (res.status === 200) {
|
|
const {
|
|
data: { signup_country },
|
|
} = await res;
|
|
let checkCountry = signup_country
|
|
?.filter((item) => item[0] == country)
|
|
?.map((item, idx) => item[1])
|
|
.join("");
|
|
setCountries(checkCountry);
|
|
}
|
|
} catch (error) {
|
|
throw new Error(error);
|
|
}
|
|
}, [userApi, country]);
|
|
|
|
useEffect(() => {
|
|
getCountryList();
|
|
}, [getCountryList]);
|
|
|
|
// Handle Pagination
|
|
const [currentPage, setCurrentPage] = useState(0);
|
|
const indexOfFirstItem = Number(currentPage);
|
|
const indexOfLastItem =
|
|
Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
|
|
|
|
// Handle Filter Job List
|
|
const filterJobList = () => {
|
|
if (selectedCategory === "All") return MyJobList?.data?.result_list;
|
|
else
|
|
return MyJobList?.data?.result_list?.filter((item) =>
|
|
item.category.includes(selectedCategory)
|
|
);
|
|
};
|
|
|
|
const currentJobList = filterJobList();
|
|
|
|
// Handling Filter Pagination
|
|
const filteredCurrentJobList = currentJobList?.slice(
|
|
indexOfFirstItem,
|
|
indexOfLastItem
|
|
);
|
|
|
|
const handlePagination = (e) => {
|
|
handlePagingFunc(e, setCurrentPage);
|
|
};
|
|
|
|
// Handles the category selection
|
|
const handleSetCategory = (value) => {
|
|
setCurrentPage(0);
|
|
for (let i in filterCategories) {
|
|
if (filterCategories[i] == value) {
|
|
setCategory(i);
|
|
}
|
|
}
|
|
};
|
|
|
|
const JobListItem = ({ value, index }) => {
|
|
let thePrice = PriceFormatter(
|
|
value?.price * 0.01,
|
|
value?.currency_code,
|
|
value?.currency
|
|
);
|
|
return (
|
|
<tr
|
|
key={index}
|
|
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
|
|
>
|
|
<td className="py-9">
|
|
<div className="sm:flex sm:space-x-2 sm:justify-between sm:items-center job-items">
|
|
<div className="flex space-x-2 items-center job-items w-full">
|
|
<div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
|
|
<img src={localImgLoad(`images/taskbanners/${value.banner ? value.banner : 'default.jpg'}`)} alt="data" className="w-full h-full rounded-full" />
|
|
</div>
|
|
<div className="flex flex-col flex-[0.9]">
|
|
<h1 className="font-bold text-xl text-dark-gray dark:text-white">
|
|
{value.title}
|
|
</h1>
|
|
<div>{value.description}</div>
|
|
<span className="text-sm text-thin-light-gray flex items-start gap-1">
|
|
Price: <span className="text-purple">{thePrice}</span>
|
|
</span>
|
|
<span className="text-sm text-thin-light-gray">
|
|
Duration:{" "}
|
|
<span className="text-purple">
|
|
{" "}
|
|
{value.timeline_days} day(s)
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="h-[33px] w-[150px] flex flex-nowrap items-center self-end">
|
|
<button
|
|
type="button"
|
|
className="p-1 border-2 border-red-400 rounded-md"
|
|
onClick={() => {
|
|
setDeleteJobPopout({
|
|
show: true,
|
|
data: { thePrice, ...value },
|
|
});
|
|
}}
|
|
>
|
|
<img className="w-[21px] h-[21px]" src={DeleteIcon} alt='delete-icon' />
|
|
</button>
|
|
<div className="mx-[4px] h-full w-[1px] bg-black dark:bg-dark-gray"></div>
|
|
<button
|
|
type="button"
|
|
className="p-1 border-2 border-sky-blue rounded-md flex items-center"
|
|
onClick={() => {
|
|
setEditJob({
|
|
show: true,
|
|
data: { thePrice, ...value },
|
|
});
|
|
}}
|
|
>
|
|
<img className="w-[21px] h-[21px]" src={EditIcon} alt='edit-icon' />
|
|
<span className="text-sm text-sky-blue">Edit</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
<td className="text-right py-9 px-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setJobPopout({ show: true, data: { thePrice, ...value } });
|
|
}}
|
|
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
|
>
|
|
Assign
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
|
|
className || ""
|
|
}`}
|
|
>
|
|
<div className="header w-full flex justify-between items-center mb-5">
|
|
<div className="flex space-x-2 items-center">
|
|
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
|
|
{filterCategories[selectedCategory]} Jobs
|
|
</h1>
|
|
</div>
|
|
<SelectBox
|
|
action={handleSetCategory}
|
|
datas={Object.values(filterCategories)}
|
|
className="Update-table-dropdown"
|
|
contentBodyClasses="w-auto min-w-max"
|
|
/>
|
|
</div>
|
|
{MyJobList.loading ? (
|
|
<LoadingSpinner size="16" color="sky-blue" />
|
|
) : (
|
|
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[520px]">
|
|
<table className="table-auto min-w-full text-sm text-left text-gray-500 dark:text-gray-400">
|
|
<tbody>
|
|
<>
|
|
{MyJobList &&
|
|
MyJobList?.data?.result_list &&
|
|
MyJobList.data?.result_list.length > 0 ? (
|
|
filteredCurrentJobList?.length ? (
|
|
filteredCurrentJobList.map((value, index) => (
|
|
<JobListItem index={index} key={index} value={value} />
|
|
))
|
|
) : (
|
|
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
|
<td className="p-2">
|
|
No Jobs Available In This Category!
|
|
</td>
|
|
</tr>
|
|
)
|
|
) : (
|
|
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
|
<td className="p-2">No Jobs Avaliable!</td>
|
|
</tr>
|
|
)}
|
|
</>
|
|
</tbody>
|
|
</table>
|
|
|
|
{/* PAGINATION BUTTON */}
|
|
<PaginatedList
|
|
onClick={handlePagination}
|
|
prev={currentPage == 0 ? true : false}
|
|
next={
|
|
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
|
|
currentJobList?.length
|
|
? true
|
|
: false
|
|
}
|
|
data={currentJobList}
|
|
start={indexOfFirstItem}
|
|
stop={indexOfLastItem}
|
|
/>
|
|
{/* END OF PAGINATION BUTTON */}
|
|
</div>
|
|
)}
|
|
|
|
{/* Job List Popout */}
|
|
{jobPopout.show && (
|
|
<JobListPopout
|
|
details={jobPopout.data}
|
|
onClose={() => {
|
|
setJobPopout({ show: false, data: {} });
|
|
}}
|
|
situation={jobPopout.show}
|
|
/>
|
|
)}
|
|
{/* End of Job List Popout */}
|
|
|
|
{/* Delete Job Popout */}
|
|
{deleteJobPopout.show && (
|
|
<DeleteJobPopout
|
|
details={deleteJobPopout.data}
|
|
onClose={() => {
|
|
setDeleteJobPopout({ show: false, data: {} });
|
|
}}
|
|
reloadJobList={reloadJobList}
|
|
situation={deleteJobPopout.show}
|
|
/>
|
|
)}
|
|
{/* END of Delete Job Popout */}
|
|
|
|
{editJob.show && (
|
|
<EditJobPopOut
|
|
details={editJob.data}
|
|
onClose={() => {
|
|
setEditJob({
|
|
show: false,
|
|
data: {},
|
|
});
|
|
}}
|
|
situation={editJob.show}
|
|
country={myCountry}
|
|
categories={currentJobCart}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|