Fix https://github.com/donetick/donetick/issues/604 Enhance ChoreEdit component with dropdown for archive/unarchive actions and add delete option

This commit is contained in:
Mo Tarbin
2026-03-24 17:04:25 -04:00
parent 92e8160505
commit 4ad8b1aef8
2 changed files with 34 additions and 44 deletions

View File

@@ -1,18 +1,23 @@
import { Add, HorizontalRule, Save } from '@mui/icons-material'
import { Add, ArrowDropDown, HorizontalRule, Save } from '@mui/icons-material'
import {
Avatar,
Box,
Button,
ButtonGroup,
Card,
Checkbox,
Chip,
Container,
Divider,
Dropdown,
FormControl,
FormHelperText,
IconButton,
Input,
List,
ListItem,
Menu,
MenuButton,
MenuItem,
Option,
Radio,
@@ -1638,39 +1643,33 @@ const ChoreEdit = () => {
}}
>
{choreId > 0 && (
<>
{isActive ? (
<Dropdown>
<ButtonGroup variant='outlined' color={isActive ? 'danger' : 'neutral'}>
<Button
onClick={() => {
isActive
? archiveChore.mutate(choreId)
: unarchiveChore.mutate(choreId)
}}
>
{isActive ? 'Archive' : 'Unarchive'}
</Button>
<MenuButton
slots={{ root: IconButton }}
slotProps={{ root: { variant: 'outlined', color: isActive ? 'danger' : 'neutral' } }}
>
<ArrowDropDown />
</MenuButton>
</ButtonGroup>
<Menu placement='top-end'>
<MenuItem
color='danger'
variant='outlined'
onClick={() => {
archiveChore.mutate(choreId)
}}
onClick={handleDelete}
>
Archive
</Button>
) : (
<Button
color='neutral'
variant='outlined'
onClick={() => {
unarchiveChore.mutate(choreId)
}}
>
Unarchive
</Button>
)}
<Button
color='danger'
variant='solid'
onClick={() => {
// confirm before deleting:
handleDelete()
}}
>
Delete
</Button>
</>
Delete
</MenuItem>
</Menu>
</Dropdown>
)}
<Button
color='neutral'

View File

@@ -671,7 +671,6 @@ const ChoreView = () => {
color='neutral'
variant='plain'
fullWidth
disabled={chore.isActive === false}
onClick={() => {
navigate(`/chores/${choreId}/history`)
}}
@@ -690,7 +689,6 @@ const ChoreView = () => {
color='neutral'
variant='plain'
fullWidth
disabled={chore.isActive === false}
sx={{
// top right of the card:
flexDirection: 'column',
@@ -1016,9 +1014,7 @@ const ChoreView = () => {
size='lg'
onClick={handleTaskCompletion}
disabled={
notInCompletionWindow(chore) ||
(chore.lastCompletedDate !== null &&
chore.frequencyType === 'once')
notInCompletionWindow(chore) || chore.isActive === false
}
color='success'
startDecorator={<Check />}
@@ -1050,9 +1046,7 @@ const ChoreView = () => {
})
}}
disabled={
notInCompletionWindow(chore) ||
(chore.lastCompletedDate !== null &&
chore.frequencyType === 'once')
notInCompletionWindow(chore) || chore.isActive === false
}
startDecorator={<SwitchAccessShortcut />}
sx={{
@@ -1081,8 +1075,7 @@ const ChoreView = () => {
disabled={
(chore.status === ChoreStatus.PAUSED &&
notInCompletionWindow(chore)) ||
(chore.lastCompletedDate !== null &&
chore.frequencyType === 'once')
chore.isActive === false
}
chore={chore}
onAction={action => {
@@ -1108,9 +1101,7 @@ const ChoreView = () => {
variant='soft'
color='success'
disabled={
notInCompletionWindow(chore) ||
(chore.lastCompletedDate !== null &&
chore.frequencyType === 'once')
notInCompletionWindow(chore) || chore.isActive === false
}
startDecorator={<PlayArrow />}
sx={{