Add description field to ChoreEdit form and Choreview

src/views/ChoreEdit/ChoreEdit.jsx

@@ -22,6 +22,7 @@ import {
   Snackbar,
   Stack,
   Switch,
+  Textarea,
   Typography,
 } from '@mui/joy'
 import moment from 'moment'
@@ -61,6 +62,7 @@ const ChoreEdit = () => {
   const [userHistory, setUserHistory] = useState({})
   const { choreId } = useParams()
   const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
   const [confirmModelConfig, setConfirmModelConfig] = useState({})
   const [assignees, setAssignees] = useState([])
   const [performers, setPerformers] = useState([])
@@ -186,6 +188,7 @@ const ChoreEdit = () => {
     const chore = {
       id: Number(choreId),
       name: name,
+      description: description,
       assignees: assignees,
       dueDate: dueDate ? new Date(dueDate).toISOString() : null,
       frequencyType: frequencyType,
@@ -241,6 +244,7 @@ const ChoreEdit = () => {
         .then(data => {
           setChore(data.res)
           setName(data.res.name ? data.res.name : '')
+          setDescription(data.res.description ? data.res.description : '')
           setAssignees(data.res.assignees ? data.res.assignees : [])
           setAssignedTo(data.res.assignedTo)
           setFrequencyType(
@@ -379,11 +383,22 @@ const ChoreEdit = () => {
       <Box>
         <FormControl error={errors.name}>
           <Typography level='h4'>Title :</Typography>
-          <Typography level='h5'>What is this chore about?</Typography>
+          <Typography level='h5'> What is the name of this chore?</Typography>
           <Input value={name} onChange={e => setName(e.target.value)} />
           <FormHelperText error>{errors.name}</FormHelperText>
         </FormControl>
       </Box>
+      <Box mt={2}>
+        <FormControl error={errors.description}>
+          <Typography level='h4'>Details:</Typography>
+          <Typography level='h5'>What is this chore about?</Typography>
+          <Textarea
+            value={description}
+            onChange={e => setDescription(e.target.value)}
+          />
+          <FormHelperText error>{errors.name}</FormHelperText>
+        </FormControl>
+      </Box>
       <Box mt={2}>
         <Typography level='h4'>Assignees :</Typography>
         <Typography level='h5'>Who can do this chore?</Typography>

src/views/ChoreEdit/ChoreView.jsx

@@ -3,9 +3,11 @@ import {
   CancelScheduleSend,
   Check,
   Checklist,
+  CloseFullscreen,
   Edit,
   History,
   LowPriority,
+  OpenInFull,
   PeopleAlt,
   Person,
   SwitchAccessShortcut,
@@ -21,6 +23,7 @@ import {
   Dropdown,
   FormControl,
   Grid,
+  IconButton,
   Input,
   ListItem,
   ListItemContent,
@@ -74,6 +77,7 @@ const ChoreView = () => {
   const [completedDate, setCompletedDate] = useState(null)
   const [confirmModelConfig, setConfirmModelConfig] = useState({})
   const [chorePriority, setChorePriority] = useState(null)
+  const [isDescriptionOpen, setIsDescriptionOpen] = useState(false)
   useEffect(() => {
     Promise.all([
       GetChoreDetailById(choreId).then(resp => {
@@ -420,6 +424,47 @@ const ChoreView = () => {
           </Button>
         </Box>
 
+        {chore.description && (
+          <>
+            <Typography level='title-md' sx={{ mb: 1 }}>
+              Description :
+            </Typography>
+
+            <Sheet
+              variant='outlined'
+              sx={{
+                p: 2,
+                borderRadius: 'lg',
+              }}
+            >
+              <IconButton
+                variant='plain'
+                onClick={() => {
+                  setIsDescriptionOpen(!isDescriptionOpen)
+                }}
+                size='sm'
+                sx={{
+                  position: 'absolute',
+                  bottom: 5,
+                  right: 5,
+                }}
+              >
+                {isDescriptionOpen ? <CloseFullscreen /> : <OpenInFull />}
+              </IconButton>
+              <Box
+                sx={{
+                  maxHeight: isDescriptionOpen ? 'none' : '100px',
+                  overflowY: 'auto',
+                }}
+              >
+                <Typography level='body-md' sx={{ mb: 1 }}>
+                  {chore.description || '--'}
+                </Typography>
+              </Box>
+            </Sheet>
+          </>
+        )}
+
         {chore.notes && (
           <>
             <Typography level='title-md' sx={{ mb: 1 }}>

src/views/components/AddTaskModal.jsx

@@ -195,6 +195,11 @@ const TaskInput = ({ autoFocus, onChoreUpdate }) => {
         regex: /(every day|daily)$/i,
         name: 'Every day',
       },
+      {
+        frequencyType: 'daily:time',
+        regex: /every (morning|noon|afternoon|evening|night)$/i,
+        name: 'Every {time} daily',
+      },
       {
         frequencyType: 'weekly',
         regex: /(every week|weekly)$/i,
@@ -324,6 +329,17 @@ const TaskInput = ({ autoFocus, onChoreUpdate }) => {
             name: pattern.name,
             cleanedSentence: inputSentence.replace(match[0], '').trim(),
           }
+        case 'daily:time':
+          result.frequency = 1
+          result.frequencyMetadata.unit = 'days'
+          result.frequencyType = 'daily'
+          return {
+            result,
+            name: pattern.name.replace('{time}', match[1]),
+            // replace every x with ''
+
+            cleanedSentence: inputSentence.replace(match[0], '').trim(),
+          }
 
         case 'day_of_the_month:every':
           result.frequency = parseInt(match[1], 10)