Adding Dropdown and Organization Column in Teams #409
@ -17,12 +17,11 @@ import eventBus from "../../services/eventBus";
|
||||
import {
|
||||
useEmployeesByProjectAllocated,
|
||||
useManageProjectAllocation,
|
||||
useProjectAssignedServices,
|
||||
} from "../../hooks/useProjects";
|
||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
|
||||
const Teams = () => {
|
||||
// const {projectId} = useParams()
|
||||
// const projectId = useSelector((store)=>store.localVariables.projectId)
|
||||
const projectId = useSelectedProject();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
@ -37,6 +36,14 @@ const Teams = () => {
|
||||
const [activeEmployee, setActiveEmployee] = useState(true);
|
||||
const [deleteEmployee, setDeleteEmplyee] = useState(null);
|
||||
const [searchTerm, setSearchTerm] = useState(""); // State for search term
|
||||
const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
|
||||
const handleToggleActive = e => setActiveEmployee(e.target.checked);
|
||||
|
||||
const [selectedService, setSelectedService] = useState("");
|
||||
|
||||
const handleServiceChange = (e) => {
|
||||
setSelectedService(e.target.value);
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
@ -136,7 +143,6 @@ const Teams = () => {
|
||||
useEffect(() => {
|
||||
if (projectEmployees) {
|
||||
setEmployees(projectEmployees);
|
||||
//setFilteredEmployees(projectEmployees?.filter((emp) => emp.isActive));
|
||||
const filtered = projectEmployees.filter((emp) => emp.isActive);
|
||||
setFilteredEmployees(filtered);
|
||||
}
|
||||
@ -179,13 +185,6 @@ const Teams = () => {
|
||||
|
||||
const handleFilterEmployee = (e) => {
|
||||
const filterValue = e.target.value;
|
||||
// if (filterValue === "true") {
|
||||
// setActiveEmployee(true);
|
||||
// setFilteredEmployees(employees.filter((emp) => emp.isActive));
|
||||
// } else {
|
||||
// setFilteredEmployees(employees.filter((emp) => !emp.isActive));
|
||||
// setActiveEmployee(false);
|
||||
// }
|
||||
setActiveEmployee(filterValue === "true");
|
||||
setSearchTerm("");
|
||||
};
|
||||
@ -264,6 +263,66 @@ const Teams = () => {
|
||||
<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 ? (
|
||||
<span></span>
|
||||
) : assignedServices?.length > 1 ? (
|
||||
<label>
|
||||
<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: "32px", width: "190px" }}
|
||||
>
|
||||
{assignedServices.map((service) => (
|
||||
<option key={service.id} value={service.id}>
|
||||
{service.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
|
||||
}}
|
||||
>
|
||||
{/* fier fitting */}
|
||||
{assignedServices?.length === 1
|
||||
?<h5>{ assignedServices[0].name}</h5>
|
||||
: "No service available"}
|
||||
</div>
|
||||
)}
|
||||
</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> */}
|
||||
|
||||
</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"
|
||||
@ -274,31 +333,10 @@ const Teams = () => {
|
||||
onChange={handleSearch}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
|
||||
<div
|
||||
className="dataTables_length text-start py-2 px-2"
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
<label>
|
||||
<select
|
||||
name="DataTables_Table_0_length"
|
||||
aria-controls="DataTables_Table_0"
|
||||
className="form-select form-select-sm"
|
||||
onChange={handleFilterEmployee}
|
||||
// value={false}
|
||||
aria-label=""
|
||||
defaultValue="true"
|
||||
>
|
||||
<option value="true">Active Employee</option>
|
||||
<option value="false">In-Active Employee</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={`link-button btn-primary btn-sm ${
|
||||
HasAssignUserPermission ? "" : "d-none"
|
||||
className={`link-button btn-primary btn-sm ${HasAssignUserPermission ? "" : "d-none"
|
||||
}`}
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#user-model"
|
||||
@ -319,6 +357,7 @@ const Teams = () => {
|
||||
<th>
|
||||
<div className="text-start ms-5">Name</div>
|
||||
</th>
|
||||
<th>Organization</th>
|
||||
<th>Assigned Date</th>
|
||||
{!activeEmployee && <th>Release Date</th>}
|
||||
<th>Project Role</th>
|
||||
@ -334,7 +373,7 @@ const Teams = () => {
|
||||
<Avatar
|
||||
firstName={item.firstName}
|
||||
lastName={item.lastName}
|
||||
></Avatar>
|
||||
/>
|
||||
<div className="d-flex flex-column">
|
||||
<a
|
||||
onClick={() =>
|
||||
@ -352,18 +391,16 @@ const Teams = () => {
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>{item.organizationName || "N/A"}</td>
|
||||
|
||||
<td>
|
||||
{" "}
|
||||
{moment(item.allocationDate).format(
|
||||
"DD-MMM-YYYY"
|
||||
)}{" "}
|
||||
{moment(item.allocationDate).format("DD-MMM-YYYY")}
|
||||
</td>
|
||||
{!activeEmployee && (
|
||||
<td>
|
||||
{item.reAllocationDate
|
||||
? moment(item.reAllocationDate).format(
|
||||
"DD-MMM-YYYY"
|
||||
)
|
||||
? moment(item.reAllocationDate).format("DD-MMM-YYYY")
|
||||
: "Present"}
|
||||
</td>
|
||||
)}
|
||||
@ -373,7 +410,7 @@ const Teams = () => {
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{item.isActive && (
|
||||
{item.isActive ? (
|
||||
<button
|
||||
aria-label="Delete"
|
||||
type="button"
|
||||
@ -381,27 +418,26 @@ const Teams = () => {
|
||||
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>
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<i className="bx bx-trash me-1 text-danger"></i>
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<span>Not in project</span>
|
||||
)}
|
||||
{!item.isActive && <span>Not in project</span>}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
)}
|
||||
{!employeeLodaing && filteredEmployees.length === 0 && (
|
||||
<div className="text-center text-muted py-3">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user