admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

initial setup for assign emp to project

Browse Source
This commit is contained in:
pramod.mahajan 2025-09-26 11:38:06 +05:30
parent 3fddb686d3
commit 3233043cf2
5 changed files with 124 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/Project/Team/TeamAssignToProject.jsx Normal file
View File

@ -0,0 +1,42 @@
import React from "react";
const TeamAssignToProject = () => {
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>
</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>
<div className="row">
</div>
</div>
);
};
export default TeamAssignToProject;

12
src/components/Project/Team/TeamEmployeeList.jsx Normal file
View File

@ -0,0 +1,12 @@
import React from 'react'
const TeamEmployeeList = ({serviceId,organizationId}) => {
const {} = use
return (
<div>
</div>
)
}
export default TeamEmployeeList

98
src/components/Project/Teams.jsx → src/components/Project/Team/Teams.jsx
View File

@ -1,30 +1,32 @@
import React, { useState, useEffect, useCallback } from "react"; import React, { useState, useEffect, useCallback } from "react";
import MapUsers from "./MapUsers"; import MapUsers from "../MapUsers";
import { Link, NavLink, useNavigate, useParams } from "react-router-dom"; import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
import showToast from "../../services/toastService"; import showToast from "../../../services/toastService";
import Avatar from "../common/Avatar"; import Avatar from "../../common/Avatar";
import moment from "moment"; import moment from "moment";
import ProjectRepository from "../../repositories/ProjectRepository"; import ProjectRepository from "../../../repositories/ProjectRepository";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { changeMaster } from "../../slices/localVariablesSlice"; import { changeMaster } from "../../../slices/localVariablesSlice";
import useMaster from "../../hooks/masterHook/useMaster"; import useMaster from "../../../hooks/masterHook/useMaster";
import { useHasUserPermission } from "../../hooks/useHasUserPermission"; import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
import { ASSIGN_TO_PROJECT } from "../../utils/constants"; import { ASSIGN_TO_PROJECT } from "../../../utils/constants";
import ConfirmModal from "../common/ConfirmModal"; import ConfirmModal from "../../common/ConfirmModal";
import eventBus from "../../services/eventBus"; import eventBus from "../../../services/eventBus";
import { import {
useEmployeesByProjectAllocated, useEmployeesByProjectAllocated,
useManageProjectAllocation, useManageProjectAllocation,
useProjectAssignedServices, useProjectAssignedServices,
} from "../../hooks/useProjects"; } from "../../../hooks/useProjects";
import { useSelectedProject } from "../../slices/apiDataManager"; import { useSelectedProject } from "../../../slices/apiDataManager";
import GlobalModel from "../../common/GlobalModel";
import TeamAssignToProject from "./TeamAssignToProject";
const Teams = () => { const Teams = () => {
const projectId = useSelectedProject(); const projectId = useSelectedProject();
const dispatch = useDispatch(); const dispatch = useDispatch();
const [AssigTeam,setAssignTeam] = useState(false)
const { data, loading } = useMaster(); const { data, loading } = useMaster();
const [isModalOpen, setIsModelOpen] = useState(false); const [isModalOpen, setIsModelOpen] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
@ -38,9 +40,9 @@ const Teams = () => {
const [searchTerm, setSearchTerm] = useState(""); // State for search term const [searchTerm, setSearchTerm] = useState(""); // State for search term
const [selectedService, setSelectedService] = useState(null); const [selectedService, setSelectedService] = useState(null);
const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId); const { data: assignedServices, isLoading: servicesLoading } =
const handleToggleActive = e => setActiveEmployee(e.target.checked); useProjectAssignedServices(projectId);
const handleToggleActive = (e) => setActiveEmployee(e.target.checked);
const handleServiceChange = (e) => { const handleServiceChange = (e) => {
setSelectedService(e.target.value); setSelectedService(e.target.value);
@ -167,7 +169,8 @@ const Teams = () => {
const lowercasedSearchTerm = searchTerm.toLowerCase(); const lowercasedSearchTerm = searchTerm.toLowerCase();
const searchedAndFiltered = statusFiltered.filter((item) => { const searchedAndFiltered = statusFiltered.filter((item) => {
const fullName = `${item.firstName} ${item.middleName} ${item.lastName}`.toLowerCase(); const fullName =
`${item.firstName} ${item.middleName} ${item.lastName}`.toLowerCase();
const roleName = getRole(item.jobRoleId).toLowerCase(); const roleName = getRole(item.jobRoleId).toLowerCase();
const orgName = (item.organizationName || "").toLowerCase(); const orgName = (item.organizationName || "").toLowerCase();
const serviceName = (item.serviceName || "").toLowerCase(); const serviceName = (item.serviceName || "").toLowerCase();
@ -183,7 +186,6 @@ const Teams = () => {
setFilteredEmployees(searchedAndFiltered); setFilteredEmployees(searchedAndFiltered);
}, [employees, activeEmployee, searchTerm, getRole]); }, [employees, activeEmployee, searchTerm, getRole]);
useEffect(() => { useEffect(() => {
filterAndSearchEmployees(); filterAndSearchEmployees();
}, [employees, activeEmployee, searchTerm, filterAndSearchEmployees]); }, [employees, activeEmployee, searchTerm, filterAndSearchEmployees]);
@ -252,6 +254,13 @@ const Teams = () => {
></MapUsers> ></MapUsers>
</div> </div>
{AssigTeam && (
<GlobalModel size="lg" isOpen={AssigTeam} closeModal={()=>setAssignTeam(false)}>
<TeamAssignToProject/>
</GlobalModel>
)}
{IsDeleteModal && ( {IsDeleteModal && (
<ConfirmModal <ConfirmModal
isOpen={IsDeleteModal} isOpen={IsDeleteModal}
@ -269,8 +278,9 @@ const Teams = () => {
<div className="row d-flex justify-content-between mb-4"> <div className="row d-flex justify-content-between mb-4">
<div className="col-md-6 col-12 d-flex align-items-center"> <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="dataTables_length text-start py-1 px-0 col-md-4 col-12">
{!servicesLoading && assignedServices?.length > 0 && ( {!servicesLoading &&
assignedServices.length > 1 ? ( assignedServices?.length > 0 &&
(assignedServices.length > 1 ? (
<label> <label>
<select <select
name="DataTables_Table_0_length" name="DataTables_Table_0_length"
@ -279,7 +289,11 @@ const Teams = () => {
aria-label="Select Service" aria-label="Select Service"
value={selectedService} value={selectedService}
onChange={handleServiceChange} onChange={handleServiceChange}
style={{ fontSize: "0.875rem", height: "35px", width: "190px" }} style={{
fontSize: "0.875rem",
height: "35px",
width: "190px",
}}
> >
<option value="">All Services</option> <option value="">All Services</option>
{assignedServices.map((service) => ( {assignedServices.map((service) => (
@ -291,8 +305,7 @@ const Teams = () => {
</label> </label>
) : ( ) : (
<h5>{assignedServices[0].name}</h5> <h5>{assignedServices[0].name}</h5>
) ))}
)}
</div> </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-items-center">
@ -304,11 +317,15 @@ const Teams = () => {
onChange={handleToggleActive} onChange={handleToggleActive}
id="activeEmployeeSwitch" id="activeEmployeeSwitch"
/> />
<label className="form-check-label ms-0 " htmlFor="activeEmployeeSwitch"> <label
className="form-check-label ms-0 "
htmlFor="activeEmployeeSwitch"
>
{activeEmployee ? "Active Employees" : "Inactive Employees"} {activeEmployee ? "Active Employees" : "Inactive Employees"}
</label> </label>
</div> </div>
<div className="dataTables_filter d-inline-flex align-items-center ms-2">x`` <div className="dataTables_filter d-inline-flex align-items-center ms-2">
x``
<input <input
type="search" type="search"
className="form-control form-control-sm me-4" className="form-control form-control-sm me-4"
@ -318,17 +335,19 @@ const Teams = () => {
onChange={handleSearch} onChange={handleSearch}
/> />
</div> </div>
{HasAssignUserPermission && (
<button
type="button"
<button className={`link-button btn-primary btn-sm `}
type="button" // data-bs-toggle="modal"
className={`link-button btn-primary btn-sm ${HasAssignUserPermission ? "" : "d-none" // data-bs-target="#user-model"
}`} onClick={()=>setAssignTeam(true)}
data-bs-toggle="modal" >
data-bs-target="#user-model" <i className="bx bx-plus-circle me-2"></i>
> Assign Employee
<i className="bx bx-plus-circle me-2"></i> </button>
Assign Employee )}
</button>
</div> </div>
</div> </div>
<div className="table-responsive text-nowrap"> <div className="table-responsive text-nowrap">
@ -387,7 +406,9 @@ const Teams = () => {
{!activeEmployee && ( {!activeEmployee && (
<td> <td>
{item.reAllocationDate {item.reAllocationDate
? moment(item.reAllocationDate).format("DD-MMM-YYYY") ? moment(item.reAllocationDate).format(
"DD-MMM-YYYY"
)
: "Present"} : "Present"}
</td> </td>
)} )}
@ -410,7 +431,9 @@ const Teams = () => {
className="spinner-border spinner-border-sm text-primary" className="spinner-border spinner-border-sm text-primary"
role="status" role="status"
> >
<span className="visually-hidden">Loading...</span> <span className="visually-hidden">
Loading...
</span>
</div> </div>
) : ( ) : (
<i className="bx bx-trash me-1 text-danger"></i> <i className="bx bx-trash me-1 text-danger"></i>
@ -424,7 +447,6 @@ const Teams = () => {
))} ))}
</tbody> </tbody>
</table> </table>
)} )}
{!employeeLodaing && filteredEmployees.length === 0 && ( {!employeeLodaing && filteredEmployees.length === 0 && (
<div className="text-center text-muted py-3"> <div className="text-center text-muted py-3">

15
src/hooks/useProjectAccess.js
View File

@ -6,21 +6,24 @@ import { VIEW_PROJECTS } from "../utils/constants";
import showToast from "../services/toastService"; import showToast from "../services/toastService";
export const useProjectAccess = (projectId) => { export const useProjectAccess = (projectId) => {
const navigate = useNavigate();
const { data: projectPermissions, isLoading, isFetched } = const { data: projectPermissions, isLoading, isFetched } =
useAllProjectLevelPermissions(projectId); useAllProjectLevelPermissions(projectId);
const canView = useHasUserPermission(VIEW_PROJECTS); const canView = useHasUserPermission(VIEW_PROJECTS);
const navigate = useNavigate();
const loading = isLoading || !isFetched;
useEffect(() => { useEffect(() => {
if (projectId && isFetched && !isLoading && !canView) { if (projectId && !loading && !canView) {
showToast("You don't have permission to view project details", "warning"); showToast("You don't have permission to view project details", "warning");
navigate("/projects"); navigate("/projects");
} }
}, [projectId, isFetched, isLoading, canView, navigate]); }, [projectId, loading, canView, navigate]);
return { return {
canView, canView,
loading: isLoading || !isFetched, loading,
}; };
}; };

2
src/pages/project/ProjectDetails.jsx
View File

@ -5,7 +5,7 @@ import { useNavigate } from "react-router-dom";
import ProjectOverview from "../../components/Project/ProjectOverview"; import ProjectOverview from "../../components/Project/ProjectOverview";
import AboutProject from "../../components/Project/AboutProject"; import AboutProject from "../../components/Project/AboutProject";
import ProjectNav from "../../components/Project/ProjectNav"; import ProjectNav from "../../components/Project/ProjectNav";
import Teams from "../../components/Project/Teams"; import Teams from "../../components/Project/Team/Teams";
import ProjectInfra from "../../components/Project/ProjectInfra"; import ProjectInfra from "../../components/Project/ProjectInfra";
import Loader from "../../components/common/Loader"; import Loader from "../../components/common/Loader";
import WorkPlan from "../../components/Project/WorkPlan"; import WorkPlan from "../../components/Project/WorkPlan";