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

Add desktop assignments tab layout without loading

Browse source
This commit is contained in:
Leonardo Murça 2022-08-17 21:18:57 -03:00
parent 87e7dba5a0
commit 6b171210ae
3 changed files with 176 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,166 @@
function AssignmentsTab({ assignmentsTabData }) {
return assignmentsTabData && assignmentsTabData.state === 'loading' ? (
<h1>Loading..</h1>
) : assignmentsTabData.state === 'gone' ? null : (
<h1>Assignments Tab</h1>
import { Container, Link, Stack, Typography } from '@mui/material';
import dayjs from 'dayjs';
import { capitalizeFirstLetter } from '../../../utils/capitalizeFirstLetter';
function AssignmentsTab({ assignmentsTabData, layoutType }) {
console.log(assignmentsTabData);
const layoutResolver = (state, assignments, layoutType) => {
if (layoutType === 'desktop') {
switch (state) {
case 'loading':
return <h1>Loading...</h1>;
case 'idle':
return (
<Container sx={{ marginTop: '50px' }} disableGutters>
<Container sx={{ width: '90%' }} disableGutters>
<Typography
sx={{
padding: '10px',
borderBottom: '2px solid #00420D',
color: '#00420D',
}}
variant="h4"
>
Provas
</Typography>
<Stack alignItems="center">
{assignments
.filter(a => a.type === 'assessment')
.map(a => (
<Container
key={a.id}
sx={{
width: '95%',
padding: '20px',
borderBottom: '2px solid #BCBCBC',
}}
disableGutters
>
<Typography variant="h5">
<Link
sx={{
color: 'black',
textDecoration: 'underline #000000',
}}
href={`/assignment/${a.id}`}
>
{a.title}
</Link>
</Typography>
<Typography
sx={{ marginTop: '15px', fontSize: '15px' }}
variant="p"
component="div"
>
<strong>Data de entrega: </strong>{' '}
{capitalizeFirstLetter(
dayjs(a.dueDate).format('dddd, DD/MM | HH:mm[h]')
)}
</Typography>
<Typography
sx={{ fontSize: '15px' }}
variant="p"
component="div"
>
<strong>Valor: </strong>
{a.scores.map(s => s.value).join(', ')} pts
</Typography>
</Container>
))}
</Stack>
</Container>
<Container
sx={{ width: '90%', marginTop: '30px' }}
disableGutters
>
<Typography
sx={{
padding: '10px',
borderBottom: '2px solid #00420D',
color: '#00420D',
}}
variant="h4"
>
Trabalhos
</Typography>
<Stack alignItems="center">
{assignments
.filter(a => a.type === 'project')
.map(a => (
<Container
key={a.id}
sx={{
width: '95%',
padding: '20px',
borderBottom: '2px solid #BCBCBC',
}}
disableGutters
>
<Typography variant="h5">
<Link
sx={{
color: 'black',
textDecoration: 'underline #000000',
}}
href={`/assignment/${a.id}`}
>
{a.title}
</Link>
</Typography>
<Typography
sx={{ marginTop: '15px', fontSize: '15px' }}
variant="p"
component="div"
>
<strong>Data de entrega: </strong>{' '}
{capitalizeFirstLetter(
dayjs(a.dueDate).format('dddd, DD/MM | HH:mm[h]')
)}
</Typography>
<Typography
sx={{ fontSize: '15px' }}
variant="p"
component="div"
>
<strong>Valor: </strong>
{a.scores.map(s => s.value).join(', ')} pts
</Typography>
</Container>
))}
</Stack>
</Container>
</Container>
);
case 'gone':
return null;
default:
return null;
}
} else if (layoutType === 'mobile') {
switch (state) {
case 'loading':
return <h1>Loading...</h1>;
case 'idle':
return <h1>Assignments Tab</h1>;
case 'gone':
return null;
default:
return null;
}
}
};
return layoutResolver(
assignmentsTabData && assignmentsTabData.state,
assignmentsTabData && assignmentsTabData.assignments,
layoutType
);
}

5
src/screens/Classroom/View.js
View file

@ -28,7 +28,10 @@ function View({
announcementsTabData={announcementsTabData}
classroom={classroom && classroom}
/>
<AssignmentsTab assignmentsTabData={assignmentsTabData} />
<AssignmentsTab
layoutType={layoutType}
assignmentsTabData={assignmentsTabData}
/>
</Container>
);
}

9
src/services/mocks.js
View file

@ -98,6 +98,7 @@ const allClassrooms = [
const allAssignments = [
{
id: '5435',
type: 'assessment',
title:
'Prova 1 - Armazenamento de Dados. Python em CD. Armazenamento Analítico',
dueDate: '2022-07-01 23:59',
@ -111,6 +112,7 @@ const allAssignments = [
},
{
id: '0128',
type: 'assessment',
title:
'Prova 2 - Visualização de Dados. Matemática e Estatística em CD. Análise de Dados',
dueDate: '2022-09-01 23:59',
@ -124,6 +126,7 @@ const allAssignments = [
},
{
id: '1234',
type: 'project',
title: 'Trabalho NoSQL',
dueDate: '2022-06-29 22:00',
scores: [
@ -136,6 +139,7 @@ const allAssignments = [
},
{
id: '1234',
type: 'assessment',
title: 'Atividade 2 - Estudo de caso Sapiens Informática',
dueDate: '2022-06-25 23:59',
scores: [
@ -148,6 +152,7 @@ const allAssignments = [
},
{
id: '3671',
type: 'assessment',
title:
'AA08 - Atividade de Aprendizagem 08 - Componentes de rateio de custos',
dueDate: '2022-07-23 10:00',
@ -161,6 +166,7 @@ const allAssignments = [
},
{
id: '1717',
type: 'project',
title: 'Trabalho interdisciplinar',
dueDate: '2022-08-20 23:59',
scores: [
@ -294,6 +300,7 @@ const allClassroomAnnouncements = [
const allUpcomingAssignments = [
{
id: '5435',
type: 'assessment',
title:
'Prova 1 - Armazenamento de Dados. Python em CD. Armazenamento Analítico',
dueDate: '2022-07-01 23:59',
@ -307,6 +314,7 @@ const allUpcomingAssignments = [
},
{
id: '0128',
type: 'assessment',
title:
'Prova 2 - Visualização de Dados. Matemática e Estatística em CD. Análise de Dados',
dueDate: '2022-09-01 23:59',
@ -320,6 +328,7 @@ const allUpcomingAssignments = [
},
{
id: '1234',
type: 'project',
title: 'Trabalho NoSQL',
dueDate: '2022-06-29 22:00',
scores: [