diff --git a/src/components/Directory/EmployeeList.jsx b/src/components/Directory/EmployeeList.jsx index 1cb1f9a9..fb644374 100644 --- a/src/components/Directory/EmployeeList.jsx +++ b/src/components/Directory/EmployeeList.jsx @@ -1,25 +1,57 @@ -import React, { useState } from "react"; -import { useSortableData } from "../../hooks/useSortableData"; - -const EmployeeList = ({ employees }) => { - const [selectedIds, setSelectedIds] = useState([]); +import React,{useState,useEffect} from 'react' +import {useSortableData} from '../../hooks/useSortableData'; +const EmployeeList = ( {employees, onChange, assignedEmployee = []} ) => +{ + const [employeefiltered, setEmployeeFilter] = useState([]); + const [employeeStatusList, setEmployeeStatusList] = useState([]); const [searchTerm, setSearchTerm] = useState(""); + // Populate filtered list on load + useEffect(() => { + setEmployeeFilter(employees?.filter((emp) => emp.email != null) || []); + }, [employees]); + + // Initialize checked employees based on assignedEmployee prop + useEffect(() => { + if (Array.isArray(assignedEmployee)) { + const initialStatus = assignedEmployee.map((id) => ({ + employeeId: id, + isActive: true, + })); + setEmployeeStatusList(initialStatus); + } + }, [assignedEmployee]); + + // Send updated list to parent + useEffect(() => { + if (onChange) { + onChange(employeeStatusList); + } + }, [employeeStatusList]); const handleCheckboxChange = (id) => { - setSelectedIds((prev) => - prev.includes(id) ? prev?.filter((empId) => empId !== id) : [...prev, id] - ); + setEmployeeStatusList((prev) => { + const exists = prev.find((emp) => emp.employeeId === id); + if (exists) { + return prev.map((emp) => + emp.employeeId === id ? { ...emp, isActive: !emp.isActive } : emp + ); + } else { + return [...prev, { employeeId: id, isActive: true }]; + } + }); }; - const getSelectedEmployees = () => { - console.log("Selected Employee IDs:", selectedIds); + const isChecked = (id) => { + const found = employeeStatusList.find((emp) => emp.employeeId === id); + return found?.isActive || false; }; + // Sorting const { items: sortedEmployees, requestSort, sortConfig, - } = useSortableData(employees, { + } = useSortableData(employeefiltered, { key: (e) => `${e?.firstName} ${e?.lastName}`, direction: "asc", }); @@ -34,21 +66,13 @@ const EmployeeList = ({ employees }) => { }; 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) + const fullName = `${employee?.firstName} ${employee?.lastName}`?.toLowerCase(); + return fullName.includes(searchTerm.toLowerCase()); }); - return ( <> -
-

Add Employee

+
+

Add Employee

{ > Name {getSortIcon()} - Role - Status - Bucket + Email {employees.length === 0 ? ( - -
- No Employee Available -
+ +
+ No Employee Available +
) : filteredEmployees.length === 0 ? ( - -
- No Matchinng Employee Found. -
+ +
+ No Matching Employee Found. +
) : ( @@ -103,36 +125,18 @@ const EmployeeList = ({ employees }) => { handleCheckboxChange(employee.id)} />
-

+

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

- {employee.email}
- {employee.jobRole} - - - - {employee.isActive ? "Active" : "Inactive"} - - - - - {" "} - {employee.jobRole} - + {employee.email} )) diff --git a/src/components/Directory/ManageBucket.jsx b/src/components/Directory/ManageBucket.jsx index 60f59e5b..f33f467b 100644 --- a/src/components/Directory/ManageBucket.jsx +++ b/src/components/Directory/ManageBucket.jsx @@ -16,7 +16,8 @@ import ConfirmModal from "../common/ConfirmModal"; const ManageBucket = () => { const [bucketList, setBucketList] = useState([]); const { employeesList } = useAllEmployees(false); - const { buckets, loading,refetch } = useBuckets(); + const [selectedEmployee, setSelectEmployee] = useState([]); + const { buckets, loading, refetch } = useBuckets(); const [action_bucket, setAction_bucket] = useState(false); const [isSubmitting, setSubmitting] = useState(false); const [selected_bucket, select_bucket] = useState(null); @@ -54,28 +55,89 @@ const ManageBucket = () => { const onSubmit = async (data) => { setSubmitting(true); + try { + const cache_buckets = getCachedData("buckets") || []; let response; + // Utility: Compare arrays regardless of order + const arraysAreEqual = (a, b) => { + if (a.length !== b.length) return false; + const setA = new Set(a); + const setB = new Set(b); + return [...setA].every((id) => setB.has(id)); + }; + + // UPDATE existing bucket if (selected_bucket) { - let payload = { ...data, id: selected_bucket.id }; + const payload = { ...data, id: selected_bucket.id }; + + // 1. Update bucket details 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); + + // 2. Update employee assignments if they changed + const existingEmployeeIds = selected_bucket?.employeeIds || []; + const employeesToUpdate = selectedEmployee.filter((emp) => { + const isExisting = existingEmployeeIds.includes(emp.employeeId); + return (!isExisting && emp.isActive) || (isExisting && !emp.isActive); + }); + + // Create a filtered list of active employee IDs to compare + const newActiveEmployeeIds = selectedEmployee + .filter((emp) => { + const isExisting = existingEmployeeIds.includes(emp.employeeId); + return ( + (!isExisting && emp.isActive) || (isExisting && !emp.isActive) + ); + }) + .map((emp) => emp.employeeId); + + if ( + !arraysAreEqual(newActiveEmployeeIds, existingEmployeeIds) && + employeesToUpdate.length != 0 + ) { + try { + response = await DirectoryRepository.AssignedBuckets( + selected_bucket.id, + employeesToUpdate + ); + } catch (assignError) { + const assignMessage = + assignError?.response?.data?.message || + assignError?.message || + "Error assigning employees."; + showToast(assignMessage, "error"); + } + } + const updatedData = cache_buckets?.map((bucket) => + bucket.id === response?.data?.id ? response.data : bucket + ); + + cacheData( "buckets", updatedData ); + + setBucketList(updatedData) showToast("Bucket Updated Successfully", "success"); - } else { + } + + // CREATE new bucket + else { response = await DirectoryRepository.CreateBuckets(data); - const cache_buckets = getCachedData("buckets") || []; + const updatedBuckets = [...cache_buckets, response?.data]; cacheData("buckets", updatedBuckets); - setBucketList(updatedBuckets); + setBucketList( updatedBuckets ); + + showToast("Bucket Created Successfully", "success"); } @@ -86,18 +148,20 @@ const ManageBucket = () => { error?.message || "Error occurred during API call"; showToast(message, "error"); + } finally { + setSubmitting(false); } }; const handleDeleteContact = async () => { try { - const resp = await DirectoryRepository.DeleteBucket( deleteBucket ); - const cache_buckets = getCachedData("buckets") || []; - const updatedBuckets = cache_buckets.filter((bucket) => - bucket.id != deleteBucket - ); - cacheData("buckets", updatedBuckets); - setBucketList(updatedBuckets); + const resp = await DirectoryRepository.DeleteBucket(deleteBucket); + const cache_buckets = getCachedData("buckets") || []; + const updatedBuckets = cache_buckets.filter( + (bucket) => bucket.id != deleteBucket + ); + cacheData("buckets", updatedBuckets); + setBucketList(updatedBuckets); showToast("Bucket deleted successfully", "success"); setDeleteBucket(null); } catch (error) { @@ -131,7 +195,6 @@ const ManageBucket = () => { const name = bucket.name?.toLowerCase(); return name?.includes(term); }); - return ( <> {deleteBucket && ( @@ -173,13 +236,14 @@ const ManageBucket = () => { placeholder="Search Bucket ..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} - /> - rrefetch()} - /> + /> + refetch()} + />
)} @@ -251,36 +315,37 @@ const ManageBucket = () => { )} - {sortedBucktesList.map((bucket) => ( - - - {" "} - {bucket.name} - - - {bucket.description} - - -
- { - select_bucket(bucket); - setAction_bucket(true); - }} - > - setDeleteBucket(bucket?.id)} - > - -
- - - ))} + {!loading && + sortedBucktesList.map((bucket) => ( + + + {" "} + {bucket.name} + + + {bucket.description} + + +
+ { + select_bucket(bucket); + setAction_bucket(true); + }} + > + setDeleteBucket(bucket?.id)} + > + +
+ + + ))}
@@ -310,9 +375,18 @@ const ManageBucket = () => { )} + + {selected_bucket && ( + setSelectEmployee(data)} + assignedEmployee={selected_bucket?.employeeIds} + /> + )} +
- - )}