Update Chore view
This commit is contained in:
Mo Tarbin
parent
7a490116b7
commit
93512eb666
3 changed files with 170 additions and 149 deletions
|
|
@ -73,6 +73,16 @@ const MarkChoreComplete = (id, note, completedDate) => {
|
|||
body: JSON.stringify(body),
|
||||
})
|
||||
}
|
||||
|
||||
const SkipChore = id => {
|
||||
return Fetch(`${API_URL}/chores/${id}/skip`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({}),
|
||||
})
|
||||
}
|
||||
const CreateChore = chore => {
|
||||
return Fetch(`${API_URL}/chores/`, {
|
||||
method: 'POST',
|
||||
|
|
@ -277,6 +287,7 @@ export {
|
|||
SaveChore,
|
||||
SaveThing,
|
||||
signUp,
|
||||
SkipChore,
|
||||
UpdateThingState,
|
||||
UpdateUserDetails,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,10 @@ import {
|
|||
CancelScheduleSend,
|
||||
Check,
|
||||
Checklist,
|
||||
Edit,
|
||||
History,
|
||||
Note,
|
||||
PeopleAlt,
|
||||
Person,
|
||||
SwitchAccessShortcut,
|
||||
Timelapse,
|
||||
} from '@mui/icons-material'
|
||||
import {
|
||||
|
|
@ -22,7 +21,6 @@ import {
|
|||
Input,
|
||||
ListItem,
|
||||
ListItemContent,
|
||||
ListItemDecorator,
|
||||
Sheet,
|
||||
Snackbar,
|
||||
styled,
|
||||
|
|
@ -35,15 +33,17 @@ import {
|
|||
GetAllUsers,
|
||||
GetChoreDetailById,
|
||||
MarkChoreComplete,
|
||||
SkipChore,
|
||||
} from '../../utils/Fetcher'
|
||||
import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
|
||||
const IconCard = styled('div')({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#f0f0f0', // Adjust the background color as needed
|
||||
borderRadius: '50%',
|
||||
minWidth: '50px',
|
||||
height: '50px',
|
||||
minWidth: '40px',
|
||||
height: '40px',
|
||||
marginRight: '16px',
|
||||
})
|
||||
const ChoreView = () => {
|
||||
|
|
@ -60,6 +60,8 @@ const ChoreView = () => {
|
|||
const [timeoutId, setTimeoutId] = useState(null)
|
||||
const [secondsLeftToCancel, setSecondsLeftToCancel] = useState(null)
|
||||
const [completedDate, setCompletedDate] = useState(null)
|
||||
const [confirmModelConfig, setConfirmModelConfig] = useState({})
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
GetChoreDetailById(choreId).then(resp => {
|
||||
|
|
@ -88,24 +90,21 @@ const ChoreView = () => {
|
|||
|
||||
const generateInfoCards = chore => {
|
||||
const cards = [
|
||||
// {
|
||||
// size: 6,
|
||||
// icon: <CalendarMonth />,
|
||||
// text: 'Due Date',
|
||||
// subtext: moment(chore.nextDueDate).format('MM/DD/YYYY hh:mm A'),
|
||||
// },
|
||||
{
|
||||
size: 6,
|
||||
icon: <PeopleAlt />,
|
||||
text: 'Assigned To',
|
||||
subtext: performers.find(p => p.id === chore.assignedTo)?.displayName,
|
||||
},
|
||||
// {
|
||||
// size: 6,
|
||||
// icon: <Person />,
|
||||
// text: 'Created By',
|
||||
// subtext: performers.find(p => p.id === chore.createdBy)?.displayName,
|
||||
// },
|
||||
{
|
||||
size: 6,
|
||||
icon: <CalendarMonth />,
|
||||
text: 'Due Date',
|
||||
subtext: chore.nextDueDate
|
||||
? moment(chore.nextDueDate).fromNow()
|
||||
: 'N/A',
|
||||
},
|
||||
|
||||
// {
|
||||
// icon: <TextFields />,
|
||||
// text: 'Frequency',
|
||||
|
|
@ -116,37 +115,40 @@ const ChoreView = () => {
|
|||
{
|
||||
size: 6,
|
||||
icon: <Checklist />,
|
||||
text: 'Completed',
|
||||
text: 'Total Completed',
|
||||
subtext: `${chore.totalCompletedCount} times`,
|
||||
},
|
||||
{
|
||||
size: 6,
|
||||
icon: <Timelapse />,
|
||||
text: 'Last time',
|
||||
text: 'Last Completed',
|
||||
subtext:
|
||||
chore.lastCompletedDate &&
|
||||
moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A'),
|
||||
// chore.lastCompletedDate &&
|
||||
// moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A'),
|
||||
chore.lastCompletedDate && moment(chore.lastCompletedDate).fromNow(),
|
||||
},
|
||||
{
|
||||
size: 6,
|
||||
icon: <Person />,
|
||||
text: 'Last',
|
||||
text: 'Last Performer',
|
||||
subtext: chore.lastCompletedDate
|
||||
? `${
|
||||
chore.lastCompletedDate &&
|
||||
moment(chore.lastCompletedDate).fromNow()
|
||||
// moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A'))
|
||||
}(${
|
||||
performers.find(p => p.id === chore.lastCompletedBy)?.displayName
|
||||
})`
|
||||
}`
|
||||
: 'Never',
|
||||
},
|
||||
{
|
||||
size: 12,
|
||||
icon: <Note />,
|
||||
text: 'Recent Note',
|
||||
subtext: chore.notes || '--',
|
||||
size: 6,
|
||||
icon: <Person />,
|
||||
text: 'Created By',
|
||||
subtext: performers.find(p => p.id === chore.createdBy)?.displayName,
|
||||
},
|
||||
// {
|
||||
// size: 12,
|
||||
// icon: <Note />,
|
||||
// text: 'Recent Note',
|
||||
// subtext: chore.notes || '--',
|
||||
// },
|
||||
]
|
||||
setInfoCards(cards)
|
||||
}
|
||||
|
|
@ -195,7 +197,16 @@ const ChoreView = () => {
|
|||
|
||||
setTimeoutId(id)
|
||||
}
|
||||
|
||||
const handleSkippingTask = () => {
|
||||
SkipChore(choreId).then(response => {
|
||||
if (response.ok) {
|
||||
response.json().then(data => {
|
||||
const newChore = data.res
|
||||
setChore(newChore)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
return (
|
||||
<Container
|
||||
maxWidth='sm'
|
||||
|
|
@ -232,69 +243,80 @@ const ChoreView = () => {
|
|||
</Chip>
|
||||
</Box>
|
||||
<Box>
|
||||
<Grid container spacing={1}>
|
||||
{infoCards.map((info, index) => (
|
||||
<Grid key={index} item xs={info.size} sm={info.size}>
|
||||
<Typography level='title-md' sx={{ mb: 1 }}>
|
||||
Details
|
||||
</Typography>
|
||||
|
||||
<Sheet
|
||||
sx={{
|
||||
mb: 1,
|
||||
borderRadius: 'lg',
|
||||
p: 1,
|
||||
boxShadow: 'sm',
|
||||
p: 2,
|
||||
}}
|
||||
variant='outlined'
|
||||
>
|
||||
<ListItem>
|
||||
<ListItemDecorator>
|
||||
<IconCard>{info.icon}</IconCard>
|
||||
</ListItemDecorator>
|
||||
<Grid container spacing={1}>
|
||||
{infoCards.map((detail, index) => (
|
||||
<Grid item xs={4} key={index}>
|
||||
{/* divider between the list items: */}
|
||||
|
||||
<ListItem key={index}>
|
||||
<ListItemContent>
|
||||
<Typography level='body1' sx={{ fontWeight: 'md' }}>
|
||||
{info.text}
|
||||
<Typography level='body-xs' sx={{ fontWeight: 'md' }}>
|
||||
{detail.text}
|
||||
</Typography>
|
||||
<Typography level='body1' color='text.tertiary'>
|
||||
{info.subtext ? info.subtext : '--'}
|
||||
<Typography level='body-sm' color='text.tertiary'>
|
||||
{detail.subtext ? detail.subtext : '--'}
|
||||
</Typography>
|
||||
</ListItemContent>
|
||||
</ListItem>
|
||||
</Sheet>
|
||||
</Grid>
|
||||
))}
|
||||
<Grid item xs={6}>
|
||||
</Grid>
|
||||
</Sheet>
|
||||
{chore.notes && (
|
||||
<>
|
||||
<Typography level='title-md' sx={{ mb: 1 }}>
|
||||
Previous note:
|
||||
</Typography>
|
||||
<Sheet variant='outlined' sx={{ p: 2, borderRadius: 'lg' }}>
|
||||
<Typography level='body-md' sx={{ mb: 1 }}>
|
||||
{chore.notes || '--'}
|
||||
</Typography>
|
||||
</Sheet>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
gap: 1,
|
||||
alignContent: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
startDecorator={<History />}
|
||||
size='lg'
|
||||
color='success'
|
||||
variant='outlined'
|
||||
fullWidth
|
||||
variant='plain'
|
||||
onClick={() => {
|
||||
navigate(`/chores/${choreId}/history`)
|
||||
}}
|
||||
>
|
||||
History
|
||||
View History
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Button
|
||||
startDecorator={<Edit />}
|
||||
size='lg'
|
||||
color='success'
|
||||
variant='outlined'
|
||||
fullWidth
|
||||
onClick={() => {
|
||||
navigate(`/chores/${choreId}/edit`)
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
{/* <Divider
|
||||
sx={{
|
||||
my: 2,
|
||||
}}
|
||||
/> */}
|
||||
|
||||
<Typography level='title-md' sx={{ mt: 1 }}>
|
||||
Actions
|
||||
</Typography>
|
||||
<Card
|
||||
sx={{
|
||||
p: 2,
|
||||
|
|
@ -319,11 +341,11 @@ const ChoreView = () => {
|
|||
}}
|
||||
size='md'
|
||||
sx={{
|
||||
my: 1,
|
||||
mb: 1,
|
||||
}}
|
||||
/>
|
||||
|
||||
<FormControl size='sm' sx={{ width: 400 }}>
|
||||
<FormControl size='sm'>
|
||||
<Checkbox
|
||||
defaultChecked={completedDate !== null}
|
||||
checked={completedDate !== null}
|
||||
|
|
@ -358,23 +380,9 @@ const ChoreView = () => {
|
|||
/>
|
||||
)}
|
||||
|
||||
{/* {completedDate === null && (
|
||||
// placeholder for the completion date with margin:
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
height: 56,
|
||||
}}
|
||||
/>
|
||||
)} */}
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
size='lg'
|
||||
sx={{
|
||||
height: 50,
|
||||
// mb: 2,
|
||||
}}
|
||||
onClick={handleTaskCompletion}
|
||||
disabled={isPendingCompletion}
|
||||
color={isPendingCompletion ? 'danger' : 'success'}
|
||||
|
|
@ -382,24 +390,30 @@ const ChoreView = () => {
|
|||
>
|
||||
<Box>Mark as done</Box>
|
||||
</Button>
|
||||
{/* <Button
|
||||
sx={{
|
||||
borderRadius: '32px',
|
||||
mt: 1,
|
||||
height: 50,
|
||||
zIndex: 1,
|
||||
}}
|
||||
onClick={() => {
|
||||
Navigate('/my/chores')
|
||||
}}
|
||||
color={isPendingCompletion ? 'danger' : 'success'}
|
||||
startDecorator={isPendingCompletion ? <Close /> : <Check />}
|
||||
<Button
|
||||
fullWidth
|
||||
>
|
||||
<Box>Mark as {isPendingCompletion ? 'completed' : 'done'}</Box>
|
||||
</Button> */}
|
||||
</Card>
|
||||
size='lg'
|
||||
onClick={() => {
|
||||
setConfirmModelConfig({
|
||||
isOpen: true,
|
||||
title: 'Skip Task',
|
||||
|
||||
message: 'Are you sure you want to skip this task?',
|
||||
|
||||
confirmText: 'Skip',
|
||||
cancelText: 'Cancel',
|
||||
onClose: confirmed => {
|
||||
if (confirmed) {
|
||||
handleSkippingTask()
|
||||
}
|
||||
setConfirmModelConfig({})
|
||||
},
|
||||
})
|
||||
}}
|
||||
startDecorator={<SwitchAccessShortcut />}
|
||||
>
|
||||
<Box>Skip</Box>
|
||||
</Button>
|
||||
<Snackbar
|
||||
open={isPendingCompletion}
|
||||
endDecorator={
|
||||
|
|
@ -425,6 +439,8 @@ const ChoreView = () => {
|
|||
Task will be marked as completed in {secondsLeftToCancel} seconds
|
||||
</Typography>
|
||||
</Snackbar>
|
||||
<ConfirmationModal config={confirmModelConfig} />
|
||||
</Card>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ import moment from 'moment'
|
|||
import React, { useEffect } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { API_URL } from '../../Config'
|
||||
import { MarkChoreComplete } from '../../utils/Fetcher'
|
||||
import { MarkChoreComplete, SkipChore } from '../../utils/Fetcher'
|
||||
import { Fetch } from '../../utils/TokenManager'
|
||||
import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
|
||||
import DateModal from '../Modals/Inputs/DateModal'
|
||||
|
|
@ -521,13 +521,7 @@ const ChoreCard = ({
|
|||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
Fetch(`${API_URL}/chores/${chore.id}/skip`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({}),
|
||||
}).then(response => {
|
||||
SkipChore(chore.id).then(response => {
|
||||
if (response.ok) {
|
||||
response.json().then(data => {
|
||||
const newChore = data.res
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue