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

added pagination for member list table

Browse Source
This commit was merged in pull request #534.
This commit is contained in:
victorAnumudu
2024-01-05 09:57:45 +01:00
parent f6e55718bb
commit 5e4887c01c
5 changed files with 21 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JobGroups/AddGroup.jsx
+4 -4
View File
@@ -111,13 +111,13 @@ export default function AddGroup({action, situation , setUpdateList}) {
/> />
</div> </div>
</div> </div>
<div className="flex space-x-2.5"> <div className="w-full flex justify-between items-center gap-4">
<button <button
onClick={action} onClick={action}
type="button" type="button"
className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full" className="text-base text-light-red tracking-wide "
> >
<span className="text-gradient">Cancel</span> <span className="border-b dark:border-[#5356fb29] border-light-red">Cancel</span>
</button> </button>
{requestStatus.loading ? ( {requestStatus.loading ? (
<LoadingSpinner size="8" color="sky-blue" /> <LoadingSpinner size="8" color="sky-blue" />
@@ -125,7 +125,7 @@ export default function AddGroup({action, situation , setUpdateList}) {
<button <button
onClick={() => addGroup()} onClick={() => addGroup()}
type="button" type="button"
className="py-1 px-4 flex justify-center items-center bg-sky-blue hover:bg-sky-600 text-base rounded-full text-white font-bold" className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
> >
Add Group Add Group
</button> </button>
src/components/JobGroups/GroupList.jsx
+1 -1
View File
@@ -44,7 +44,7 @@ export default function GroupList({groupList, selectedGroup, changeSelectedGroup
<input type='radio' name='grouplist' value={item.group_id} checked={selectedGroup?.id == item?.group_id} onChange={changeSelectedGroup} className='w-[20px] h-[20px] outline-none' /> <input type='radio' name='grouplist' value={item.group_id} checked={selectedGroup?.id == item?.group_id} onChange={changeSelectedGroup} className='w-[20px] h-[20px] outline-none' />
<p className='text-sm lg:text-base text-slate-900 dark:text-slate-100'>{item.group_name}</p> <p className='text-sm lg:text-base text-slate-900 dark:text-slate-100'>{item.group_name}</p>
</div> </div>
<button onClick={()=>{handleDeleteGroup(item)}} className='rounded-lg bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-3'>X</button> <button onClick={()=>{handleDeleteGroup(item)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5 flex justify-center items-center'>X</button>
</div> </div>
))} ))}
</div> </div>
src/components/JobGroups/GroupMemberTable.jsx
+11 -12
View File
@@ -12,7 +12,6 @@ export default function GroupMemberTable({selectedList}) {
const currentSelectedList = selectedList?.slice(indexOfFirstItem, indexOfLastItem); const currentSelectedList = selectedList?.slice(indexOfFirstItem, indexOfLastItem);
const handlePagination = (e) => { const handlePagination = (e) => {
handlePagingFunc(e, setCurrentPage); handlePagingFunc(e, setCurrentPage);
}; };
@@ -45,24 +44,24 @@ export default function GroupMemberTable({selectedList}) {
<td className='p-[1px] bg-slate-400 dark:bg-white rounded-full' colSpan="4"></td> <td className='p-[1px] bg-slate-400 dark:bg-white rounded-full' colSpan="4"></td>
</tr> </tr>
{selectedList && selectedList?.length > 0 ? ( {selectedList && selectedList?.length > 0 ? (
currentSelectedList?.length ? ( // currentSelectedList?.length ? (
currentSelectedList.map((value, index) => ( currentSelectedList.map((value, index) => (
<tr key={value.uid} className="font-medium text-sm text-dark-gray dark:text-white whitespace-nowrap"> <tr key={value.uid} className="font-medium text-sm text-dark-gray dark:text-white whitespace-nowrap">
<td className="p-1">{value?.firstname}</td> <td className="p-1">{value?.firstname}</td>
<td className="p-1">{value?.lastname}</td> <td className="p-1">{value?.lastname}</td>
<td className="p-1">{value?.email}</td> <td className="p-1">{value?.email}</td>
<td className="p-1 text-right"> <td className="p-1 text-right">
<button onClick={()=>{handleDeleteMember(value)}} className='rounded-lg bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-3'>X</button> <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>
</tr> </tr>
)) ))
) : ( // ) : (
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap"> // <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
<td className="p-2"> // <td className="p-2">
No Members Found // No Members Found
</td> // </td>
</tr> // </tr>
) // )
) : ( ) : (
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap"> <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
<td className="p-2">No Members Found</td> <td className="p-2">No Members Found</td>
@@ -78,11 +77,11 @@ export default function GroupMemberTable({selectedList}) {
prev={currentPage == 0 ? true : false} prev={currentPage == 0 ? true : false}
next={ next={
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >= currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
currentSelectedList?.length selectedList?.length
? true ? true
: false : false
} }
data={currentSelectedList} data={selectedList}
start={indexOfFirstItem} start={indexOfFirstItem}
stop={indexOfLastItem} stop={indexOfLastItem}
/> />
src/components/JobGroups/MemberList.jsx
+1 -1
View File
@@ -149,7 +149,7 @@ export default function MemberList({groupList, selectedGroup, setUpdateList}) {
<div className='p-5 w-full min-h-[600px] overflow-y-auto'> <div className='p-5 w-full min-h-[600px] overflow-y-auto'>
{groupList && groupList.length < 1 ? {groupList && groupList.length < 1 ?
<> <>
<h1 className='my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100'>No Group selected</h1> <h1 className='my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100'>You Currently Do not have any Group, Please Add Group</h1>
</> </>
: :
<> <>
src/components/Partials/RightSideBar.jsx
+4 -4
View File
@@ -196,8 +196,10 @@ export default function RightSideBar({myJobList}) {
</div> </div>
{/* action */} {/* action */}
</div> </div>
{userDetails && userDetails?.account_type !== "FAMILY" && ( {/* {userDetails && userDetails?.account_type !== "FAMILY" && (
<> <>
</>
)} */}
<div className="px-8 item flex space-x-3 items-center mb-4"> <div className="px-8 item flex space-x-3 items-center mb-4">
{/* image */} {/* image */}
<div className="w-8 h-8 rounded-full"> <div className="w-8 h-8 rounded-full">
@@ -311,8 +313,6 @@ export default function RightSideBar({myJobList}) {
</p> </p>
</div> </div>
</div> </div>
</>
)}
</div> </div>
</div> </div>
} }