From b4157354f7c90a0d551a3bc153704857c81dee12 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 27 May 2025 22:23:32 +0530
Subject: [PATCH] added sorting button to table header

---
 src/components/Directory/ManageBucket.jsx | 38 +++++++++++++++++------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/Directory/ManageBucket.jsx b/src/components/Directory/ManageBucket.jsx
index d8b32bbb..2d71c030 100644
--- a/src/components/Directory/ManageBucket.jsx
+++ b/src/components/Directory/ManageBucket.jsx
@@ -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>