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

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

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

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

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

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

@ -9,6 +9,7 @@ import {
allClassroomAnnouncements,
allUpcomingAssignments,
allPeople,
professorClassrooms,
} from './responses';
const CommonApi = {
@ -124,7 +125,7 @@ const ProfessorApi = {
sleep(300).then(() => {
console.log('Get classrooms ' + userId);
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 = [
{
id: '5435',
@ -582,4 +617,5 @@ export {
professorUser,
authFailure,
allUpcomingAssignments,
professorClassrooms,
};