leomurca/if-salas-web
leomurca/if-salas-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add people tab for professor

Browse source
This commit is contained in:
Leonardo Murça 2023-01-25 12:15:17 -03:00
parent e9e5ee5fe9
commit c1f1286c86
2 changed files with 329 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

217
src/screens/professor/Classroom/PeopleTab/index.js
View file

@ -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 }) { function PeopleTab({ layoutType, peopleTabData }) {
const layoutResolver = (state, people, layoutType) => { const layoutResolver = (state, people, layoutType) => {
const {
externalContainer,
sectionContainer,
sectionTitle,
personContainer,
personAvatar,
personName,
emptyStateContainer,
} = styles[layoutType];
if (layoutType === 'desktop') { if (layoutType === 'desktop') {
switch (state) { switch (state) {
case 'loading': 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': 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': case 'gone':
return null; return null;
default: default:
@ -14,9 +125,107 @@ function PeopleTab({ layoutType, peopleTabData }) {
} else if (layoutType === 'mobile') { } else if (layoutType === 'mobile') {
switch (state) { switch (state) {
case 'loading': 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': 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': case 'gone':
return null; return null;
default: default:

116
src/screens/professor/Classroom/PeopleTab/styles.js
View file

@ -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;