Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +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

162
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}
sx={{ maxHeight: '400px', overflow: 'auto' }}
>
{projects.map((project) => {
return (
<ListItem
disablePadding={true}
sx={{ mb: 1 }}
>
<ListItemButton <ListItemButton
sx={projectStyle} sx={projectStyle}
selected={true} selected={
project.name === activeProject
}
onClick={() =>
setActiveProject(project.name)
}
> >
<Box sx={{ display: 'flex', gap: 2 }}> <ProjectBox>
<ProjectIcon color='primary' /> Default <ProjectIcon color='primary' />
</Box> <StyledCardTitle>
<Box sx={{ display: 'flex', gap: 2 }}> {project.name}
<Box> </StyledCardTitle>
<Typography <IconButton
variant='subtitle2' component={Link}
color='primary' href={`projects/${project.name}`}
size='small'
sx={{ ml: 'auto' }}
> >
0 <LinkIcon
</Typography> titleAccess={`projects/${project.name}`}
<Typography />
variant='caption' </IconButton>
color='text.secondary' </ProjectBox>
> {project.name === activeProject ? (
flags <ActiveProjectDetails
</Typography> project={project}
</Box> />
<Box> ) : null}
<Typography
variant='subtitle2'
color='primary'
>
1
</Typography>
<Typography
variant='caption'
color='text.secondary'
>
members
</Typography>
</Box>
<Box>
<Typography
variant='subtitle2'
color='primary'
>
100%
</Typography>
<Typography
variant='caption'
color='text.secondary'
>
health
</Typography>
</Box>
</Box>
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
);
})}
</List> </List>
</Grid> </Grid>
<Grid item lg={4}> <Grid item lg={4}>