Call API on Header for project selection.
This commit is contained in:
parent
32fdc39e5c
commit
8e7d99d111
@ -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">
|
||||||
|
@ -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 };
|
||||||
|
};
|
||||||
|
|
||||||
|
@ -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 = {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user