aboutsummaryrefslogtreecommitdiffstats
path: root/src/views/Chores
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--src/views/Chores/ChoreCard.jsx49
-rw-r--r--src/views/Chores/MyChores.jsx169
2 files changed, 125 insertions, 93 deletions
diff --git a/src/views/Chores/ChoreCard.jsx b/src/views/Chores/ChoreCard.jsx
index 97e407a..29ee933 100644
--- a/src/views/Chores/ChoreCard.jsx
+++ b/src/views/Chores/ChoreCard.jsx
@@ -3,7 +3,6 @@ import {
Check,
Delete,
Edit,
- HowToReg,
KeyboardDoubleArrowUp,
LocalOffer,
ManageSearch,
@@ -39,7 +38,11 @@ import moment from 'moment'
import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { API_URL } from '../../Config'
-import { MarkChoreComplete, SkipChore } from '../../utils/Fetcher'
+import {
+ MarkChoreComplete,
+ SkipChore,
+ UpdateChoreAssignee,
+} from '../../utils/Fetcher'
import { Fetch } from '../../utils/TokenManager'
import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
import DateModal from '../Modals/Inputs/DateModal'
@@ -219,7 +222,14 @@ const ChoreCard = ({
})
}
const handleAssigneChange = assigneeId => {
- // TODO: Implement assignee change
+ UpdateChoreAssignee(chore.id, assigneeId).then(response => {
+ if (response.ok) {
+ response.json().then(data => {
+ const newChore = data.res
+ onChoreUpdate(newChore, 'assigned')
+ })
+ }
+ })
}
const handleCompleteWithNote = note => {
Fetch(`${API_URL}/chores/${chore.id}/do`, {
@@ -305,8 +315,28 @@ const ChoreCard = ({
return 'Yearly'
} else if (chore.frequencyType === 'days_of_the_week') {
let days = JSON.parse(chore.frequencyMetadata).days
- days = days.map(d => moment().day(d).format('ddd'))
- return days.join(', ')
+ if (days.length > 4) {
+ const allDays = [
+ 'Sunday',
+ 'Monday',
+ 'Tuesday',
+ 'Wednesday',
+ 'Thursday',
+ 'Friday',
+ 'Saturday',
+ ]
+ const selectedDays = days.map(d => moment().day(d).format('dddd'))
+ const notSelectedDay = allDays.filter(
+ day => !selectedDays.includes(day),
+ )
+ const notSelectedShortdays = notSelectedDay.map(d =>
+ moment().day(d).format('ddd'),
+ )
+ return `Daily except ${notSelectedShortdays.join(', ')}`
+ } else {
+ days = days.map(d => moment().day(d).format('ddd'))
+ return days.join(', ')
+ }
} else if (chore.frequencyType === 'day_of_the_month') {
let freqData = JSON.parse(chore.frequencyMetadata)
const months = freqData.months.map(m => moment().month(m).format('MMM'))
@@ -547,10 +577,6 @@ const ChoreCard = ({
<RecordVoiceOver />
Delegate to someone else
</MenuItem>
- <MenuItem>
- <HowToReg />
- Complete as someone else
- </MenuItem>
<Divider />
<MenuItem
onClick={() => {
@@ -620,10 +646,13 @@ const ChoreCard = ({
options={performers}
displayKey='displayName'
title={`Delegate to someone else`}
+ placeholder={'Select a performer'}
onClose={() => {
setIsChangeAssigneeModalOpen(false)
}}
- onSave={handleAssigneChange}
+ onSave={selected => {
+ handleAssigneChange(selected.id)
+ }}
/>
<ConfirmationModal config={confirmModelConfig} />
<TextModal
diff --git a/src/views/Chores/MyChores.jsx b/src/views/Chores/MyChores.jsx
index d4eed5a..f7b27da 100644
--- a/src/views/Chores/MyChores.jsx
+++ b/src/views/Chores/MyChores.jsx
@@ -1,13 +1,17 @@
-import { Add, CancelRounded, EditCalendar } from '@mui/icons-material'
import {
- Badge,
+ Add,
+ CancelRounded,
+ EditCalendar,
+ FilterAlt,
+ FilterAltOff,
+} from '@mui/icons-material'
+import {
Box,
- Checkbox,
+ Chip,
Container,
IconButton,
Input,
List,
- ListItem,
Menu,
MenuItem,
Snackbar,
@@ -192,95 +196,27 @@ const MyChores = () => {
My Chores
</Typography> */}
{/* <Sheet> */}
- <List
- orientation='horizontal'
- wrap
+
+ {/* Search box to filter */}
+ <Box
sx={{
- '--List-gap': '8px',
- '--ListItem-radius': '20px',
- '--ListItem-minHeight': '32px',
- '--ListItem-gap': '4px',
- mt: 0.2,
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignContent: 'center',
+ alignItems: 'center',
+ gap: 1,
}}
>
- {['All', 'Overdue', 'Due today', 'Due in week'].map(filter => (
- <Badge
- key={filter}
- anchorOrigin={{
- vertical: 'top',
- horizontal: 'right',
- }}
- variant='outlined'
- color={selectedFilter === filter ? 'primary' : 'neutral'}
- badgeContent={FILTERS[filter](chores).length}
- badgeInset={'5px'}
- >
- <ListItem key={filter}>
- <Checkbox
- key={'checkbox' + filter}
- label={filter}
- onClick={() => handleSelectedFilter(filter)}
- checked={filter === selectedFilter}
- disableIcon
- overlay
- size='sm'
- />
- </ListItem>
- </Badge>
- ))}
-
- <ListItem onClick={handleFilterMenuOpen}>
- <Checkbox key='checkboxAll' label='⋮' disableIcon overlay size='lg' />
- </ListItem>
- <Menu
- ref={menuRef}
- anchorEl={anchorEl}
- open={Boolean(anchorEl)}
- onClose={handleFilterMenuClose}
- >
- <MenuItem
- onClick={() => {
- setFilteredChores(
- FILTERS['Assigned To Me'](chores, userProfile.id),
- )
- setSelectedFilter('Assigned To Me')
- handleFilterMenuClose()
- }}
- >
- Assigned to me
- </MenuItem>
- <MenuItem
- onClick={() => {
- setFilteredChores(
- FILTERS['Created By Me'](chores, userProfile.id),
- )
- setSelectedFilter('Created By Me')
- handleFilterMenuClose()
- }}
- >
- Created by me
- </MenuItem>
- <MenuItem
- onClick={() => {
- setFilteredChores(FILTERS['No Due Date'](chores, userProfile.id))
- setSelectedFilter('No Due Date')
- handleFilterMenuClose()
- }}
- >
- No Due Date
- </MenuItem>
- </Menu>
- </List>
- {/* Search box to filter */}
- <Box>
<Input
placeholder='Search'
value={searchTerm}
+ fullWidth
sx={{
mt: 1,
mb: 1,
- borderRadius: 20,
+ borderRadius: 24,
// border: '1px solid',
+ height: 24,
borderColor: 'text.disabled',
padding: 1,
}}
@@ -296,6 +232,73 @@ const MyChores = () => {
)
}
/>
+ <IconButton
+ onClick={handleFilterMenuOpen}
+ variant='outlined'
+ color={
+ selectedFilter && selectedFilter != 'All' ? 'primary' : 'neutral'
+ }
+ size='sm'
+ sx={{
+ height: 24,
+ borderRadius: 24,
+ }}
+ >
+ {selectedFilter && selectedFilter != 'All' ? (
+ <FilterAltOff />
+ ) : (
+ <FilterAlt />
+ )}
+ </IconButton>
+ <List
+ orientation='horizontal'
+ wrap
+ sx={{
+ // '--List-gap': '8px',
+ // '--ListItem-radius': '20px',
+ // '--ListItem-minHeight': '32px',
+ // '--ListItem-gap': '4px',
+ mt: 0.2,
+ }}
+ >
+ {/* <Checkbox
+ key='checkboxAll'
+ label=''
+ disableIcon
+ overlay
+ size='sm'
+ /> */}
+
+ <Menu
+ ref={menuRef}
+ anchorEl={anchorEl}
+ open={Boolean(anchorEl)}
+ onClose={handleFilterMenuClose}
+ >
+ {Object.keys(FILTERS).map(filter => (
+ <MenuItem
+ key={filter}
+ onClick={() => {
+ const filterFunction = FILTERS[filter]
+ const filteredChores =
+ filterFunction.length === 2
+ ? filterFunction(chores, userProfile.id)
+ : filterFunction(chores)
+ setFilteredChores(filteredChores)
+ setSelectedFilter(filter)
+ handleFilterMenuClose()
+ }}
+ >
+ {filter}
+ <Chip color={selectedFilter === filter ? 'primary' : 'neutral'}>
+ {FILTERS[filter].length === 2
+ ? FILTERS[filter](chores, userProfile.id).length
+ : FILTERS[filter](chores).length}
+ </Chip>
+ </MenuItem>
+ ))}
+ </Menu>
+ </List>
</Box>
{/* </Sheet> */}