smueller/LicenseAPI
1
0
Fork 0
mirror of https://github.com/gnmyt/LicenseAPI.git synced 2026-01-11 10:41:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement project switching in Header.jsx

Browse Source
This commit is contained in:
Mathias Wagner
2024-07-22 22:09:52 +02:00
parent 488e9e8393
commit 62ef3e8bfb
1 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
dashboard/src/states/Dashboard/components/Header/Header.jsx
View File

@ -1,8 +1,8 @@
import {AppBar, Avatar, IconButton, Stack, Toolbar, Typography} from "@mui/material"; import {AppBar, Avatar, IconButton, MenuItem, Select, Stack, Toolbar, Typography} from "@mui/material";
import {Menu} from "@mui/icons-material"; import {Menu} from "@mui/icons-material";
import {useContext, useEffect, useState} from "react"; import {useContext, useEffect, useState} from "react";
import {projectSidebar, sidebar} from "@/common/routes"; import {projectSidebar, sidebar} from "@/common/routes";
import {useLocation} from "react-router-dom"; import {useLocation, useNavigate} from "react-router-dom";
import {ProjectContext} from "@/states/Dashboard/contexts/Project"; import {ProjectContext} from "@/states/Dashboard/contexts/Project";
import {UserContext} from "@contexts/User"; import {UserContext} from "@contexts/User";
import AccountMenu from "@/states/Dashboard/components/Header/components/AccountMenu"; import AccountMenu from "@/states/Dashboard/components/Header/components/AccountMenu";
@ -11,7 +11,8 @@ const drawerWidth = 260;
export const Header = ({toggleOpen}) => { export const Header = ({toggleOpen}) => {
const location = useLocation(); const location = useLocation();
const {currentProject} = useContext(ProjectContext); const navigate = useNavigate();
const {currentProject, projects, setCurrentProject} = useContext(ProjectContext);
const {user} = useContext(UserContext); const {user} = useContext(UserContext);
const [menuOpen, setMenuOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false);
@ -27,6 +28,15 @@ export const Header = ({toggleOpen}) => {
return "Start"; return "Start";
} }
const switchProject = (project) => {
if (!project) return;
const path = location.pathname.replace(currentProject.id, project.id);
setCurrentProject(project);
navigate(-1);
setTimeout(() => navigate(path), 100);
}
return ( return (
<> <>
<AccountMenu open={menuOpen} setOpen={setMenuOpen}/> <AccountMenu open={menuOpen} setOpen={setMenuOpen}/>
@ -40,6 +50,12 @@ export const Header = ({toggleOpen}) => {
<Typography variant="h6" fontWeight={700}>{getTitleByPath()}</Typography> <Typography variant="h6" fontWeight={700}>{getTitleByPath()}</Typography>
<Stack direction="row" spacing={2} sx={{ml: "auto"}} alignItems="center"> <Stack direction="row" spacing={2} sx={{ml: "auto"}} alignItems="center">
<Select size="small" value={currentProject?.id}
onChange={(e) => switchProject(projects.find((project) => project.id === e.target.value))}>
{projects.map((project) => <MenuItem key={project.id} value={project.id}>{project.name}</MenuItem>)}
</Select>
<Stack sx={{background: "linear-gradient(90deg, #FF0401 0%, #FE6E27 100%)", padding: "3px", <Stack sx={{background: "linear-gradient(90deg, #FF0401 0%, #FE6E27 100%)", padding: "3px",
borderRadius: "50%", cursor: "pointer"}} onClick={() => setMenuOpen(true)} id="menu" borderRadius: "50%", cursor: "pointer"}} onClick={() => setMenuOpen(true)} id="menu"
alignItems="center" direction="row" spacing={1}> alignItems="center" direction="row" spacing={1}>