From 85664226353ac382df43fec9ba497f4de950f7b9 Mon Sep 17 00:00:00 2001
From: Victor Frunze <silverberserk@gmail.com>
Date: Mon, 2 Dec 2024 10:58:52 +0200
Subject: [PATCH] MWB-888: add project selector

---
 .../app/mobile-nav/mobile-nav-section.js      |   3 +-
 .../src/layouts/app/mobile-nav/mobile-nav.js  |  14 +--
 .../src/layouts/app/project-switch2/index.js  |   1 +
 .../app/project-switch2/project-switch.js     | 112 ++++++++++++++++++
 .../layouts/app/vertical-layout/side-nav.js   |   2 +-
 5 files changed, 121 insertions(+), 11 deletions(-)
 create mode 100644 mapping_workbench/frontend/src/layouts/app/project-switch2/index.js
 create mode 100644 mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js

diff --git a/mapping_workbench/frontend/src/layouts/app/mobile-nav/mobile-nav-section.js b/mapping_workbench/frontend/src/layouts/app/mobile-nav/mobile-nav-section.js
index 993915e4f..505adc355 100644
--- a/mapping_workbench/frontend/src/layouts/app/mobile-nav/mobile-nav-section.js
+++ b/mapping_workbench/frontend/src/layouts/app/mobile-nav/mobile-nav-section.js
@@ -76,7 +76,8 @@ export const MobileNavSection = (props) => {
       sx={{
         listStyle: 'none',
         m: 0,
-        p: 0
+        p: 0,
+        px:2
       }}
       {...other}>
       {subheader && (
diff --git a/mapping_workbench/frontend/src/layouts/app/mobile-nav/mobile-nav.js b/mapping_workbench/frontend/src/layouts/app/mobile-nav/mobile-nav.js
index e3744998c..484ccf011 100644
--- a/mapping_workbench/frontend/src/layouts/app/mobile-nav/mobile-nav.js
+++ b/mapping_workbench/frontend/src/layouts/app/mobile-nav/mobile-nav.js
@@ -1,3 +1,4 @@
+import Divider from '@mui/material/Divider';
 import {useMemo} from 'react';
 import PropTypes from 'prop-types';
 
@@ -13,7 +14,7 @@ import {Scrollbar} from 'src/components/scrollbar';
 import {usePathname} from 'src/hooks/use-pathname';
 import {paths} from 'src/paths';
 import {MobileNavSection} from './mobile-nav-section';
-import {ProjectSwitch} from "../project-switch";
+import {ProjectSwitch} from "../project-switch2";
 import {useProjects} from "../../../hooks/use-projects";
 import {VersionLabel} from "../version-label";
 
@@ -145,20 +146,15 @@ export const MobileNav = (props) => {
                     <Stack
                         alignItems="center"
                         direction="row"
-                        spacing={2}
-                        sx={{p: 3}}
+                        spacing={'14px'}
+                        sx={{px: '20px', py: '25px'}}
                     >
                         <Box
                             component={RouterLink}
                             href={paths.index}
                             sx={{
-                                borderColor: 'var(--nav-logo-border)',
-                                borderRadius: 1,
-                                borderStyle: 'solid',
-                                borderWidth: 1,
                                 display: 'flex',
                                 height: 40,
-                                p: '4px',
                                 width: 40
                             }}
                         >
@@ -171,7 +167,6 @@ export const MobileNav = (props) => {
                         spacing={2}
                         sx={{
                             flexGrow: 1,
-                            px: 2
                         }}
                     >
                         <Stack
@@ -184,6 +179,7 @@ export const MobileNav = (props) => {
                             }}>
                             <ProjectSwitch/>
                         </Stack>
+                        <Divider color='#F2F4F7' />
                         {overview.map((section, index) => (
                             <MobileNavSection
                                 items={section.items}
diff --git a/mapping_workbench/frontend/src/layouts/app/project-switch2/index.js b/mapping_workbench/frontend/src/layouts/app/project-switch2/index.js
new file mode 100644
index 000000000..d0bef643e
--- /dev/null
+++ b/mapping_workbench/frontend/src/layouts/app/project-switch2/index.js
@@ -0,0 +1 @@
+export { ProjectSwitch } from './project-switch';
diff --git a/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js b/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js
new file mode 100644
index 000000000..f6630b4ba
--- /dev/null
+++ b/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js
@@ -0,0 +1,112 @@
+import {useContext, useState} from "react";
+
+import AddIcon from '@mui/icons-material/Add';
+import SearchIcon from '@mui/icons-material/Search';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+
+import Card from '@mui/material/Card';
+import Divider from '@mui/material/Divider';
+import Popover from '@mui/material/Popover';
+import Stack from '@mui/material/Stack';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputAdornment from '@mui/material/InputAdornment';
+import {useTheme} from '@mui/material/styles';
+import Button from '@mui/material/Button';
+
+import MenuItem from "@mui/material/MenuItem";
+import Typography from "@mui/material/Typography";
+
+import {ProjectsContext} from "../../../contexts/projects";
+import {useRouter} from "../../../hooks/use-router";
+import {paths} from 'src/paths';
+
+export const ProjectSwitch = () => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const projectsStore = useContext(ProjectsContext)
+    const [searchInputValue, setSearchInputValue] = useState('')
+    const router = useRouter();
+    const theme = useTheme()
+
+
+    const handleProjectSelect = (value) => {
+        if (value)
+            projectsStore.handleSessionProjectChange(value)
+        else
+            router.push(paths.app.projects.create)
+    }
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (<Stack sx={{px: 2}}>
+            <Button variant='contained'
+                    onClick={handleClick}
+                    endIcon={<ArrowForwardIosIcon
+                        fontSize='small'/>}>{projectsStore.items?.find(project => project._id === projectsStore.sessionProject)?.title}</Button>
+            <Popover
+                id={'project_switch_popover'}
+                open={!!anchorEl}
+                anchorEl={anchorEl}
+                onClose={handleClose}
+                anchorOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'left',
+                }}
+            >
+
+                <Card sx={{border: '1px solid #E4E7EC', width: 250}}>
+                    <Stack direction='column'>
+                        <OutlinedInput sx={{m: '16px', backgroundColor: '#F2F4F7',}}
+                                       placeholder='Search project'
+                                       inputProps={{style: {padding: '10px'}}}
+                                       onChange={event => setSearchInputValue(event.target.value)}
+                                       startAdornment={(
+                                           <InputAdornment position="start">
+                                               <SearchIcon/>
+                                           </InputAdornment>
+                                       )}>
+
+                        </OutlinedInput>
+                        {projectsStore.items?.filter(project => project.title.toLowerCase()
+                            .includes(searchInputValue.toLowerCase()))
+                            .map(project => (
+                                <MenuItem
+                                    key={project._id}
+                                    value={project._id}
+                                    sx={{px: '15px', py: '8px'}}
+                                    onClick={() => handleProjectSelect(project._id)}
+                                >
+                                    <Typography
+                                        color="var(--nav-color)"
+                                        variant="body2"
+                                    >
+                                        {project.title}
+                                    </Typography>
+                                </MenuItem>))}
+
+                        <Divider sx={{m: '15px'}} marginHeight={3} marginWidth={3}/>
+                        <MenuItem key={'project_create'}
+                                  onClick={() => handleProjectSelect()}
+                                  sx={{color: theme.palette.primary.main, mb: 2}}
+                                  id='create_project_button'>
+                            <AddIcon/>
+                            <Typography>
+                                Create Project
+                            </Typography>
+                        </MenuItem>
+                    </Stack>
+                </Card>
+            </Popover>
+        </Stack>
+    )
+        ;
+};
\ No newline at end of file
diff --git a/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav.js b/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav.js
index 9ca123d1d..3c9365e5e 100644
--- a/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav.js
+++ b/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav.js
@@ -12,7 +12,7 @@ import {Scrollbar} from 'src/components/scrollbar';
 import {usePathname} from 'src/hooks/use-pathname';
 import {paths} from 'src/paths';
 import {SideNavSection} from './side-nav-section';
-import {ProjectSwitch} from "../project-switch";
+import {ProjectSwitch} from "../project-switch2";
 import {AppTitle} from "../../../components/app-title";
 import {useProjects} from "../../../hooks/use-projects";
 import {VersionLabel} from "../version-label";