Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: personal dashboard project selection (#8188)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-09-19 15:25:11 +02:00 committed by GitHub
parent 6d51213f55
commit f66854a0f0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 119 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
frontend/src/component/personalDashboard/PersonalDashboard.tsx
View File

@ -8,9 +8,14 @@ import {
List, List,
ListItem, ListItem,
ListItemButton, ListItemButton,
Link,
IconButton,
} from '@mui/material'; } from '@mui/material';
import type { Theme } from '@mui/material/styles/createTheme'; import type { Theme } from '@mui/material/styles/createTheme';
import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon'; import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
import { type FC, useState } from 'react';
import { useProfile } from 'hooks/api/getters/useProfile/useProfile';
import LinkIcon from '@mui/icons-material/Link';
const ScreenExplanation = styled(Typography)(({ theme }) => ({ const ScreenExplanation = styled(Typography)(({ theme }) => ({
marginTop: theme.spacing(1), marginTop: theme.spacing(1),
@ -30,6 +35,13 @@ const Projects = styled(Paper)(({ theme }) => ({
padding: theme.spacing(4), padding: theme.spacing(4),
})); }));
const ProjectBox = styled(Box)(({ theme }) => ({
display: 'flex',
gap: theme.spacing(2),
alignItems: 'center',
width: '100%',
}));
const projectStyle = (theme: Theme) => ({ const projectStyle = (theme: Theme) => ({
borderRadius: theme.spacing(0.5), borderRadius: theme.spacing(0.5),
borderLeft: `${theme.spacing(0.5)} solid transparent`, borderLeft: `${theme.spacing(0.5)} solid transparent`,
@ -42,11 +54,74 @@ const projectStyle = (theme: Theme) => ({
gap: theme.spacing(1), gap: theme.spacing(1),
}); });
export const StyledCardTitle = styled('div')<{ lines?: number }>(
({ theme, lines = 2 }) => ({
fontWeight: theme.typography.fontWeightRegular,
fontSize: theme.typography.body1.fontSize,
lineClamp: `${lines}`,
WebkitLineClamp: lines,
lineHeight: '1.2',
display: '-webkit-box',
boxOrient: 'vertical',
textOverflow: 'ellipsis',
overflow: 'hidden',
alignItems: 'flex-start',
WebkitBoxOrient: 'vertical',
wordBreak: 'break-word',
}),
);
const ActiveProjectDetails: FC<{
project: { flags: number; members: number; health: number };
}> = ({ project }) => {
return (
<Box sx={{ display: 'flex', gap: 2 }}>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Typography variant='subtitle2' color='primary'>
{project.flags}
</Typography>
<Typography variant='caption' color='text.secondary'>
flags
</Typography>
</Box>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Typography variant='subtitle2' color='primary'>
{project.members}
</Typography>
<Typography variant='caption' color='text.secondary'>
members
</Typography>
</Box>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Typography variant='subtitle2' color='primary'>
{project.health}%
</Typography>
<Typography variant='caption' color='text.secondary'>
health
</Typography>
</Box>
</Box>
);
};
export const PersonalDashboard = () => { export const PersonalDashboard = () => {
const { user } = useAuthUser(); const { user } = useAuthUser();
const name = user?.name; const name = user?.name;
const myProjects = useProfile().profile?.projects || [];
const projects = myProjects.map((project) => ({
name: project,
flags: 0,
members: 1,
health: 100,
}));
const [activeProject, setActiveProject] = useState<string | null>(
projects[0]?.name,
);
return ( return (
<div> <div>
<Typography component='h2' variant='h2'> <Typography component='h2' variant='h2'>
@ -65,61 +140,50 @@ export const PersonalDashboard = () => {
<Grid item lg={4} /> <Grid item lg={4} />
<Grid item lg={5} /> <Grid item lg={5} />
<Grid item lg={3}> <Grid item lg={3}>
<List disablePadding={true}> <List
<ListItem disablePadding={true}> disablePadding={true}
<ListItemButton sx={{ maxHeight: '400px', overflow: 'auto' }}
sx={projectStyle} >
selected={true} {projects.map((project) => {
> return (
<Box sx={{ display: 'flex', gap: 2 }}> <ListItem
<ProjectIcon color='primary' /> Default disablePadding={true}
</Box> sx={{ mb: 1 }}
<Box sx={{ display: 'flex', gap: 2 }}> >
<Box> <ListItemButton
<Typography sx={projectStyle}
variant='subtitle2' selected={
color='primary' project.name === activeProject
> }
0 onClick={() =>
</Typography> setActiveProject(project.name)
<Typography }
variant='caption' >
color='text.secondary' <ProjectBox>
> <ProjectIcon color='primary' />
flags <StyledCardTitle>
</Typography> {project.name}
</Box> </StyledCardTitle>
<Box> <IconButton
<Typography component={Link}
variant='subtitle2' href={`projects/${project.name}`}
color='primary' size='small'
> sx={{ ml: 'auto' }}
1 >
</Typography> <LinkIcon
<Typography titleAccess={`projects/${project.name}`}
variant='caption' />
color='text.secondary' </IconButton>
> </ProjectBox>
members {project.name === activeProject ? (
</Typography> <ActiveProjectDetails
</Box> project={project}
<Box> />
<Typography ) : null}
variant='subtitle2' </ListItemButton>
color='primary' </ListItem>
> );
100% })}
</Typography>
<Typography
variant='caption'
color='text.secondary'
>
health
</Typography>
</Box>
</Box>
</ListItemButton>
</ListItem>
</List> </List>
</Grid> </Grid>
<Grid item lg={4}> <Grid item lg={4}>