diff --git a/src/utils/Chores.jsx b/src/utils/Chores.jsx index f30df14..8ab7756 100644 --- a/src/utils/Chores.jsx +++ b/src/utils/Chores.jsx @@ -332,6 +332,9 @@ export const ChoreFilters = userId => ({ assigned_to_me: chore => { return chore.assignedTo && chore.assignedTo === userId }, + available_for_me: chore => { + return chore.assignedTo === null || chore.assignedTo === userId + }, assigned_to_others: chore => { return chore.assignedTo && chore.assignedTo !== userId }, diff --git a/src/views/Chores/SortAndGrouping.jsx b/src/views/Chores/SortAndGrouping.jsx index f11f8af..eeee5a1 100644 --- a/src/views/Chores/SortAndGrouping.jsx +++ b/src/views/Chores/SortAndGrouping.jsx @@ -85,7 +85,12 @@ const SortAndGrouping = ({ { name: 'Labels', value: 'labels' }, ] - const filterItems = ['anyone', 'assigned_to_me', 'assigned_to_others'] + const filterItems = [ + 'anyone', + 'assigned_to_me', + 'available_for_me', + 'assigned_to_others', + ] // Total selectable items: 4 (group by) + 3 (filters) + 1 (create custom filter) = 8 const totalItems = groupByItems.length + filterItems.length + 1 @@ -169,6 +174,65 @@ const SortAndGrouping = ({ } }, []) + const MenuItem_QuickFilter = props => { + return ( + { + setFilter(props.filterKey) + handleMenuClose() + }} + onMouseEnter={() => setIsKeyboardNavigating(false)} + sx={{ + borderRadius: 'var(--joy-radius-sm)', + backgroundColor: + selectedFilter === props.filterKey + ? 'var(--joy-palette-primary-softBg)' + : selectedIndex === props.index && + anchorEl && + isKeyboardNavigating + ? 'var(--joy-palette-neutral-softHoverBg)' + : 'transparent', + '&:hover': { + backgroundColor: + selectedFilter === props.filterKey + ? 'var(--joy-palette-primary-softBg)' + : 'var(--joy-palette-neutral-softHoverBg)', + }, + }} + > + + + + + + + {props.label} + + + + + ) + } + return ( <> {!label && ( @@ -359,162 +423,33 @@ const SortAndGrouping = ({ - { - setFilter('anyone') - handleMenuClose() - }} - onMouseEnter={() => setIsKeyboardNavigating(false)} - sx={{ - borderRadius: 'var(--joy-radius-sm)', - backgroundColor: - selectedFilter === 'anyone' - ? 'var(--joy-palette-primary-softBg)' - : selectedIndex === 4 && anchorEl && isKeyboardNavigating - ? 'var(--joy-palette-neutral-softHoverBg)' - : 'transparent', - '&:hover': { - backgroundColor: - selectedFilter === 'anyone' - ? 'var(--joy-palette-primary-softBg)' - : 'var(--joy-palette-neutral-softHoverBg)', - }, - }} - > - - - - - - - Anyone - - - - + index={4} + filterKey='anyone' + label='Anyone' + /> - { - setFilter('assigned_to_me') - handleMenuClose() - }} - onMouseEnter={() => setIsKeyboardNavigating(false)} - sx={{ - borderRadius: 'var(--joy-radius-sm)', - backgroundColor: - selectedFilter === 'assigned_to_me' - ? 'var(--joy-palette-primary-softBg)' - : selectedIndex === 5 && anchorEl && isKeyboardNavigating - ? 'var(--joy-palette-neutral-softHoverBg)' - : 'transparent', - '&:hover': { - backgroundColor: - selectedFilter === 'assigned_to_me' - ? 'var(--joy-palette-primary-softBg)' - : 'var(--joy-palette-neutral-softHoverBg)', - }, - }} - > - - - - - - - Assigned to me - - - - + index={5} + filterKey='assigned_to_me' + label='Assigned to me' + /> - + + { - setFilter('assigned_to_others') - handleMenuClose() - }} - onMouseEnter={() => setIsKeyboardNavigating(false)} - sx={{ - borderRadius: 'var(--joy-radius-sm)', - backgroundColor: - selectedFilter === 'assigned_to_others' - ? 'var(--joy-palette-primary-softBg)' - : selectedIndex === 6 && anchorEl && isKeyboardNavigating - ? 'var(--joy-palette-neutral-softHoverBg)' - : 'transparent', - '&:hover': { - backgroundColor: - selectedFilter === 'assigned_to_others' - ? 'var(--joy-palette-primary-softBg)' - : 'var(--joy-palette-neutral-softHoverBg)', - }, - }} - > - - - - - - - Assigned to others - - - - + index={7} + filterKey='assigned_to_others' + label='Assigned to others' + /> @@ -528,7 +463,7 @@ const SortAndGrouping = ({ sx={{ borderRadius: 'var(--joy-radius-sm)', backgroundColor: - selectedIndex === 7 && anchorEl && isKeyboardNavigating + selectedIndex === 8 && anchorEl && isKeyboardNavigating ? 'var(--joy-palette-success-softHoverBg)' : 'transparent', '&:hover': {