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:
@@ -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'
|
||||
|
||||
@@ -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={{
|
||||
|
||||
Reference in New Issue
Block a user