aboutsummaryrefslogtreecommitdiffstats
path: root/src/views/ChoreEdit
diff options
context:
space:
mode:
Diffstat (limited to 'src/views/ChoreEdit')
-rw-r--r--src/views/ChoreEdit/ChoreView.jsx193
1 files changed, 125 insertions, 68 deletions
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 = () => {
</Chip>
</Box>
<Box>
- <Typography level='title-md' sx={{ mb: 1 }}>
+ <Typography level='title-md' sx={{ mb: 0.5 }}>
Details
</Typography>
@@ -265,9 +266,13 @@ const ChoreView = () => {
<Typography level='body-xs' sx={{ fontWeight: 'md' }}>
{detail.text}
</Typography>
- <Typography level='body-sm' color='text.tertiary'>
+ <Chip
+ color='primary'
+ size='md'
+ startDecorator={detail.icon}
+ >
{detail.subtext ? detail.subtext : '--'}
- </Typography>
+ </Chip>
</ListItemContent>
</ListItem>
</Grid>
@@ -286,28 +291,6 @@ const ChoreView = () => {
</Sheet>
</>
)}
-
- <Box
- sx={{
- display: 'flex',
- flexDirection: 'row',
- gap: 1,
- alignContent: 'center',
- justifyContent: 'center',
- }}
- >
- <Button
- startDecorator={<History />}
- size='lg'
- color='success'
- variant='plain'
- onClick={() => {
- navigate(`/chores/${choreId}/history`)
- }}
- >
- View History
- </Button>
- </Box>
</Box>
{/* <Divider
sx={{
@@ -325,25 +308,63 @@ const ChoreView = () => {
mt: 2,
}}
>
- <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
+ <Typography level='body-md' sx={{ mb: 1 }}>
+ Complete the task
+ </Typography>
+
+ <FormControl size='sm'>
+ <Checkbox
+ defaultChecked={note !== null}
+ checked={note !== null}
+ value={note !== null}
+ size='lg'
+ onChange={e => {
+ if (e.target.checked) {
+ setNote('')
+ } else {
+ setNote(null)
+ }
+ }}
+ overlay
+ sx={
+ {
+ // my: 1,
+ }
}
- setNote(e.target.value)
- }}
- size='md'
- sx={{
- mb: 1,
- }}
- />
+ label={
+ <Typography
+ level='body-sm'
+ sx={{
+ // center vertically
+ display: 'flex',
+ alignItems: 'center',
+ }}
+ >
+ Add Additional Notes
+ </Typography>
+ }
+ />
+ </FormControl>
+ {note !== null && (
+ <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={{
+ mb: 1,
+ }}
+ />
+ )}
<FormControl size='sm'>
<Checkbox
@@ -366,7 +387,18 @@ const ChoreView = () => {
// my: 1,
}
}
- label={<Typography level='body2'>Set completion date</Typography>}
+ label={
+ <Typography
+ level='body-sm'
+ sx={{
+ // center vertically
+ display: 'flex',
+ alignItems: 'center',
+ }}
+ >
+ Specify completion date
+ </Typography>
+ }
/>
</FormControl>
{completedDate !== null && (
@@ -390,30 +422,55 @@ const ChoreView = () => {
>
<Box>Mark as done</Box>
</Button>
- <Button
- fullWidth
- size='lg'
- onClick={() => {
- setConfirmModelConfig({
- isOpen: true,
- title: 'Skip Task',
+ <Divider sx={{ my: 0.5 }}>or</Divider>
- message: 'Are you sure you want to skip this task?',
-
- confirmText: 'Skip',
- cancelText: 'Cancel',
- onClose: confirmed => {
- if (confirmed) {
- handleSkippingTask()
- }
- setConfirmModelConfig({})
- },
- })
+ <Box
+ sx={{
+ display: 'flex',
+ flexDirection: 'row',
+ gap: 1,
+ alignContent: 'center',
+ justifyContent: 'center',
}}
- startDecorator={<SwitchAccessShortcut />}
>
- <Box>Skip</Box>
- </Button>
+ <Button
+ fullWidth
+ 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>
+ <Button
+ startDecorator={<History />}
+ size='lg'
+ color='primary'
+ variant='outlined'
+ fullWidth
+ onClick={() => {
+ navigate(`/chores/${choreId}/history`)
+ }}
+ >
+ History
+ </Button>
+ </Box>
+
<Snackbar
open={isPendingCompletion}
endDecorator={