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

Jobs Manager Side task done

Browse Source
This commit was merged in pull request #551.
This commit is contained in:
Chukwumdiebube Ojinta
2024-01-24 01:11:49 +01:00
parent ec88f304ab
commit 0e4b1af1ce
9 changed files with 577 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JobGroups/GroupMemberTable.jsx
+109 -89
View File
@@ -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 (
<div className={`w-full p-8 bg-white dark:bg-dark-gray overflow-hidden rounded-2xl section-shadow`}>
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[400px]">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<tbody>
<>
{selectedList && selectedList?.length > 0 ? (
currentSelectedList.map((value, index) => (
<tr key={value.uid} className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
{/* <td className="p-1">{value?.firstname}</td>
const [deletePopout, setDeletePopout] = useState({
status: false,
data: {},
});
const handleDeleteMember = (item) => {
setDeletePopout({
status: true,
data: { ...item },
});
};
return (
<div
className={`w-full p-8 bg-white dark:bg-dark-gray overflow-hidden rounded-2xl section-shadow`}
>
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[400px]">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<tbody>
<>
{selectedList && selectedList?.length > 0 ? (
currentSelectedList.map((value, index) => (
<tr
key={value.uid}
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
>
{/* <td className="p-1">{value?.firstname}</td>
<td className="p-1">{value?.lastname}</td>
<td className="p-1">{value?.email}</td>
<td className="p-1 text-right">
<button onClick={()=>{handleDeleteMember(value)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5'>X</button>
</td> */}
<td className='py-2'>
<div className="flex flex-col">
<h1 className="font-bold text-xl text-dark-gray dark:text-white">
{value.firstname && value.firstname} {value.lastname && value.lastname}
</h1>
<span className="text-sm text-thin-light-gray">
{value.email && value.email}
</span>
</div>
</td>
<td className='py-2 text-right'>
<button onClick={()=>{handleDeleteMember(value)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5'>X</button>
</td>
</tr>
))
) : (
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
<td className="p-2">No Members Found</td>
</tr>
)}
</>
</tbody>
</table>
{/* PAGINATION BUTTON */}
<PaginatedList
onClick={handlePagination}
prev={currentPage == 0 ? true : false}
next={
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
selectedList?.length
? true
: false
}
data={selectedList}
start={indexOfFirstItem}
stop={indexOfLastItem}
/>
{/* END OF PAGINATION BUTTON */}
</div>
{/* DELETE MEMBER POPOUT */}
{deletePopout.status &&
<DeleteMember
action={()=>setDeletePopout({status:false, data:{}})}
situation={deletePopout.status}
details={deletePopout.data}
/>
}
{/* END OF DELETE MEMBER POPOUT */}
</div>
);
};
<td className="py-2">
<div className="flex flex-col">
<h1 className="font-bold text-xl text-dark-gray dark:text-white">
{value.firstname && value.firstname}{" "}
{value.lastname && value.lastname}
</h1>
<span className="text-sm text-thin-light-gray">
{value.email && value.email}
</span>
</div>
</td>
<td className="py-2 text-right">
<button
onClick={() => {
handleDeleteMember(value);
}}
className="flex relative items-center justify-center border-0 w-8 h-8"
>
<img
src={localImgLoad("images/icons/remove_grp.svg")}
alt="remove-icon"
/>
</button>
</td>
</tr>
))
) : (
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
<td className="p-2">No Members Found</td>
</tr>
)}
</>
</tbody>
</table>
{/* PAGINATION BUTTON */}
<PaginatedList
onClick={handlePagination}
prev={currentPage == 0 ? true : false}
next={
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
selectedList?.length
? true
: false
}
data={selectedList}
start={indexOfFirstItem}
stop={indexOfLastItem}
/>
{/* END OF PAGINATION BUTTON */}
</div>
{/* DELETE MEMBER POPOUT */}
{deletePopout.status && (
<DeleteMember
action={() => setDeletePopout({ status: false, data: {} })}
situation={deletePopout.status}
details={deletePopout.data}
/>
)}
{/* END OF DELETE MEMBER POPOUT */}
</div>
);
}