Add assignments to review card
This commit is contained in:
parent
faf7890efa
commit
2dee315261
6 changed files with 223 additions and 18 deletions
|
|
@ -18,6 +18,10 @@ function AssignmentCard({
|
|||
classrooms,
|
||||
dueDate,
|
||||
scores,
|
||||
deliveredByStudents,
|
||||
reviewed,
|
||||
total,
|
||||
isAssignmentToReview,
|
||||
layoutType,
|
||||
onClick,
|
||||
}) {
|
||||
|
|
@ -61,16 +65,30 @@ function AssignmentCard({
|
|||
{classrooms.map(c => c.name).join(', ')}
|
||||
</Typography>
|
||||
<Divider sx={dividerMiddle} />
|
||||
|
||||
<Typography sx={typographyDueDate} variant="p" component="div">
|
||||
<strong>Data de entrega: </strong>{' '}
|
||||
{capitalizeFirstLetter(
|
||||
dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]')
|
||||
)}
|
||||
</Typography>
|
||||
<Typography variant="p" component="div">
|
||||
<strong>Valor: </strong>
|
||||
{scores.map(s => s.value).join(', ')} pts
|
||||
</Typography>
|
||||
{deliveredByStudents >= 0 && total && (
|
||||
<Typography variant="p" component="div">
|
||||
<strong>Entregues: </strong>{' '}
|
||||
{`${deliveredByStudents} de ${total}`}
|
||||
</Typography>
|
||||
)}
|
||||
{reviewed >= 0 && total && (
|
||||
<Typography variant="p" component="div">
|
||||
<strong>Corrigidas: </strong> {`${reviewed} de ${total}`}
|
||||
</Typography>
|
||||
)}
|
||||
{!isAssignmentToReview && (
|
||||
<Typography variant="p" component="div">
|
||||
<strong>Valor: </strong>
|
||||
{scores.map(s => s.value).join(', ')} pts
|
||||
</Typography>
|
||||
)}
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
|
|
@ -110,10 +128,23 @@ function AssignmentCard({
|
|||
dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]')
|
||||
)}
|
||||
</Typography>
|
||||
<Typography variant="p" component="div">
|
||||
<strong>Valor: </strong>
|
||||
{scores.map(s => s.value).join(', ')} pts
|
||||
</Typography>
|
||||
{deliveredByStudents >= 0 && total && (
|
||||
<Typography variant="p" component="div">
|
||||
<strong>Entregues: </strong>{' '}
|
||||
{`${deliveredByStudents} de ${total}`}
|
||||
</Typography>
|
||||
)}
|
||||
{reviewed >= 0 && total && (
|
||||
<Typography variant="p" component="div">
|
||||
<strong>Corrigidas: </strong> {`${reviewed} de ${total}`}
|
||||
</Typography>
|
||||
)}
|
||||
{!isAssignmentToReview && (
|
||||
<Typography variant="p" component="div">
|
||||
<strong>Valor: </strong>
|
||||
{scores.map(s => s.value).join(', ')} pts
|
||||
</Typography>
|
||||
)}
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,18 @@
|
|||
import { Grid, Skeleton, Stack } from '@mui/material';
|
||||
import { Container } from '@mui/system';
|
||||
import AssignmentCard from '../../../components/AssignmentCard';
|
||||
import ClassCard from '../../../components/ClassCard';
|
||||
import { createArrayFrom1ToN } from '../../../utils/createArrayFrom1ToN';
|
||||
import styles from './styles';
|
||||
|
||||
function View({ layoutType, classrooms, onClickClassCard }) {
|
||||
const { container, divider, assignmentsStack } = styles[layoutType];
|
||||
function View({
|
||||
layoutType,
|
||||
classrooms,
|
||||
assignmentsToReview,
|
||||
onClickClassCard,
|
||||
}) {
|
||||
const { container, divider, assignmentsStack, onClickAssignmentCard } =
|
||||
styles[layoutType];
|
||||
|
||||
if (layoutType === 'desktop') {
|
||||
return (
|
||||
|
|
@ -51,7 +58,6 @@ function View({ layoutType, classrooms, onClickClassCard }) {
|
|||
</Grid>
|
||||
<Grid sx={divider} item xs={4}>
|
||||
<h1>Atividades para corrigir</h1>
|
||||
<h2>Atribuídas</h2>
|
||||
<Stack
|
||||
sx={assignmentsStack}
|
||||
alignItems="end"
|
||||
|
|
@ -59,8 +65,43 @@ function View({ layoutType, classrooms, onClickClassCard }) {
|
|||
direction="row"
|
||||
gap="30px"
|
||||
>
|
||||
<h3>Atividade 1</h3>
|
||||
<h3>Atividade 2</h3>
|
||||
{assignmentsToReview === null ? (
|
||||
createArrayFrom1ToN(6).map(i => (
|
||||
<Skeleton
|
||||
key={i}
|
||||
variant="rectangular"
|
||||
width="35em"
|
||||
height={145}
|
||||
/>
|
||||
))
|
||||
) : assignmentsToReview.length !== 0 ? (
|
||||
assignmentsToReview.map(assignment => (
|
||||
<AssignmentCard
|
||||
key={assignment.title}
|
||||
title={assignment.title}
|
||||
classrooms={assignment.classrooms}
|
||||
dueDate={assignment.dueDate}
|
||||
scores={assignment.scores}
|
||||
layoutType={layoutType}
|
||||
deliveredByStudents={assignment.deliveredByStudents}
|
||||
reviewed={assignment.reviewed}
|
||||
isAssignmentToReview={assignment.status !== null}
|
||||
total={assignment.total}
|
||||
onClick={() => onClickAssignmentCard(assignment.id)}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<Container
|
||||
sx={{
|
||||
height: '100vh',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
disableGutters
|
||||
>
|
||||
<p>Nenhuma atividade encontrada!</p>
|
||||
</Container>
|
||||
)}
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
|
@ -105,7 +146,6 @@ function View({ layoutType, classrooms, onClickClassCard }) {
|
|||
)}
|
||||
</Stack>
|
||||
<h1 style={divider}>Atividades para corrigir</h1>
|
||||
<h2>Atribuídas</h2>
|
||||
<Stack
|
||||
sx={assignmentsStack}
|
||||
alignItems="center"
|
||||
|
|
@ -114,8 +154,43 @@ function View({ layoutType, classrooms, onClickClassCard }) {
|
|||
direction="row"
|
||||
gap="30px"
|
||||
>
|
||||
<h3>Atividade 1</h3>
|
||||
<h3>Atividade 2</h3>
|
||||
{assignmentsToReview === null ? (
|
||||
createArrayFrom1ToN(6).map(i => (
|
||||
<Skeleton
|
||||
key={i}
|
||||
variant="rectangular"
|
||||
width="35em"
|
||||
height={145}
|
||||
/>
|
||||
))
|
||||
) : assignmentsToReview.length !== 0 ? (
|
||||
assignmentsToReview.map(assignment => (
|
||||
<AssignmentCard
|
||||
key={assignment.title}
|
||||
title={assignment.title}
|
||||
classrooms={assignment.classrooms}
|
||||
dueDate={assignment.dueDate}
|
||||
scores={assignment.scores}
|
||||
layoutType={layoutType}
|
||||
deliveredByStudents={assignment.deliveredByStudents}
|
||||
reviewed={assignment.reviewed}
|
||||
isAssignmentToReview={assignment.status !== null}
|
||||
total={assignment.total}
|
||||
onClick={() => onClickAssignmentCard(assignment.id)}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<Container
|
||||
sx={{
|
||||
height: '100vh',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
disableGutters
|
||||
>
|
||||
<p>Nenhuma atividade encontrada!</p>
|
||||
</Container>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ function Home() {
|
|||
const layoutType = useLayoutType();
|
||||
const { userService } = useUser();
|
||||
const [classrooms, setClassrooms] = useState(null);
|
||||
const [assignmentsToReview, setAssignmentsToReview] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
async function getClassrooms() {
|
||||
|
|
@ -20,17 +21,29 @@ function Home() {
|
|||
getClassrooms();
|
||||
}, [userService, userService.fetchClassrooms]);
|
||||
|
||||
useEffect(() => {
|
||||
async function getAssignmentsToReview() {
|
||||
const result = await userService.fetchAssignmentsToReview();
|
||||
setAssignmentsToReview(result.data);
|
||||
}
|
||||
getAssignmentsToReview();
|
||||
}, [userService, userService.fetchAllAssignments]);
|
||||
|
||||
const onClickClassCard = id => {
|
||||
navigate(`/class/${id}`);
|
||||
};
|
||||
|
||||
console.log(classrooms);
|
||||
const onClickAssignmentCard = id => {
|
||||
navigate(`/assignment/${id}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<View
|
||||
layoutType={layoutType}
|
||||
classrooms={classrooms}
|
||||
assignmentsToReview={assignmentsToReview}
|
||||
onClickClassCard={onClickClassCard}
|
||||
onClickAssignmentCard={onClickAssignmentCard}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,4 +6,7 @@ export default class ProfessorService {
|
|||
}
|
||||
|
||||
fetchClassrooms = () => ProfessorApi.getClassrooms(this.user.id);
|
||||
|
||||
fetchAssignmentsToReview = () =>
|
||||
ProfessorApi.getAssignmentsToReview(this.user.id);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import {
|
|||
allUpcomingAssignments,
|
||||
allPeople,
|
||||
professorClassrooms,
|
||||
assignmentsToReview,
|
||||
} from './responses';
|
||||
|
||||
const CommonApi = {
|
||||
|
|
@ -128,6 +129,13 @@ const ProfessorApi = {
|
|||
data: professorClassrooms,
|
||||
};
|
||||
}),
|
||||
getAssignmentsToReview: userId =>
|
||||
sleep(400).then(() => {
|
||||
console.log('Getting assignments to review' + userId);
|
||||
return {
|
||||
data: assignmentsToReview,
|
||||
};
|
||||
}),
|
||||
};
|
||||
|
||||
export { StudentApi, ProfessorApi, CommonApi };
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ const professorClassrooms = [
|
|||
],
|
||||
},
|
||||
{
|
||||
id: '123',
|
||||
id: '666',
|
||||
name: 'Matemática Discreta',
|
||||
abbreviation: 'MD',
|
||||
color: '#149b00',
|
||||
|
|
@ -344,6 +344,80 @@ const allClassroomAnnouncements = [
|
|||
},
|
||||
];
|
||||
|
||||
const assignmentsToReview = [
|
||||
{
|
||||
id: '0123',
|
||||
type: 'assessment',
|
||||
title:
|
||||
'Prova 1 - Armazenamento de Dados. Python em CD. Armazenamento Analítico',
|
||||
dueDate: '2022-07-01 23:59',
|
||||
scores: [
|
||||
{
|
||||
classroomId: '321',
|
||||
value: 30,
|
||||
},
|
||||
],
|
||||
classrooms: professorClassrooms.filter(c => c.id === '321'),
|
||||
status: 'OPEN',
|
||||
deliveredByStudents: 10,
|
||||
reviewed: 6,
|
||||
total: 30,
|
||||
},
|
||||
{
|
||||
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',
|
||||
scores: [
|
||||
{
|
||||
classroomId: '321',
|
||||
value: 30,
|
||||
},
|
||||
],
|
||||
classrooms: professorClassrooms.filter(c => c.id === '321'),
|
||||
status: 'CLOSED',
|
||||
deliveredByStudents: 30,
|
||||
reviewed: 1,
|
||||
total: 30,
|
||||
},
|
||||
{
|
||||
id: '0129',
|
||||
type: 'assessment',
|
||||
title: 'Lista de Exercícios 1 - Caminhos e circuitos',
|
||||
dueDate: '2022-09-01 23:59',
|
||||
scores: [
|
||||
{
|
||||
classroomId: '123',
|
||||
value: 30,
|
||||
},
|
||||
],
|
||||
classrooms: professorClassrooms.filter(c => c.id === '123'),
|
||||
status: 'CLOSED',
|
||||
deliveredByStudents: 30,
|
||||
reviewed: 0,
|
||||
total: 30,
|
||||
},
|
||||
|
||||
{
|
||||
id: '0130',
|
||||
type: 'assessment',
|
||||
title: 'Lista de Exercícios 2 - Tabela verdade',
|
||||
dueDate: '2022-09-01 23:59',
|
||||
scores: [
|
||||
{
|
||||
classroomId: '666',
|
||||
value: 30,
|
||||
},
|
||||
],
|
||||
classrooms: professorClassrooms.filter(c => c.id === '666'),
|
||||
status: 'OPEN',
|
||||
deliveredByStudents: 0,
|
||||
reviewed: 0,
|
||||
total: 30,
|
||||
},
|
||||
];
|
||||
|
||||
const allUpcomingAssignments = [
|
||||
{
|
||||
id: '5435',
|
||||
|
|
@ -618,4 +692,5 @@ export {
|
|||
authFailure,
|
||||
allUpcomingAssignments,
|
||||
professorClassrooms,
|
||||
assignmentsToReview,
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue