diff --git a/src/components/Directory/EmployeeList.jsx b/src/components/Directory/EmployeeList.jsx new file mode 100644 index 00000000..1cb1f9a9 --- /dev/null +++ b/src/components/Directory/EmployeeList.jsx @@ -0,0 +1,147 @@ +import React, { useState } from "react"; +import { useSortableData } from "../../hooks/useSortableData"; + +const EmployeeList = ({ employees }) => { + const [selectedIds, setSelectedIds] = useState([]); + const [searchTerm, setSearchTerm] = useState(""); + + const handleCheckboxChange = (id) => { + setSelectedIds((prev) => + prev.includes(id) ? prev?.filter((empId) => empId !== id) : [...prev, id] + ); + }; + + const getSelectedEmployees = () => { + console.log("Selected Employee IDs:", selectedIds); + }; + + const { + items: sortedEmployees, + requestSort, + sortConfig, + } = useSortableData(employees, { + key: (e) => `${e?.firstName} ${e?.lastName}`, + direction: "asc", + }); + + const getSortIcon = () => { + if (!sortConfig) return null; + return sortConfig.direction === "asc" ? ( + + ) : ( + + ); + }; + + const filteredEmployees = sortedEmployees?.filter((employee) => { + const fullName = + `${employee?.firstName} ${employee?.lastName}`?.toLowerCase(); + // const email = employee.email.toLowerCase(); + // const role = employee.jobRole.toLowerCase(); + const term = searchTerm?.toLowerCase(); + + return fullName.includes(term); + // email.includes(term) || + // role.includes(term) + }); + + return ( + <> +
+

Add Employee

+
+ setSearchTerm(e.target.value)} + /> +
+
+ +
+ + + + + + + + + + + + {employees.length === 0 ? ( + + + + ) : filteredEmployees.length === 0 ? ( + + + + ) : ( + filteredEmployees?.map((employee) => ( + + + + + + + )) + )} + +
+ requestSort((e) => `${e.firstName} ${e.lastName}`) + } + className="text-start cursor-pointer" + > + Name {getSortIcon()} + RoleStatusBucket
+
+ No Employee Available +
+
+
+ No Matchinng Employee Found. +
+
+
+ handleCheckboxChange(employee.id)} + /> +
+

+ {`${employee.firstName} ${employee.lastName}`} +

