- Add Cookie Permission component

- Add Filter button instead of chips in mychores view
- show except days instead of showing evenything when days.length>4

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> */}