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

Add Search Bar in Assigned Employee Popup under Project > Teams #324

Closed
kartik.sharma wants to merge 1 commits from Kartik_Bug#836 into Issues_Aug_1W
pull from: Kartik_Bug#836
merge into: admin:Issues_Aug_1W
Conversation 0 Commits 1 Files Changed 1 +197 -158
1 changed files with 197 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

355
src/components/Project/Teams.jsx
View File

@ -14,13 +14,13 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { ASSIGN_TO_PROJECT } from "../../utils/constants"; import { ASSIGN_TO_PROJECT } from "../../utils/constants";
import ConfirmModal from "../common/ConfirmModal"; import ConfirmModal from "../common/ConfirmModal";
import eventBus from "../../services/eventBus"; import eventBus from "../../services/eventBus";
import {useEmployeesByProjectAllocated, useManageProjectAllocation} from "../../hooks/useProjects"; import {
useEmployeesByProjectAllocated,
useManageProjectAllocation,
} from "../../hooks/useProjects";
import { useSelectedproject } from "../../slices/apiDataManager"; import { useSelectedproject } from "../../slices/apiDataManager";
const Teams = () => const Teams = () => {
{
// const {projectId} = useParams()
// const projectId = useSelector((store)=>store.localVariables.projectId)
const projectId = useSelectedproject(); const projectId = useSelectedproject();
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -32,67 +32,68 @@ const Teams = () =>
const [filteredEmployees, setFilteredEmployees] = useState([]); const [filteredEmployees, setFilteredEmployees] = useState([]);
const [removingEmployeeId, setRemovingEmployeeId] = useState(null); const [removingEmployeeId, setRemovingEmployeeId] = useState(null);
const [assignedLoading, setAssignedLoading] = useState(false); const [assignedLoading, setAssignedLoading] = useState(false);
const [ activeEmployee, setActiveEmployee ] = useState( true ) const [activeEmployee, setActiveEmployee] = useState(true);
const [deleteEmployee,setDeleteEmplyee] = useState(null) const [deleteEmployee, setDeleteEmplyee] = useState(null);
const [searchTerm, setSearchTerm] = useState(""); // State for search term
const navigate = useNavigate(); const navigate = useNavigate();
const HasAssignUserPermission = useHasUserPermission( ASSIGN_TO_PROJECT ); const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
const [ IsDeleteModal, setIsDeleteModal ] = useState( false ) const [IsDeleteModal, setIsDeleteModal] = useState(false)
const {projectEmployees, loading:employeeLodaing, refetch} = useEmployeesByProjectAllocated( projectId ) const { projectEmployees, loading: employeeLodaing, refetch } = useEmployeesByProjectAllocated(projectId)
const { const {
mutate: submitAllocations, mutate: submitAllocations,
isPending, isPending,
isSuccess, isSuccess,
isError, isError,
} = useManageProjectAllocation({ } = useManageProjectAllocation({
onSuccessCallback: () => { onSuccessCallback: () => {
setRemovingEmployeeId(null); setRemovingEmployeeId(null);
setAssignedLoading(false); setAssignedLoading(false);
setDeleteEmplyee(null); setDeleteEmplyee(null);
closeDeleteModal(); closeDeleteModal();
}, },
onErrorCallback: () => { onErrorCallback: () => {
closeDeleteModal(); closeDeleteModal();
}, },
});
const removeAllocation = (item) => {
setRemovingEmployeeId(item.id);
submitAllocations({
items: [
{
empID: item.employeeId,
jobRoleId: item.jobRoleId,
projectId: projectId,
status: false,
},
],
added: false,
}); });
};
const removeAllocation = (item) => {
setRemovingEmployeeId(item.id);
submitAllocations({
items: [
{
empID: item.employeeId,
jobRoleId: item.jobRoleId,
projectId: projectId,
status: false,
},
],
added: false,
});
};
const handleEmpAlicationFormSubmit = (allocaionObj) => { const handleEmpAlicationFormSubmit = (allocaionObj) => {
let items = allocaionObj.map((item) => { let items = allocaionObj.map((item) => {
return { return {
empID: item.empID, empID: item.empID,
jobRoleId: item.jobRoleId, jobRoleId: item.jobRoleId,
projectId: projectId, projectId: projectId,
status: true, status: true,
}; };
}); });
submitAllocations({ items, added: true }); submitAllocations({ items, added: true });
setActiveEmployee(true); setActiveEmployee(true);
setFilteredEmployees(employees.filter((emp) => emp.isActive)); setFilteredEmployees(employees.filter((emp) => emp.isActive));
const dropdown = document.querySelector('select[name="DataTables_Table_0_length"]'); const dropdown = document.querySelector('select[name="DataTables_Table_0_length"]');
if (dropdown) dropdown.value = "true"; if (dropdown) dropdown.value = "true";
}; };
const getRole = (jobRoleId) => { const getRole = (jobRoleId) => {
@ -124,17 +125,17 @@ const {
}; };
useEffect(() => { useEffect(() => {
dispatch(changeMaster("Job Role")); dispatch(changeMaster("Job Role"));
}, [dispatch]); }, [dispatch]);
useEffect(() => { useEffect(() => {
if ( projectEmployees ) if (projectEmployees) {
{
setEmployees(projectEmployees); setEmployees(projectEmployees);
setFilteredEmployees( projectEmployees?.filter( ( emp ) => emp.isActive ) ); const filtered = projectEmployees.filter((emp) => emp.isActive);
setFilteredEmployees(filtered);
} }
}, [projectEmployees,employeeLodaing]); }, [projectEmployees, employeeLodaing]);
useEffect(() => { useEffect(() => {
if (data) { if (data) {
@ -142,24 +143,50 @@ const {
} }
}, [data]); }, [data]);
const filterAndSearchEmployees = useCallback(() => {
const statusFiltered = employees.filter((emp) =>
activeEmployee ? emp.isActive : !emp.isActive
);
if (searchTerm === "") {
setFilteredEmployees(statusFiltered);
return;
}
const lowercasedSearchTerm = searchTerm.toLowerCase();
const searchedAndFiltered = statusFiltered.filter((item) => {
const fullName =
`${item.firstName} ${item.middleName} ${item.lastName}`.toLowerCase();
const roleName = getRole(item.jobRoleId).toLowerCase();
return (
fullName.includes(lowercasedSearchTerm) ||
roleName.includes(lowercasedSearchTerm)
);
});
setFilteredEmployees(searchedAndFiltered);
}, [employees, activeEmployee, searchTerm, getRole]);
useEffect(() => {
filterAndSearchEmployees();
}, [employees, activeEmployee, searchTerm, filterAndSearchEmployees]);
const handleFilterEmployee = (e) => { const handleFilterEmployee = (e) => {
const filterValue = e.target.value; const filterValue = e.target.value;
if ( filterValue === "true" ) setActiveEmployee(filterValue === "true");
{ setSearchTerm("");
setActiveEmployee(true)
setFilteredEmployees(employees.filter((emp) => emp.isActive));
} else {
setFilteredEmployees( employees.filter( ( emp ) => !emp.isActive ) );
setActiveEmployee(false)
}
}; };
const deleteModalOpen = (item) => const handleSearch = (e) => {
{ setSearchTerm(e.target.value);
};
const deleteModalOpen = (item) => {
setDeleteEmplyee(item) setDeleteEmplyee(item)
setIsDeleteModal(true) setIsDeleteModal(true)
} }
const closeDeleteModal = ()=> setIsDeleteModal(false) const closeDeleteModal = () => setIsDeleteModal(false)
const handler = useCallback( const handler = useCallback(
(msg) => { (msg) => {
@ -167,7 +194,7 @@ const {
refetch(); refetch();
} }
}, },
[projectId, refetch] [projectId, refetch]
); );
useEffect(() => { useEffect(() => {
@ -175,18 +202,18 @@ const {
return () => eventBus.off("assign_project_all", handler); return () => eventBus.off("assign_project_all", handler);
}, [handler]); }, [handler]);
const employeeHandler = useCallback( const employeeHandler = useCallback(
(msg) => { (msg) => {
if(filteredEmployees.some((item) => item.employeeId == msg.employeeId)){ if (filteredEmployees.some((item) => item.employeeId == msg.employeeId)) {
refetch(); refetch();
} }
},[filteredEmployees, refetch] }, [filteredEmployees, refetch]
); );
useEffect(() => { useEffect(() => {
eventBus.on("employee",employeeHandler); eventBus.on("employee", employeeHandler);
return () => eventBus.off("employee",employeeHandler) return () => eventBus.off("employee", employeeHandler)
},[employeeHandler]) }, [employeeHandler])
return ( return (
<> <>
@ -209,7 +236,7 @@ const {
</div> </div>
{IsDeleteModal && ( {IsDeleteModal && (
<div <div
className={`modal fade ${IsDeleteModal ? "show" : ""}`} className={`modal fade ${IsDeleteModal ? "show" : ""}`}
tabIndex="-1" tabIndex="-1"
@ -220,7 +247,7 @@ const {
}} }}
aria-hidden="false" aria-hidden="false"
> >
<ConfirmModal <ConfirmModal
type={"delete"} type={"delete"}
header={"Removed Employee"} header={"Removed Employee"}
@ -235,8 +262,8 @@ const {
<div className="card card-action mb-6"> <div className="card card-action mb-6">
<div className="card-body"> <div className="card-body">
<div className="row"> <div className="row d-flex justify-content-between mb-4">
<div className="col-12 d-flex justify-content-between mb-1"> <div className="col-md-6 col-12 d-flex align-items-center">
<div <div
className="dataTables_length text-start py-2 px-2" className="dataTables_length text-start py-2 px-2"
id="DataTables_Table_0_length" id="DataTables_Table_0_length"
@ -256,11 +283,24 @@ const {
</select> </select>
</label> </label>
</div> </div>
</div>
<div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
<div className="dataTables_filter d-inline-flex align-items-center">
<input
type="search"
className="form-control form-control-sm me-4"
placeholder="Name or Role"
aria-controls="DataTables_Table_0"
value={searchTerm}
onChange={handleSearch}
/>
</div>
<button <button
type="button" type="button"
className={`link-button btn-sm m-1 ${ className={`link-button btn-sm m-1 ${HasAssignUserPermission ? "" : "d-none"
HasAssignUserPermission ? "" : "d-none" }`}
}`}
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#user-model" data-bs-target="#user-model"
> >
@ -271,88 +311,87 @@ const {
</div> </div>
<div className="table-responsive text-nowrap"> <div className="table-responsive text-nowrap">
{employeeLodaing && <p>Loading..</p>} {employeeLodaing && <p>Loading..</p>}
{!employeeLodaing && employees && employees.length > 0 && ( {!employeeLodaing && filteredEmployees && filteredEmployees.length > 0 && (
<table className="table "> <table className="table ">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Assigned Date</th> <th>Assigned Date</th>
{!activeEmployee && <th>Release Date</th>} {!activeEmployee && <th>Release Date</th>}
<th>Project Role</th> <th>Project Role</th>
<th>Actions</th> <th>Actions</th>
</tr> </tr>
</thead> </thead>
<tbody className="table-border-bottom-0"> <tbody className="table-border-bottom-0">
{filteredEmployees && {filteredEmployees.map((item) => (
filteredEmployees.map((item) => ( <tr key={item.id}>
<tr key={item.id}> <td>
<td> <div className="d-flex justify-content-start align-items-center">
<div className="d-flex justify-content-start align-items-center"> <Avatar
<Avatar firstName={item.firstName}
firstName={item.firstName} lastName={item.lastName}
lastName={item.lastName} ></Avatar>
></Avatar> <div className="d-flex flex-column">
<div className="d-flex flex-column"> <a
<a onClick={() =>
onClick={() => navigate(`/employee/${item.employeeId}?for=attendance`)
navigate(`/employee/${item.employeeId}?for=attendance`) }
} className="text-heading text-truncate cursor-pointer"
className="text-heading text-truncate cursor-pointer"
>
<span className="fw-normal">
{item.firstName} {item.middleName}{" "}
{item.lastName}
</span>
</a>
</div>
</div>
</td>
<td>
{" "}
{moment(item.allocationDate).format(
"DD-MMM-YYYY"
)}{" "}
</td>
{!activeEmployee && <td>
{item.reAllocationDate
? moment(item.reAllocationDate).format(
"DD-MMM-YYYY"
)
: "Present"}
</td>}
<td>
<span className="badge bg-label-primary me-1">
{getRole(item.jobRoleId)}
</span>
</td>
<td>
{item.isActive && (
<button
aria-label="Delete"
type="button"
title="Remove from project"
className="btn p-0 dropdown-toggle hide-arrow"
onClick={() => deleteModalOpen(item)}
> >
{" "} <span className="fw-normal">
{removingEmployeeId === item.id ? ( {item.firstName} {item.middleName}{" "}
<div {item.lastName}
className="spinner-border spinner-border-sm text-primary" </span>
role="status" </a>
> </div>
<span className="visually-hidden"> </div>
Loading... </td>
</span> <td>
</div> {" "}
) : ( {moment(item.allocationDate).format(
<i className="bx bx-trash me-1 text-danger"></i> "DD-MMM-YYYY"
)} )}{" "}
</button> </td>
)} {!activeEmployee && <td>
{!item.isActive && <span>Not in project</span>} {item.reAllocationDate
</td> ? moment(item.reAllocationDate).format(
</tr> "DD-MMM-YYYY"
))} )
: "Present"}
</td>}
<td>
<span className="badge bg-label-primary me-1">
{getRole(item.jobRoleId)}
</span>
</td>
<td>
{item.isActive && (
<button
aria-label="Delete"
type="button"
title="Remove from project"
className="btn p-0 dropdown-toggle hide-arrow"
onClick={() => deleteModalOpen(item)}
>
{" "}
{removingEmployeeId === item.id ? (
<div
className="spinner-border spinner-border-sm text-primary"
role="status"
>
<span className="visually-hidden">
Loading...
</span>
</div>
) : (
<i className="bx bx-trash me-1 text-danger"></i>
)}
</button>
)}
{!item.isActive && <span>Not in project</span>}
</td>
</tr>
))}
</tbody> </tbody>
</table> </table>
)} )}