aboutsummaryrefslogtreecommitdiffstats
path: root/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/views')
-rw-r--r--src/views/ChoreEdit/ChoreView.jsx214
-rw-r--r--src/views/Chores/ChoreCard.jsx83
2 files changed, 212 insertions, 85 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={
diff --git a/src/views/Chores/ChoreCard.jsx b/src/views/Chores/ChoreCard.jsx
index 305f7c4..6a38e0b 100644
--- a/src/views/Chores/ChoreCard.jsx
+++ b/src/views/Chores/ChoreCard.jsx
@@ -1,4 +1,5 @@
import {
+ CancelScheduleSend,
Check,
Delete,
Edit,
@@ -21,6 +22,7 @@ import {
import {
Avatar,
Box,
+ Button,
Card,
Chip,
CircularProgress,
@@ -29,6 +31,7 @@ import {
IconButton,
Menu,
MenuItem,
+ Snackbar,
Typography,
} from '@mui/joy'
import moment from 'moment'
@@ -59,6 +62,9 @@ const ChoreCard = ({ chore, performers, onChoreUpdate, onChoreRemove, sx }) => {
const navigate = useNavigate()
const [isDisabled, setIsDisabled] = React.useState(false)
+ const [isPendingCompletion, setIsPendingCompletion] = React.useState(false)
+ const [secondsLeftToCancel, setSecondsLeftToCancel] = React.useState(null)
+ const [timeoutId, setTimeoutId] = React.useState(null)
// useEffect(() => {
// GetAllUsers()
// .then(response => response.json())
@@ -117,18 +123,41 @@ const ChoreCard = ({ chore, performers, onChoreUpdate, onChoreRemove, sx }) => {
})
}
- const handleCompleteChore = () => {
- MarkChoreComplete(chore.id).then(response => {
- if (response.ok) {
- response.json().then(data => {
- const newChore = data.res
- onChoreUpdate(newChore, 'completed')
- })
+ const handleTaskCompletion = () => {
+ setIsPendingCompletion(true)
+ let seconds = 3 // Starting countdown from 3 seconds
+ setSecondsLeftToCancel(seconds)
+
+ const countdownInterval = setInterval(() => {
+ seconds -= 1
+ setSecondsLeftToCancel(seconds)
+
+ if (seconds <= 0) {
+ clearInterval(countdownInterval) // Stop the countdown when it reaches 0
}
- })
- setIsDisabled(true)
- setTimeout(() => setIsDisabled(false), 3000) // Re-enable the button after 5 seconds
+ }, 1000)
+
+ const id = setTimeout(() => {
+ MarkChoreComplete(chore.id)
+ .then(resp => {
+ if (resp.ok) {
+ return resp.json().then(data => {
+ onChoreUpdate(data.res, 'completed')
+ })
+ }
+ })
+ .then(() => {
+ setIsPendingCompletion(false)
+ clearTimeout(id)
+ clearInterval(countdownInterval) // Ensure to clear this interval as well
+ setTimeoutId(null)
+ setSecondsLeftToCancel(null)
+ })
+ }, 3000)
+
+ setTimeoutId(id)
}
+
const handleChangeDueDate = newDate => {
if (activeUserId === null) {
alert('Please select a performer')
@@ -353,7 +382,7 @@ const ChoreCard = ({ chore, performers, onChoreUpdate, onChoreRemove, sx }) => {
{/* Box in top right with Chip showing next due date */}
<Box display='flex' justifyContent='start' alignItems='center'>
<Avatar sx={{ mr: 1, fontSize: 22 }}>
- {chore.name.charAt(0).toUpperCase()}
+ {Array.from(chore.name)[0]}
</Avatar>
<Box display='flex' flexDirection='column'>
<Typography level='title-md'>{chore.name}</Typography>
@@ -409,8 +438,8 @@ const ChoreCard = ({ chore, performers, onChoreUpdate, onChoreRemove, sx }) => {
<IconButton
variant='solid'
color='success'
- onClick={handleCompleteChore}
- disabled={isDisabled}
+ onClick={handleTaskCompletion}
+ disabled={isPendingCompletion}
sx={{
borderRadius: '50%',
minWidth: 50,
@@ -420,7 +449,7 @@ const ChoreCard = ({ chore, performers, onChoreUpdate, onChoreRemove, sx }) => {
>
<div className='relative grid place-items-center'>
<Check />
- {isDisabled && (
+ {isPendingCompletion && (
<CircularProgress
variant='solid'
color='success'
@@ -596,6 +625,32 @@ const ChoreCard = ({ chore, performers, onChoreUpdate, onChoreRemove, sx }) => {
},
}}
/>
+
+ <Snackbar
+ open={isPendingCompletion}
+ endDecorator={
+ <Button
+ onClick={() => {
+ if (timeoutId) {
+ clearTimeout(timeoutId)
+ setIsPendingCompletion(false)
+ setTimeoutId(null)
+ setSecondsLeftToCancel(null) // Reset or adjust as needed
+ }
+ }}
+ size='md'
+ variant='outlined'
+ color='primary'
+ startDecorator={<CancelScheduleSend />}
+ >
+ Cancel
+ </Button>
+ }
+ >
+ <Typography level='body2' textAlign={'center'}>
+ Task will be marked as completed in {secondsLeftToCancel} seconds
+ </Typography>
+ </Snackbar>
</Card>
</>
)
generated by cgit (git 2.34.1) at 2024-10-16 14:24:46 +0000