Improve MarkChoreComplete, allow complete in past ,etc

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={