Call API on Header for project selection.

This commit is contained in:
Umesh Desai 2025-06-12 18:07:33 +05:30
parent 32fdc39e5c
commit 8e7d99d111
3 changed files with 39 additions and 12 deletions

View File

@ -10,6 +10,7 @@ import Avatar from "../../components/common/Avatar";
import { useChangePassword } from "../Context/ChangePasswordContext"; import { useChangePassword } from "../Context/ChangePasswordContext";
import { useProjects } from "../../hooks/useProjects"; import { useProjects } from "../../hooks/useProjects";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useProjectName } from "../../hooks/useProjects";
const Header = () => { const Header = () => {
const { profile } = useProfile(); const { profile } = useProfile();
@ -62,13 +63,14 @@ const Header = () => {
const handleProfilePage = () => { const handleProfilePage = () => {
navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`); navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
}; };
const { projects, loading: projectLoading } = useProjects(); // const { projects, loading: projectLoading } = useProjects();
const { projectNames, loading: projectLoading } = useProjectName();
const selectedProject = useSelector( const selectedProject = useSelector(
(store) => store.localVariables.projectId (store) => store.localVariables.projectId
); );
const selectedProjectName = projects?.find( const selectedProjectName = projectNames?.find(
(p) => p?.id === selectedProject (p) => p?.id === selectedProject
)?.name; )?.name;
@ -83,11 +85,11 @@ const Header = () => {
const { openChangePassword } = useChangePassword(); const { openChangePassword } = useChangePassword();
useEffect(() => { useEffect(() => {
if (projects && selectedProject !== " ") { if (projectNames && selectedProject !== " ") {
dispatch(setProjectId(projects[0]?.id)); dispatch(setProjectId(projectNames[0]?.id));
} }
}, [projects, ]); }, [projectNames, ]);
const isProjectPath = /^\/projects\/[a-f0-9-]{36}$/.test(location.pathname); const isProjectPath = /^\/projectNames\/[a-f0-9-]{36}$/.test(location.pathname);
return ( return (
<nav <nav
className="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme" className="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
@ -105,7 +107,7 @@ const Header = () => {
className="navbar-nav-right d-flex align-items-center justify-content-between" className="navbar-nav-right d-flex align-items-center justify-content-between"
id="navbar-collapse" id="navbar-collapse"
> >
{projects?.length > 0 && ( <div className=" align-items-center"> {projectNames?.length > 0 && ( <div className=" align-items-center">
{!isProjectPath && ( {!isProjectPath && (
<> <>
<i <i
@ -114,7 +116,7 @@ const Header = () => {
></i> ></i>
<div className="btn-group"> <div className="btn-group">
<button <button
className={`btn btn-sm-sm btn-xl ${projects?.length > 1 && "dropdown-toggle" } px-1`} className={`btn btn-sm-sm btn-xl ${projectNames?.length > 1 && "dropdown-toggle" } px-1`}
type="button" type="button"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
aria-expanded="false" aria-expanded="false"
@ -122,8 +124,8 @@ const Header = () => {
{displayText} {displayText}
</button> </button>
{projects?.length > 1 && ( <ul className="dropdown-menu"> {projectNames?.length > 1 && ( <ul className="dropdown-menu">
{projects?.map((project) => ( {projectNames?.map((project) => (
<li key={project?.id}> <li key={project?.id}>
<button <button
className="dropdown-item" className="dropdown-item"
@ -182,7 +184,7 @@ const Header = () => {
</div> </div>
<div className="dropdown-shortcuts-item col"> <div className="dropdown-shortcuts-item col">
<a <a
onClick={() => navigate(`/projects`)} onClick={() => navigate(`/projectNames`)}
className="text-heading text-truncate cursor-pointer" className="text-heading text-truncate cursor-pointer"
> >
<span className="dropdown-shortcuts-icon rounded-circle mb-3"> <span className="dropdown-shortcuts-icon rounded-circle mb-3">

View File

@ -176,3 +176,27 @@ export const useProjectsByEmployee = ( employeeId ) =>
} }
}; };
export const useProjectName = () => {
const [loading, setLoading] = useState(true);
const [projectNames, setProjectName] = useState([]);
const[Error,setError] = useState()
const fetchData = async () => {
try {
let response = await ProjectRepository.projectNameList();
console.log(response)
setProjectName(response.data);
cacheData("basicProjectNameList",response.data);
setLoading(false);
} catch (err) {
setError("Failed to fetch data.");
setLoading(false);
}
};
useEffect(() => {
fetchData();
}, []);
return { projectNames, loading, Error };
};

View File

@ -22,7 +22,8 @@ const ProjectRepository = {
updateProject: (id, data) => api.put(`/api/project/update/${id}`, data), updateProject: (id, data) => api.put(`/api/project/update/${id}`, data),
deleteProject: ( id ) => api.delete( `/projects/${ id }` ), deleteProject: ( id ) => api.delete( `/projects/${ id }` ),
getProjectsByEmployee: ( id ) => api.get( `/api/project/assigned-projects/${ id }` ), getProjectsByEmployee: ( id ) => api.get( `/api/project/assigned-projects/${ id }` ),
updateProjectsByEmployee:(id,data)=>api.post(`/api/project/assign-projects/${id}`,data) updateProjectsByEmployee:(id,data)=>api.post(`/api/project/assign-projects/${id}`,data),
projectNameList:()=>api.get("/api/project/list/basic")
}; };
export const TasksRepository = { export const TasksRepository = {