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

Add custom class card for professor

Browse source
This commit is contained in:
Leonardo Murça 2022-11-30 16:03:18 -03:00
parent 2b1302ad3a
commit faf7890efa
5 changed files with 94 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/components/ClassCard/index.js
View file

@ -17,6 +17,7 @@ function ClassCard({
title, title,
color, color,
teachers, teachers,
course,
layoutType, layoutType,
onClick, onClick,
}) { }) {
@ -45,23 +46,30 @@ function ClassCard({
> >
{title} {title}
</Typography> </Typography>
<Stack alignItems="center" direction="row" spacing={1}> {teachers && (
<AvatarGroup total={teachers.length}> <Stack alignItems="center" direction="row" spacing={1}>
{teachers.map(t => ( <AvatarGroup total={teachers.length}>
<Avatar {teachers.map(t => (
key={t.name} <Avatar
alt={t.name} key={t.name}
src={t.avatar} alt={t.name}
sx={avatar} src={t.avatar}
/> sx={avatar}
))} />
</AvatarGroup> ))}
<Tooltip title={teachers.map(t => t.name).join(', ')}> </AvatarGroup>
<Typography sx={tooltip} variant="body3" color="text.secondary"> <Tooltip title={teachers.map(t => t.name).join(', ')}>
{teachers.map(t => t.name).join(', ')} <Typography
</Typography> sx={tooltip}
</Tooltip> variant="body3"
</Stack> color="text.secondary"
>
{teachers.map(t => t.name).join(', ')}
</Typography>
</Tooltip>
</Stack>
)}
{course && <Typography variant="body2">{course}</Typography>}
</CardContent> </CardContent>
</CardActionArea> </CardActionArea>
</Card> </Card>
@ -82,21 +90,24 @@ function ClassCard({
> >
{title} {title}
</Typography> </Typography>
<Stack alignItems="center" direction="row" spacing={1}> {teachers && (
<AvatarGroup total={teachers.length}> <Stack alignItems="center" direction="row" spacing={1}>
{teachers.map(t => ( <AvatarGroup total={teachers.length}>
<Avatar {teachers.map(t => (
key={t.name} <Avatar
alt={t.name} key={t.name}
src={t.avatar} alt={t.name}
sx={avatar} src={t.avatar}
/> sx={avatar}
))} />
</AvatarGroup> ))}
<Typography sx={tooltip} variant="body2" color="text.secondary"> </AvatarGroup>
{teachers.map(t => t.name).join(', ')} <Typography sx={tooltip} variant="body2" color="text.secondary">
</Typography> {teachers.map(t => t.name).join(', ')}
</Stack> </Typography>
</Stack>
)}
{course && <Typography variant="body2">{course}</Typography>}
</CardContent> </CardContent>
</CardActionArea> </CardActionArea>
</Card> </Card>

2
src/screens/professor/Home/View.js
View file

@ -30,6 +30,7 @@ function View({ layoutType, classrooms, onClickClassCard }) {
title={classroom.name} title={classroom.name}
color={classroom.color} color={classroom.color}
teachers={classroom.teachers} teachers={classroom.teachers}
course={classroom.course}
layoutType={layoutType} layoutType={layoutType}
onClick={() => onClickClassCard(classroom.id)} onClick={() => onClickClassCard(classroom.id)}
/> />
@ -92,6 +93,7 @@ function View({ layoutType, classrooms, onClickClassCard }) {
title={classroom.name} title={classroom.name}
color={classroom.color} color={classroom.color}
teachers={classroom.teachers} teachers={classroom.teachers}
course={classroom.course}
layoutType={layoutType} layoutType={layoutType}
onClick={() => onClickClassCard(classroom.id)} onClick={() => onClickClassCard(classroom.id)}
/> />

11
src/screens/professor/Home/styles.js
View file

@ -4,8 +4,13 @@ const desktopContainer = {
margin: 0, margin: 0,
}; };
const desktopDivider = {
borderLeft: '4px solid #CFCFCF',
};
const desktop = { const desktop = {
container: desktopContainer, container: desktopContainer,
divider: desktopDivider,
}; };
// ========== Mobile ========== // ========== Mobile ==========
@ -16,8 +21,14 @@ const mobileContainer = {
margin: 0, margin: 0,
}; };
const mobileDivider = {
borderTop: '2px solid #CFCFCF',
paddingTop: '15px',
};
const mobile = { const mobile = {
container: mobileContainer, container: mobileContainer,
divider: mobileDivider,
}; };
// ========== Unset ========== // ========== Unset ==========

3
src/utils/mocks/api.js
View file

@ -9,6 +9,7 @@ import {
allClassroomAnnouncements, allClassroomAnnouncements,
allUpcomingAssignments, allUpcomingAssignments,
allPeople, allPeople,
professorClassrooms,
} from './responses'; } from './responses';
const CommonApi = { const CommonApi = {
@ -124,7 +125,7 @@ const ProfessorApi = {
sleep(300).then(() => { sleep(300).then(() => {
console.log('Get classrooms ' + userId); console.log('Get classrooms ' + userId);
return { return {
data: allClassrooms, data: professorClassrooms,
}; };
}), }),
}; };

36
src/utils/mocks/responses.js
View file

@ -95,6 +95,41 @@ const allClassrooms = [
}, },
]; ];
const professorClassrooms = [
{
id: '321',
name: 'Introdução à Ciência de Dados',
abbreviation: 'ICD',
color: '#006FF2',
course: 'BSI 2020',
appointmentSlots: [
{ weekDay: 'Quarta-feira', start: '10:00', end: '11:40' },
{ weekDay: 'Sexta-feira', start: '10:00', end: '11:40' },
],
},
{
id: '123',
name: 'Teoria dos Grafos',
abbreviation: 'TDG',
color: '#d30000',
course: 'BSI 2018',
appointmentSlots: [
{ weekDay: 'Quarta-feira', start: '11:00', end: '12:00' },
{ weekDay: 'Segunda-feira', start: '10:00', end: '11:40' },
],
},
{
id: '123',
name: 'Matemática Discreta',
abbreviation: 'MD',
color: '#149b00',
course: 'BSI 2020',
appointmentSlots: [
{ weekDay: 'Quarta-feira', start: '9:00', end: '10:00' },
],
},
];
const allAssignments = [ const allAssignments = [
{ {
id: '5435', id: '5435',
@ -582,4 +617,5 @@ export {
professorUser, professorUser,
authFailure, authFailure,
allUpcomingAssignments, allUpcomingAssignments,
professorClassrooms,
}; };