Merge pull request 'Project dropdown should only include active ,On Hold and In Progress Projects only show in Projects page.' (#281) from Kartik_Bug#792 into Issues_July_4W

Reviewed-on: #281

src/components/Layout/Header.jsx

@@ -1,4 +1,3 @@
-
 import getGreetingMessage from "../../utils/greetingHandler";
 import {
   cacheData,
@@ -28,9 +27,20 @@ const Header = () => {
   const navigate = useNavigate();
   const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
 
-    const isDirectoryPath = /^\/directory$/.test(location.pathname);
-    const isProjectPath = /^\/projects$/.test(location.pathname);
-    const isDashboard = /^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname) ;
+  const isDirectoryPath = /^\/directory$/.test(location.pathname);
+  const isProjectPath = /^\/projects$/.test(location.pathname);
+  const isDashboard =
+    /^\/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
+  ];
+
   const getRole = (roles, joRoleId) => {
     if (!Array.isArray(roles)) return "User";
     let role = roles.find((role) => role.id === joRoleId);
@@ -38,7 +48,7 @@ const Header = () => {
   };
 
   const handleLogout = (e) => {
-    e.preventDefault(); 
+    e.preventDefault();
     logout();
   };
 
@@ -83,11 +93,20 @@ const Header = () => {
     (store) => store.localVariables.projectId
   );
 
+  // Conditional filtering for projectsForDropdown
+  // If on Dashboard, show all projects. Otherwise, filter by allowedProjectStatusIds.
+  const projectsForDropdown = isDashboard
+    ? projectNames // On dashboard, show all projects
+    : projectNames?.filter(project =>
+        allowedProjectStatusIds.includes(project.projectStatusId)
+      );
+
   // Determine the display text for the project dropdown
   let displayText = "All Projects";
   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
     );
@@ -106,17 +125,15 @@ const Header = () => {
       selectedProject === undefined &&
       !getCachedData("hasReceived")
     ) {
-      if(isDashboard){
-        dispatch(setProjectId(null));
-      }else{
-         dispatch(setProjectId(projectNames[0]?.id));
+      if (isDashboard) {
+        dispatch(setProjectId(null)); // Always set to null for "All Projects" on Dashboard initial load
+      } 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
       }
     }
-  }, [projectNames, selectedProject, dispatch]);
-
-
-  /** Check if current page is project details page or directory page */
-  // const isProjectPath = /^\/projects\/[a-f0-9-]{36}$/.test(location.pathname);
+  }, [projectNames, selectedProject, dispatch, isDashboard]);
 
 
   const handler = useCallback(
@@ -160,14 +177,18 @@ const Header = () => {
     };
   }, [handler, newProjectHandler]);
 
-  const handleProjectChange =(project)=>{
-    if(isProjectPath){
-     dispatch(setProjectId(project))
-     navigate("/projects/details")
-    } else{
-      dispatch(setProjectId(project))
+  const handleProjectChange = (project) => {
+    dispatch(setProjectId(project)); // Always set the projectId
+
+    if (isProjectPath && project !== null) {
+      navigate("/projects/details"); // Navigate only if on /projects and a specific project is selected
     }
-  }
+    // 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);
 
   return (
     <nav
@@ -190,39 +211,49 @@ 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">
-              <button
-                className={`btn btn-sm-sm btn-xl ${projectNames.length > 0 ? "dropdown-toggle" : ""
-                  } px-1`}
-                type="button"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-              >
-                {displayText}
-              </button>
+              {/* Conditionally render the button based on shouldShowDropdown */}
+              {shouldShowDropdown ? (
+                <button
+                  className={`btn btn-sm-sm btn-xl ${projectsForDropdown && projectsForDropdown.length > 0 ? "dropdown-toggle" : ""
+                    } px-1`}
+                  type="button"
+                  data-bs-toggle="dropdown"
+                  aria-expanded="false"
+                >
+                  {displayText}
+                </button>
+              ) : (
+                // If only one project, just display its name without a dropdown
+                <span className="btn btn-sm-sm btn-xl px-1">
+                  {projectsForDropdown && projectsForDropdown.length === 1
+                    ? projectsForDropdown[0].name
+                    : displayText}
+                </span>
+              )}
 
-              {projectNames.length > 0 && (
+              {/* Only render the dropdown menu if shouldShowDropdown is true */}
+              {shouldShowDropdown && projectsForDropdown && projectsForDropdown.length > 0 && (
                 <ul
                   className="dropdown-menu"
                   style={{ overflow: "auto", maxHeight: "300px" }}
                 >
-            
                   {isDashboard && (
                     <li>
                       <button
                         className="dropdown-item"
-                        onClick={() => dispatch(setProjectId(null))}
+                        onClick={() => handleProjectChange(null)} // Set projectId to null for "All Projects"
                       >
                         All Projects
                       </button>
                     </li>
                   )}
-                  {[...projectNames]
+                  {[...projectsForDropdown] // Sort the conditionally filtered list
                     .sort((a, b) => a?.name?.localeCompare(b.name))
                     .map((project) => (
                       <li key={project?.id}>
                         <button
                           className="dropdown-item"
-                          onClick={()=>handleProjectChange(project?.id)}
+                          onClick={() => handleProjectChange(project?.id)}
                         >
                           {project?.name}
                           {project?.shortName && (
@@ -239,7 +270,6 @@ const Header = () => {
           </div>
         )}
 
-
         <ul className="navbar-nav flex-row align-items-center ms-md-auto">
           <li className="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
             <a