admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 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

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

@ -8,15 +8,31 @@ import Directory from "../../pages/Directory/Directory";
import { DirectoryRepository } from "../../repositories/DirectoryRepository";
import { cacheData, getCachedData } from "../../slices/apiDataManager";
import { useBuckets } from "../../hooks/useDirectory";
import EmployeeList from "./EmployeeList";
import {useAllEmployees, useEmployees} from "../../hooks/useEmployees";
import {useSortableData} from "../../hooks/useSortableData";
const ManageBucket = () =>
{
const [bucketList, setBucketList] = useState([]);
const [ bucketList, setBucketList ] = useState( [] );
const {employeesList} = useAllEmployees(false)
const { buckets } = useBuckets();
const [action_bucket, setAction_bucket] = 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 {
register,
@ -112,12 +128,12 @@ const ManageBucket = () =>
<div>
{!action_bucket ? (
<div className="table-responsive text-nowrap pt-1 px-2 px-sm-0">
<table className="table px-2">
<thead className="p-0">
<table className="table px-2">
<thead className="p-0 table-light">
<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">
<span>Name</span>
<span>Name {getSortIcon()}</span>
</div>
</th>
<th className="text-start d-none d-sm-table-cell">
@ -134,7 +150,7 @@ const ManageBucket = () =>
</thead>
<tbody className="table-border-bottom-0 overflow-auto">
{bucketList.map((bucket) => (
{sortedBuckteList.map((bucket) => (
<tr key={bucket.id}>
<td colSpan={2} className="text-start text-wrap" >
@ -163,6 +179,7 @@ const ManageBucket = () =>
</table>
</div>
) : (
<>
<form onSubmit={handleSubmit(onSubmit)} className="px-2 px-sm-0">
<div className="">
<label className="form-label">Bucket Name</label>
@ -203,7 +220,10 @@ const ManageBucket = () =>
{isSubmitting ? "Please wait..." : "Submit"}
</button>
</div>
</form>
</form>
<EmployeeList employees={ employeesList} />
</>
)}
</div>
</div>