added filter and sorted employee list - Team
This commit is contained in:
parent
2ef1fcfd1d
commit
265c74f079
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import MapUsers from "../MapUsers";
|
||||
import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
@ -28,16 +28,15 @@ const Teams = () => {
|
||||
const dispatch = useDispatch();
|
||||
const [AssigTeam, setAssignTeam] = useState(false);
|
||||
const [employees, setEmployees] = useState([]);
|
||||
const [filteredEmployees, setFilteredEmployees] = useState([]);
|
||||
const [selectedEmployee, setSelectedEmployee] = useState(null);
|
||||
const [deleteEmployee, setDeleteEmplyee] = useState(null);
|
||||
const [searchTerm, setSearchTerm] = useState(""); // State for search term
|
||||
const [selectedService, setSelectedService] = useState(null);
|
||||
const [activeEmployee,setActiveEmployee] = useState(false)
|
||||
const [activeEmployee, setActiveEmployee] = useState(false);
|
||||
|
||||
const { data: assignedServices, isLoading: servicesLoading } =
|
||||
useProjectAssignedServices(selectedProject);
|
||||
const {data:empJobRoles,loading} = useMaster()
|
||||
const { data: empJobRoles, loading } = useMaster();
|
||||
const handleToggleActive = (e) => setActiveEmployee(e.target.checked);
|
||||
|
||||
const handleServiceChange = (e) => {
|
||||
@ -52,7 +51,12 @@ const Teams = () => {
|
||||
projectEmployees,
|
||||
loading: employeeLodaing,
|
||||
refetch,
|
||||
} = useEmployeesByProjectAllocated(selectedProject, selectedService,null,activeEmployee);
|
||||
} = useEmployeesByProjectAllocated(
|
||||
selectedProject,
|
||||
selectedService,
|
||||
null,
|
||||
activeEmployee
|
||||
);
|
||||
const {
|
||||
mutate: submitAllocations,
|
||||
isPending,
|
||||
@ -90,19 +94,36 @@ const Teams = () => {
|
||||
const role = empJobRoles.find((b) => b.id == jobRoleId);
|
||||
return role ? role.name : "Unassigned";
|
||||
};
|
||||
// const employeeHandler = useCallback(
|
||||
// (msg) => {
|
||||
// if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) {
|
||||
// refetch();
|
||||
// }
|
||||
// },
|
||||
// [filteredEmployees, refetch]
|
||||
// );
|
||||
|
||||
// useEffect(() => {
|
||||
// eventBus.on("employee", employeeHandler);
|
||||
// return () => eventBus.off("employee", employeeHandler);
|
||||
// }, [employeeHandler]);
|
||||
const filteredEmployees = useMemo(() => {
|
||||
if (!projectEmployees || !searchTerm?.trim()) return projectEmployees;
|
||||
|
||||
const lower = searchTerm.toLowerCase();
|
||||
|
||||
return projectEmployees?.filter((emp) => {
|
||||
const fullName = `${emp.firstName ?? ""} ${
|
||||
emp.lastName ?? ""
|
||||
}`.toLowerCase();
|
||||
|
||||
const joberole = getJobRole(emp?.jobRoleId)?.toLowerCase();
|
||||
|
||||
return fullName?.includes(lower) || joberole?.includes(lower);
|
||||
});
|
||||
}, [projectEmployees, searchTerm]);
|
||||
const handleSearch = (e) => setSearchTerm(e.target.value);
|
||||
const employeeHandler = useCallback(
|
||||
(msg) => {
|
||||
if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) {
|
||||
refetch();
|
||||
}
|
||||
},
|
||||
[filteredEmployees, refetch]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("employee", employeeHandler);
|
||||
return () => eventBus.off("employee", employeeHandler);
|
||||
}, [employeeHandler]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -128,25 +149,30 @@ const Teams = () => {
|
||||
|
||||
<div className="card card-action mb-6">
|
||||
<div className="card-body">
|
||||
<div className="row d-flex justify-content-between mb-4">
|
||||
<div className="col-md-6 col-12 d-flex align-emps-center">
|
||||
{/* <div className="dataTables_length text-start py-1 px-0 col-md-4 col-12">
|
||||
{!servicesLoading &&
|
||||
assignedServices?.length > 0 &&
|
||||
(assignedServices.length > 1 ? (
|
||||
<label>
|
||||
<div className="row align-items-center justify-content-between mb-4 g-3">
|
||||
<div className="col-md-6 col-12 algin-items-center">
|
||||
<div className="d-flex flex-wrap align-items-center gap-3">
|
||||
<div>
|
||||
{!servicesLoading && (
|
||||
<>
|
||||
{(!assignedServices || assignedServices.length === 0) && (
|
||||
<span className="badge bg-label-secondary">
|
||||
Not Service Assigned
|
||||
</span>
|
||||
)}
|
||||
|
||||
{assignedServices?.length === 1 && (
|
||||
<span className="badge bg-label-secondary">
|
||||
{assignedServices[0].name}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{assignedServices?.length > 1 && (
|
||||
<select
|
||||
name="DataTables_Table_0_length"
|
||||
aria-controls="DataTables_Table_0"
|
||||
className="form-select form-select-sm"
|
||||
aria-label="Select Service"
|
||||
value={selectedService}
|
||||
onChange={handleServiceChange}
|
||||
style={{
|
||||
fontSize: "0.875rem",
|
||||
height: "35px",
|
||||
width: "190px",
|
||||
}}
|
||||
>
|
||||
<option value="">All Services</option>
|
||||
{assignedServices.map((service) => (
|
||||
@ -155,52 +181,53 @@ const Teams = () => {
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
) : (
|
||||
<h5>{assignedServices[0].name}</h5>
|
||||
))}
|
||||
</div> */}
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-md-6 col-12 d-flex justify-content-end align-emps-center">
|
||||
<div className="form-check form-switch me-2 mt-2">
|
||||
|
||||
<div className="form-check form-switch d-flex align-items-center text-nowrap">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
id="activeEmployeeSwitch"
|
||||
checked={activeEmployee}
|
||||
onChange={handleToggleActive}
|
||||
id="activeEmployeeSwitch"
|
||||
/>
|
||||
<label
|
||||
className="form-check-label ms-0 "
|
||||
className="form-check-label ms-2"
|
||||
htmlFor="activeEmployeeSwitch"
|
||||
>
|
||||
{activeEmployee ? "Active Employees" : "Inactive Employees"}
|
||||
</label>
|
||||
</div>
|
||||
<div className="dataTables_filter d-inline-flex align-emps-center ms-2">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm me-4"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search by Name or Role"
|
||||
aria-controls="DataTables_Table_0"
|
||||
// value={searchTerm}
|
||||
// onChange={handleSearch}
|
||||
style={{ maxWidth: "200px" }}
|
||||
value={searchTerm}
|
||||
onChange={handleSearch}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{HasAssignUserPermission && (
|
||||
<button
|
||||
type="button"
|
||||
className={`link-button btn-primary btn-sm `}
|
||||
// data-bs-toggle="modal"
|
||||
// data-bs-target="#user-model"
|
||||
className="btn btn-primary btn-sm text-nowrap"
|
||||
onClick={() => setAssignTeam(true)}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
<i className="bx bx-plus-circle me-1"></i>
|
||||
Assign Employee
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="table-responsive text-nowrap">
|
||||
{employeeLodaing && <p>Loading..</p>}
|
||||
{projectEmployees && projectEmployees.length > 0 && (
|
||||
@ -213,14 +240,18 @@ const Teams = () => {
|
||||
<th>Services</th>
|
||||
<th>Organization</th>
|
||||
<th>Assigned Date</th>
|
||||
<th>Release Date</th>
|
||||
{activeEmployee && <th>Release Date</th>}
|
||||
<th>Project Role</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-border-bottom-0">
|
||||
{projectEmployees &&
|
||||
projectEmployees.map((emp) => (
|
||||
{filteredEmployees &&
|
||||
filteredEmployees
|
||||
.sort((a, b) =>
|
||||
(a.firstName || "").localeCompare(b.firstName || "")
|
||||
)
|
||||
.map((emp) => (
|
||||
<tr key={emp.id}>
|
||||
<td>
|
||||
<div className="d-flex justify-content-start align-items-center">
|
||||
@ -252,11 +283,15 @@ const Teams = () => {
|
||||
<td>
|
||||
{moment(emp.allocationDate).format("DD-MMM-YYYY")}
|
||||
</td>
|
||||
{activeEmployee && (
|
||||
<td>
|
||||
{emp.reAllocationDate
|
||||
? moment(emp.reAllocationDate).format("DD-MMM-YYYY")
|
||||
? moment(emp.reAllocationDate).format(
|
||||
"DD-MMM-YYYY"
|
||||
)
|
||||
: "Present"}
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
<span className="badge bg-label-primary me-1">
|
||||
{getJobRole(emp.jobRoleId)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user