Merge pull request 'pramod_Task-#444 : Add "Assign Project" Feature in Employee Action Menu' (#191) from pramod_Task-#444 into Feature_Directory
Reviewed-on: #191
This commit is contained in:
commit
2386bd0e74
@ -4,6 +4,7 @@ import ProjectRepository from "../repositories/ProjectRepository";
|
||||
import { useProfile } from "./useProfile";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { setProjectId } from "../slices/localVariablesSlice";
|
||||
import EmployeeList from "../components/Directory/EmployeeList";
|
||||
|
||||
export const useProjects = () => {
|
||||
|
||||
@ -130,3 +131,48 @@ export const useProjectDetails = (projectId) => {
|
||||
|
||||
return { projects_Details, loading, error, refetch: fetchData }
|
||||
}
|
||||
|
||||
|
||||
export const useProjectsByEmployee = ( employeeId ) =>
|
||||
{
|
||||
const [projectList, setProjectList] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const fetchProjects = async (id) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(''); // clear previous error
|
||||
const res = await ProjectRepository.getProjectsByEmployee(id);
|
||||
setProjectList(res.data);
|
||||
cacheData( 'ProjectsByEmployee', {data: res.data, employeeId: id} );
|
||||
setLoading(false)
|
||||
} catch (err) {
|
||||
setError( err?.message || 'Failed to fetch projects' );
|
||||
setLoading(false)
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!employeeId) return;
|
||||
|
||||
const cache_project = getCachedData('ProjectsByEmployee');
|
||||
|
||||
if (
|
||||
!cache_project?.data ||
|
||||
cache_project?.employeeId !== employeeId
|
||||
) {
|
||||
fetchProjects(employeeId);
|
||||
} else {
|
||||
setProjectList(cache_project.data);
|
||||
}
|
||||
}, [employeeId]);
|
||||
|
||||
return {
|
||||
projectList,
|
||||
loading,
|
||||
error,
|
||||
refetch : fetchProjects
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
182
src/pages/employee/AssignToProject.jsx
Normal file
182
src/pages/employee/AssignToProject.jsx
Normal file
@ -0,0 +1,182 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useProjects, useProjectsByEmployee } from "../../hooks/useProjects";
|
||||
import EmployeeList from "./EmployeeList";
|
||||
import showToast from "../../services/toastService";
|
||||
import ProjectRepository from "../../repositories/ProjectRepository";
|
||||
|
||||
const AssignToProject = ({ employee, onClose }) => {
|
||||
const { projects, loading } = useProjects();
|
||||
const { projectList,loading:selectedProjectLoding ,refetch} = useProjectsByEmployee(employee?.id);
|
||||
const [isSubmitting,setSubmitting] = useState(false)
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [checkedProjects, setCheckedProjects] = useState({});
|
||||
const [selectedEmployees, setSelectedEmployees] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (projectList && projectList.length > 0) {
|
||||
const initialChecked = {};
|
||||
const initialSelected = [];
|
||||
|
||||
projectList.forEach((project) => {
|
||||
initialChecked[project.id] = true;
|
||||
initialSelected.push({
|
||||
jobRoleId: employee.jobRoleId,
|
||||
projectId: project.id,
|
||||
status: true,
|
||||
});
|
||||
});
|
||||
|
||||
setCheckedProjects(initialChecked);
|
||||
setSelectedEmployees(initialSelected);
|
||||
} else {
|
||||
setCheckedProjects({});
|
||||
setSelectedEmployees([]);
|
||||
}
|
||||
}, [projectList, employee?.id]);
|
||||
|
||||
const handleSearchChange = (e) => {
|
||||
setSearchTerm(e.target.value.toLowerCase());
|
||||
};
|
||||
|
||||
const handleCheckboxChange = (projectId) => {
|
||||
const isChecked = !checkedProjects[projectId];
|
||||
|
||||
setCheckedProjects((prev) => ({
|
||||
...prev,
|
||||
[projectId]: isChecked,
|
||||
}));
|
||||
};
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const initiallyAssigned = new Set(projectList.map((p) => p.id.toString()));
|
||||
const changes = [];
|
||||
|
||||
Object.entries(checkedProjects).forEach(([projectId, isChecked]) => {
|
||||
const wasAssigned = initiallyAssigned.has(projectId);
|
||||
|
||||
if (wasAssigned && !isChecked) {
|
||||
changes.push({
|
||||
projectId: projectId,
|
||||
jobRoleId: employee.jobRoleId,
|
||||
status: false,
|
||||
});
|
||||
}
|
||||
|
||||
if (!wasAssigned && isChecked) {
|
||||
changes.push({
|
||||
projectId: projectId,
|
||||
jobRoleId: employee.jobRoleId,
|
||||
status: true,
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if (changes.length === 0) {
|
||||
showToast("Make change before.", "info");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setSubmitting(true)
|
||||
await ProjectRepository.updateProjectsByEmployee(employee.id, changes)
|
||||
showToast( "Project assignments updated.", "success" );
|
||||
setSubmitting(false)
|
||||
onClose();
|
||||
refetch(employee.id)
|
||||
} catch (error) {
|
||||
const msg = error.response?.data?.message || error.message || "Error during API call.";
|
||||
showToast( msg, "error" );
|
||||
setSubmitting(false)
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
const handleClosedModal = () => {
|
||||
onClose();
|
||||
};
|
||||
|
||||
const filteredProjects = projects.filter((project) =>
|
||||
project.name.toLowerCase().includes(searchTerm)
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="p-2 p-md-0">
|
||||
<p className="fw-semibold fs-6 m-0">Assign to Project</p>
|
||||
|
||||
<div className="row my-1">
|
||||
<div className="col-12 col-sm-6 col-md-6 mt-2">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search projects..."
|
||||
value={searchTerm}
|
||||
onChange={handleSearchChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-4">
|
||||
<div className="spinner-border text-primary" role="status" />
|
||||
<p className="mt-2">Loading projects...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<table className="table mt-2 mb-2">
|
||||
<thead>
|
||||
<tr className="text-start">
|
||||
<th>Select Project</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredProjects.length > 0 ? (
|
||||
filteredProjects.map((project) => (
|
||||
<tr key={project.id}>
|
||||
<td className="d-flex align-items-center">
|
||||
<div className="form-check d-flex justify-content-start align-items-center">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id={`project-${project.id}`}
|
||||
checked={checkedProjects[project.id] || false}
|
||||
onChange={() => handleCheckboxChange( project.id )}
|
||||
disabled={selectedProjectLoding}
|
||||
|
||||
/>
|
||||
<label
|
||||
className="form-check-label ms-2"
|
||||
htmlFor={`project-${project.id}`}
|
||||
>
|
||||
{project.name}
|
||||
</label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td className="text-center text-muted py-3">No projects found.</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div className="d-flex justify-content-center gap-2 mt-2">
|
||||
<button onClick={handleSubmit} className="btn btn-primary btn-sm" disabled={selectedProjectLoding || loading || isSubmitting }>
|
||||
{isSubmitting ? "Please Wait...":"Submit"}
|
||||
</button>
|
||||
<button onClick={handleClosedModal} className="btn btn-secondary btn-sm" disabled={isSubmitting}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AssignToProject;
|
||||
@ -22,6 +22,8 @@ import {
|
||||
import EmployeeRepository from "../../repositories/EmployeeRepository";
|
||||
import ManageEmployee from "../../components/Employee/ManageEmployee";
|
||||
import ConfirmModal from "../../components/common/ConfirmModal";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import AssignToProject from "./AssignToProject";
|
||||
|
||||
const EmployeeList = () => {
|
||||
const { profile: loginUser } = useProfile();
|
||||
@ -47,7 +49,8 @@ const EmployeeList = () => {
|
||||
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const [selectedEmpFordelete, setSelectedEmpFordelete] = useState(null);
|
||||
const [employeeLodaing, setemployeeLodaing] = useState(false);
|
||||
|
||||
const [ selectedEmployee, setSelectEmployee ] = useState( null )
|
||||
const [IsOpenAsssingModal,setOpenAssignModal] = useState(false)
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSearch = (e) => {
|
||||
@ -189,7 +192,11 @@ const EmployeeList = () => {
|
||||
setSelectedEmpFordelete(employee);
|
||||
setIsDeleteModalOpen(true);
|
||||
};
|
||||
|
||||
const handleCloseAssignModal = () =>
|
||||
{
|
||||
setOpenAssignModal( false )
|
||||
setSelectEmployee(null)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{isCreateModalOpen && (
|
||||
@ -213,7 +220,8 @@ const EmployeeList = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>)}
|
||||
</div> )}
|
||||
|
||||
|
||||
{IsDeleteModalOpen && (
|
||||
<div
|
||||
@ -240,6 +248,11 @@ const EmployeeList = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{IsOpenAsssingModal && ( <GlobalModel isOpen={IsOpenAsssingModal} closeModal={()=>setOpenAssignModal(false)}>
|
||||
<AssignToProject employee={selectedEmployee} onClose={() => setOpenAssignModal( false )} />
|
||||
</GlobalModel>)}
|
||||
|
||||
|
||||
<div className="container-xxl flex-grow-1 container-p-y">
|
||||
<Breadcrumb
|
||||
data={[
|
||||
@ -642,6 +655,19 @@ const EmployeeList = () => {
|
||||
<i className="bx bx-cog bx-sm"></i>{" "}
|
||||
Manage Role
|
||||
</button>
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
|
||||
onClick={() =>
|
||||
{
|
||||
setSelectEmployee( item ),
|
||||
setOpenAssignModal(true)
|
||||
}
|
||||
}
|
||||
>
|
||||
<i class='bx bx-select-multiple'></i>{" "}
|
||||
Assign Project
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -20,7 +20,9 @@ const ProjectRepository = {
|
||||
deleteProjectTask:(id)=> api.delete(`/api/project/task/${id}`),
|
||||
|
||||
updateProject: (id, data) => api.put(`/api/project/update/${id}`, data),
|
||||
deleteProject: (id) => api.delete(`/projects/${id}`),
|
||||
deleteProject: ( id ) => api.delete( `/projects/${ id }` ),
|
||||
getProjectsByEmployee: ( id ) => api.get( `/api/project/assigned-projects/${ id }` ),
|
||||
updateProjectsByEmployee:(id,data)=>api.post(`/api/project/assign-projects/${id}`,data)
|
||||
};
|
||||
|
||||
export const TasksRepository = {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user