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

When a project is selected, the last selected project will be displayed.

Browse Source
This commit is contained in:
Kartik Sharma 2025-07-30 14:39:43 +05:30
parent 4512c11a60
commit 5399fa1f17
5 changed files with 99 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,7 @@ import {
cacheData,
clearAllCache,
getCachedData,
useSelectedproject,
} from "../../slices/apiDataManager";
import AuthRepository from "../../repositories/AuthRepository";
import { useDispatch, useSelector } from "react-redux";
@ -12,18 +13,18 @@ import { useProfile } from "../../hooks/useProfile";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import Avatar from "../../components/common/Avatar";
import { useChangePassword } from "../Context/ChangePasswordContext";
import { useProjects } from "../../hooks/useProjects";
import { useProjects, useProjectName } from "../../hooks/useProjects"; // Make sure useProjects is imported if needed elsewhere
import { useCallback, useEffect, useState } from "react";
import { useProjectName } from "../../hooks/useProjects";
import eventBus from "../../services/eventBus";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGE_PROJECT } from "../../utils/constants";
import { useMemo } from "react";
const Header = () => {
const { profile } = useProfile();
const location = useLocation();
const dispatch = useDispatch();
const { data, loading } = useMaster();
const { data, loading: masterLoading } = useMaster(); // Renamed loading to masterLoading for clarity
const navigate = useNavigate();
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
@ -33,7 +34,6 @@ 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
@ -67,7 +67,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");
@ -86,63 +85,52 @@ const Header = () => {
navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
};
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
const { projectNames, loading: projectLoading, fetchData } = useProjectName(); // Renamed loading to projectLoading
const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
const selectedProject = useSelectedproject();
const projectsForDropdown = isDashboard
? projectNames // On dashboard, show all projects
: projectNames?.filter(project =>
allowedProjectStatusIds.includes(project.projectStatusId)
// Filter projects for the dropdown based on the current path and allowed statuses
const projectsForDropdown = useMemo(() => {
if (!projectNames) return []; // Return empty array if projectNames is not yet fetched
return isDashboard
? projectNames
: projectNames?.filter(project => allowedProjectStatusIds.includes(project.projectStatusId));
}, [projectNames, isDashboard, allowedProjectStatusIds]);
// Determine the display text for the project dropdown
let displayText = "Loading..."; // Default to loading
if (!projectLoading && projectNames) { // Only update if not loading and projectNames is available
if (selectedProject === null) {
displayText = "All Projects";
} else {
// Find the selected project from the full projectNames list
const selectedProjectObj = projectNames.find( // Use projectNames directly here
(p) => p?.id === selectedProject
);
// Determine the display text for the project section
let currentProjectDisplayName = "Loading...";
if (!projectLoading && projectNames) {
if (projectNames.length === 0) {
// If no projects are assigned at all
currentProjectDisplayName = "No Projects Assigned";
} else if (projectNames.length === 1) {
// If there's exactly one project overall (unfiltered list)
currentProjectDisplayName = projectNames[0].name;
} else { // projectNames.length > 1 (multiple projects)
if (selectedProject === null) {
currentProjectDisplayName = "All Projects";
} else {
const selectedProjectObj = projectNames.find(
(p) => p?.id === selectedProject
);
currentProjectDisplayName = selectedProjectObj ? selectedProjectObj.name : "Unknown Project";
}
displayText = selectedProjectObj ? selectedProjectObj.name : "All Projects"; // Fallback to "All Projects" if selected project is not found
}
}
const { openChangePassword } = useChangePassword();
// Effect to set initial projectId based on scenarios
useEffect(() => {
if (
projectNames &&
projectNames.length > 0 &&
selectedProject === undefined && // Only set if no project is explicitly selected yet
!getCachedData("hasReceived") // To avoid re-setting on every render
selectedProject === undefined && // Only set default if no project is currently selected
!getCachedData("hasReceived") // Check if this flag is still relevant for your caching strategy
) {
if (projectNames.length === 1) {
// If only one project exists, automatically select it
dispatch(setProjectId(projectNames[0]?.id || null));
if (isDashboard) {
dispatch(setProjectId(null)); // Always set to null for "All Projects" on Dashboard initial load
} else {
// If multiple projects, default to "All Projects" on dashboard, or first allowed for others
if (isDashboard) {
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));
}
const firstAllowedProject = projectNames.find(project => allowedProjectStatusIds.includes(project.projectStatusId));
dispatch(setProjectId(firstAllowedProject?.id || null)); // Fallback to null if no allowed projects
}
}
}, [projectNames, selectedProject, dispatch, isDashboard]);
}, [projectNames, selectedProject, dispatch, isDashboard, allowedProjectStatusIds]);
const handler = useCallback(
@ -163,7 +151,7 @@ const Header = () => {
const newProjectHandler = useCallback(
async (msg) => {
if (HasManageProjectPermission && msg.keyword === "Create_Project") {
await fetchData();
await fetchData();
} else if (projectNames?.some((item) => item.id === msg.response.id)) {
await fetchData();
}
@ -186,16 +174,19 @@ const Header = () => {
};
}, [handler, newProjectHandler]);
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
const handleProjectChange = (projectId) => {
dispatch(setProjectId(projectId));
if (isProjectPath && projectId !== null) {
navigate(`/projects/details?resetDates=true`);
} else if (isProjectPath && projectId === null) {
navigate("/projects");
} else if (isDashboard) {
}
};
// Determine if the dropdown should be shown: Only if there are genuinely multiple projects
const shouldShowDropdown = projectNames && projectNames.length > 1;
const shouldShowDropdown =
isDashboard || (projectsForDropdown && projectsForDropdown.length > 1);
return (
<nav
@ -218,30 +209,35 @@ 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 as a dropdown toggle button or a plain span */}
{/* Conditionally render the button based on shouldShowDropdown */}
{shouldShowDropdown ? (
<button
className={`btn btn-sm-sm btn-xl dropdown-toggle px-1`}
className={`btn btn-sm-sm btn-xl ${projectsForDropdown && projectsForDropdown.length > 0 ? "dropdown-toggle" : ""
} px-1`}
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
{currentProjectDisplayName}
{displayText}
</button>
) : (
// If no dropdown (single or zero projects), just display the text
// 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">
{currentProjectDisplayName}
{projectLoading ? "Loading..." :
(projectsForDropdown && projectsForDropdown.length === 1
? projectsForDropdown[0].name
: (isDashboard ? "All Projects" : "No Projects")) // Handle "No Projects" for non-dashboard views
}
</span>
)}
{/* Only render the dropdown menu if shouldShowDropdown is true AND there are projects to display in it */}
{/* Only render the dropdown menu if shouldShowDropdown is true AND there are projects to show */}
{shouldShowDropdown && projectsForDropdown && projectsForDropdown.length > 0 && (
<ul
className="dropdown-menu"
style={{ overflow: "auto", maxHeight: "300px" }}
>
{isDashboard && ( // "All Projects" option only appears in the dropdown if on dashboard and multiple projects
{isDashboard && (
<li>
<button
className="dropdown-item"

29
src/components/Project/ProjectNav.jsx
View File

@ -49,20 +49,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
</a>
</li>
<li className="nav-item">
<a
className={`nav-link ${
activePill === "imagegallary" ? "active" : ""
} fs-6`}
href="#"
onClick={(e) => {
e.preventDefault(); // Prevent page reload
onPillClick("imagegallary");
}}
>
<i className='bx bxs-cog bx-sm me-1_5'></i> <span className="d-none d-md-inline">project Setup</span>
</a>
</li>
{(DirAdmin || DireManager || DirUser) && (
<li className="nav-item">
<a
@ -77,6 +64,20 @@ const ProjectNav = ({ onPillClick, activePill }) => {
</a>
</li>
)}
<li className="nav-item">
<a
className={`nav-link ${
activePill === "imagegallary" ? "active" : ""
} fs-6`}
href="#"
onClick={(e) => {
e.preventDefault(); // Prevent page reload
onPillClick("imagegallary");
}}
>
<i className='bx bxs-cog bx-sm me-1_5'></i> <span className="d-none d-md-inline">project Setup</span>
</a>
</li>
</ul>
</div>

19
src/pages/project/ProjectDetails.jsx
View File

@ -13,6 +13,7 @@ import {
cacheData,
clearCacheKey,
getCachedData,
useSelectedproject,
} from "../../slices/apiDataManager";
import "./ProjectDetails.css";
import {
@ -28,8 +29,7 @@ import { setProjectId } from "../../slices/localVariablesSlice";
const ProjectDetails = () => {
const projectId = useSelector((store) => store.localVariables.projectId);
const projectId = useSelectedproject()
const { projectNames, fetchData } = useProjectName();
const dispatch = useDispatch()
@ -47,9 +47,10 @@ const ProjectDetails = () => {
refetch,
} = useProjectDetails(projectId);
const [activePill, setActivePill] = useState("profile");
// const [activePill, setActivePill] = useState("profile");
const [activePill, setActivePill] = useState(() => {
return localStorage.getItem("lastActiveProjectTab") || "profile";
});
const handler = useCallback(
(msg) => {
@ -65,9 +66,11 @@ const ProjectDetails = () => {
return () => eventBus.off("project", handler);
}, [handler]);
const handlePillClick = (pillKey) => {
setActivePill(pillKey);
};
const handlePillClick = (pillKey) => {
setActivePill(pillKey);
localStorage.setItem("lastActiveProjectTab", pillKey); // ✅ Save to localStorage
};
const renderContent = () => {
if (projectLoading || !projects_Details) return <Loader />;

16
src/slices/apiDataManager.jsx
View File

@ -5,6 +5,7 @@ import {
flushApiCache,
} from "../slices/apiCacheSlice";
import {setLoginUserPermmisions} from "./globalVariablesSlice";
import { useSelector } from "react-redux";
// Cache data
@ -36,4 +37,17 @@ export const cacheProfileData = ( data) => {
// Get cached data
export const getCachedProfileData = () => {
return store.getState().globalVariables.loginUser;
};
};
export const useSelectedproject = () => {
const selectedProject = useSelector((store)=> store.localVariables.projectId);
var project = localStorage.getItem("project");
if(project){
return project
} else{
return selectedProject
}
// return project ? selectedProject
};

2
src/slices/localVariablesSlice.jsx
View File

@ -21,7 +21,9 @@ const localVariablesSlice = createSlice({
state.regularizationCount = action.payload;
},
setProjectId: (state, action) => {
localStorage.setItem("project",null)
state.projectId = action.payload;
localStorage.setItem("project",state.projectId)
},
refreshData: ( state, action ) =>
{