Refactor AssignmentCard
This commit is contained in:
parent
17e8dafee7
commit
661653f561
3 changed files with 254 additions and 169 deletions
|
|
@ -1,169 +0,0 @@
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
Typography,
|
|
||||||
CardActionArea,
|
|
||||||
Stack,
|
|
||||||
Tooltip,
|
|
||||||
Divider,
|
|
||||||
} from '@mui/material';
|
|
||||||
import dayjs from 'dayjs';
|
|
||||||
|
|
||||||
import { capitalizeFirstLetter } from '../utils/capitalizeFirstLetter';
|
|
||||||
|
|
||||||
function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
|
|
||||||
if (layoutType === 'desktop') {
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
position: 'relative',
|
|
||||||
width: '100%',
|
|
||||||
borderLeft: `5px solid ${classrooms[0].color}`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{classrooms.length > 1 &&
|
|
||||||
classrooms
|
|
||||||
.filter((_, i) => i > 0)
|
|
||||||
.map(c => (
|
|
||||||
<div
|
|
||||||
key={c.id}
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
height: '100%',
|
|
||||||
borderLeft: `5px solid ${c.color}`,
|
|
||||||
left: 0,
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
))}
|
|
||||||
<CardActionArea
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'row',
|
|
||||||
justifyContent: 'start',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CardContent sx={{ width: '100%' }}>
|
|
||||||
<Tooltip title={title}>
|
|
||||||
<Typography
|
|
||||||
sx={{
|
|
||||||
overflow: 'hidden',
|
|
||||||
textOverflow: 'ellipsis',
|
|
||||||
display: '-webkit-box',
|
|
||||||
WebkitLineClamp: 2,
|
|
||||||
WebkitBoxOrient: 'vertical',
|
|
||||||
fontSize: '17px',
|
|
||||||
}}
|
|
||||||
gutterBottom
|
|
||||||
variant="h6"
|
|
||||||
component="div"
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
</Tooltip>
|
|
||||||
<Stack sx={{ width: '100%' }}>
|
|
||||||
<Typography
|
|
||||||
sx={{ fontWeight: 'bold' }}
|
|
||||||
variant="p"
|
|
||||||
component="div"
|
|
||||||
>
|
|
||||||
{classrooms.map(c => c.name).join(', ')}
|
|
||||||
</Typography>
|
|
||||||
<Divider sx={{ marginTop: '10px' }} />
|
|
||||||
<Typography
|
|
||||||
sx={{ marginTop: '10px' }}
|
|
||||||
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>
|
|
||||||
</Stack>
|
|
||||||
</CardContent>
|
|
||||||
</CardActionArea>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
} else if (layoutType === 'mobile') {
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
width: 390,
|
|
||||||
borderTop: `5px solid ${classrooms[0].color}`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CardActionArea
|
|
||||||
sx={{
|
|
||||||
position: 'relative',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{classrooms.length > 1 &&
|
|
||||||
classrooms
|
|
||||||
.filter((_, i) => i > 0)
|
|
||||||
.map(c => (
|
|
||||||
<div
|
|
||||||
key={c.id}
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
width: '100%',
|
|
||||||
borderTop: `5px solid ${c.color}`,
|
|
||||||
top: 0,
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
))}
|
|
||||||
<CardContent sx={{ width: '100%' }}>
|
|
||||||
<Tooltip title={title}>
|
|
||||||
<Typography
|
|
||||||
sx={{
|
|
||||||
overflow: 'hidden',
|
|
||||||
textOverflow: 'ellipsis',
|
|
||||||
display: '-webkit-box',
|
|
||||||
WebkitLineClamp: 2,
|
|
||||||
WebkitBoxOrient: 'vertical',
|
|
||||||
fontSize: '17px',
|
|
||||||
}}
|
|
||||||
gutterBottom
|
|
||||||
variant="h6"
|
|
||||||
component="div"
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
</Tooltip>
|
|
||||||
<Stack sx={{ width: '100%' }}>
|
|
||||||
<Typography
|
|
||||||
sx={{ fontWeight: 'bold' }}
|
|
||||||
variant="p"
|
|
||||||
component="div"
|
|
||||||
>
|
|
||||||
{classrooms.map(c => c.name).join(', ')}
|
|
||||||
</Typography>
|
|
||||||
<Divider sx={{ marginTop: '10px' }} />
|
|
||||||
<Typography
|
|
||||||
sx={{ marginTop: '10px' }}
|
|
||||||
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>
|
|
||||||
</Stack>
|
|
||||||
</CardContent>
|
|
||||||
</CardActionArea>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AssignmentCard;
|
|
||||||
118
src/components/AssignmentCard/index.js
Normal file
118
src/components/AssignmentCard/index.js
Normal file
|
|
@ -0,0 +1,118 @@
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
Typography,
|
||||||
|
CardActionArea,
|
||||||
|
Stack,
|
||||||
|
Tooltip,
|
||||||
|
Divider,
|
||||||
|
} from '@mui/material';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
|
||||||
|
import { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter';
|
||||||
|
|
||||||
|
import styles from './styles';
|
||||||
|
|
||||||
|
function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
|
||||||
|
const {
|
||||||
|
cardContainer,
|
||||||
|
classroomLinesIndicator,
|
||||||
|
cardActionArea,
|
||||||
|
cardContent,
|
||||||
|
typographyTitle,
|
||||||
|
stackClassroomNames,
|
||||||
|
typographyClassroomNames,
|
||||||
|
dividerMiddle,
|
||||||
|
typographyDueDate,
|
||||||
|
} = styles[layoutType];
|
||||||
|
|
||||||
|
if (layoutType === 'desktop') {
|
||||||
|
return (
|
||||||
|
<Card sx={cardContainer(classrooms)}>
|
||||||
|
{classrooms.length > 1 &&
|
||||||
|
classrooms
|
||||||
|
.filter((_, i) => i > 0)
|
||||||
|
.map(c => <div key={c.id} style={classroomLinesIndicator(c)} />)}
|
||||||
|
<CardActionArea sx={cardActionArea}>
|
||||||
|
<CardContent sx={cardContent}>
|
||||||
|
<Tooltip title={title}>
|
||||||
|
<Typography
|
||||||
|
sx={typographyTitle}
|
||||||
|
gutterBottom
|
||||||
|
variant="h6"
|
||||||
|
component="div"
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
</Tooltip>
|
||||||
|
<Stack sx={stackClassroomNames}>
|
||||||
|
<Typography
|
||||||
|
sx={typographyClassroomNames}
|
||||||
|
variant="p"
|
||||||
|
component="div"
|
||||||
|
>
|
||||||
|
{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>
|
||||||
|
</Stack>
|
||||||
|
</CardContent>
|
||||||
|
</CardActionArea>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
} else if (layoutType === 'mobile') {
|
||||||
|
return (
|
||||||
|
<Card sx={cardContainer(classrooms)}>
|
||||||
|
<CardActionArea sx={cardActionArea}>
|
||||||
|
{classrooms.length > 1 &&
|
||||||
|
classrooms
|
||||||
|
.filter((_, i) => i > 0)
|
||||||
|
.map(c => <div key={c.id} style={classroomLinesIndicator(c)} />)}
|
||||||
|
<CardContent sx={cardContent}>
|
||||||
|
<Tooltip title={title}>
|
||||||
|
<Typography
|
||||||
|
sx={typographyTitle}
|
||||||
|
gutterBottom
|
||||||
|
variant="h6"
|
||||||
|
component="div"
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
</Tooltip>
|
||||||
|
<Stack sx={stackClassroomNames}>
|
||||||
|
<Typography
|
||||||
|
sx={typographyClassroomNames}
|
||||||
|
variant="p"
|
||||||
|
component="div"
|
||||||
|
>
|
||||||
|
{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>
|
||||||
|
</Stack>
|
||||||
|
</CardContent>
|
||||||
|
</CardActionArea>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AssignmentCard;
|
||||||
136
src/components/AssignmentCard/styles.js
Normal file
136
src/components/AssignmentCard/styles.js
Normal file
|
|
@ -0,0 +1,136 @@
|
||||||
|
// ========== Desktop ==========
|
||||||
|
const desktopCardContainer = classrooms => ({
|
||||||
|
position: 'relative',
|
||||||
|
width: '100%',
|
||||||
|
borderLeft: `5px solid ${classrooms[0].color}`,
|
||||||
|
});
|
||||||
|
|
||||||
|
const desktopClassroomLinesIndicator = classroom => ({
|
||||||
|
position: 'absolute',
|
||||||
|
height: '100%',
|
||||||
|
borderLeft: `5px solid ${classroom.color}`,
|
||||||
|
left: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const desktopCardActionArea = {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'start',
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktopCardContent = {
|
||||||
|
width: '100%',
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktopTypographyTitle = {
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
display: '-webkit-box',
|
||||||
|
WebkitLineClamp: 2,
|
||||||
|
WebkitBoxOrient: 'vertical',
|
||||||
|
fontSize: '17px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktopStackClassroomNames = {
|
||||||
|
width: '100%',
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktopTypographyClassroomNames = {
|
||||||
|
fontWeight: 'bold',
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktopDividerMiddle = {
|
||||||
|
marginTop: '10px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktopTypographyDueDate = {
|
||||||
|
marginTop: '10px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktop = {
|
||||||
|
cardContainer: desktopCardContainer,
|
||||||
|
classroomLinesIndicator: desktopClassroomLinesIndicator,
|
||||||
|
cardActionArea: desktopCardActionArea,
|
||||||
|
cardContent: desktopCardContent,
|
||||||
|
typographyTitle: desktopTypographyTitle,
|
||||||
|
stackClassroomNames: desktopStackClassroomNames,
|
||||||
|
typographyClassroomNames: desktopTypographyClassroomNames,
|
||||||
|
dividerMiddle: desktopDividerMiddle,
|
||||||
|
typographyDueDate: desktopTypographyDueDate,
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========== Mobile ==========
|
||||||
|
const mobileCardContainer = classrooms => ({
|
||||||
|
width: 390,
|
||||||
|
borderTop: `5px solid ${classrooms[0].color}`,
|
||||||
|
});
|
||||||
|
|
||||||
|
const mobileClassroomLinesIndicator = classroom => ({
|
||||||
|
position: 'absolute',
|
||||||
|
width: '100%',
|
||||||
|
borderTop: `5px solid ${classroom.color}`,
|
||||||
|
top: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const mobileCardActionArea = {
|
||||||
|
position: 'relative',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobileCardContent = {
|
||||||
|
width: '100%',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobileTypographyTitle = {
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
display: '-webkit-box',
|
||||||
|
WebkitLineClamp: 2,
|
||||||
|
WebkitBoxOrient: 'vertical',
|
||||||
|
fontSize: '17px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobileStackClassroomNames = {
|
||||||
|
width: '100%',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobileTypographyClassroomNames = {
|
||||||
|
fontWeight: 'bold',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobileDividerMiddle = {
|
||||||
|
marginTop: '10px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobileTypographyDueDate = {
|
||||||
|
marginTop: '10px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobile = {
|
||||||
|
cardContainer: mobileCardContainer,
|
||||||
|
classroomLinesIndicator: mobileClassroomLinesIndicator,
|
||||||
|
cardActionArea: mobileCardActionArea,
|
||||||
|
cardContent: mobileCardContent,
|
||||||
|
typographyTitle: mobileTypographyTitle,
|
||||||
|
stackClassroomNames: mobileStackClassroomNames,
|
||||||
|
typographyClassroomNames: mobileTypographyClassroomNames,
|
||||||
|
dividerMiddle: mobileDividerMiddle,
|
||||||
|
typographyDueDate: mobileTypographyDueDate,
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========== Unset ==========
|
||||||
|
const unset = {
|
||||||
|
cardContainer: null,
|
||||||
|
classroomLinesIndicator: null,
|
||||||
|
cardActionArea: null,
|
||||||
|
cardContent: null,
|
||||||
|
typographyTitle: null,
|
||||||
|
stackClassroomNames: null,
|
||||||
|
typographyClassroomNames: null,
|
||||||
|
dividerMiddle: null,
|
||||||
|
typographyDueDate: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = { desktop, mobile, unset };
|
||||||
|
export default styles;
|
||||||
Loading…
Reference in a new issue