successfullly assigned employe to project
This commit is contained in:
parent
3233043cf2
commit
2ef1fcfd1d
4
public/assets/vendor/css/core.css
vendored
4
public/assets/vendor/css/core.css
vendored
@ -18613,6 +18613,10 @@ li:not(:first-child) .dropdown-item,
|
||||
min-height: 70vh !important;
|
||||
}
|
||||
|
||||
.modal-min-h-{
|
||||
min-height: 60vh !important;
|
||||
}
|
||||
|
||||
.flex-fill {
|
||||
flex: 1 1 auto !important;
|
||||
}
|
||||
|
||||
@ -1,40 +1,78 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import TeamEmployeeList from "./TeamEmployeeList";
|
||||
import { useOrganization } from "../../../hooks/useDirectory";
|
||||
import { useOrganizationsList } from "../../../hooks/useOrganization";
|
||||
import { useProjectAssignedOrganizations } from "../../../hooks/useProjects";
|
||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
||||
|
||||
const TeamAssignToProject = () => {
|
||||
const TeamAssignToProject = ({ closeModal }) => {
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [selectedOrg, setSelectedOrg] = useState(null);
|
||||
const project = useSelectedProject();
|
||||
const { data, isLoading, isError, error } =
|
||||
useProjectAssignedOrganizations(project);
|
||||
return (
|
||||
<div className="container">
|
||||
<p className="fs-5 fs-seminbod ">Assign Employee To Project </p>
|
||||
<div className="d-flex gap-3 mb-2 text-start">
|
||||
<div className="d-block d-sm-flex align-items-center gap-6 flex-fill text-nowrap">
|
||||
<label htmlFor="service" className="mb-0">
|
||||
Select Service
|
||||
</label>
|
||||
<select id="service" className="form-control form-control-sm">
|
||||
<option></option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="d-block d-sm-flex align-items-center gap-6 flex-fill text-nowrap">
|
||||
<label htmlFor="organization" className="mb-0">
|
||||
Select Organization
|
||||
</label>
|
||||
<select id="organization" className="form-control form-control-sm">
|
||||
<option></option>
|
||||
</select>
|
||||
<div class="row align-items-center gx-5">
|
||||
<div class="col">
|
||||
<div className="d-flex flex-grow-1 align-items-center gap-2">
|
||||
{isLoading ? (
|
||||
<select className="form-select form-select-sm w-100" disabled>
|
||||
<option value="">Loading...</option>
|
||||
</select>
|
||||
) : data?.length === 0 ? (
|
||||
<p className="mb-0 badge bg-label-secondary">No organizations found</p>
|
||||
) : (
|
||||
<>
|
||||
<label
|
||||
htmlFor="organization"
|
||||
className="form-label mb-0 text-nowrap"
|
||||
>
|
||||
Select Organization
|
||||
</label>
|
||||
<select
|
||||
id="organization"
|
||||
className="form-select form-select-sm w-100"
|
||||
value={selectedOrg || ""}
|
||||
onChange={(e) => setSelectedOrg(e.target.value)}
|
||||
>
|
||||
<option value="">Select</option>
|
||||
{data.map((org) => (
|
||||
<option key={org.id} value={org.id}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div className="d-flex flex-grow-1 align-items-center gap-2">
|
||||
<label htmlFor="search" className="form-label mb-0 text-nowrap">
|
||||
Search Employee
|
||||
</label>
|
||||
<input
|
||||
id="search"
|
||||
type="search"
|
||||
className="form-control form-control-sm w-100"
|
||||
placeholder="Search..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-block d-sm-flex text-start align-items-center gap-2">
|
||||
<label htmlFor="search">Search Employee</label>
|
||||
<input
|
||||
id="search"
|
||||
type="search"
|
||||
className="form-control form-control-sm w-auto"
|
||||
|
||||
<div className="row modal-min-h" >
|
||||
<TeamEmployeeList
|
||||
organizationId={selectedOrg}
|
||||
searchTerm={searchText}
|
||||
closeModal={closeModal}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,12 +1,250 @@
|
||||
import React from 'react'
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Avatar from "../../common/Avatar";
|
||||
import { useDebounce } from "../../../utils/appUtils";
|
||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
||||
import { useOrganizationEmployees } from "../../../hooks/useOrganization";
|
||||
import {
|
||||
useEmployeesByProjectAllocated,
|
||||
useManageProjectAllocation,
|
||||
} from "../../../hooks/useProjects";
|
||||
import useMaster, { useServices } from "../../../hooks/masterHook/useMaster";
|
||||
import showToast from "../../../services/toastService";
|
||||
|
||||
const TeamEmployeeList = ({serviceId,organizationId}) => {
|
||||
const {} = use
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
|
||||
const selectedProject = useSelectedProject();
|
||||
const debounceSearchTerm = useDebounce(searchTerm, 500);
|
||||
|
||||
const {
|
||||
data: employeesData = [],
|
||||
isLoading,
|
||||
isError,
|
||||
error,
|
||||
} = useOrganizationEmployees(
|
||||
selectedProject,
|
||||
organizationId,
|
||||
debounceSearchTerm
|
||||
);
|
||||
|
||||
const { projectEmployees, loading: employeeLodaing } =
|
||||
useEmployeesByProjectAllocated(selectedProject, null);
|
||||
|
||||
const { data: jobRoles } = useMaster();
|
||||
const { data: services } = useServices();
|
||||
|
||||
const [employees, setEmployees] = useState([]);
|
||||
|
||||
const { mutate: handleAssignEmployee, isPending } =
|
||||
useManageProjectAllocation({
|
||||
onSuccessCallback: () => {
|
||||
closeModal();
|
||||
},
|
||||
onErrorCallback: () => {
|
||||
closeModal();
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (employeesData?.data?.length > 0) {
|
||||
const available = employeesData.data.filter((emp) => {
|
||||
const projEmp = projectEmployees.find((pe) => pe.employeeId === emp.id);
|
||||
return !projEmp || projEmp.isActive === false;
|
||||
});
|
||||
|
||||
setEmployees(
|
||||
available.map((emp) => ({
|
||||
...emp,
|
||||
isChecked: false,
|
||||
jobRole: emp?.jobRoleId || null,
|
||||
serviceId: "",
|
||||
errors: {},
|
||||
}))
|
||||
);
|
||||
}
|
||||
}, [employeesData, projectEmployees, organizationId]);
|
||||
|
||||
const handleCheckboxChange = (index) => {
|
||||
setEmployees((prev) => {
|
||||
const newArr = [...prev];
|
||||
newArr[index].isChecked = !newArr[index].isChecked;
|
||||
newArr[index].errors = {};
|
||||
return newArr;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSelectChange = (index, field, value) => {
|
||||
setEmployees((prev) => {
|
||||
const newArr = [...prev];
|
||||
newArr[index][field] = value;
|
||||
newArr[index].errors[field] = "";
|
||||
return newArr;
|
||||
});
|
||||
};
|
||||
|
||||
const onSubmit = () => {
|
||||
const checkedEmployees = employees.filter((emp) => emp.isChecked);
|
||||
|
||||
setEmployees((prev) => prev.map((emp) => ({ ...emp, errors: {} })));
|
||||
|
||||
if (checkedEmployees.length === 0) {
|
||||
showToast("Select at least one employee", "info");
|
||||
return;
|
||||
}
|
||||
|
||||
let hasError = false;
|
||||
const newEmployees = employees.map((emp) => {
|
||||
const empErrors = {};
|
||||
if (emp.isChecked) {
|
||||
if (!emp.jobRole) {
|
||||
empErrors.jobRole = "Job role is required";
|
||||
hasError = true;
|
||||
}
|
||||
if (!emp.serviceId) {
|
||||
empErrors.serviceId = "Service is required";
|
||||
hasError = true;
|
||||
}
|
||||
}
|
||||
return { ...emp, errors: empErrors };
|
||||
});
|
||||
|
||||
setEmployees(newEmployees);
|
||||
|
||||
if (hasError) return; // stop submit if validation fails
|
||||
|
||||
const payload = checkedEmployees.map((emp) => ({
|
||||
employeeId: emp.id,
|
||||
jobRoleId: emp.jobRole,
|
||||
serviceId: emp.serviceId,
|
||||
projectId: selectedProject,
|
||||
status: true,
|
||||
}));
|
||||
|
||||
handleAssignEmployee({ payload });
|
||||
|
||||
setEmployees((prev) =>
|
||||
prev.map((emp) => ({
|
||||
...emp,
|
||||
isChecked: false,
|
||||
jobRole: "",
|
||||
serviceId: "",
|
||||
errors: {},
|
||||
}))
|
||||
);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return ( <div className="page-min-h d-flex justify-content-center align-items-center "><p className="text-muted">Loading employees...</p></div>) ;
|
||||
}
|
||||
|
||||
export default TeamEmployeeList
|
||||
if (isError) {
|
||||
return (
|
||||
<div className="page-min-h d-flex justify-content-center align-items-center ">
|
||||
{error?.status === 400 ? (
|
||||
<p className="m-0">Enter employee you want to find.</p>
|
||||
) : (
|
||||
<p className="m-0 dange-text">Something went wrong. Please try again later.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
if (employees.length === 0) {
|
||||
return(<div className="page-min-h d-flex justify-content-center align-items-center "><p className="text-muted">No available employees to assign.</p></div>) ;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="h-auto">
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Employee</th>
|
||||
<th>Service</th>
|
||||
<th>Job Role</th>
|
||||
<th>Select</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{employees.map((emp, index) => (
|
||||
<tr key={emp.id}>
|
||||
<td>
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar firstName={emp.firstName} lastName={emp.lastName} />
|
||||
<span className="ms-2 fw-semibold">
|
||||
{emp.firstName} {emp.lastName}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<select
|
||||
value={emp.serviceId}
|
||||
disabled={!emp.isChecked}
|
||||
onChange={(e) =>
|
||||
handleSelectChange(index, "serviceId", e.target.value)
|
||||
}
|
||||
className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${
|
||||
emp.errors.serviceId ? "is-invalid" : ""
|
||||
}`}
|
||||
>
|
||||
<option value="">Select Service</option>
|
||||
{services?.data?.map((s) => (
|
||||
<option key={s.id} value={s.id}>
|
||||
{s.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{emp.errors.serviceId && (
|
||||
<div className="danger-text">{emp.errors.serviceId}</div>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<select
|
||||
value={emp.jobRole}
|
||||
disabled={!emp.isChecked}
|
||||
onChange={(e) =>
|
||||
handleSelectChange(index, "jobRole", e.target.value)
|
||||
}
|
||||
className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${
|
||||
emp.errors.jobRole ? "is-invalid" : ""
|
||||
}`}
|
||||
>
|
||||
<option value="">Select Job Role</option>
|
||||
{jobRoles?.map((r) => (
|
||||
<option key={r.id} value={r.id}>
|
||||
{r.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{emp.errors.jobRole && (
|
||||
<div className="danger-text">{emp.errors.jobRole}</div>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
checked={emp.isChecked}
|
||||
onChange={() => handleCheckboxChange(index)}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="d-flex justify-content-end mt-3 gap-5">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-label-secondary"
|
||||
onClick={() => closeModal()}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button onClick={onSubmit} className="btn btn-primary">
|
||||
{isPending ? "Please Wait..." : "Assign to Project"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TeamEmployeeList;
|
||||
|
||||
@ -24,24 +24,20 @@ import GlobalModel from "../../common/GlobalModel";
|
||||
import TeamAssignToProject from "./TeamAssignToProject";
|
||||
|
||||
const Teams = () => {
|
||||
const projectId = useSelectedProject();
|
||||
const selectedProject = useSelectedProject();
|
||||
const dispatch = useDispatch();
|
||||
const [AssigTeam,setAssignTeam] = useState(false)
|
||||
const { data, loading } = useMaster();
|
||||
const [isModalOpen, setIsModelOpen] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [empJobRoles, setEmpJobRoles] = useState(null);
|
||||
const [AssigTeam, setAssignTeam] = useState(false);
|
||||
const [employees, setEmployees] = useState([]);
|
||||
const [filteredEmployees, setFilteredEmployees] = useState([]);
|
||||
const [removingEmployeeId, setRemovingEmployeeId] = useState(null);
|
||||
const [assignedLoading, setAssignedLoading] = useState(false);
|
||||
const [activeEmployee, setActiveEmployee] = useState(true);
|
||||
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 { data: assignedServices, isLoading: servicesLoading } =
|
||||
useProjectAssignedServices(projectId);
|
||||
useProjectAssignedServices(selectedProject);
|
||||
const {data:empJobRoles,loading} = useMaster()
|
||||
const handleToggleActive = (e) => setActiveEmployee(e.target.checked);
|
||||
|
||||
const handleServiceChange = (e) => {
|
||||
@ -56,7 +52,7 @@ const Teams = () => {
|
||||
projectEmployees,
|
||||
loading: employeeLodaing,
|
||||
refetch,
|
||||
} = useEmployeesByProjectAllocated(projectId, selectedService);
|
||||
} = useEmployeesByProjectAllocated(selectedProject, selectedService,null,activeEmployee);
|
||||
const {
|
||||
mutate: submitAllocations,
|
||||
isPending,
|
||||
@ -65,7 +61,6 @@ const Teams = () => {
|
||||
} = useManageProjectAllocation({
|
||||
onSuccessCallback: () => {
|
||||
setRemovingEmployeeId(null);
|
||||
setAssignedLoading(false);
|
||||
setDeleteEmplyee(null);
|
||||
closeDeleteModal();
|
||||
},
|
||||
@ -74,44 +69,20 @@ const Teams = () => {
|
||||
},
|
||||
});
|
||||
|
||||
const removeAllocation = (item) => {
|
||||
setRemovingEmployeeId(item.id);
|
||||
const handleDelete = (employee) => {
|
||||
let payload = [
|
||||
{
|
||||
employeeId: employee.employeeId,
|
||||
jobRoleId: employee.jobRoleId,
|
||||
projectId: selectedProject,
|
||||
serviceId: selectedService,
|
||||
status: false,
|
||||
},
|
||||
];
|
||||
|
||||
submitAllocations({
|
||||
items: [
|
||||
{
|
||||
empID: item.employeeId,
|
||||
jobRoleId: item.jobRoleId,
|
||||
projectId: projectId,
|
||||
status: false,
|
||||
},
|
||||
],
|
||||
added: false,
|
||||
});
|
||||
submitAllocations({payload:payload});
|
||||
};
|
||||
|
||||
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) => {
|
||||
const getJobRole = (jobRoleId) => {
|
||||
if (loading) return "Loading...";
|
||||
if (!Array.isArray(empJobRoles)) return "Unassigned";
|
||||
if (!jobRoleId) return "Unassigned";
|
||||
@ -119,165 +90,47 @@ const Teams = () => {
|
||||
const role = empJobRoles.find((b) => b.id == jobRoleId);
|
||||
return role ? role.name : "Unassigned";
|
||||
};
|
||||
const openModel = () => {
|
||||
setIsModelOpen(true);
|
||||
};
|
||||
// const employeeHandler = useCallback(
|
||||
// (msg) => {
|
||||
// if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) {
|
||||
// refetch();
|
||||
// }
|
||||
// },
|
||||
// [filteredEmployees, refetch]
|
||||
// );
|
||||
|
||||
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]);
|
||||
// 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>
|
||||
|
||||
|
||||
{AssigTeam && (
|
||||
<GlobalModel size="lg" isOpen={AssigTeam} closeModal={()=>setAssignTeam(false)}>
|
||||
<TeamAssignToProject/>
|
||||
<GlobalModel
|
||||
size="lg"
|
||||
isOpen={AssigTeam}
|
||||
closeModal={() => setAssignTeam(false)}
|
||||
>
|
||||
<TeamAssignToProject closeModal={() => setAssignTeam(false)} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
{IsDeleteModal && (
|
||||
<ConfirmModal
|
||||
isOpen={IsDeleteModal}
|
||||
type="delete"
|
||||
header="Remove Employee"
|
||||
message="Are you sure you want to delete?"
|
||||
onSubmit={() => removeAllocation(deleteEmployee)}
|
||||
onClose={closeDeleteModal}
|
||||
loading={isPending}
|
||||
/>
|
||||
)}
|
||||
<ConfirmModal
|
||||
type="delete"
|
||||
header={"Remove Employee"}
|
||||
message={"Are you sure you want to remove?"}
|
||||
isOpen={!!selectedEmployee}
|
||||
loading={isPending}
|
||||
onSubmit={() => handleDelete(selectedEmployee)}
|
||||
onClose={() => setSelectedEmployee(null)}
|
||||
/>
|
||||
|
||||
<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">
|
||||
<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 ? (
|
||||
@ -306,9 +159,9 @@ const Teams = () => {
|
||||
) : (
|
||||
<h5>{assignedServices[0].name}</h5>
|
||||
))}
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
|
||||
<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">
|
||||
<input
|
||||
type="checkbox"
|
||||
@ -324,25 +177,23 @@ const Teams = () => {
|
||||
{activeEmployee ? "Active Employees" : "Inactive Employees"}
|
||||
</label>
|
||||
</div>
|
||||
<div className="dataTables_filter d-inline-flex align-items-center ms-2">
|
||||
x``
|
||||
<div className="dataTables_filter d-inline-flex align-emps-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}
|
||||
// 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"
|
||||
onClick={()=>setAssignTeam(true)}
|
||||
onClick={() => setAssignTeam(true)}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
Assign Employee
|
||||
@ -352,109 +203,92 @@ const Teams = () => {
|
||||
</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"
|
||||
{projectEmployees && projectEmployees.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>
|
||||
<th>Release Date</th>
|
||||
<th>Project Role</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-border-bottom-0">
|
||||
{projectEmployees &&
|
||||
projectEmployees.map((emp) => (
|
||||
<tr key={emp.id}>
|
||||
<td>
|
||||
<div className="d-flex justify-content-start align-items-center">
|
||||
<Avatar
|
||||
firstName={emp.firstName}
|
||||
lastName={emp.lastName}
|
||||
/>
|
||||
<div className="d-flex flex-column">
|
||||
<a
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/employee/${emp.employeeId}?for=attendance`
|
||||
)
|
||||
: "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)}
|
||||
}
|
||||
className="text-heading text-truncate cursor-pointer"
|
||||
>
|
||||
{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 && (
|
||||
<span className="fw-normal">
|
||||
{emp.firstName}
|
||||
{emp.lastName}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>{emp.serviceName || "N/A"}</td>
|
||||
<td>{emp.organizationName || "N/A"}</td>
|
||||
|
||||
<td>
|
||||
{moment(emp.allocationDate).format("DD-MMM-YYYY")}
|
||||
</td>
|
||||
<td>
|
||||
{emp.reAllocationDate
|
||||
? moment(emp.reAllocationDate).format("DD-MMM-YYYY")
|
||||
: "Present"}
|
||||
</td>
|
||||
<td>
|
||||
<span className="badge bg-label-primary me-1">
|
||||
{getJobRole(emp.jobRoleId)}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{emp.isActive ? (
|
||||
<button
|
||||
aria-label="Delete"
|
||||
type="button"
|
||||
title="Remove from project"
|
||||
className="btn p-0 dropdown-toggle hide-arrow"
|
||||
onClick={() => setSelectedEmployee(emp)}
|
||||
>
|
||||
<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>
|
||||
|
||||
@ -35,6 +35,8 @@ export const useOrganizationModal = () => {
|
||||
};
|
||||
};
|
||||
|
||||
// ================================Query=============================================================
|
||||
|
||||
export const useOrganizationBySPRID = (sprid) => {
|
||||
return useQuery({
|
||||
queryKey: ["organization by", sprid],
|
||||
@ -76,6 +78,25 @@ export const useOrganizationsList = (
|
||||
});
|
||||
};
|
||||
|
||||
export const useOrganizationEmployees = (
|
||||
projectId,
|
||||
organizationId,
|
||||
searchString
|
||||
) => {
|
||||
return useQuery({
|
||||
queryKey: ["OrgEmployees", projectId, organizationId, searchString],
|
||||
queryFn: async () =>
|
||||
await OrganizationRepository.getOrganizationEmployees(
|
||||
projectId,
|
||||
organizationId,
|
||||
searchString
|
||||
),
|
||||
enabled: !!projectId ,
|
||||
});
|
||||
};
|
||||
|
||||
// =================================Mutation========================================================
|
||||
|
||||
export const useCreateOrganization = (onSuccessCallback) => {
|
||||
const useClient = useQueryClient();
|
||||
return useMutation({
|
||||
@ -103,11 +124,11 @@ export const useAssignOrgToProject = (onSuccessCallback) => {
|
||||
mutationFn: async (payload) =>
|
||||
await OrganizationRepository.assignOrganizationToProject(payload),
|
||||
onSuccess: (_, variables) => {
|
||||
const {projectId} = variables
|
||||
const { projectId } = variables;
|
||||
useClient.invalidateQueries({
|
||||
queryKey: ["projectAssignedOrganiztions"],
|
||||
});
|
||||
useClient.invalidateQueries({
|
||||
useClient.invalidateQueries({
|
||||
queryKey: ["projectAssignedOrganization", projectId],
|
||||
});
|
||||
showToast("Organization successfully", "success");
|
||||
|
||||
@ -54,7 +54,7 @@ export const useProjects = () => {
|
||||
export const useEmployeesByProjectAllocated = (
|
||||
projectId,
|
||||
serviceId,
|
||||
organizationId,
|
||||
organizationId,emloyeeeStatus
|
||||
) => {
|
||||
const {
|
||||
data = [],
|
||||
@ -62,12 +62,12 @@ export const useEmployeesByProjectAllocated = (
|
||||
refetch,
|
||||
error,
|
||||
} = useQuery({
|
||||
queryKey: ["empListByProjectAllocated", projectId, serviceId,organizationId],
|
||||
queryKey: ["empListByProjectAllocated", projectId, serviceId,organizationId,emloyeeeStatus],
|
||||
queryFn: async () => {
|
||||
const res = await ProjectRepository.getProjectAllocation(
|
||||
projectId,
|
||||
projectId, serviceId,
|
||||
organizationId,
|
||||
serviceId
|
||||
emloyeeeStatus
|
||||
);
|
||||
return res?.data || res;
|
||||
},
|
||||
@ -413,8 +413,8 @@ export const useManageProjectAllocation = ({
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { mutate, isPending, isSuccess, isError } = useMutation({
|
||||
mutationFn: async ({ items }) => {
|
||||
const response = await ProjectRepository.manageProjectAllocation(items);
|
||||
mutationFn: async ({payload}) => {
|
||||
const response = await ProjectRepository.manageProjectAllocation(payload);
|
||||
return response.data;
|
||||
},
|
||||
onSuccess: (data, variables, context) => {
|
||||
|
||||
@ -10,11 +10,33 @@ const OrganizationRepository = {
|
||||
);
|
||||
},
|
||||
|
||||
getOrganizationBySPRID :(sprid)=>api.get(`/api/Organization/list?sprid=${sprid}`),
|
||||
getOrganizationBySPRID: (sprid) =>
|
||||
api.get(`/api/Organization/list?sprid=${sprid}`),
|
||||
|
||||
assignOrganizationToProject:(data)=>api.post(`/api/Organization/assign/project`,data),
|
||||
assignOrganizationToProject: (data) =>
|
||||
api.post(`/api/Organization/assign/project`, data),
|
||||
|
||||
assignOrganizationToTenanat:(organizationId)=>api.post(`/api/Organization/assign/tenant/${organizationId}`)
|
||||
assignOrganizationToTenanat: (organizationId) =>
|
||||
api.post(`/api/Organization/assign/tenant/${organizationId}`),
|
||||
|
||||
getOrganizationEmployees: (projectId, organizationId, searchString) => {
|
||||
let url = `/api/Employee/list/organizations/${projectId}`;
|
||||
const queryParams = [];
|
||||
|
||||
if (organizationId) {
|
||||
queryParams.push(`organizationId=${organizationId}`);
|
||||
}
|
||||
|
||||
if (searchString) {
|
||||
queryParams.push(`searchString=${encodeURIComponent(searchString)}`);
|
||||
}
|
||||
|
||||
if (queryParams.length > 0) {
|
||||
url += `?${queryParams.join("&")}`;
|
||||
}
|
||||
|
||||
return api.get(url);
|
||||
},
|
||||
};
|
||||
|
||||
export default OrganizationRepository;
|
||||
|
||||
@ -5,19 +5,21 @@ const ProjectRepository = {
|
||||
getProjectByprojectId: (projetid) =>
|
||||
api.get(`/api/project/details/${projetid}`),
|
||||
|
||||
getProjectAllocation: (projectId, organizationId, serviceId) => {
|
||||
let url = `/api/project/allocation/${projectId}`;
|
||||
getProjectAllocation: (projectId, serviceId, organizationId, employeeStatus) => {
|
||||
let url = `/api/project/allocation/${projectId}`;
|
||||
|
||||
const params = [];
|
||||
if (organizationId) params.push(`organizationId=${organizationId}`);
|
||||
if (serviceId) params.push(`serviceId=${serviceId}`);
|
||||
const params = [];
|
||||
if (organizationId) params.push(`organizationId=${organizationId}`);
|
||||
if (serviceId) params.push(`serviceId=${serviceId}`);
|
||||
if (employeeStatus !== undefined) params.push(`includeInactive=${employeeStatus}`);
|
||||
|
||||
if (params.length > 0) {
|
||||
url += `?${params.join("&")}`;
|
||||
}
|
||||
if (params.length > 0) {
|
||||
url += `?${params.join("&")}`;
|
||||
}
|
||||
|
||||
return api.get(url);
|
||||
},
|
||||
|
||||
return api.get(url);
|
||||
},
|
||||
|
||||
getEmployeesByProject: (projectId) =>
|
||||
api.get(`/api/Project/employees/get/${projectId}`),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user