Add empty state
This commit is contained in:
parent
936d04114b
commit
6fb5af6ea5
6 changed files with 175 additions and 63 deletions
|
|
@ -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,15 +83,21 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
|
|||
>
|
||||
<Stack justifyContent="flex-start" spacing={1}>
|
||||
<h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
|
||||
{announcementsTabData.upcomingAssignments.map(ua => (
|
||||
<Link
|
||||
href={`/assignment/${ua.id}`}
|
||||
sx={{ fontSize: '15px' }}
|
||||
key={ua.id}
|
||||
>
|
||||
{ua.title}
|
||||
</Link>
|
||||
))}
|
||||
{announcementsTabData.upcomingAssignments.length !== 0 ? (
|
||||
announcementsTabData.upcomingAssignments.map(ua => (
|
||||
<Link
|
||||
href={`/assignment/${ua.id}`}
|
||||
sx={{ fontSize: '15px' }}
|
||||
key={ua.id}
|
||||
>
|
||||
{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 => (
|
||||
<AnnouncementCard
|
||||
key={announcement.id}
|
||||
announcement={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,15 +224,21 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
|
|||
>
|
||||
<Stack justifyContent="flex-start" spacing={1}>
|
||||
<h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
|
||||
{announcementsTabData.upcomingAssignments.map(ua => (
|
||||
<Link
|
||||
href={`/assignment/${ua.id}`}
|
||||
sx={{ fontSize: '15px' }}
|
||||
key={ua.id}
|
||||
>
|
||||
{ua.title}
|
||||
</Link>
|
||||
))}
|
||||
{announcementsTabData.upcomingAssignments.length !== 0 ? (
|
||||
announcementsTabData.upcomingAssignments.map(ua => (
|
||||
<Link
|
||||
href={`/assignment/${ua.id}`}
|
||||
sx={{ fontSize: '15px' }}
|
||||
key={ua.id}
|
||||
>
|
||||
{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 => (
|
||||
<AnnouncementCard
|
||||
key={announcement.id}
|
||||
announcement={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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 ==========
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 ==========
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 ==========
|
||||
|
|
|
|||
Loading…
Reference in a new issue