diff options
Diffstat (limited to 'src/views/ChoreEdit')
| -rw-r--r-- | src/views/ChoreEdit/ChoreView.jsx | 214 |
1 files changed, 143 insertions, 71 deletions
diff --git a/src/views/ChoreEdit/ChoreView.jsx b/src/views/ChoreEdit/ChoreView.jsx index 8116270..29268bc 100644 --- a/src/views/ChoreEdit/ChoreView.jsx +++ b/src/views/ChoreEdit/ChoreView.jsx @@ -3,14 +3,19 @@ import { CancelScheduleSend, Check, Checklist, + Note, PeopleAlt, Person, } from '@mui/icons-material' import { Box, Button, + Checkbox, Container, + Divider, + FormControl, Grid, + Input, ListItem, ListItemContent, ListItemDecorator, @@ -21,7 +26,7 @@ import { } from '@mui/joy' import moment from 'moment' import { useEffect, useState } from 'react' -import { useParams, useSearchParams } from 'react-router-dom' +import { useNavigate, useParams, useSearchParams } from 'react-router-dom' import { GetAllUsers, GetChoreDetailById, @@ -43,14 +48,16 @@ const ChoreView = () => { const [performers, setPerformers] = useState([]) const [infoCards, setInfoCards] = useState([]) const { choreId } = useParams() + const [note, setNote] = useState(null) - // query param `complete=true` + const Navigate = useNavigate() const [searchParams] = useSearchParams() const [isPendingCompletion, setIsPendingCompletion] = useState(false) const [timeoutId, setTimeoutId] = useState(null) const [secondsLeftToCancel, setSecondsLeftToCancel] = useState(null) + const [completedDate, setCompletedDate] = useState(null) useEffect(() => { Promise.all([ GetChoreDetailById(choreId).then(resp => { @@ -82,7 +89,7 @@ const ChoreView = () => { { icon: <CalendarMonth />, text: 'Due Date', - subtext: moment(chore.dueDate).format('MM/DD/YYYY hh:mm A'), + subtext: moment(chore.nextDueDate).format('MM/DD/YYYY hh:mm A'), }, { icon: <PeopleAlt />, @@ -119,12 +126,21 @@ const ChoreView = () => { subtext: chore.lastCompletedDate ? `${ chore.lastCompletedDate && - moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A') - }(${ - performers.find(p => p.id === chore.lastCompletedBy)?.displayName - })` + moment(chore.lastCompletedDate).fromNow() + // moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A')) + }( + ${ + performers.find(p => p.id === chore.lastCompletedBy) + ?.displayName + } + )` : 'Never', }, + { + icon: <Note />, + text: 'Recent Note', + subtext: chore.notes || '--', + }, ] setInfoCards(cards) } @@ -143,10 +159,11 @@ const ChoreView = () => { }, 1000) const id = setTimeout(() => { - MarkChoreComplete(choreId) + MarkChoreComplete(choreId, note, completedDate) .then(resp => { if (resp.ok) { return resp.json().then(data => { + setNote(null) setChore(data.res) }) } @@ -174,75 +191,130 @@ const ChoreView = () => { } return ( - <Container maxWidth='sm'> - <Sheet - variant='plain' + <Container + maxWidth='sm' + sx={{ + display: 'flex', + flexDirection: 'column', + // space between : + justifyContent: 'space-between', + }} + > + <Box> + <Typography + level='h3' + textAlign={'center'} + sx={{ + mt: 2, + mb: 4, + }} + > + {chore.name} + </Typography> + + <Grid container spacing={1}> + {infoCards.map((info, index) => ( + <Grid key={index} item xs={12} sm={6}> + <Sheet sx={{ mb: 1, borderRadius: 'md', p: 1, boxShadow: 'sm' }}> + <ListItem> + <ListItemDecorator> + <IconCard>{info.icon}</IconCard> + </ListItemDecorator> + <ListItemContent> + <Typography level='body1' sx={{ fontWeight: 'md' }}> + {info.text} + </Typography> + <Typography level='body1' color='text.tertiary'> + {info.subtext ? info.subtext : '--'} + </Typography> + </ListItemContent> + </ListItem> + </Sheet> + </Grid> + ))} + </Grid> + </Box> + <Divider sx={{ - borderRadius: 'sm', - p: 2, - boxShadow: 'md', - minHeight: '90vh', - display: 'flex', - flexDirection: 'column', - justifyContent: 'space-between', + my: 2, }} - > - <Box> - <Typography - level='h4' - textAlign={'center'} + /> + + <Box> + <Typography level='title-md'>Additional Notes</Typography> + <Input + fullWidth + multiline + label='Additional Notes' + placeholder='note or information about the task' + value={note || ''} + onChange={e => { + if (e.target.value.trim() === '') { + setNote(null) + return + } + setNote(e.target.value) + }} + size='md' + sx={{ + my: 1, + }} + /> + <FormControl size='sm' sx={{ width: 400 }}> + <Checkbox + defaultChecked={completedDate !== null} + checked={completedDate !== null} + value={completedDate !== null} + onChange={e => { + if (e.target.checked) { + setCompletedDate( + moment(new Date()).format('YYYY-MM-DDTHH:00:00'), + ) + } else { + setCompletedDate(null) + } + }} + overlay sx={{ - mt: 2, - mb: 4, + my: 1, }} - > - {chore.name} - </Typography> + label={<Typography level='body2'>Set completion date</Typography>} + /> + </FormControl> + {completedDate !== null && ( + <Input + sx={{ mt: 1, mb: 1.5, width: 300 }} + type='datetime-local' + value={completedDate} + onChange={e => { + setCompletedDate(e.target.value) + }} + /> + )} + {completedDate === null && ( + // placeholder for the completion date with margin: + <Box + sx={{ + height: 56, + }} + /> + )} - <Grid container spacing={1}> - {infoCards.map((info, index) => ( - <Grid key={index} item xs={12} sm={6}> - <Sheet - sx={{ mb: 1, borderRadius: 'md', p: 1, boxShadow: 'sm' }} - > - <ListItem> - <ListItemDecorator> - <IconCard>{info.icon}</IconCard> - </ListItemDecorator> - <ListItemContent> - <Typography level='body1' sx={{ fontWeight: 'md' }}> - {info.text} - </Typography> - <Typography level='body1' color='text.tertiary'> - {info.subtext ? info.subtext : '--'} - </Typography> - </ListItemContent> - </ListItem> - </Sheet> - </Grid> - ))} - </Grid> - </Box> - <Box + <Button + fullWidth + size='lg' sx={{ - mt: 6, + height: 50, + mb: 2, }} + onClick={handleTaskCompletion} + disabled={isPendingCompletion} + color={isPendingCompletion ? 'danger' : 'success'} + startDecorator={<Check />} > - <Button - fullWidth - size='lg' - sx={{ - height: 50, - mb: 2, - }} - onClick={handleTaskCompletion} - disabled={isPendingCompletion} - color={isPendingCompletion ? 'danger' : 'success'} - startDecorator={<Check />} - > - <Box>Mark as done</Box> - </Button> - {/* <Button + <Box>Mark as done</Box> + </Button> + {/* <Button sx={{ borderRadius: '32px', mt: 1, @@ -258,8 +330,8 @@ const ChoreView = () => { > <Box>Mark as {isPendingCompletion ? 'completed' : 'done'}</Box> </Button> */} - </Box> - </Sheet> + </Box> + <Snackbar open={isPendingCompletion} endDecorator={ |