+ {employee.email} +
+
+ 		+ {employee.jobRole} + + + {employee.isActive ? "Active" : "Inactive"} + + + + {" "} + {employee.jobRole} + +
+
+ + ); +}; + +export default EmployeeList; diff --git a/src/components/Directory/ManageBucket.jsx b/src/components/Directory/ManageBucket.jsx index 2d71c030..64d8667f 100644 --- a/src/components/Directory/ManageBucket.jsx +++ b/src/components/Directory/ManageBucket.jsx @@ -9,31 +9,36 @@ 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"; +import { useAllEmployees, useEmployees } from "../../hooks/useEmployees"; +import { useSortableData } from "../../hooks/useSortableData"; +import ConfirmModal from "../common/ConfirmModal"; -const ManageBucket = () => -{ - const [ bucketList, setBucketList ] = useState( [] ); - const {employeesList} = useAllEmployees(false) - const { buckets } = useBuckets(); +const ManageBucket = () => { + const [bucketList, setBucketList] = useState([]); + const { employeesList } = useAllEmployees(false); + const { buckets, loading } = useBuckets(); const [action_bucket, setAction_bucket] = useState(false); const [isSubmitting, setSubmitting] = useState(false); - const [ selected_bucket, select_bucket ] = useState( null ); - const { items: sortedBuckteList, requestSort, sortConfig} = useSortableData(bucketList,{ + const [selected_bucket, select_bucket] = useState(null); + const [deleteBucket, setDeleteBucket] = useState(null); + const [searchTerm, setSearchTerm] = useState(""); + const { + items: sortedBuckteList, + requestSort, + sortConfig, + } = useSortableData(bucketList, { key: (e) => `${e.name}`, - direction: 'asc', - } ) + direction: "asc", + }); const getSortIcon = () => { if (!sortConfig) return null; - return sortConfig.direction === 'asc' ? ( + return sortConfig.direction === "asc" ? ( ) : ( ); }; - const { register, handleSubmit, @@ -45,188 +50,278 @@ const ManageBucket = () => name: "", description: "", }, - } ); - - const onSubmit = async (data) => { - setSubmitting(true); - try { - let response; + }); - if ( selected_bucket ) - { - let payload ={...data, id:selected_bucket.id} - response = await DirectoryRepository.UpdateBuckets(selected_bucket.id, payload); - const cache_buckets = getCachedData("buckets") || []; - const updatedBuckets = cache_buckets.map((bucket) => - bucket.id === selected_bucket.id ? response?.data : bucket - ); - cacheData( "buckets", updatedBuckets ); - setBucketList(updatedBuckets); - showToast("Bucket Updated Successfully", "success"); - } else { - response = await DirectoryRepository.CreateBuckets(data); - const cache_buckets = getCachedData("buckets") || []; - const updatedBuckets = [...cache_buckets, response?.data]; - cacheData( "buckets", updatedBuckets ); - setBucketList(updatedBuckets); - showToast("Bucket Created Successfully", "success"); + const onSubmit = async (data) => { + setSubmitting(true); + try { + let response; + + if (selected_bucket) { + let payload = { ...data, id: selected_bucket.id }; + response = await DirectoryRepository.UpdateBuckets( + selected_bucket.id, + payload + ); + const cache_buckets = getCachedData("buckets") || []; + const updatedBuckets = cache_buckets.map((bucket) => + bucket.id === selected_bucket.id ? response?.data : bucket + ); + cacheData("buckets", updatedBuckets); + setBucketList(updatedBuckets); + showToast("Bucket Updated Successfully", "success"); + } else { + response = await DirectoryRepository.CreateBuckets(data); + const cache_buckets = getCachedData("buckets") || []; + const updatedBuckets = [...cache_buckets, response?.data]; + cacheData("buckets", updatedBuckets); + setBucketList(updatedBuckets); + showToast("Bucket Created Successfully", "success"); + } + + handleBack(); + } catch (error) { + const message = + error?.response?.data?.message || + error?.message || + "Error occurred during API call"; + showToast(message, "error"); } + }; - handleBack(); - } catch (error) { - const message = - error?.response?.data?.message || - error?.message || - "Error occurred during API call"; - showToast(message, "error"); - } -}; - + const handleDeleteContact = async () => { + try { + // delete api calling here + showToast("Bucket deleted successfully", "success"); + setDeleteBucket(null); + } catch (error) { + const message = + error?.response?.data?.message || + error?.message || + "Error occurred during API call."; + showToast(message, "error"); + } + }; useEffect(() => { reset({ name: selected_bucket?.name || "", description: selected_bucket?.description || "", }); - }, [ selected_bucket ] ); + }, [selected_bucket]); + + useEffect(() => { + setBucketList(buckets); + }, [buckets]); - useEffect( () => - { - setBucketList( buckets ) - }, [ buckets ] ) - const handleBack = () => { select_bucket(null); setAction_bucket(false); setSubmitting(false); }; + const sortedBucktesList = sortedBuckteList?.filter((bucket) => { + const term = searchTerm?.toLowerCase(); + const name = bucket.name?.toLowerCase(); + return name?.includes(term); + }); return ( -
-
-

Manage Buckets

-
-
- - -
-
- {!action_bucket ? ( -
- - - - - - - - + setDeleteBucket(null)} + // loading={IsDeleting} + /> + + )} - - {sortedBuckteList.map((bucket) => ( - - - - - - - ))} - -
requestSort((e) => `${e.name} `)}> -
- Name {getSortIcon()} -
- 		-
- Description -
- 		-
- Action -
-
- {bucket.name} - - {bucket.description} - -
- { - select_bucket(bucket); - setAction_bucket(true); - }} - > - - - -
-
-
- ) : ( - <> -
-
- +
+
+

Manage Buckets

+
+
+ {action_bucket ? ( + + ) : ( +
setSearchTerm(e.target.value)} /> - {errors.name && ( - {errors.name.message} - )}
-
- -