admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

added sorting button to table header

Browse Source
This commit is contained in:
Pramod Mahajan 2025-05-27 22:23:32 +05:30
parent 8f9bfcae6b
commit b4157354f7
1 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/Directory/ManageBucket.jsx
View File

@ -8,15 +8,31 @@ import Directory from "../../pages/Directory/Directory";
import { DirectoryRepository } from "../../repositories/DirectoryRepository"; import { DirectoryRepository } from "../../repositories/DirectoryRepository";
import { cacheData, getCachedData } from "../../slices/apiDataManager"; import { cacheData, getCachedData } from "../../slices/apiDataManager";
import { useBuckets } from "../../hooks/useDirectory"; import { useBuckets } from "../../hooks/useDirectory";
import EmployeeList from "./EmployeeList";
import {useAllEmployees, useEmployees} from "../../hooks/useEmployees";
import {useSortableData} from "../../hooks/useSortableData";
const ManageBucket = () => const ManageBucket = () =>
{ {
const [bucketList, setBucketList] = useState([]); const [ bucketList, setBucketList ] = useState( [] );
const {employeesList} = useAllEmployees(false)
const { buckets } = useBuckets(); const { buckets } = useBuckets();
const [action_bucket, setAction_bucket] = useState(false); const [action_bucket, setAction_bucket] = useState(false);
const [isSubmitting, setSubmitting] = useState(false); const [isSubmitting, setSubmitting] = useState(false);
const [selected_bucket, select_bucket] = useState(null); const [ selected_bucket, select_bucket ] = useState( null );
const { items: sortedBuckteList, requestSort, sortConfig} = useSortableData(bucketList,{
key: (e) => `${e.name}`,
direction: 'asc',
} )
const getSortIcon = () => {
if (!sortConfig) return null;
return sortConfig.direction === 'asc' ? (
<i className="bx bx-caret-up text-secondary"></i>
) : (
<i className="bx bx-caret-down text-secondary"></i>
);
};
const { const {
register, register,
@ -113,11 +129,11 @@ const ManageBucket = () =>
{!action_bucket ? ( {!action_bucket ? (
<div className="table-responsive text-nowrap pt-1 px-2 px-sm-0"> <div className="table-responsive text-nowrap pt-1 px-2 px-sm-0">
<table className="table px-2"> <table className="table px-2">
<thead className="p-0"> <thead className="p-0 table-light">
<tr className="p-0"> <tr className="p-0">
<th colSpan={2}> <th colSpan={2} className="cursor-pointer" onClick={() => requestSort((e) => `${e.name} `)}>
<div className="d-flex justify-content-start align-items-center gap-1 mx-2"> <div className="d-flex justify-content-start align-items-center gap-1 mx-2">
<span>Name</span> <span>Name {getSortIcon()}</span>
</div> </div>
</th> </th>
<th className="text-start d-none d-sm-table-cell"> <th className="text-start d-none d-sm-table-cell">
@ -134,7 +150,7 @@ const ManageBucket = () =>
</thead> </thead>
<tbody className="table-border-bottom-0 overflow-auto"> <tbody className="table-border-bottom-0 overflow-auto">
{bucketList.map((bucket) => ( {sortedBuckteList.map((bucket) => (
<tr key={bucket.id}> <tr key={bucket.id}>
<td colSpan={2} className="text-start text-wrap" > <td colSpan={2} className="text-start text-wrap" >
@ -163,6 +179,7 @@ const ManageBucket = () =>
</table> </table>
</div> </div>
) : ( ) : (
<>
<form onSubmit={handleSubmit(onSubmit)} className="px-2 px-sm-0"> <form onSubmit={handleSubmit(onSubmit)} className="px-2 px-sm-0">
<div className=""> <div className="">
<label className="form-label">Bucket Name</label> <label className="form-label">Bucket Name</label>
@ -204,6 +221,9 @@ const ManageBucket = () =>
</button> </button>
</div> </div>
</form> </form>
<EmployeeList employees={ employeesList} />
</>
)} )}
</div> </div>
</div> </div>