When user is Assign to single project then dropdown and All Projects is not seen.

This commit is contained in:
Kartik Sharma 2025-07-23 11:47:11 +05:30
parent 2bc0939d64
commit 18fb3a0f09

View File

@ -33,11 +33,9 @@ const Header = () => {
/^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);
// Define the specific project status IDs you want to filter by
// Changed to explicitly include only 'Active', 'On Hold', 'In Progress'
const allowedProjectStatusIds = [
"603e994b-a27f-4e5d-a251-f3d69b0498ba", // On Hold
"cdad86aa-8a56-4ff4-b633-9c629057dfef", // In Progress
"ef1c356e-0fe0-42df-a5d3-8daee355492d", // Inactive - Removed as per requirement
"b74da4c2-d07e-46f2-9919-e75e49b12731", // Active
];
@ -68,7 +66,6 @@ const Header = () => {
window.location.href = "/auth/login";
})
.catch((error) => {
// Even if logout API fails, clear local storage and redirect
localStorage.removeItem("jwtToken");
localStorage.removeItem("refreshToken");
localStorage.removeItem("user");
@ -94,9 +91,10 @@ const Header = () => {
);
// Conditional filtering for projectsForDropdown
// If on Dashboard, show all projects. Otherwise, filter by allowedProjectStatusIds.
// This list will be shown in the dropdown for regular users (without MANAGE_PROJECT permission)
// On Dashboard, it will contain all projects. On other pages, only allowed statuses.
const projectsForDropdown = isDashboard
? projectNames // On dashboard, show all projects
? projectNames // On dashboard, show all projects for selection if managing permission is given
: projectNames?.filter(project =>
allowedProjectStatusIds.includes(project.projectStatusId)
);
@ -106,11 +104,9 @@ const Header = () => {
if (selectedProject === null) {
displayText = "All Projects";
} else if (selectedProject) {
// Find the selected project from the full projectNames list
const selectedProjectObj = projectNames?.find(
(p) => p?.id === selectedProject
);
// Fallback to selectedProject ID if name not found during loading or mismatch
displayText = selectedProjectObj ? selectedProjectObj.name : selectedProject;
} else if (projectLoading) {
displayText = "Loading...";
@ -125,15 +121,22 @@ const Header = () => {
selectedProject === undefined &&
!getCachedData("hasReceived")
) {
if (isDashboard) {
dispatch(setProjectId(null)); // Always set to null for "All Projects" on Dashboard initial load
if (isDashboard && HasManageProjectPermission) {
dispatch(setProjectId(null)); // "All Projects" default for managers on dashboard
} else if (isDashboard && !HasManageProjectPermission) {
// If regular user on dashboard, and only one project, select that one
if (projectNames.length === 1) {
dispatch(setProjectId(projectNames[0].id));
} else {
dispatch(setProjectId(null)); // If multiple projects, default to "All Projects" for regular users on dashboard
}
} else {
// If not dashboard, set to the first project that matches the allowed statuses if available
const firstAllowedProject = projectNames.find(project => allowedProjectStatusIds.includes(project.projectStatusId));
dispatch(setProjectId(firstAllowedProject?.id || null)); // Fallback to null if no allowed projects
dispatch(setProjectId(firstAllowedProject?.id || null));
}
}
}, [projectNames, selectedProject, dispatch, isDashboard]);
}, [projectNames, selectedProject, dispatch, isDashboard, HasManageProjectPermission]);
const handler = useCallback(
@ -178,17 +181,27 @@ const Header = () => {
}, [handler, newProjectHandler]);
const handleProjectChange = (project) => {
dispatch(setProjectId(project)); // Always set the projectId
dispatch(setProjectId(project));
if (isProjectPath && project !== null) {
navigate("/projects/details"); // Navigate only if on /projects and a specific project is selected
navigate("/projects/details");
}
// No navigation if on dashboard or if "All Projects" is selected
};
// Determine if the dropdown should be shown
const shouldShowDropdown =
isDashboard || (projectsForDropdown && projectsForDropdown.length > 1);
const shouldShowDropdown = (() => {
if (HasManageProjectPermission) {
// Managers always see the dropdown if there's more than one project (total)
return projectNames && projectNames.length > 1;
} else {
// Regular users only see the dropdown if they have more than one *assigned* project
return projectsForDropdown && projectsForDropdown.length > 1;
}
})();
// Determine if "All Projects" option should be displayed in the dropdown
const shouldShowAllProjectsOption = HasManageProjectPermission || (isDashboard && projectsForDropdown && projectsForDropdown.length > 1);
return (
<nav
@ -211,7 +224,6 @@ const Header = () => {
<div className="align-items-center">
<i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
<div className="btn-group">
{/* Conditionally render the button based on shouldShowDropdown */}
{shouldShowDropdown ? (
<button
className={`btn btn-sm-sm btn-xl ${projectsForDropdown && projectsForDropdown.length > 0 ? "dropdown-toggle" : ""
@ -223,7 +235,7 @@ const Header = () => {
{displayText}
</button>
) : (
// If only one project, just display its name without a dropdown
// If only one project, or no dropdown needed, just display its name
<span className="btn btn-sm-sm btn-xl px-1">
{projectsForDropdown && projectsForDropdown.length === 1
? projectsForDropdown[0].name
@ -231,23 +243,22 @@ const Header = () => {
</span>
)}
{/* Only render the dropdown menu if shouldShowDropdown is true */}
{shouldShowDropdown && projectsForDropdown && projectsForDropdown.length > 0 && (
{shouldShowDropdown && (
<ul
className="dropdown-menu"
style={{ overflow: "auto", maxHeight: "300px" }}
>
{isDashboard && (
{shouldShowAllProjectsOption && (
<li>
<button
className="dropdown-item"
onClick={() => handleProjectChange(null)} // Set projectId to null for "All Projects"
onClick={() => handleProjectChange(null)}
>
All Projects
</button>
</li>
)}
{[...projectsForDropdown] // Sort the conditionally filtered list
{[...projectsForDropdown]
.sort((a, b) => a?.name?.localeCompare(b.name))
.map((project) => (
<li key={project?.id}>