Refactor_Expenses #321
@ -37,7 +37,6 @@ const Header = () => {
|
|||||||
const allowedProjectStatusIds = [
|
const allowedProjectStatusIds = [
|
||||||
"603e994b-a27f-4e5d-a251-f3d69b0498ba", // On Hold
|
"603e994b-a27f-4e5d-a251-f3d69b0498ba", // On Hold
|
||||||
"cdad86aa-8a56-4ff4-b633-9c629057dfef", // In Progress
|
"cdad86aa-8a56-4ff4-b633-9c629057dfef", // In Progress
|
||||||
// "ef1c356e-0fe0-42df-a5d3-8daee355492d", // Inactive - Removed as per requirement
|
|
||||||
"b74da4c2-d07e-46f2-9919-e75e49b12731", // Active
|
"b74da4c2-d07e-46f2-9919-e75e49b12731", // Active
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -93,44 +92,54 @@ const Header = () => {
|
|||||||
(store) => store.localVariables.projectId
|
(store) => store.localVariables.projectId
|
||||||
);
|
);
|
||||||
|
|
||||||
// Conditional filtering for projectsForDropdown
|
|
||||||
// If on Dashboard, show all projects. Otherwise, filter by allowedProjectStatusIds.
|
|
||||||
const projectsForDropdown = isDashboard
|
const projectsForDropdown = isDashboard
|
||||||
? projectNames // On dashboard, show all projects
|
? projectNames // On dashboard, show all projects
|
||||||
: projectNames?.filter(project =>
|
: projectNames?.filter(project =>
|
||||||
allowedProjectStatusIds.includes(project.projectStatusId)
|
allowedProjectStatusIds.includes(project.projectStatusId)
|
||||||
);
|
);
|
||||||
|
|
||||||
// Determine the display text for the project dropdown
|
// Determine the display text for the project section
|
||||||
let displayText = "All Projects";
|
let currentProjectDisplayName = "Loading...";
|
||||||
if (selectedProject === null) {
|
if (!projectLoading && projectNames) {
|
||||||
displayText = "All Projects";
|
if (projectNames.length === 0) {
|
||||||
} else if (selectedProject) {
|
// If no projects are assigned at all
|
||||||
// Find the selected project from the full projectNames list
|
currentProjectDisplayName = "No Projects Assigned";
|
||||||
const selectedProjectObj = projectNames?.find(
|
} else if (projectNames.length === 1) {
|
||||||
(p) => p?.id === selectedProject
|
// If there's exactly one project overall (unfiltered list)
|
||||||
);
|
currentProjectDisplayName = projectNames[0].name;
|
||||||
// Fallback to selectedProject ID if name not found during loading or mismatch
|
} else { // projectNames.length > 1 (multiple projects)
|
||||||
displayText = selectedProjectObj ? selectedProjectObj.name : selectedProject;
|
if (selectedProject === null) {
|
||||||
} else if (projectLoading) {
|
currentProjectDisplayName = "All Projects";
|
||||||
displayText = "Loading...";
|
} else {
|
||||||
|
const selectedProjectObj = projectNames.find(
|
||||||
|
(p) => p?.id === selectedProject
|
||||||
|
);
|
||||||
|
currentProjectDisplayName = selectedProjectObj ? selectedProjectObj.name : "Unknown Project";
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const { openChangePassword } = useChangePassword();
|
const { openChangePassword } = useChangePassword();
|
||||||
|
|
||||||
|
// Effect to set initial projectId based on scenarios
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (
|
if (
|
||||||
projectNames &&
|
projectNames &&
|
||||||
projectNames.length > 0 &&
|
projectNames.length > 0 &&
|
||||||
selectedProject === undefined &&
|
selectedProject === undefined && // Only set if no project is explicitly selected yet
|
||||||
!getCachedData("hasReceived")
|
!getCachedData("hasReceived") // To avoid re-setting on every render
|
||||||
) {
|
) {
|
||||||
if (isDashboard) {
|
if (projectNames.length === 1) {
|
||||||
dispatch(setProjectId(null)); // Always set to null for "All Projects" on Dashboard initial load
|
// If only one project exists, automatically select it
|
||||||
|
dispatch(setProjectId(projectNames[0]?.id || null));
|
||||||
} else {
|
} else {
|
||||||
// If not dashboard, set to the first project that matches the allowed statuses if available
|
// If multiple projects, default to "All Projects" on dashboard, or first allowed for others
|
||||||
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)); // Default to "All Projects" for dashboard when multiple projects
|
||||||
|
} else {
|
||||||
|
const firstAllowedProject = projectNames.find(project => allowedProjectStatusIds.includes(project.projectStatusId));
|
||||||
|
dispatch(setProjectId(firstAllowedProject?.id || null));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [projectNames, selectedProject, dispatch, isDashboard]);
|
}, [projectNames, selectedProject, dispatch, isDashboard]);
|
||||||
@ -183,12 +192,10 @@ const Header = () => {
|
|||||||
if (isProjectPath && project !== null) {
|
if (isProjectPath && project !== null) {
|
||||||
navigate("/projects/details"); // Navigate only if on /projects and a specific project is selected
|
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
|
// Determine if the dropdown should be shown: Only if there are genuinely multiple projects
|
||||||
const shouldShowDropdown =
|
const shouldShowDropdown = projectNames && projectNames.length > 1;
|
||||||
isDashboard || (projectsForDropdown && projectsForDropdown.length > 1);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav
|
<nav
|
||||||
@ -211,33 +218,30 @@ 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 */}
|
{/* Conditionally render as a dropdown toggle button or a plain span */}
|
||||||
{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, just display its name without a dropdown
|
// If no dropdown (single or zero projects), just display the text
|
||||||
<span className="btn btn-sm-sm btn-xl px-1">
|
<span className="btn btn-sm-sm btn-xl px-1">
|
||||||
{projectsForDropdown && projectsForDropdown.length === 1
|
{currentProjectDisplayName}
|
||||||
? projectsForDropdown[0].name
|
|
||||||
: displayText}
|
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Only render the dropdown menu if shouldShowDropdown is true */}
|
{/* Only render the dropdown menu if shouldShowDropdown is true AND there are projects to display in it */}
|
||||||
{shouldShowDropdown && projectsForDropdown && projectsForDropdown.length > 0 && (
|
{shouldShowDropdown && projectsForDropdown && projectsForDropdown.length > 0 && (
|
||||||
<ul
|
<ul
|
||||||
className="dropdown-menu"
|
className="dropdown-menu"
|
||||||
style={{ overflow: "auto", maxHeight: "300px" }}
|
style={{ overflow: "auto", maxHeight: "300px" }}
|
||||||
>
|
>
|
||||||
{isDashboard && (
|
{isDashboard && ( // "All Projects" option only appears in the dropdown if on dashboard and multiple projects
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
className="dropdown-item"
|
className="dropdown-item"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user