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

Some changes in Header and aboutproject component.

Browse Source
This commit is contained in:
Kartik Sharma 2025-07-30 15:34:04 +05:30
parent 811392448d
commit c3835a3856
2 changed files with 51 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/components/Layout/Header.jsx
View File

@ -13,18 +13,18 @@ import { useProfile } from "../../hooks/useProfile";
import { useLocation, useNavigate, useParams } from "react-router-dom"; import { useLocation, useNavigate, useParams } from "react-router-dom";
import Avatar from "../../components/common/Avatar"; import Avatar from "../../components/common/Avatar";
import { useChangePassword } from "../Context/ChangePasswordContext"; import { useChangePassword } from "../Context/ChangePasswordContext";
import { useProjects, useProjectName } from "../../hooks/useProjects"; // Make sure useProjects is imported if needed elsewhere import { useProjects } from "../../hooks/useProjects";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { useProjectName } from "../../hooks/useProjects";
import eventBus from "../../services/eventBus"; import eventBus from "../../services/eventBus";
import { useHasUserPermission } from "../../hooks/useHasUserPermission"; import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGE_PROJECT } from "../../utils/constants"; import { MANAGE_PROJECT } from "../../utils/constants";
import { useMemo } from "react";
const Header = () => { const Header = () => {
const { profile } = useProfile(); const { profile } = useProfile();
const location = useLocation(); const location = useLocation();
const dispatch = useDispatch(); const dispatch = useDispatch();
const { data, loading: masterLoading } = useMaster(); // Renamed loading to masterLoading for clarity const { data, loading } = useMaster();
const navigate = useNavigate(); const navigate = useNavigate();
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT); const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
@ -33,11 +33,10 @@ const Header = () => {
const isDashboard = const isDashboard =
/^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname); /^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);
// Define the specific project status IDs you want to filter by
const allowedProjectStatusIds = [ const allowedProjectStatusIds = [
"603e994b-a27f-4e5d-a251-f3d69b0498ba", // On Hold "603e994b-a27f-4e5d-a251-f3d69b0498ba",
"cdad86aa-8a56-4ff4-b633-9c629057dfef", // In Progress "cdad86aa-8a56-4ff4-b633-9c629057dfef",
"b74da4c2-d07e-46f2-9919-e75e49b12731", // Active "b74da4c2-d07e-46f2-9919-e75e49b12731",
]; ];
const getRole = (roles, joRoleId) => { const getRole = (roles, joRoleId) => {
@ -58,7 +57,7 @@ const Header = () => {
}; };
AuthRepository.logout(data) AuthRepository.logout(data)
.then((response) => { .then(() => {
localStorage.removeItem("jwtToken"); localStorage.removeItem("jwtToken");
localStorage.removeItem("refreshToken"); localStorage.removeItem("refreshToken");
localStorage.removeItem("user"); localStorage.removeItem("user");
@ -66,10 +65,11 @@ const Header = () => {
clearAllCache(); clearAllCache();
window.location.href = "/auth/login"; window.location.href = "/auth/login";
}) })
.catch((error) => { .catch(() => {
localStorage.removeItem("jwtToken"); localStorage.removeItem("jwtToken");
localStorage.removeItem("refreshToken"); localStorage.removeItem("refreshToken");
localStorage.removeItem("user"); localStorage.removeItem("user");
localStorage.clear();
clearAllCache(); clearAllCache();
window.location.href = "/auth/login"; window.location.href = "/auth/login";
}); });
@ -85,52 +85,55 @@ const Header = () => {
navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`); navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
}; };
const { projectNames, loading: projectLoading, fetchData } = useProjectName(); // Renamed loading to projectLoading const { projectNames, loading: projectLoading, fetchData } = useProjectName();
const selectedProject = useSelectedproject(); const selectedProject = useSelectedproject();
// Filter projects for the dropdown based on the current path and allowed statuses const projectsForDropdown = isDashboard
const projectsForDropdown = useMemo(() => { ? projectNames
if (!projectNames) return []; // Return empty array if projectNames is not yet fetched : projectNames?.filter(project =>
allowedProjectStatusIds.includes(project.projectStatusId)
);
return isDashboard let currentProjectDisplayName;
? projectNames if (projectLoading) {
: projectNames?.filter(project => allowedProjectStatusIds.includes(project.projectStatusId)); currentProjectDisplayName = "Loading...";
}, [projectNames, isDashboard, allowedProjectStatusIds]); } else if (!projectNames || projectNames.length === 0) {
currentProjectDisplayName = "No Projects Assigned";
} else if (projectNames.length === 1) {
// Determine the display text for the project dropdown currentProjectDisplayName = projectNames[0].name;
let displayText = "Loading..."; // Default to loading } else {
if (!projectLoading && projectNames) { // Only update if not loading and projectNames is available
if (selectedProject === null) { if (selectedProject === null) {
displayText = "All Projects"; currentProjectDisplayName = "All Projects";
} else { } else {
// Find the selected project from the full projectNames list const selectedProjectObj = projectNames.find(
const selectedProjectObj = projectNames.find( // Use projectNames directly here
(p) => p?.id === selectedProject (p) => p?.id === selectedProject
); );
displayText = selectedProjectObj ? selectedProjectObj.name : "All Projects"; // Fallback to "All Projects" if selected project is not found currentProjectDisplayName = selectedProjectObj ? selectedProjectObj.name : "Unknown Project";
} }
} }
const { openChangePassword } = useChangePassword(); const { openChangePassword } = useChangePassword();
useEffect(() => { useEffect(() => {
if ( if (
projectNames && projectNames &&
projectNames.length > 0 && projectNames.length > 0 &&
selectedProject === undefined && // Only set default if no project is currently selected selectedProject === undefined &&
!getCachedData("hasReceived") // Check if this flag is still relevant for your caching strategy !getCachedData("hasReceived")
) { ) {
if (isDashboard) { if (projectNames.length === 1) {
dispatch(setProjectId(null)); // Always set to null for "All Projects" on Dashboard initial load dispatch(setProjectId(projectNames[0]?.id || null));
} else { } else {
const firstAllowedProject = projectNames.find(project => allowedProjectStatusIds.includes(project.projectStatusId)); if (isDashboard) {
dispatch(setProjectId(firstAllowedProject?.id || null)); // Fallback to null if no allowed projects dispatch(setProjectId(null));
} else {
const firstAllowedProject = projectNames.find(project => allowedProjectStatusIds.includes(project.projectStatusId));
dispatch(setProjectId(firstAllowedProject?.id || null));
}
} }
} }
}, [projectNames, selectedProject, dispatch, isDashboard, allowedProjectStatusIds]); }, [projectNames, selectedProject, dispatch, isDashboard]);
const handler = useCallback( const handler = useCallback(
@ -174,19 +177,15 @@ const Header = () => {
}; };
}, [handler, newProjectHandler]); }, [handler, newProjectHandler]);
const handleProjectChange = (project) => {
dispatch(setProjectId(project));
const handleProjectChange = (projectId) => { if (isProjectPath && project !== null) {
dispatch(setProjectId(projectId)); navigate("/projects/details");
if (isProjectPath && projectId !== null) {
navigate(`/projects/details?resetDates=true`);
} else if (isProjectPath && projectId === null) {
navigate("/projects");
} else if (isDashboard) {
} }
}; };
const shouldShowDropdown = const shouldShowDropdown = projectNames && projectNames.length > 1;
isDashboard || (projectsForDropdown && projectsForDropdown.length > 1);
return ( return (
<nav <nav
@ -209,29 +208,21 @@ const Header = () => {
<div className="align-items-center"> <div className="align-items-center">
<i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i> <i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
<div className="btn-group"> <div className="btn-group">
{/* Conditionally render the button based on shouldShowDropdown */}
{shouldShowDropdown ? ( {shouldShowDropdown ? (
<button <button
className={`btn btn-sm-sm btn-xl ${projectsForDropdown && projectsForDropdown.length > 0 ? "dropdown-toggle" : "" className={`btn btn-sm-sm btn-xl dropdown-toggle px-1`}
} px-1`}
type="button" type="button"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
aria-expanded="false" aria-expanded="false"
> >
{displayText} {currentProjectDisplayName}
</button> </button>
) : ( ) : (
// If only one project or no projects (and not dashboard), just display its name/message without a dropdown
<span className="btn btn-sm-sm btn-xl px-1"> <span className="btn btn-sm-sm btn-xl px-1">
{projectLoading ? "Loading..." : {currentProjectDisplayName}
(projectsForDropdown && projectsForDropdown.length === 1
? projectsForDropdown[0].name
: (isDashboard ? "All Projects" : "No Projects")) // Handle "No Projects" for non-dashboard views
}
</span> </span>
)} )}
{/* Only render the dropdown menu if shouldShowDropdown is true AND there are projects to show */}
{shouldShowDropdown && projectsForDropdown && projectsForDropdown.length > 0 && ( {shouldShowDropdown && projectsForDropdown && projectsForDropdown.length > 0 && (
<ul <ul
className="dropdown-menu" className="dropdown-menu"
@ -241,13 +232,13 @@ const Header = () => {
<li> <li>
<button <button
className="dropdown-item" className="dropdown-item"
onClick={() => handleProjectChange(null)} // Set projectId to null for "All Projects" onClick={() => handleProjectChange(null)}
> >
All Projects All Projects
</button> </button>
</li> </li>
)} )}
{[...projectsForDropdown] // Sort the conditionally filtered list {[...projectsForDropdown]
.sort((a, b) => a?.name?.localeCompare(b.name)) .sort((a, b) => a?.name?.localeCompare(b.name))
.map((project) => ( .map((project) => (
<li key={project?.id}> <li key={project?.id}>

4
src/components/Project/AboutProject.jsx
View File

@ -8,6 +8,7 @@ import { MANAGE_PROJECT } from "../../utils/constants";
import GlobalModel from "../common/GlobalModel"; import GlobalModel from "../common/GlobalModel";
import ManageProjectInfo from "./ManageProjectInfo"; import ManageProjectInfo from "./ManageProjectInfo";
import { useQueryClient } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";
import { useSelectedproject } from "../../slices/apiDataManager";
const AboutProject = () => { const AboutProject = () => {
const [IsOpenModal, setIsOpenModal] = useState(false); const [IsOpenModal, setIsOpenModal] = useState(false);
@ -19,7 +20,8 @@ const AboutProject = () => {
const ClientQuery = useQueryClient(); const ClientQuery = useQueryClient();
// *** MODIFIED LINE: Get projectId from Redux store using useSelector *** // *** MODIFIED LINE: Get projectId from Redux store using useSelector ***
const projectId = useSelector((store) => store.localVariables.projectId); // const projectId = useSelector((store) => store.localVariables.projectId);
const projectId = useSelectedproject();
const manageProject = useHasUserPermission(MANAGE_PROJECT); const manageProject = useHasUserPermission(MANAGE_PROJECT);
const { projects_Details, isLoading, error, refetch } = useProjectDetails(projectId); // Pass projectId from useSelector const { projects_Details, isLoading, error, refetch } = useProjectDetails(projectId); // Pass projectId from useSelector