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,
ListItem,
ListItemButton,
Link,
IconButton,
} from '@mui/material';
import type { Theme } from '@mui/material/styles/createTheme';
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 }) => ({
marginTop: theme.spacing(1),
@ -30,6 +35,13 @@ const Projects = styled(Paper)(({ theme }) => ({
padding: theme.spacing(4),
}));
const ProjectBox = styled(Box)(({ theme }) => ({
display: 'flex',
gap: theme.spacing(2),
alignItems: 'center',
width: '100%',
}));
const projectStyle = (theme: Theme) => ({
borderRadius: theme.spacing(0.5),
borderLeft: `${theme.spacing(0.5)} solid transparent`,
@ -42,11 +54,74 @@ const projectStyle = (theme: Theme) => ({
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 = () => {
const { user } = useAuthUser();
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 (
<div>
<Typography component='h2' variant='h2'>
@ -65,61 +140,50 @@ export const PersonalDashboard = () => {
<Grid item lg={4} />
<Grid item lg={5} />
<Grid item lg={3}>
<List disablePadding={true}>
<ListItem disablePadding={true}>
<ListItemButton
sx={projectStyle}
selected={true}
>
<Box sx={{ display: 'flex', gap: 2 }}>
<ProjectIcon color='primary' /> Default
</Box>
<Box sx={{ display: 'flex', gap: 2 }}>
<Box>
<Typography
variant='subtitle2'
color='primary'
>
0
</Typography>
<Typography
variant='caption'
color='text.secondary'
>
flags
</Typography>
</Box>
<Box>
<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>
</ListItem>
<List
disablePadding={true}
sx={{ maxHeight: '400px', overflow: 'auto' }}
>
{projects.map((project) => {
return (
<ListItem
disablePadding={true}
sx={{ mb: 1 }}
>
<ListItemButton
sx={projectStyle}
selected={
project.name === activeProject
}
onClick={() =>
setActiveProject(project.name)
}
>
<ProjectBox>
<ProjectIcon color='primary' />
<StyledCardTitle>
{project.name}
</StyledCardTitle>
<IconButton
component={Link}
href={`projects/${project.name}`}
size='small'
sx={{ ml: 'auto' }}
>
<LinkIcon
titleAccess={`projects/${project.name}`}
/>
</IconButton>
</ProjectBox>
{project.name === activeProject ? (
<ActiveProjectDetails
project={project}
/>
) : null}
</ListItemButton>
</ListItem>
);
})}
</List>
</Grid>
<Grid item lg={4}>