Add people tab for professor
This commit is contained in:
parent
e9e5ee5fe9
commit
c1f1286c86
2 changed files with 329 additions and 4 deletions
|
|
@ -1,11 +1,122 @@
|
|||
import { Avatar, Container, Skeleton, Stack, Typography } from '@mui/material';
|
||||
import { createArrayFrom1ToN } from '../../../../utils/createArrayFrom1ToN';
|
||||
import styles from './styles';
|
||||
|
||||
function PeopleTab({ layoutType, peopleTabData }) {
|
||||
const layoutResolver = (state, people, layoutType) => {
|
||||
const {
|
||||
externalContainer,
|
||||
sectionContainer,
|
||||
sectionTitle,
|
||||
personContainer,
|
||||
personAvatar,
|
||||
personName,
|
||||
emptyStateContainer,
|
||||
} = styles[layoutType];
|
||||
if (layoutType === 'desktop') {
|
||||
switch (state) {
|
||||
case 'loading':
|
||||
return <h1>Loading...</h1>;
|
||||
return (
|
||||
<Container sx={externalContainer} disableGutters>
|
||||
<Stack alignItems="center">
|
||||
<Skeleton
|
||||
variant="rectangular"
|
||||
width="90%"
|
||||
height={70}
|
||||
sx={{ marginBottom: '30px' }}
|
||||
/>
|
||||
<Stack
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
sx={{ width: '90%', marginLeft: '20px' }}
|
||||
>
|
||||
<Skeleton variant="circular" width={60} height={60} />
|
||||
<Skeleton
|
||||
variant="rectangular"
|
||||
width="70%"
|
||||
height={40}
|
||||
sx={{ marginLeft: '15px' }}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack alignItems="center">
|
||||
<Skeleton
|
||||
variant="rectangular"
|
||||
width="90%"
|
||||
height={70}
|
||||
sx={{ marginBottom: '30px', marginTop: '50px' }}
|
||||
/>
|
||||
{createArrayFrom1ToN(5).map(i => (
|
||||
<Stack
|
||||
key={i}
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
sx={{ width: '90%', marginLeft: '20px', marginTop: '25px' }}
|
||||
>
|
||||
<Skeleton variant="circular" width={60} height={60} />
|
||||
<Skeleton
|
||||
variant="rectangular"
|
||||
width="70%"
|
||||
height={40}
|
||||
sx={{ marginLeft: '15px' }}
|
||||
/>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Container>
|
||||
);
|
||||
case 'idle':
|
||||
return <h1>People Tab</h1>;
|
||||
const professors = people.filter(p => p.role === 'PROFESSOR');
|
||||
const students = people.filter(p => p.role === 'STUDENT');
|
||||
|
||||
return (
|
||||
<Container sx={externalContainer} disableGutters>
|
||||
<Container sx={sectionContainer} disableGutters>
|
||||
<Typography sx={sectionTitle} variant="h4">
|
||||
Docentes
|
||||
</Typography>
|
||||
<Stack alignItems="center">
|
||||
{professors.length !== 0 ? (
|
||||
professors.map(p => (
|
||||
<Container key={p.id} sx={personContainer} disableGutters>
|
||||
<Avatar alt={p.name} src={p.avatar} sx={personAvatar} />
|
||||
<Typography sx={personName} variant="h5">
|
||||
{p.name}
|
||||
</Typography>
|
||||
</Container>
|
||||
))
|
||||
) : (
|
||||
<Container sx={emptyStateContainer} disableGutters>
|
||||
<p>Nenhum professor encontrado!</p>
|
||||
</Container>
|
||||
)}
|
||||
</Stack>
|
||||
</Container>
|
||||
|
||||
<Container sx={sectionContainer} disableGutters>
|
||||
<Typography sx={sectionTitle} variant="h4">
|
||||
Discentes
|
||||
</Typography>
|
||||
<Stack alignItems="center">
|
||||
{students.length !== 0 ? (
|
||||
students.map(p => (
|
||||
<Container key={p.id} sx={personContainer} disableGutters>
|
||||
<Avatar alt={p.name} src={p.avatar} sx={personAvatar} />
|
||||
<Typography sx={personName} variant="h5">
|
||||
{p.name}
|
||||
</Typography>
|
||||
</Container>
|
||||
))
|
||||
) : (
|
||||
<Container sx={emptyStateContainer} disableGutters>
|
||||
<p>Nenhum estudante encontrado!</p>
|
||||
</Container>
|
||||
)}
|
||||
</Stack>
|
||||
</Container>
|
||||
</Container>
|
||||
);
|
||||
case 'gone':
|
||||
return null;
|
||||
default:
|
||||
|
|
@ -14,9 +125,107 @@ function PeopleTab({ layoutType, peopleTabData }) {
|
|||
} else if (layoutType === 'mobile') {
|
||||
switch (state) {
|
||||
case 'loading':
|
||||
return <h1>Loading...</h1>;
|
||||
return (
|
||||
<Container sx={externalContainer} disableGutters>
|
||||
<Stack alignItems="center">
|
||||
<Skeleton
|
||||
variant="rectangular"
|
||||
width="90%"
|
||||
height={50}
|
||||
sx={{ marginBottom: '30px' }}
|
||||
/>
|
||||
<Stack
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
sx={{ width: '90%', marginLeft: '20px' }}
|
||||
>
|
||||
<Skeleton variant="circular" width={40} height={40} />
|
||||
<Skeleton
|
||||
variant="rectangular"
|
||||
width="80%"
|
||||
height={30}
|
||||
sx={{ marginLeft: '15px' }}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack alignItems="center">
|
||||
<Skeleton
|
||||
variant="rectangular"
|
||||
width="90%"
|
||||
height={50}
|
||||
sx={{ marginBottom: '30px', marginTop: '50px' }}
|
||||
/>
|
||||
{createArrayFrom1ToN(5).map(i => (
|
||||
<Stack
|
||||
key={i}
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
sx={{ width: '90%', marginLeft: '20px', marginTop: '25px' }}
|
||||
>
|
||||
<Skeleton variant="circular" width={40} height={40} />
|
||||
<Skeleton
|
||||
variant="rectangular"
|
||||
width="80%"
|
||||
height={30}
|
||||
sx={{ marginLeft: '15px' }}
|
||||
/>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Container>
|
||||
);
|
||||
case 'idle':
|
||||
return <h1>People Tab</h1>;
|
||||
const professors = people.filter(p => p.role === 'PROFESSOR');
|
||||
const students = people.filter(p => p.role === 'STUDENT');
|
||||
|
||||
return (
|
||||
<Container sx={externalContainer} disableGutters>
|
||||
<Container sx={sectionContainer} disableGutters>
|
||||
<Typography sx={sectionTitle} variant="h5">
|
||||
Docentes
|
||||
</Typography>
|
||||
<Stack alignItems="center">
|
||||
{professors.length !== 0 ? (
|
||||
professors.map(p => (
|
||||
<Container key={p.id} sx={personContainer} disableGutters>
|
||||
<Avatar alt={p.name} src={p.avatar} sx={personAvatar} />
|
||||
<Typography sx={personName} variant="body1">
|
||||
{p.name}
|
||||
</Typography>
|
||||
</Container>
|
||||
))
|
||||
) : (
|
||||
<Container sx={emptyStateContainer} disableGutters>
|
||||
<p>Nenhum professor encontrado!</p>
|
||||
</Container>
|
||||
)}
|
||||
</Stack>
|
||||
</Container>
|
||||
|
||||
<Container sx={sectionContainer} disableGutters>
|
||||
<Typography sx={sectionTitle} variant="h5">
|
||||
Discentes
|
||||
</Typography>
|
||||
<Stack alignItems="center">
|
||||
{students.length !== 0 ? (
|
||||
students.map(p => (
|
||||
<Container key={p.id} sx={personContainer} disableGutters>
|
||||
<Avatar alt={p.name} src={p.avatar} sx={personAvatar} />
|
||||
<Typography sx={personName} variant="body1">
|
||||
{p.name}
|
||||
</Typography>
|
||||
</Container>
|
||||
))
|
||||
) : (
|
||||
<Container sx={emptyStateContainer} disableGutters>
|
||||
<p>Nenhum estudante encontrado!</p>
|
||||
</Container>
|
||||
)}
|
||||
</Stack>
|
||||
</Container>
|
||||
</Container>
|
||||
);
|
||||
case 'gone':
|
||||
return null;
|
||||
default:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,116 @@
|
|||
// ========== Desktop ==========
|
||||
const desktopExternalContainer = {
|
||||
marginTop: '50px',
|
||||
height: '100vh',
|
||||
};
|
||||
|
||||
const desktopSectionContainer = {
|
||||
width: '90%',
|
||||
marginBottom: '30px',
|
||||
};
|
||||
|
||||
const desktopSectionTitle = {
|
||||
padding: '10px',
|
||||
borderBottom: '2px solid #00420D',
|
||||
color: '#00420D',
|
||||
};
|
||||
|
||||
const desktopPersonContainer = {
|
||||
width: '95%',
|
||||
padding: '20px',
|
||||
borderBottom: '2px solid #BCBCBC',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
};
|
||||
|
||||
const desktopPersonAvatar = {
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
marginRight: '15px',
|
||||
};
|
||||
|
||||
const desktopPersonName = {};
|
||||
|
||||
const desktopEmptyStateContainer = {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginTop: '30px',
|
||||
};
|
||||
|
||||
const desktop = {
|
||||
externalContainer: desktopExternalContainer,
|
||||
sectionContainer: desktopSectionContainer,
|
||||
sectionTitle: desktopSectionTitle,
|
||||
personContainer: desktopPersonContainer,
|
||||
personAvatar: desktopPersonAvatar,
|
||||
personName: desktopPersonName,
|
||||
emptyStateContainer: desktopEmptyStateContainer,
|
||||
};
|
||||
|
||||
// ========== Mobile ==========
|
||||
const mobileExternalContainer = {
|
||||
marginTop: '50px',
|
||||
height: '100vh',
|
||||
};
|
||||
|
||||
const mobileSectionContainer = {
|
||||
width: '90%',
|
||||
marginBottom: '30px',
|
||||
};
|
||||
|
||||
const mobileSectionTitle = {
|
||||
padding: '10px',
|
||||
borderBottom: '2px solid #00420D',
|
||||
color: '#00420D',
|
||||
};
|
||||
|
||||
const mobilePersonContainer = {
|
||||
width: '95%',
|
||||
padding: '20px',
|
||||
borderBottom: '2px solid #BCBCBC',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
};
|
||||
|
||||
const mobilePersonAvatar = {
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
marginRight: '15px',
|
||||
};
|
||||
|
||||
const mobilePersonName = {
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 1,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
};
|
||||
|
||||
const mobileEmptyStateContainer = {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginTop: '30px',
|
||||
};
|
||||
|
||||
const mobile = {
|
||||
externalContainer: mobileExternalContainer,
|
||||
sectionContainer: mobileSectionContainer,
|
||||
sectionTitle: mobileSectionTitle,
|
||||
personContainer: mobilePersonContainer,
|
||||
personAvatar: mobilePersonAvatar,
|
||||
personName: mobilePersonName,
|
||||
emptyStateContainer: mobileEmptyStateContainer,
|
||||
};
|
||||
|
||||
// ========== Unset ==========
|
||||
const unset = {
|
||||
externalContainer: null,
|
||||
sectionContainer: null,
|
||||
sectionTitle: null,
|
||||
personContainer: null,
|
||||
personAvatar: null,
|
||||
personName: null,
|
||||
};
|
||||
|
||||
const styles = { desktop, mobile, unset };
|
||||
export default styles;
|
||||
Loading…
Reference in a new issue