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 MapUsers from "./MapUsers";
import MapUsers from "../MapUsers";
import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
import showToast from "../../services/toastService";
import Avatar from "../common/Avatar";
import showToast from "../../../services/toastService";
import Avatar from "../../common/Avatar";
import moment from "moment";
import ProjectRepository from "../../repositories/ProjectRepository";
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 { 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";
} from "../../../hooks/useProjects";
import { useSelectedProject } from "../../../slices/apiDataManager";
import GlobalModel from "../../common/GlobalModel";
import TeamAssignToProject from "./TeamAssignToProject";
const Teams = () => {
const projectId = useSelectedProject();
const dispatch = useDispatch();
const [AssigTeam,setAssignTeam] = useState(false)
const { data, loading } = useMaster();
const [isModalOpen, setIsModelOpen] = useState(false);
const [error, setError] = useState("");
@ -38,9 +40,9 @@ const Teams = () => {
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 { data: assignedServices, isLoading: servicesLoading } =
useProjectAssignedServices(projectId);
const handleToggleActive = (e) => setActiveEmployee(e.target.checked);
const handleServiceChange = (e) => {
setSelectedService(e.target.value);
@ -167,7 +169,8 @@ const Teams = () => {
const lowercasedSearchTerm = searchTerm.toLowerCase();
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 orgName = (item.organizationName || "").toLowerCase();
const serviceName = (item.serviceName || "").toLowerCase();
@ -183,7 +186,6 @@ const Teams = () => {
setFilteredEmployees(searchedAndFiltered);
}, [employees, activeEmployee, searchTerm, getRole]);
useEffect(() => {
filterAndSearchEmployees();
}, [employees, activeEmployee, searchTerm, filterAndSearchEmployees]);
@ -252,6 +254,13 @@ const Teams = () => {
></MapUsers>
</div>
{AssigTeam && (
<GlobalModel size="lg" isOpen={AssigTeam} closeModal={()=>setAssignTeam(false)}>
<TeamAssignToProject/>
</GlobalModel>
)}
{IsDeleteModal && (
<ConfirmModal
isOpen={IsDeleteModal}
@ -269,8 +278,9 @@ const Teams = () => {
<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 && assignedServices?.length > 0 && (
assignedServices.length > 1 ? (
{!servicesLoading &&
assignedServices?.length > 0 &&
(assignedServices.length > 1 ? (
<label>
<select
name="DataTables_Table_0_length"
@ -279,7 +289,11 @@ const Teams = () => {
aria-label="Select Service"
value={selectedService}
onChange={handleServiceChange}
style={{ fontSize: "0.875rem", height: "35px", width: "190px" }}
style={{
fontSize: "0.875rem",
height: "35px",
width: "190px",
}}
>
<option value="">All Services</option>
{assignedServices.map((service) => (
@ -291,8 +305,7 @@ const Teams = () => {
</label>
) : (
<h5>{assignedServices[0].name}</h5>
)
)}
))}
</div>
</div>
<div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
@ -304,11 +317,15 @@ const Teams = () => {
onChange={handleToggleActive}
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"}
</label>
</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
type="search"
className="form-control form-control-sm me-4"
@ -318,17 +335,19 @@ const Teams = () => {
onChange={handleSearch}
/>
</div>
{HasAssignUserPermission && (
<button
type="button"
<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>
className={`link-button btn-primary btn-sm `}
// data-bs-toggle="modal"
// data-bs-target="#user-model"
onClick={()=>setAssignTeam(true)}
>
<i className="bx bx-plus-circle me-2"></i>
Assign Employee
</button>
)}
</div>
</div>
<div className="table-responsive text-nowrap">
@ -387,7 +406,9 @@ const Teams = () => {
{!activeEmployee && (
<td>
{item.reAllocationDate
? moment(item.reAllocationDate).format("DD-MMM-YYYY")
? moment(item.reAllocationDate).format(
"DD-MMM-YYYY"
)
: "Present"}
</td>
)}
@ -410,7 +431,9 @@ const Teams = () => {
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>
@ -424,7 +447,6 @@ const Teams = () => {
))}
</tbody>
</table>
)}
{!employeeLodaing && filteredEmployees.length === 0 && (
<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";
export const useProjectAccess = (projectId) => {
const navigate = useNavigate();
const { data: projectPermissions, isLoading, isFetched } =
useAllProjectLevelPermissions(projectId);
const canView = useHasUserPermission(VIEW_PROJECTS);
const navigate = useNavigate();
const canView = useHasUserPermission(VIEW_PROJECTS);
const loading = isLoading || !isFetched;
useEffect(() => {
if (projectId && isFetched && !isLoading && !canView) {
if (projectId && !loading && !canView) {
showToast("You don't have permission to view project details", "warning");
navigate("/projects");
}
}, [projectId, isFetched, isLoading, canView, navigate]);
}, [projectId, loading, canView, navigate]);
return {
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 AboutProject from "../../components/Project/AboutProject";
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 Loader from "../../components/common/Loader";
import WorkPlan from "../../components/Project/WorkPlan";