From ba3331efe8f51cb1a0029e20bbfd7060312b810e Mon Sep 17 00:00:00 2001 From: Mo Tarbin Date: Sat, 13 Jul 2024 01:54:23 -0400 Subject: Add Footer component to Landing page --- src/views/ChoreEdit/ChoreView.jsx | 106 ++++++++++++++++++++++++++++---------- 1 file changed, 80 insertions(+), 26 deletions(-) (limited to 'src/views/ChoreEdit') diff --git a/src/views/ChoreEdit/ChoreView.jsx b/src/views/ChoreEdit/ChoreView.jsx index df45aa7..9e3357b 100644 --- a/src/views/ChoreEdit/ChoreView.jsx +++ b/src/views/ChoreEdit/ChoreView.jsx @@ -3,15 +3,19 @@ import { CancelScheduleSend, Check, Checklist, + Edit, + History, Note, PeopleAlt, Person, + Timelapse, } from '@mui/icons-material' import { Box, Button, Card, Checkbox, + Chip, Container, FormControl, Grid, @@ -84,21 +88,24 @@ const ChoreView = () => { const generateInfoCards = chore => { const cards = [ + // { + // size: 6, + // icon: , + // text: 'Due Date', + // subtext: moment(chore.nextDueDate).format('MM/DD/YYYY hh:mm A'), + // }, { - icon: , - text: 'Due Date', - subtext: moment(chore.nextDueDate).format('MM/DD/YYYY hh:mm A'), - }, - { + size: 6, icon: , text: 'Assigned To', subtext: performers.find(p => p.id === chore.assignedTo)?.displayName, }, - { - icon: , - text: 'Created By', - subtext: performers.find(p => p.id === chore.createdBy)?.displayName, - }, + // { + // size: 6, + // icon: , + // text: 'Created By', + // subtext: performers.find(p => p.id === chore.createdBy)?.displayName, + // }, // { // icon: , // text: 'Frequency', @@ -107,20 +114,23 @@ const ChoreView = () => { // chore.frequencyType.slice(1), // }, { + size: 6, icon: , - text: 'Total Completed', - subtext: `${chore.totalCompletedCount}`, + text: 'Completed', + subtext: `${chore.totalCompletedCount} times`, }, - // { - // icon: , - // text: 'Last Completed', - // subtext: - // chore.lastCompletedDate && - // moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A'), - // }, { + size: 6, + icon: , + text: 'Last time', + subtext: + chore.lastCompletedDate && + moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A'), + }, + { + size: 6, icon: , - text: 'Last Completed', + text: 'Last', subtext: chore.lastCompletedDate ? `${ chore.lastCompletedDate && @@ -132,6 +142,7 @@ const ChoreView = () => { : 'Never', }, { + size: 12, icon: , text: 'Recent Note', subtext: chore.notes || '--', @@ -195,22 +206,43 @@ const ChoreView = () => { justifyContent: 'space-between', }} > - + {chore.name} - + } size='lg' sx={{ mb: 4 }}> + {chore.nextDueDate + ? `Due at ${moment(chore.nextDueDate).format('MM/DD/YYYY hh:mm A')}` + : 'N/A'} + + + {infoCards.map((info, index) => ( - - + + {info.icon} @@ -227,6 +259,28 @@ const ChoreView = () => { ))} + + + + + + {/* Date: Sun, 14 Jul 2024 17:45:19 -0400 Subject: Fix conditional rendering bug in RepeatSection component --- src/views/ChoreEdit/RepeatSection.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/views/ChoreEdit') diff --git a/src/views/ChoreEdit/RepeatSection.jsx b/src/views/ChoreEdit/RepeatSection.jsx index 99f196f..bdf6738 100644 --- a/src/views/ChoreEdit/RepeatSection.jsx +++ b/src/views/ChoreEdit/RepeatSection.jsx @@ -509,7 +509,7 @@ const RepeatSection = ({ }} > Is this something that should be done when a thing state changes?{' '} - {!isPlusAccount(userProfile) && ( + {userProfile && !isPlusAccount(userProfile) && ( Not available in Basic Plan -- cgit From 7a490116b70894ce00e71c7dd0c9dc71f8b72a5a Mon Sep 17 00:00:00 2001 From: Mo Tarbin Date: Sun, 14 Jul 2024 17:56:18 -0400 Subject: Add missing useNavigate hook in ChoreView component --- src/views/ChoreEdit/ChoreView.jsx | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) (limited to 'src/views/ChoreEdit') diff --git a/src/views/ChoreEdit/ChoreView.jsx b/src/views/ChoreEdit/ChoreView.jsx index 9e3357b..0e88016 100644 --- a/src/views/ChoreEdit/ChoreView.jsx +++ b/src/views/ChoreEdit/ChoreView.jsx @@ -30,7 +30,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, @@ -48,7 +48,7 @@ const IconCard = styled('div')({ }) const ChoreView = () => { const [chore, setChore] = useState({}) - + const navigate = useNavigate() const [performers, setPerformers] = useState([]) const [infoCards, setInfoCards] = useState([]) const { choreId } = useParams() @@ -266,6 +266,9 @@ const ChoreView = () => { color='success' variant='outlined' fullWidth + onClick={() => { + navigate(`/chores/${choreId}/history`) + }} > History @@ -277,6 +280,9 @@ const ChoreView = () => { color='success' variant='outlined' fullWidth + onClick={() => { + navigate(`/chores/${choreId}/edit`) + }} > Edit @@ -333,9 +339,11 @@ const ChoreView = () => { } }} overlay - sx={{ - my: 1, - }} + sx={ + { + // my: 1, + } + } label={Set completion date} /> @@ -349,21 +357,23 @@ const ChoreView = () => { }} /> )} - {completedDate === null && ( - // placeholder for the completion date with margin: + + {/* {completedDate === null && ( + // placeholder for the completion date with margin: + - )} + )} */} + + ))} - - - - + + {chore.notes && ( + <> + + Previous note: + + + + {chore.notes || '--'} + + + + )} + + + + {/* */} - + + Actions + { }} size='md' sx={{ - my: 1, + mb: 1, }} /> - + { /> )} - {/* {completedDate === null && ( - // placeholder for the completion date with margin: - - - )} */} - - {/* */} - + - } - > - - Task will be marked as completed in {secondsLeftToCancel} seconds - - + message: 'Are you sure you want to skip this task?', + + confirmText: 'Skip', + cancelText: 'Cancel', + onClose: confirmed => { + if (confirmed) { + handleSkippingTask() + } + setConfirmModelConfig({}) + }, + }) + }} + startDecorator={} + > + Skip + + { + if (timeoutId) { + clearTimeout(timeoutId) + setIsPendingCompletion(false) + setTimeoutId(null) + setSecondsLeftToCancel(null) // Reset or adjust as needed + } + }} + size='lg' + variant='outlined' + color='danger' + startDecorator={} + > + Cancel + + } + > + + Task will be marked as completed in {secondsLeftToCancel} seconds + + + + ) } -- cgit From 7f4e5928492a71135f6817874461c80a0ecc155c Mon Sep 17 00:00:00 2001 From: Mo Tarbin Date: Tue, 16 Jul 2024 19:37:18 -0400 Subject: Add SkipChore function to Fetcher utility module, Update Loading Comp --- src/views/ChoreEdit/ChoreView.jsx | 193 ++++++++++++++++++++++++-------------- 1 file changed, 125 insertions(+), 68 deletions(-) (limited to 'src/views/ChoreEdit') diff --git a/src/views/ChoreEdit/ChoreView.jsx b/src/views/ChoreEdit/ChoreView.jsx index afdc379..172ad9b 100644 --- a/src/views/ChoreEdit/ChoreView.jsx +++ b/src/views/ChoreEdit/ChoreView.jsx @@ -26,6 +26,7 @@ import { styled, Typography, } from '@mui/joy' +import { Divider } from '@mui/material' import moment from 'moment' import { useEffect, useState } from 'react' import { useNavigate, useParams, useSearchParams } from 'react-router-dom' @@ -135,7 +136,7 @@ const ChoreView = () => { ? `${ performers.find(p => p.id === chore.lastCompletedBy)?.displayName }` - : 'Never', + : '--', }, { size: 6, @@ -230,8 +231,8 @@ const ChoreView = () => { level='h3' // textAlign={'center'} sx={{ - mt: 2, - mb: 1, + mt: 1, + mb: 0.5, }} > {chore.name} @@ -243,7 +244,7 @@ const ChoreView = () => { - + Details @@ -265,9 +266,13 @@ const ChoreView = () => { {detail.text} - + {detail.subtext ? detail.subtext : '--'} - + @@ -286,28 +291,6 @@ const ChoreView = () => { )} - - - - {/* { mt: 2, }} > - Additional Notes - { - if (e.target.value.trim() === '') { - setNote(null) - return + + Complete the task + + + + { + if (e.target.checked) { + setNote('') + } else { + setNote(null) + } + }} + overlay + sx={ + { + // my: 1, + } } - setNote(e.target.value) - }} - size='md' - sx={{ - mb: 1, - }} - /> + label={ + + Add Additional Notes + + } + /> + + {note !== null && ( + { + if (e.target.value.trim() === '') { + setNote(null) + return + } + setNote(e.target.value) + }} + size='md' + sx={{ + mb: 1, + }} + /> + )} { // my: 1, } } - label={Set completion date} + label={ + + Specify completion date + + } /> {completedDate !== null && ( @@ -390,30 +422,55 @@ const ChoreView = () => { > Mark as done - + + + +