Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Ebube
|
7074347289 | ||
|
Ebube
|
6a79d6369f | ||
|
Ebube
|
984cdeaa24 | ||
 ameye
|
7946ab12a1 |
File diff suppressed because it is too large
Load Diff
@@ -1,17 +1,12 @@
|
||||
import React, { useState } from "react";
|
||||
import dataImage2 from "../../assets/images/data-table-user-2.png";
|
||||
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
|
||||
import { handlePagingFunc } from "../Pagination/HandlePagination";
|
||||
import PaginatedList from "../Pagination/PaginatedList";
|
||||
|
||||
export default function MyActiveJobTable({ MyJobList, className }) {
|
||||
const navigate = useNavigate();
|
||||
let {pathname} = useLocation()
|
||||
|
||||
const filterCategories = ["All Categories", "Explore", "Featured"];
|
||||
const [selectedCategory, setCategory] = useState(filterCategories[0]);
|
||||
let { pathname } = useLocation();
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const indexOfFirstItem = Number(currentPage);
|
||||
@@ -44,82 +39,88 @@ export default function MyActiveJobTable({ MyJobList, className }) {
|
||||
{
|
||||
<>
|
||||
{MyJobList &&
|
||||
MyJobList?.result_list &&
|
||||
MyJobList.result_list.length > 0 ?
|
||||
currentActiveJobList.map((value, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
|
||||
>
|
||||
<td className=" py-4">
|
||||
<div className="flex space-x-2 items-center w-full">
|
||||
<div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px]">
|
||||
<img
|
||||
src={dataImage2}
|
||||
alt="data"
|
||||
className="w-full h-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">
|
||||
Price:{" "}
|
||||
<span className="text-purple">
|
||||
{value.price * 0.01}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Duration:{" "}
|
||||
<span className="text-purple">
|
||||
{" "}
|
||||
{value.timeline_days} day(s)
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Expire:{" "}
|
||||
<span className="text-purple">
|
||||
{" "}
|
||||
{value.expire}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Send to:{" "}
|
||||
<span className="text-purple">
|
||||
{" "}
|
||||
{value.job_to}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
MyJobList?.result_list &&
|
||||
MyJobList.result_list.length > 0 ? (
|
||||
currentActiveJobList.map((value, index) => {
|
||||
let deliveryDate = value?.delivery_date?.split(" ")[0];
|
||||
|
||||
<td className="text-right py-4 px-2">
|
||||
<div className="flex justify-center items-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
navigate("/manage-active-job", {
|
||||
state: {...value, pathname},
|
||||
});
|
||||
}}
|
||||
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
:
|
||||
return (
|
||||
<tr
|
||||
key={index}
|
||||
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
|
||||
>
|
||||
<td className=" py-4">
|
||||
<div className="flex space-x-2 items-center w-full">
|
||||
<div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px]">
|
||||
<img
|
||||
src={dataImage2}
|
||||
alt="data"
|
||||
className="w-full h-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">
|
||||
Price:{" "}
|
||||
<span className="text-purple">
|
||||
{value.price * 0.01}
|
||||
</span>
|
||||
</span>
|
||||
<div className="flex gap-4 items-center">
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Duration:{" "}
|
||||
<span className="text-purple">
|
||||
{" "}
|
||||
{value.timeline_days} day(s)
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Due:{" "}
|
||||
<span className="text-purple">
|
||||
{" "}
|
||||
{deliveryDate}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Send to:{" "}
|
||||
<span className="text-purple">
|
||||
{" "}
|
||||
{value.job_to === null
|
||||
? "public"
|
||||
: value.job_to}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td className="text-right py-4 px-2">
|
||||
<div className="flex justify-center items-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
navigate("/manage-active-job", {
|
||||
state: { ...value, pathname },
|
||||
});
|
||||
}}
|
||||
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
<td className="p-2">
|
||||
No Active Task!
|
||||
</td>
|
||||
<td className="p-2">No Active Task!</td>
|
||||
</tr>
|
||||
}
|
||||
)}
|
||||
</>
|
||||
}
|
||||
</tbody>
|
||||
|
||||
@@ -12,9 +12,7 @@ export default function MyActiveJobs(props) {
|
||||
console.log("AMEYE LOC1", props.MyJobList);
|
||||
return (
|
||||
<Layout>
|
||||
<CommonHead
|
||||
commonHeadData={props.commonHeadData}
|
||||
/>
|
||||
<CommonHead commonHeadData={props.commonHeadData} />
|
||||
<div className="notification-page w-full mb-10">
|
||||
<div className="notification-wrapper w-full">
|
||||
{/* heading */}
|
||||
|
||||
@@ -45,123 +45,126 @@ export default function MyJobTable({ className, ActiveJobList }) {
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
{/* Adding this dark overlay in order to see the texts properly */}
|
||||
{!ActiveJobList?.data.length && (
|
||||
<div class="absolute inset-0 bg-black opacity-30"></div>
|
||||
)}
|
||||
{ActiveJobList.loading ? (
|
||||
{ActiveJobList?.data.length > 0 && ActiveJobList.loading && (
|
||||
<div className="w-full h-[520px] flex items-center justify-center">
|
||||
<LoadingSpinner size="16" color="sky-blue" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative w-full sm:rounded-lg">
|
||||
<div className="h-auto w-full">
|
||||
{ActiveJobList?.data?.length > 0 ? (
|
||||
currentTask?.map((task, idx) => (
|
||||
<div
|
||||
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] w-full flex justify-between items-center hover:bg-gray-50"
|
||||
key={idx}
|
||||
>
|
||||
<div className="py-4 max-w-[80%]">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="w-full min-w-[60px] max-w-[60px] flex-[0.1] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage1}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col flex-[0.9]">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white">
|
||||
{task?.title}
|
||||
</h1>
|
||||
<span className="text-base text-gray-600">
|
||||
{task?.description}
|
||||
)}
|
||||
|
||||
<div className="relative w-full sm:rounded-lg">
|
||||
<div className="h-auto w-full">
|
||||
{ActiveJobList?.data?.length > 0 &&
|
||||
currentTask?.map((task, idx) => (
|
||||
<div
|
||||
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] w-full flex justify-between items-center hover:bg-gray-50"
|
||||
key={idx}
|
||||
>
|
||||
<div className="py-4 max-w-[80%]">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="w-full min-w-[60px] max-w-[60px] flex-[0.1] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage1}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col flex-[0.9]">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white">
|
||||
{task?.title}
|
||||
</h1>
|
||||
<span className="text-base text-gray-600">
|
||||
{task?.description}
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Price:
|
||||
<span className="text-purple ml-1">
|
||||
{Number(task?.price) * 0.01}
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Price:
|
||||
<span className="text-purple ml-1">
|
||||
{Number(task?.price) * 0.01}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Duration:
|
||||
<span className="text-purple ml-1">
|
||||
{Number(task?.timeline_days) === 1
|
||||
? `${task?.timeline_days} day`
|
||||
: `${task?.timeline_days} day(s)`}
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Duration:
|
||||
<span className="text-purple ml-1">
|
||||
{Number(task?.timeline_days) === 1
|
||||
? `${task?.timeline_days} day`
|
||||
: `${task?.timeline_days} day(s)`}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Due Date:
|
||||
<span className="text-purple ml-1">
|
||||
{task?.delivery_date}
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Due Date:
|
||||
<span className="text-purple ml-1">
|
||||
{task?.delivery_date}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Confirmation:
|
||||
<span className="text-purple ml-1">
|
||||
{task?.contract}
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Confirmation:
|
||||
<span className="text-purple ml-1">
|
||||
{task?.contract}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center items-center py-4 px-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
navigate("/manage-active-job", {
|
||||
state: { ...task, pathname },
|
||||
});
|
||||
}}
|
||||
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Manage
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : ActiveJobList.status ? (
|
||||
<div className="flex flex-col items-center justify-center gap-9 my-5">
|
||||
<div className="p-2 font-bold text-3xl text-white whitespace-nowrap">
|
||||
You currently have "0" task
|
||||
</div>
|
||||
<button
|
||||
className="w-[115px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
onClick={navigateMarket}
|
||||
>
|
||||
{btnLoader ? (
|
||||
<div className="signup btn-loader"></div>
|
||||
) : (
|
||||
"Find Task"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
<p className="p-2">Error Occurred! Unable to display Tasks!</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* PAGINATION BUTTON */}
|
||||
<PaginatedList
|
||||
onClick={handlePagination}
|
||||
prev={currentPage == 0 ? true : false}
|
||||
next={
|
||||
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
|
||||
ActiveJobList?.data?.length
|
||||
? true
|
||||
: false
|
||||
}
|
||||
data={ActiveJobList?.data}
|
||||
start={indexOfFirstItem}
|
||||
stop={indexOfLastItem}
|
||||
/>
|
||||
{/* END OF PAGINATION BUTTON */}
|
||||
<div className="flex justify-center items-center py-4 px-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
navigate("/manage-active-job", {
|
||||
state: { ...task, pathname },
|
||||
});
|
||||
}}
|
||||
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Manage
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{ActiveJobList?.data?.length <= 0 && (
|
||||
<div className="flex flex-col items-center justify-center gap-9 my-5">
|
||||
<div className="p-2 font-bold text-3xl text-white whitespace-nowrap">
|
||||
You currently have "0" task
|
||||
</div>
|
||||
<button
|
||||
className="w-[115px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
onClick={navigateMarket}
|
||||
>
|
||||
{btnLoader ? (
|
||||
<div className="signup btn-loader"></div>
|
||||
) : (
|
||||
"Find Task"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{ActiveJobList?.internal_return < 0 && (
|
||||
<div className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
<p className="p-2">Error Occurred! Unable to display Tasks!</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* PAGINATION BUTTON */}
|
||||
<PaginatedList
|
||||
onClick={handlePagination}
|
||||
prev={currentPage == 0 ? true : false}
|
||||
next={
|
||||
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
|
||||
ActiveJobList?.data?.length
|
||||
? true
|
||||
: false
|
||||
}
|
||||
data={ActiveJobList?.data}
|
||||
start={indexOfFirstItem}
|
||||
stop={indexOfLastItem}
|
||||
/>
|
||||
{/* END OF PAGINATION BUTTON */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user