diff options
author | Leonardo Murça <106257713+leomurca@users.noreply.github.com> | 2023-02-07 20:40:41 -0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-02-07 20:40:41 -0300 |
commit | 8eca8b79ce4bfc40f8416309cbcfe397ed935ec4 (patch) | |
tree | ca4152122b67605e76f7a53ed1a14402255b23aa /src/screens/student/Classroom/PeopleTab | |
parent | e3de3c8e5fe06f7d14b2dc99a8b6aadc3b9bf18a (diff) | |
parent | c1f1286c86a47b87abcca55cbd0177d2a9c92fcd (diff) |
Feature/professor classroom
Diffstat (limited to 'src/screens/student/Classroom/PeopleTab')
-rw-r--r-- | src/screens/student/Classroom/PeopleTab/index.js | 244 | ||||
-rw-r--r-- | src/screens/student/Classroom/PeopleTab/styles.js | 116 |
2 files changed, 360 insertions, 0 deletions
diff --git a/src/screens/student/Classroom/PeopleTab/index.js b/src/screens/student/Classroom/PeopleTab/index.js new file mode 100644 index 0000000..9dfde7b --- /dev/null +++ b/src/screens/student/Classroom/PeopleTab/index.js @@ -0,0 +1,244 @@ +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 ( + <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': + 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: + return null; + } + } else if (layoutType === 'mobile') { + switch (state) { + case 'loading': + 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': + 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: + return null; + } + } + }; + + return layoutResolver( + peopleTabData && peopleTabData.state, + peopleTabData && peopleTabData.people, + layoutType + ); +} + +export default PeopleTab; diff --git a/src/screens/student/Classroom/PeopleTab/styles.js b/src/screens/student/Classroom/PeopleTab/styles.js new file mode 100644 index 0000000..30668db --- /dev/null +++ b/src/screens/student/Classroom/PeopleTab/styles.js @@ -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; |