diff options
author | Mo Tarbin <mhed.t91@gmail.com> | 2024-07-09 17:39:16 -0400 |
---|---|---|
committer | Mo Tarbin <mhed.t91@gmail.com> | 2024-07-09 17:39:16 -0400 |
commit | a24134f8525373f5707b6c48aa77d3f4aff70799 (patch) | |
tree | a2a34c9ea849388dc39036aed3a99b79d9f055a4 /src/views/History/HistoryCard.jsx | |
parent | c4bf06b11cb5e8ebb1e7ed2ecc7bfeded0cfc42f (diff) | |
download | donetick-frontend-a24134f8525373f5707b6c48aa77d3f4aff70799.tar.gz donetick-frontend-a24134f8525373f5707b6c48aa77d3f4aff70799.tar.bz2 donetick-frontend-a24134f8525373f5707b6c48aa77d3f4aff70799.zip |
Add useWindowWidth hook and HistoryCard component
Diffstat (limited to '')
-rw-r--r-- | src/views/History/HistoryCard.jsx | 120 |
1 files changed, 120 insertions, 0 deletions
diff --git a/src/views/History/HistoryCard.jsx b/src/views/History/HistoryCard.jsx new file mode 100644 index 0000000..c606fbf --- /dev/null +++ b/src/views/History/HistoryCard.jsx @@ -0,0 +1,120 @@ +import { + Avatar, + Box, + Chip, + ListDivider, + ListItem, + ListItemContent, + ListItemDecorator, + Typography, +} from '@mui/joy' +import moment from 'moment' + +const HistoryCard = ({ allHistory, performers, historyEntry, index }) => { + function formatTimeDifference(startDate, endDate) { + const diffInMinutes = moment(startDate).diff(endDate, 'minutes') + let timeValue = diffInMinutes + let unit = 'minute' + + if (diffInMinutes >= 60) { + const diffInHours = moment(startDate).diff(endDate, 'hours') + timeValue = diffInHours + unit = 'hour' + + if (diffInHours >= 24) { + const diffInDays = moment(startDate).diff(endDate, 'days') + timeValue = diffInDays + unit = 'day' + } + } + + return `${timeValue} ${unit}${timeValue !== 1 ? 's' : ''}` + } + return ( + <> + <ListItem sx={{ gap: 1.5, alignItems: 'flex-start' }}> + {' '} + {/* Adjusted spacing and alignment */} + <ListItemDecorator> + <Avatar sx={{ mr: 1 }}> + {performers + .find(p => p.userId === historyEntry.completedBy) + ?.displayName?.charAt(0) || '?'} + </Avatar> + </ListItemDecorator> + <ListItemContent sx={{ my: 0 }}> + {' '} + {/* Removed vertical margin */} + <Box + sx={{ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + }} + > + <Typography level='body1' sx={{ fontWeight: 'md' }}> + {moment(historyEntry.completedAt).format('ddd MM/DD/yyyy HH:mm')} + </Typography> + + <Chip> + {historyEntry.dueDate && + historyEntry.completedAt > historyEntry.dueDate + ? 'Late' + : 'On Time'} + </Chip> + </Box> + <Typography level='body2' color='text.tertiary'> + <Chip> + { + performers.find(p => p.userId === historyEntry.completedBy) + ?.displayName + } + </Chip>{' '} + completed + {historyEntry.completedBy !== historyEntry.assignedTo && ( + <> + {', '} + assigned to{' '} + <Chip> + { + performers.find(p => p.userId === historyEntry.assignedTo) + ?.displayName + } + </Chip> + </> + )} + </Typography> + {historyEntry.dueDate && ( + <Typography level='body2' color='text.tertiary'> + Due: {moment(historyEntry.dueDate).format('ddd MM/DD/yyyy')} + </Typography> + )} + {historyEntry.notes && ( + <Typography level='body2' color='text.tertiary'> + Note: {historyEntry.notes} + </Typography> + )} + </ListItemContent> + </ListItem> + {index < allHistory.length - 1 && ( + <> + <ListDivider component='li'> + {/* time between two completion: */} + {index < allHistory.length - 1 && + allHistory[index + 1].completedAt && ( + <Typography level='body3' color='text.tertiary'> + {formatTimeDifference( + historyEntry.completedAt, + allHistory[index + 1].completedAt, + )}{' '} + before + </Typography> + )} + </ListDivider> + </> + )} + </> + ) +} + +export default HistoryCard |