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

Add empty state

Browse source
This commit is contained in:
Leonardo Murça 2022-08-28 17:57:42 -03:00
parent 936d04114b
commit 6fb5af6ea5
6 changed files with 175 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/screens/Classroom/AnnouncementsTab/index.js
View file

@ -15,7 +15,7 @@ import styles from './styles';
import jitsiLogo from '../../../assets/jitsi.svg';
function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
const { container } = styles[layoutType];
const { container, emptyStateContainer } = styles[layoutType];
const layoutResolver = (state, layoutType) => {
if (layoutType === 'desktop') {
@ -83,7 +83,8 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
>
<Stack justifyContent="flex-start" spacing={1}>
<h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
{announcementsTabData.upcomingAssignments.map(ua => (
{announcementsTabData.upcomingAssignments.length !== 0 ? (
announcementsTabData.upcomingAssignments.map(ua => (
<Link
href={`/assignment/${ua.id}`}
sx={{ fontSize: '15px' }}
@ -91,7 +92,12 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
>
{ua.title}
</Link>
))}
))
) : (
<Container disableGutters>
<p>Nenhuma atividade encontrada!</p>
</Container>
)}
</Stack>
</Card>
<Card
@ -121,12 +127,18 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
direction="row"
gap="30px"
>
{announcementsTabData.announcements.map(announcement => (
{announcementsTabData.announcements.length !== 0 ? (
announcementsTabData.announcements.map(announcement => (
<AnnouncementCard
key={announcement.id}
announcement={announcement}
/>
))}
))
) : (
<Container sx={emptyStateContainer} disableGutters>
<p>Nenhum comunicado encontrado!</p>
</Container>
)}
</Stack>
</Grid>
</Grid>
@ -212,7 +224,8 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
>
<Stack justifyContent="flex-start" spacing={1}>
<h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
{announcementsTabData.upcomingAssignments.map(ua => (
{announcementsTabData.upcomingAssignments.length !== 0 ? (
announcementsTabData.upcomingAssignments.map(ua => (
<Link
href={`/assignment/${ua.id}`}
sx={{ fontSize: '15px' }}
@ -220,7 +233,12 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
>
{ua.title}
</Link>
))}
))
) : (
<Container disableGutters>
<p>Nenhuma atividade encontrada!</p>
</Container>
)}
</Stack>
</Card>
<Card
@ -246,12 +264,18 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
direction="row"
gap="30px"
>
{announcementsTabData.announcements.map(announcement => (
{announcementsTabData.announcements.length !== 0 ? (
announcementsTabData.announcements.map(announcement => (
<AnnouncementCard
key={announcement.id}
announcement={announcement}
/>
))}
))
) : (
<Container sx={emptyStateContainer} disableGutters>
<p>Nenhum comunicado encontrado!</p>
</Container>
)}
</Stack>
</Stack>
);

14
src/screens/Classroom/AnnouncementsTab/styles.js
View file

@ -8,8 +8,15 @@ const desktopContainer = {
marginTop: '50px',
};
const desktopEmptyStateContainer = {
display: 'flex',
justifyContent: 'center',
marginTop: '30px',
};
const desktop = {
container: desktopContainer,
emptyStateContainer: desktopEmptyStateContainer,
};
// ========== Mobile ==========
@ -21,8 +28,15 @@ const mobileContainer = {
paddingBottom: '100px',
};
const mobileEmptyStateContainer = {
display: 'flex',
justifyContent: 'center',
marginTop: '30px',
};
const mobile = {
container: mobileContainer,
emptyStateContainer: mobileEmptyStateContainer,
};
// ========== Unset ==========

55
src/screens/Classroom/AssignmentsTab/index.js
View file

@ -14,6 +14,7 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
assignmentLink,
assignmentDueDate,
assignmentScores,
emptyStateContainer,
} = styles[layoutType];
if (layoutType === 'desktop') {
switch (state) {
@ -89,6 +90,9 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
);
case 'idle':
const assesments = assignments.filter(a => a.type === 'assessment');
const projects = assignments.filter(a => a.type === 'project');
return (
<Container sx={externalContainer} disableGutters>
<Container sx={innerContainer} disableGutters>
@ -96,9 +100,8 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
Provas
</Typography>
<Stack alignItems="center">
{assignments
.filter(a => a.type === 'assessment')
.map(a => (
{assesments.length !== 0 ? (
assesments.map(a => (
<Container
key={a.id}
sx={assignmentContainer}
@ -131,7 +134,12 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
{a.scores.map(s => s.value).join(', ')} pts
</Typography>
</Container>
))}
))
) : (
<Container sx={emptyStateContainer} disableGutters>
<p>Nenhuma prova encontrada!</p>
</Container>
)}
</Stack>
</Container>
@ -140,9 +148,8 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
Trabalhos
</Typography>
<Stack alignItems="center">
{assignments
.filter(a => a.type === 'project')
.map(a => (
{projects.length !== 0 ? (
projects.map(a => (
<Container
key={a.id}
sx={assignmentContainer}
@ -175,7 +182,12 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
{a.scores.map(s => s.value).join(', ')} pts
</Typography>
</Container>
))}
))
) : (
<Container sx={emptyStateContainer} disableGutters>
<p>Nenhum trabalho encontrado!</p>
</Container>
)}
</Stack>
</Container>
</Container>
@ -250,6 +262,9 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
);
case 'idle':
const assesments = assignments.filter(a => a.type === 'assessment');
const projects = assignments.filter(a => a.type === 'project');
return (
<Container sx={externalContainer} disableGutters>
<Container sx={innerContainer} disableGutters>
@ -257,9 +272,8 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
Provas
</Typography>
<Stack alignItems="center">
{assignments
.filter(a => a.type === 'assessment')
.map(a => (
{assesments.length !== 0 ? (
assesments.map(a => (
<Container
key={a.id}
sx={assignmentContainer}
@ -292,7 +306,12 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
{a.scores.map(s => s.value).join(', ')} pts
</Typography>
</Container>
))}
))
) : (
<Container sx={emptyStateContainer} disableGutters>
<p>Nenhuma prova encontrada!</p>
</Container>
)}
</Stack>
</Container>
@ -301,9 +320,8 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
Trabalhos
</Typography>
<Stack alignItems="center">
{assignments
.filter(a => a.type === 'project')
.map(a => (
{projects.length !== 0 ? (
projects.map(a => (
<Container
key={a.id}
sx={assignmentContainer}
@ -336,7 +354,12 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
{a.scores.map(s => s.value).join(', ')} pts
</Typography>
</Container>
))}
))
) : (
<Container sx={emptyStateContainer} disableGutters>
<p>Nenhum trabalho encontrado!</p>
</Container>
)}
</Stack>
</Container>
</Container>

14
src/screens/Classroom/AssignmentsTab/styles.js
View file

@ -37,6 +37,12 @@ const desktopAssignmentScores = {
fontSize: '15px',
};
const desktopEmptyStateContainer = {
display: 'flex',
justifyContent: 'center',
marginTop: '30px',
};
const desktop = {
externalContainer: desktopExternalContainer,
innerContainer: desktopInnerContainer,
@ -46,6 +52,7 @@ const desktop = {
assignmentLink: desktopAssignmentLink,
assignmentDueDate: desktopAssignmentDueDate,
assignmentScores: desktopAssignmentScores,
emptyStateContainer: desktopEmptyStateContainer,
};
// ========== Mobile ==========
@ -93,6 +100,12 @@ const mobileAssignmentScores = {
fontSize: '12px',
};
const mobileEmptyStateContainer = {
display: 'flex',
justifyContent: 'center',
marginTop: '30px',
};
const mobile = {
externalContainer: mobileExternalContainer,
innerContainer: mobileInnerContainer,
@ -102,6 +115,7 @@ const mobile = {
assignmentLink: mobileAssignmentLink,
assignmentDueDate: mobileAssignmentDueDate,
assignmentScores: mobileAssignmentScores,
emptyStateContainer: mobileEmptyStateContainer,
};
// ========== Unset ==========

55
src/screens/Classroom/PeopleTab/index.js
View file

@ -11,6 +11,7 @@ function PeopleTab({ layoutType, peopleTabData }) {
personContainer,
personAvatar,
personName,
emptyStateContainer,
} = styles[layoutType];
if (layoutType === 'desktop') {
switch (state) {
@ -66,6 +67,9 @@ function PeopleTab({ layoutType, peopleTabData }) {
</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>
@ -73,16 +77,20 @@ function PeopleTab({ layoutType, peopleTabData }) {
Docentes
</Typography>
<Stack alignItems="center">
{people
.filter(p => p.role === 'PROFESSOR')
.map(p => (
{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>
@ -91,16 +99,20 @@ function PeopleTab({ layoutType, peopleTabData }) {
Discentes
</Typography>
<Stack alignItems="center">
{people
.filter(p => p.role === 'STUDENT')
.map(p => (
{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>
@ -164,6 +176,9 @@ function PeopleTab({ layoutType, peopleTabData }) {
</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>
@ -171,16 +186,20 @@ function PeopleTab({ layoutType, peopleTabData }) {
Docentes
</Typography>
<Stack alignItems="center">
{people
.filter(p => p.role === 'PROFESSOR')
.map(p => (
{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>
@ -189,16 +208,20 @@ function PeopleTab({ layoutType, peopleTabData }) {
Discentes
</Typography>
<Stack alignItems="center">
{people
.filter(p => p.role === 'STUDENT')
.map(p => (
{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>

14
src/screens/Classroom/PeopleTab/styles.js
View file

@ -31,6 +31,12 @@ const desktopPersonAvatar = {
const desktopPersonName = {};
const desktopEmptyStateContainer = {
display: 'flex',
justifyContent: 'center',
marginTop: '30px',
};
const desktop = {
externalContainer: desktopExternalContainer,
sectionContainer: desktopSectionContainer,
@ -38,6 +44,7 @@ const desktop = {
personContainer: desktopPersonContainer,
personAvatar: desktopPersonAvatar,
personName: desktopPersonName,
emptyStateContainer: desktopEmptyStateContainer,
};
// ========== Mobile ==========
@ -79,6 +86,12 @@ const mobilePersonName = {
WebkitBoxOrient: 'vertical',
};
const mobileEmptyStateContainer = {
display: 'flex',
justifyContent: 'center',
marginTop: '30px',
};
const mobile = {
externalContainer: mobileExternalContainer,
sectionContainer: mobileSectionContainer,
@ -86,6 +99,7 @@ const mobile = {
personContainer: mobilePersonContainer,
personAvatar: mobilePersonAvatar,
personName: mobilePersonName,
emptyStateContainer: mobileEmptyStateContainer,
};
// ========== Unset ==========