WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Job list popout added

Browse Source
This commit is contained in:
victorAnumudu
2023-05-10 19:29:15 +01:00
parent f3c4efa409
commit 8369dbfeff
6 changed files with 197 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyJobs/MyJobTable.jsx
+12 -1
View File
@@ -4,6 +4,7 @@ import dataImage2 from "../../assets/images/data-table-user-2.png";
import dataImage3 from "../../assets/images/data-table-user-3.png";
import dataImage4 from "../../assets/images/data-table-user-4.png";
import SelectBox from "../Helpers/SelectBox";
import JobListPopout from "../jobPopout/JobListPopout";
import PaginatedList from "../Pagination/PaginatedList";
import { handlePagingFunc } from "../Pagination/HandlePagination";
@@ -12,6 +13,8 @@ export default function MyJobTable({MyJobList, className }) {
const filterCategories = ["All Categories", "Explore", "Featured"];
const [selectedCategory, setCategory] = useState(filterCategories[0]);
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);
const indexOfFirstItem = Number(currentPage);
const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
@@ -44,7 +47,7 @@ export default function MyJobTable({MyJobList, className }) {
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<tbody>
<tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29] default-border-b dark:border-[#5356fb29] ottom ">
<tr className="text-base text-thin-light-gray whitespace-nowrap border-b default-border-b dark:border-[#5356fb29] ottom ">
<td className="py-4">All Product</td>
<td className="py-4 text-right">.</td>
</tr>
@@ -85,6 +88,8 @@ export default function MyJobTable({MyJobList, className }) {
<td className="text-right py-4 px-2">
<button
type="button"
onClick={()=>{setJobPopout({show:true, data:value})}}
onClick={()=>{setJobPopout({show:true, data:value})}}
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
View
@@ -112,6 +117,12 @@ export default function MyJobTable({MyJobList, className }) {
{/* 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 */}
</div>
);
}