452 lines
15 KiB
JavaScript
452 lines
15 KiB
JavaScript
import React, { useState, useEffect, useCallback } from "react";
|
|
import MapUsers from "./MapUsers";
|
|
import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
|
|
|
|
import showToast from "../../services/toastService";
|
|
import Avatar from "../common/Avatar";
|
|
import moment from "moment";
|
|
|
|
import ProjectRepository from "../../repositories/ProjectRepository";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { changeMaster } from "../../slices/localVariablesSlice";
|
|
import useMaster from "../../hooks/masterHook/useMaster";
|
|
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|
import { ASSIGN_TO_PROJECT } from "../../utils/constants";
|
|
import ConfirmModal from "../common/ConfirmModal";
|
|
import eventBus from "../../services/eventBus";
|
|
import {
|
|
useEmployeesByProjectAllocated,
|
|
useManageProjectAllocation,
|
|
useProjectAssignedServices,
|
|
} from "../../hooks/useProjects";
|
|
import { useSelectedProject } from "../../slices/apiDataManager";
|
|
|
|
const Teams = () => {
|
|
const projectId = useSelectedProject();
|
|
const dispatch = useDispatch();
|
|
|
|
const { data, loading } = useMaster();
|
|
const [isModalOpen, setIsModelOpen] = useState(false);
|
|
const [error, setError] = useState("");
|
|
const [empJobRoles, setEmpJobRoles] = useState(null);
|
|
const [employees, setEmployees] = useState([]);
|
|
const [filteredEmployees, setFilteredEmployees] = useState([]);
|
|
const [removingEmployeeId, setRemovingEmployeeId] = useState(null);
|
|
const [assignedLoading, setAssignedLoading] = useState(false);
|
|
const [activeEmployee, setActiveEmployee] = useState(true);
|
|
const [deleteEmployee, setDeleteEmplyee] = useState(null);
|
|
const [searchTerm, setSearchTerm] = useState(""); // State for search term
|
|
const [selectedService, setSelectedService] = useState(null);
|
|
|
|
const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
|
|
const handleToggleActive = e => setActiveEmployee(e.target.checked);
|
|
|
|
|
|
const handleServiceChange = (e) => {
|
|
setSelectedService(e.target.value);
|
|
};
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
|
|
const [IsDeleteModal, setIsDeleteModal] = useState(false);
|
|
const {
|
|
projectEmployees,
|
|
loading: employeeLodaing,
|
|
refetch,
|
|
} = useEmployeesByProjectAllocated(projectId,selectedService);
|
|
const {
|
|
mutate: submitAllocations,
|
|
isPending,
|
|
isSuccess,
|
|
isError,
|
|
} = useManageProjectAllocation({
|
|
onSuccessCallback: () => {
|
|
setRemovingEmployeeId(null);
|
|
setAssignedLoading(false);
|
|
setDeleteEmplyee(null);
|
|
closeDeleteModal();
|
|
},
|
|
onErrorCallback: () => {
|
|
closeDeleteModal();
|
|
},
|
|
});
|
|
|
|
const removeAllocation = (item) => {
|
|
setRemovingEmployeeId(item.id);
|
|
|
|
submitAllocations({
|
|
items: [
|
|
{
|
|
empID: item.employeeId,
|
|
jobRoleId: item.jobRoleId,
|
|
projectId: projectId,
|
|
status: false,
|
|
},
|
|
],
|
|
added: false,
|
|
});
|
|
};
|
|
|
|
const handleEmpAlicationFormSubmit = (allocaionObj) => {
|
|
let items = allocaionObj.map((item) => {
|
|
return {
|
|
empID: item.empID,
|
|
jobRoleId: item.jobRoleId,
|
|
projectId: projectId,
|
|
status: true,
|
|
};
|
|
});
|
|
|
|
submitAllocations({ items, added: true });
|
|
|
|
setActiveEmployee(true);
|
|
setFilteredEmployees(employees.filter((emp) => emp.isActive));
|
|
|
|
const dropdown = document.querySelector(
|
|
'select[name="DataTables_Table_0_length"]'
|
|
);
|
|
if (dropdown) dropdown.value = "true";
|
|
};
|
|
|
|
const getRole = (jobRoleId) => {
|
|
if (loading) return "Loading...";
|
|
if (!Array.isArray(empJobRoles)) return "Unassigned";
|
|
if (!jobRoleId) return "Unassigned";
|
|
|
|
const role = empJobRoles.find((b) => b.id == jobRoleId);
|
|
return role ? role.name : "Unassigned";
|
|
};
|
|
const openModel = () => {
|
|
setIsModelOpen(true);
|
|
};
|
|
|
|
const onModelClose = () => {
|
|
setIsModelOpen(false);
|
|
const modalElement = document.getElementById("user-model");
|
|
if (modalElement) {
|
|
modalElement.classList.remove("show");
|
|
modalElement.style.display = "none";
|
|
document.body.classList.remove("modal-open");
|
|
document.querySelector(".modal-backdrop").remove();
|
|
}
|
|
const modalBackdropElement = document.querySelector(".modal-backdrop");
|
|
if (modalBackdropElement) {
|
|
modalBackdropElement.remove();
|
|
}
|
|
document.body.style.overflow = "auto";
|
|
};
|
|
|
|
useEffect(() => {
|
|
dispatch(changeMaster("Job Role"));
|
|
}, [dispatch]);
|
|
|
|
useEffect(() => {
|
|
if (projectEmployees) {
|
|
setEmployees(projectEmployees);
|
|
const filtered = projectEmployees.filter((emp) => emp.isActive);
|
|
setFilteredEmployees(filtered);
|
|
}
|
|
}, [projectEmployees, employeeLodaing]);
|
|
|
|
useEffect(() => {
|
|
if (data) {
|
|
setEmpJobRoles(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();
|
|
const orgName = (item.organizationName || "").toLowerCase();
|
|
const serviceName = (item.serviceName || "").toLowerCase();
|
|
|
|
return (
|
|
fullName.includes(lowercasedSearchTerm) ||
|
|
roleName.includes(lowercasedSearchTerm) ||
|
|
orgName.includes(lowercasedSearchTerm) ||
|
|
serviceName.includes(lowercasedSearchTerm)
|
|
);
|
|
});
|
|
|
|
setFilteredEmployees(searchedAndFiltered);
|
|
}, [employees, activeEmployee, searchTerm, getRole]);
|
|
|
|
|
|
useEffect(() => {
|
|
filterAndSearchEmployees();
|
|
}, [employees, activeEmployee, searchTerm, filterAndSearchEmployees]);
|
|
|
|
const handleFilterEmployee = (e) => {
|
|
const filterValue = e.target.value;
|
|
setActiveEmployee(filterValue === "true");
|
|
setSearchTerm("");
|
|
};
|
|
|
|
const handleSearch = (e) => {
|
|
setSearchTerm(e.target.value);
|
|
};
|
|
|
|
const deleteModalOpen = (item) => {
|
|
setDeleteEmplyee(item);
|
|
setIsDeleteModal(true);
|
|
};
|
|
const closeDeleteModal = () => setIsDeleteModal(false);
|
|
|
|
const handler = useCallback(
|
|
(msg) => {
|
|
if (msg.projectIds.some((item) => item === projectId)) {
|
|
refetch();
|
|
}
|
|
},
|
|
[projectId, refetch]
|
|
);
|
|
|
|
useEffect(() => {
|
|
eventBus.on("assign_project_all", handler);
|
|
return () => eventBus.off("assign_project_all", handler);
|
|
}, [handler]);
|
|
|
|
const employeeHandler = useCallback(
|
|
(msg) => {
|
|
if (filteredEmployees.some((item) => item.employeeId == msg.employeeId)) {
|
|
refetch();
|
|
}
|
|
},
|
|
[filteredEmployees, refetch]
|
|
);
|
|
|
|
useEffect(() => {
|
|
eventBus.on("employee", employeeHandler);
|
|
return () => eventBus.off("employee", employeeHandler);
|
|
}, [employeeHandler]);
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className="modal fade"
|
|
id="user-model"
|
|
tabIndex="-1"
|
|
aria-labelledby="userModalLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<MapUsers
|
|
projectId={projectId}
|
|
onClose={onModelClose}
|
|
empJobRoles={empJobRoles}
|
|
onSubmit={handleEmpAlicationFormSubmit}
|
|
allocation={employees}
|
|
assignedLoading={assignedLoading}
|
|
setAssignedLoading={setAssignedLoading}
|
|
></MapUsers>
|
|
</div>
|
|
|
|
{IsDeleteModal && (
|
|
<ConfirmModal
|
|
isOpen={IsDeleteModal}
|
|
type="delete"
|
|
header="Removed Employee"
|
|
message="Are you sure you want delete?"
|
|
onSubmit={() => removeAllocation(deleteEmployee)}
|
|
onClose={closeDeleteModal}
|
|
loading={isPending}
|
|
/>
|
|
)}
|
|
|
|
<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-items-center">
|
|
<div className="dataTables_length text-start py-1 px-0 col-md-4 col-12">
|
|
{servicesLoading ? null : assignedServices && assignedServices.length > 0 ? (
|
|
assignedServices.length > 1 ? (
|
|
<label>
|
|
<select
|
|
name="serviceFilter"
|
|
aria-controls="DataTables_Table_0"
|
|
className="form-select form-select-sm"
|
|
aria-label="Select Service"
|
|
value={selectedService}
|
|
onChange={handleServiceChange}
|
|
style={{ fontSize: "0.875rem", height: "32px", width: "190px" }}
|
|
>
|
|
<option value="">All Services</option>
|
|
{assignedServices.map((service) => (
|
|
<option key={service.id} value={service.id}>
|
|
{service.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
) : (
|
|
<div>
|
|
<h5>{assignedServices[0].name}</h5>
|
|
</div>
|
|
)
|
|
) : (
|
|
<div>
|
|
<h5>No Services Assigned</h5>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
|
|
<div className="form-check form-switch me-2 mt-2">
|
|
<input
|
|
type="checkbox"
|
|
className="form-check-input"
|
|
checked={activeEmployee}
|
|
onChange={handleToggleActive}
|
|
id="activeEmployeeSwitch"
|
|
/>
|
|
<label className="form-check-label ms-0 " htmlFor="activeEmployeeSwitch">
|
|
{activeEmployee ? "Active Employees" : "Inactive Employees"}
|
|
</label>
|
|
</div>
|
|
<div className="dataTables_filter d-inline-flex align-items-center ms-2">
|
|
<input
|
|
type="search"
|
|
className="form-control form-control-sm me-4"
|
|
placeholder="Search by Name or Role"
|
|
aria-controls="DataTables_Table_0"
|
|
value={searchTerm}
|
|
onChange={handleSearch}
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
className={`link-button btn-primary btn-sm ${HasAssignUserPermission ? "" : "d-none"
|
|
}`}
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#user-model"
|
|
>
|
|
<i className="bx bx-plus-circle me-2"></i>
|
|
Assign Employee
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="table-responsive text-nowrap">
|
|
{employeeLodaing && <p>Loading..</p>}
|
|
{!employeeLodaing &&
|
|
filteredEmployees &&
|
|
filteredEmployees.length > 0 && (
|
|
<table className="table ">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
<div className="text-start ms-5">Name</div>
|
|
</th>
|
|
<th>Services</th>
|
|
<th>Organization</th>
|
|
<th>Assigned Date</th>
|
|
{!activeEmployee && <th>Release Date</th>}
|
|
<th>Project Role</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="table-border-bottom-0">
|
|
{filteredEmployees &&
|
|
filteredEmployees.map((item) => (
|
|
<tr key={item.id}>
|
|
<td>
|
|
<div className="d-flex justify-content-start align-items-center">
|
|
<Avatar
|
|
firstName={item.firstName}
|
|
lastName={item.lastName}
|
|
/>
|
|
<div className="d-flex flex-column">
|
|
<a
|
|
onClick={() =>
|
|
navigate(
|
|
`/employee/${item.employeeId}?for=attendance`
|
|
)
|
|
}
|
|
className="text-heading text-truncate cursor-pointer"
|
|
>
|
|
<span className="fw-normal">
|
|
{item.firstName} {item.middleName}{" "}
|
|
{item.lastName}
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
<td>{item.serviceName || "N/A"}</td>
|
|
<td>{item.organizationName || "N/A"}</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)}
|
|
>
|
|
{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>
|
|
) : (
|
|
<span>Not in project</span>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
|
|
)}
|
|
{!employeeLodaing && filteredEmployees.length === 0 && (
|
|
<div className="text-center text-muted py-3">
|
|
{activeEmployee
|
|
? "No active employees assigned to the project"
|
|
: "No inactive employees assigned to the project"}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Teams;
|