Some changes in Header and aboutproject component.
This commit is contained in:
parent
811392448d
commit
c3835a3856
@ -13,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, useProjectName } from "../../hooks/useProjects"; // Make sure useProjects is imported if needed elsewhere
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
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: masterLoading } = useMaster(); // Renamed loading to masterLoading for clarity
|
||||
const { data, loading } = useMaster();
|
||||
const navigate = useNavigate();
|
||||
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
|
||||
|
||||
@ -33,11 +33,10 @@ const Header = () => {
|
||||
const isDashboard =
|
||||
/^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);
|
||||
|
||||
// Define the specific project status IDs you want to filter by
|
||||
const allowedProjectStatusIds = [
|
||||
"603e994b-a27f-4e5d-a251-f3d69b0498ba", // On Hold
|
||||
"cdad86aa-8a56-4ff4-b633-9c629057dfef", // In Progress
|
||||
"b74da4c2-d07e-46f2-9919-e75e49b12731", // Active
|
||||
"603e994b-a27f-4e5d-a251-f3d69b0498ba",
|
||||
"cdad86aa-8a56-4ff4-b633-9c629057dfef",
|
||||
"b74da4c2-d07e-46f2-9919-e75e49b12731",
|
||||
];
|
||||
|
||||
const getRole = (roles, joRoleId) => {
|
||||
@ -58,7 +57,7 @@ const Header = () => {
|
||||
};
|
||||
|
||||
AuthRepository.logout(data)
|
||||
.then((response) => {
|
||||
.then(() => {
|
||||
localStorage.removeItem("jwtToken");
|
||||
localStorage.removeItem("refreshToken");
|
||||
localStorage.removeItem("user");
|
||||
@ -66,10 +65,11 @@ const Header = () => {
|
||||
clearAllCache();
|
||||
window.location.href = "/auth/login";
|
||||
})
|
||||
.catch((error) => {
|
||||
.catch(() => {
|
||||
localStorage.removeItem("jwtToken");
|
||||
localStorage.removeItem("refreshToken");
|
||||
localStorage.removeItem("user");
|
||||
localStorage.clear();
|
||||
clearAllCache();
|
||||
window.location.href = "/auth/login";
|
||||
});
|
||||
@ -85,52 +85,55 @@ const Header = () => {
|
||||
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();
|
||||
|
||||
// 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
|
||||
const projectsForDropdown = isDashboard
|
||||
? projectNames
|
||||
: projectNames?.filter(project =>
|
||||
allowedProjectStatusIds.includes(project.projectStatusId)
|
||||
);
|
||||
|
||||
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
|
||||
let currentProjectDisplayName;
|
||||
if (projectLoading) {
|
||||
currentProjectDisplayName = "Loading...";
|
||||
} else if (!projectNames || projectNames.length === 0) {
|
||||
currentProjectDisplayName = "No Projects Assigned";
|
||||
} else if (projectNames.length === 1) {
|
||||
currentProjectDisplayName = projectNames[0].name;
|
||||
} else {
|
||||
if (selectedProject === null) {
|
||||
displayText = "All Projects";
|
||||
currentProjectDisplayName = "All Projects";
|
||||
} else {
|
||||
// Find the selected project from the full projectNames list
|
||||
const selectedProjectObj = projectNames.find( // Use projectNames directly here
|
||||
const selectedProjectObj = projectNames.find(
|
||||
(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();
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
projectNames &&
|
||||
projectNames.length > 0 &&
|
||||
selectedProject === undefined && // Only set default if no project is currently selected
|
||||
!getCachedData("hasReceived") // Check if this flag is still relevant for your caching strategy
|
||||
selectedProject === undefined &&
|
||||
!getCachedData("hasReceived")
|
||||
) {
|
||||
if (isDashboard) {
|
||||
dispatch(setProjectId(null)); // Always set to null for "All Projects" on Dashboard initial load
|
||||
if (projectNames.length === 1) {
|
||||
dispatch(setProjectId(projectNames[0]?.id || null));
|
||||
} else {
|
||||
const firstAllowedProject = projectNames.find(project => allowedProjectStatusIds.includes(project.projectStatusId));
|
||||
dispatch(setProjectId(firstAllowedProject?.id || null)); // Fallback to null if no allowed projects
|
||||
if (isDashboard) {
|
||||
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(
|
||||
@ -151,7 +154,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();
|
||||
}
|
||||
@ -174,19 +177,15 @@ const Header = () => {
|
||||
};
|
||||
}, [handler, newProjectHandler]);
|
||||
|
||||
const handleProjectChange = (project) => {
|
||||
dispatch(setProjectId(project));
|
||||
|
||||
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) {
|
||||
if (isProjectPath && project !== null) {
|
||||
navigate("/projects/details");
|
||||
}
|
||||
};
|
||||
|
||||
const shouldShowDropdown =
|
||||
isDashboard || (projectsForDropdown && projectsForDropdown.length > 1);
|
||||
const shouldShowDropdown = projectNames && projectNames.length > 1;
|
||||
|
||||
return (
|
||||
<nav
|
||||
@ -209,29 +208,21 @@ 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" : ""
|
||||
} px-1`}
|
||||
className={`btn btn-sm-sm btn-xl dropdown-toggle px-1`}
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{displayText}
|
||||
{currentProjectDisplayName}
|
||||
</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">
|
||||
{projectLoading ? "Loading..." :
|
||||
(projectsForDropdown && projectsForDropdown.length === 1
|
||||
? projectsForDropdown[0].name
|
||||
: (isDashboard ? "All Projects" : "No Projects")) // Handle "No Projects" for non-dashboard views
|
||||
}
|
||||
{currentProjectDisplayName}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Only render the dropdown menu if shouldShowDropdown is true AND there are projects to show */}
|
||||
{shouldShowDropdown && projectsForDropdown && projectsForDropdown.length > 0 && (
|
||||
<ul
|
||||
className="dropdown-menu"
|
||||
@ -241,13 +232,13 @@ const Header = () => {
|
||||
<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}>
|
||||
|
||||
@ -8,6 +8,7 @@ import { MANAGE_PROJECT } from "../../utils/constants";
|
||||
import GlobalModel from "../common/GlobalModel";
|
||||
import ManageProjectInfo from "./ManageProjectInfo";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { useSelectedproject } from "../../slices/apiDataManager";
|
||||
|
||||
const AboutProject = () => {
|
||||
const [IsOpenModal, setIsOpenModal] = useState(false);
|
||||
@ -19,7 +20,8 @@ const AboutProject = () => {
|
||||
const ClientQuery = useQueryClient();
|
||||
|
||||
// *** 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 { projects_Details, isLoading, error, refetch } = useProjectDetails(projectId); // Pass projectId from useSelector
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user