amy/donetick-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add support for selecting all days and months in RepeatSection

Browse source
This commit is contained in:
Mo Tarbin 2024-12-03 23:10:23 -05:00
parent ba75962fc2
commit e78008baea
1 changed files with 77 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
src/views/ChoreEdit/RepeatSection.jsx
View file

@ -1,5 +1,6 @@
import { import {
Box, Box,
Button,
Card, Card,
Checkbox, Checkbox,
Chip, Chip,
@ -53,6 +54,30 @@ const MONTH_WITH_NO_31_DAYS = [
'september', 'september',
'november', 'november',
] ]
const MONTHS = [
'january',
'february',
'march',
'april',
'may',
'june',
'july',
'august',
'september',
'october',
'november',
'december',
]
const DAYS = [
'monday',
'tuesday',
'wednesday',
'thursday',
'friday',
'saturday',
'sunday',
]
const RepeatOnSections = ({ const RepeatOnSections = ({
frequencyType, frequencyType,
frequency, frequency,
@ -142,19 +167,9 @@ const RepeatOnSections = ({
'--ListItem-radius': '20px', '--ListItem-radius': '20px',
}} }}
> >
{[ {DAYS.map(item => (
'monday',
'tuesday',
'wednesday',
'thursday',
'friday',
'saturday',
'sunday',
].map(item => (
<ListItem key={item}> <ListItem key={item}>
<Checkbox <Checkbox
// disabled={index === 0}
checked={frequencyMetadata?.days?.includes(item) || false} checked={frequencyMetadata?.days?.includes(item) || false}
onClick={() => { onClick={() => {
const newDaysOfTheWeek = frequencyMetadata['days'] || [] const newDaysOfTheWeek = frequencyMetadata['days'] || []
@ -180,6 +195,31 @@ const RepeatOnSections = ({
</ListItem> </ListItem>
))} ))}
</List> </List>
<Button
size='sm'
variant='soft'
color='neutral'
checked={frequencyMetadata?.days?.length === 7}
onClick={() => {
if (frequencyMetadata?.days?.length === 7) {
onFrequencyMetadataUpdate({
...frequencyMetadata,
days: [],
})
} else {
onFrequencyMetadataUpdate({
...frequencyMetadata,
days: DAYS.map(item => item),
})
}
}}
overlay
disableIcon
>
{frequencyMetadata?.days?.length === 7
? 'Unselect All'
: 'Select All'}
</Button>
</Card> </Card>
</Grid> </Grid>
{timePickerComponent} {timePickerComponent}
@ -207,35 +247,10 @@ const RepeatOnSections = ({
'--ListItem-radius': '20px', '--ListItem-radius': '20px',
}} }}
> >
{[ {MONTHS.map(item => (
'january',
'february',
'march',
'april',
'may',
'june',
'july',
'august',
'september',
'october',
'november',
'december',
].map(item => (
<ListItem key={item}> <ListItem key={item}>
<Checkbox <Checkbox
// disabled={index === 0}
checked={frequencyMetadata?.months?.includes(item)} checked={frequencyMetadata?.months?.includes(item)}
// checked={months[item] || false}
// onClick={() => {
// const newMonthsOfTheYear = {
// ...monthsOfTheYear,
// }
// newMonthsOfTheYear[item] = !newMonthsOfTheYear[item]
// onFrequencyMetadataUpdate({
// months: newMonthsOfTheYear,
// })
// setMonthsOfTheYear(newMonthsOfTheYear)
// }}
onClick={() => { onClick={() => {
const newMonthsOfTheYear = const newMonthsOfTheYear =
frequencyMetadata['months'] || [] frequencyMetadata['months'] || []
@ -263,6 +278,31 @@ const RepeatOnSections = ({
</ListItem> </ListItem>
))} ))}
</List> </List>
<Button
size='sm'
variant='soft'
color='neutral'
checked={frequencyMetadata?.months?.length === 12}
onClick={() => {
if (frequencyMetadata?.months?.length === 12) {
onFrequencyMetadataUpdate({
...frequencyMetadata,
months: [],
})
} else {
onFrequencyMetadataUpdate({
...frequencyMetadata,
months: MONTHS.map(item => item),
})
}
}}
overlay
disableIcon
>
{frequencyMetadata?.months?.length === 12
? 'Unselect All'
: 'Select All'}
</Button>
</Card> </Card>
</Grid> </Grid>
<Box <Box