Update Label to confirm deletion

Add More Filter to chores
Improve the Priority

package.json

@@ -1,7 +1,7 @@
 {
   "name": "donetick",
   "private": true,
-  "version": "0.1.79",
+  "version": "0.1.80",
   "type": "module",
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

src/views/ChoreEdit/ChoreView.jsx

@@ -103,12 +103,13 @@ const ChoreView = () => {
     }
   }, [chore, performers])
   const handleUpdatePriority = priority => {
-    if (priority.value === 0) {
+    UpdateChorePriority(choreId, priority.value).then(response => {
-      setChorePriority(null)
+      if (response.ok) {
-    } else {
+        response.json().then(data => {
           setChorePriority(priority)
+        })
       }
-    UpdateChorePriority(choreId, priority.value)
+    })
   }
   const generateInfoCards = chore => {
     const cards = [
@@ -265,7 +266,6 @@ const ChoreView = () => {
             ? `Due at ${moment(chore.nextDueDate).format('MM/DD/YYYY hh:mm A')}`
             : 'N/A'}
         </Chip>
-        {/* show each label : */}
         {chore?.labelsV2?.map((label, index) => (
           <Chip
             key={index}

src/views/Chores/ChoreCard.jsx

@@ -48,6 +48,7 @@ import {
   UpdateChoreAssignee,
 } from '../../utils/Fetcher'
 import { getTextColorFromBackgroundColor } from '../../utils/LabelColors'
+import Priorities from '../../utils/Priorities'
 import { Fetch } from '../../utils/TokenManager'
 import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
 import DateModal from '../Modals/Inputs/DateModal'
@@ -62,6 +63,7 @@ const ChoreCard = ({
   userLabels,
   sx,
   viewOnly,
+  onChipClick,
 }) => {
   const [activeUserId, setActiveUserId] = React.useState(0)
   const [isChangeDueDateModalOpen, setIsChangeDueDateModalOpen] =
@@ -504,6 +506,13 @@ const ChoreCard = ({
                             ? 'warning'
                             : 'neutral'
                       }
+                      startDecorator={
+                        Priorities.find(p => p.value === chore.priority)?.icon
+                      }
+                      onClick={e => {
+                        e.stopPropagation()
+                        onChipClick({ priority: chore.priority })
+                      }}
                     >
                       P{chore.priority}
                     </Chip>
@@ -512,16 +521,22 @@ const ChoreCard = ({
                     return (
                       <Chip
                         variant='solid'
-                        key={l.id}
+                        key={`chorecard-${chore.id}-label-${l.id}`}
                         color='primary'
                         sx={{
                           position: 'relative',
                           ml: index === 0 ? 0 : 0.5,
                           top: 2,
                           zIndex: 1,
-                          backgroundColor: l?.color,
+                          backgroundColor: `${l?.color} !important`,
                           color: getTextColorFromBackgroundColor(l?.color),
+
+                          // apply background color for th clickable button:
                         }}
+                        // onClick={e => {
+                        //   e.stopPropagation()
+                        //   onChipClick({ label: l })
+                        // }}
 
                         // startDecorator={getIconForLabel(label)}
                       >
@@ -719,7 +734,9 @@ const ChoreCard = ({
             handleAssigneChange(selected.id)
           }}
         />
+        {confirmModelConfig?.isOpen && (
           <ConfirmationModal config={confirmModelConfig} />
+        )}
         <TextModal
           isOpen={isCompleteWithNoteModalOpen}
           title='Add note to attach to this completion:'

src/views/Chores/IconButtonWithMenu.jsx

@@ -0,0 +1,102 @@
+import { Chip, Menu, MenuItem } from '@mui/joy'
+import IconButton from '@mui/joy/IconButton'
+import React, { useEffect, useRef, useState } from 'react'
+import { getTextColorFromBackgroundColor } from '../../utils/LabelColors'
+
+const IconButtonWithMenu = ({
+  key,
+  icon,
+  options,
+  onItemSelect,
+  selectedItem,
+  setSelectedItem,
+  isActive,
+  useChips,
+}) => {
+  const [anchorEl, setAnchorEl] = useState(null)
+  const menuRef = useRef(null)
+
+  const handleMenuOpen = event => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleMenuClose = () => {
+    setAnchorEl(null)
+  }
+  useEffect(() => {
+    document.addEventListener('mousedown', handleMenuOutsideClick)
+    return () => {
+      document.removeEventListener('mousedown', handleMenuOutsideClick)
+    }
+  }, [anchorEl])
+
+  const handleMenuOutsideClick = event => {
+    if (menuRef.current && !menuRef.current.contains(event.target)) {
+      handleMenuClose()
+    }
+  }
+
+  return (
+    <>
+      <IconButton
+        onClick={handleMenuOpen}
+        variant='outlined'
+        color={isActive ? 'primary' : 'neutral'}
+        size='sm'
+        sx={{
+          height: 24,
+          borderRadius: 24,
+        }}
+      >
+        {icon}
+      </IconButton>
+
+      <Menu
+        key={key}
+        ref={menuRef}
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleMenuClose}
+      >
+        {options?.map(item => (
+          <MenuItem
+            key={`${key}-${item?.id}`}
+            onClick={() => {
+              onItemSelect(item)
+              setSelectedItem?.selectedItem(item.name)
+              handleMenuClose()
+            }}
+          >
+            {useChips ? (
+              <Chip
+                sx={{
+                  backgroundColor: item.color ? item.color : null,
+                  color: getTextColorFromBackgroundColor(item.color),
+                }}
+              >
+                {item.name}
+              </Chip>
+            ) : (
+              <>
+                {item?.icon}
+                {item.name}
+              </>
+            )}
+          </MenuItem>
+        ))}
+        {/* {selectedItem && selectedItem !== 'All' && (
+            <MenuItem
+              id={`${id}cancel-all-filters`}
+              onClick={() => {
+                onItemSelect(null)
+                setSelectedItem?.setSelectedItem('All')
+              }}
+            >
+              Cancel All Filters
+            </MenuItem>
+          )} */}
+      </Menu>
+    </>
+  )
+}
+export default IconButtonWithMenu

src/views/Chores/MyChores.jsx

@@ -3,10 +3,12 @@ import {
   CancelRounded,
   EditCalendar,
   FilterAlt,
-  FilterAltOff,
+  PriorityHigh,
+  Style,
 } from '@mui/icons-material'
 import {
   Box,
+  Button,
   Chip,
   Container,
   IconButton,
@@ -23,9 +25,11 @@ import { useNavigate } from 'react-router-dom'
 import { UserContext } from '../../contexts/UserContext'
 import { useChores } from '../../queries/ChoreQueries'
 import { GetAllUsers, GetUserProfile } from '../../utils/Fetcher'
+import Priorities from '../../utils/Priorities'
 import LoadingComponent from '../components/Loading'
 import { useLabels } from '../Labels/LabelQueries'
 import ChoreCard from './ChoreCard'
+import IconButtonWithMenu from './IconButtonWithMenu'
 
 const MyChores = () => {
   const { userProfile, setUserProfile } = useContext(UserContext)
@@ -122,6 +126,28 @@ const MyChores = () => {
   const handleFilterMenuClose = () => {
     setAnchorEl(null)
   }
+
+  const handleLabelFiltering = chipClicked => {
+    console.log('chipClicked', chipClicked)
+
+    if (chipClicked.label) {
+      const label = chipClicked.label
+      const labelFiltered = [...chores].filter(chore =>
+        chore.labelsV2.some(l => l.id === label.id),
+      )
+      console.log('labelFiltered', labelFiltered)
+      setFilteredChores(labelFiltered)
+      setSelectedFilter('Label: ' + label.name)
+    } else if (chipClicked.priority) {
+      const priority = chipClicked.priority
+      const priorityFiltered = chores.filter(
+        chore => chore.priority === priority,
+      )
+      setFilteredChores(priorityFiltered)
+      setSelectedFilter('Priority: ' + priority)
+    }
+  }
+
   const handleChoreUpdated = (updatedChore, event) => {
     const newChores = chores.map(chore => {
       if (chore.id === updatedChore.id) {
@@ -175,13 +201,16 @@ const MyChores = () => {
     chores.map(c => ({
       ...c,
       raw_label: c.labelsV2
-        .map(l => userLabels.find(x => (x.id = l.id)).name)
+        .map(l => userLabels.find(x => x.id === l.id).name)
         .join(' '),
     })),
     searchOptions,
   )
 
   const handleSearchChange = e => {
+    if (selectedFilter !== 'All') {
+      setSelectedFilter('All')
+    }
     const search = e.target.value
     if (search === '') {
       setFilteredChores(chores)
@@ -209,7 +238,6 @@ const MyChores = () => {
         My Chores
       </Typography> */}
       {/* <Sheet> */}
-
       {/* Search box to filter  */}
       <Box
         sx={{
@@ -217,7 +245,7 @@ const MyChores = () => {
           justifyContent: 'space-between',
           alignContent: 'center',
           alignItems: 'center',
-          gap: 1,
+          gap: 0.5,
         }}
       >
         <Input
@@ -245,11 +273,37 @@ const MyChores = () => {
             )
           }
         />
+        <IconButtonWithMenu
+          key={'icon-menu-labels-filter'}
+          icon={<PriorityHigh />}
+          options={Priorities}
+          selectedItem={selectedFilter}
+          onItemSelect={selected => {
+            handleLabelFiltering({ priority: selected.value })
+          }}
+          mouseClickHandler={handleMenuOutsideClick}
+          isActive={selectedFilter.startsWith('Priority: ')}
+        />
+        <IconButtonWithMenu
+          key={'icon-menu-labels-filter'}
+          icon={<Style />}
+          options={userLabels}
+          selectedItem={selectedFilter}
+          onItemSelect={selected => {
+            handleLabelFiltering({ label: selected })
+          }}
+          isActive={selectedFilter.startsWith('Label: ')}
+          mouseClickHandler={handleMenuOutsideClick}
+          useChips
+        />
+
         <IconButton
           onClick={handleFilterMenuOpen}
           variant='outlined'
           color={
-            selectedFilter && selectedFilter != 'All' ? 'primary' : 'neutral'
+            selectedFilter && FILTERS[selectedFilter] && selectedFilter != 'All'
+              ? 'primary'
+              : 'neutral'
           }
           size='sm'
           sx={{
@@ -257,40 +311,24 @@ const MyChores = () => {
             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 => (
+            {Object.keys(FILTERS).map((filter, index) => (
               <MenuItem
-                key={filter}
+                key={`filter-list-${filter}-${index}`}
                 onClick={() => {
                   const filterFunction = FILTERS[filter]
                   const filteredChores =
@@ -310,10 +348,40 @@ const MyChores = () => {
                 </Chip>
               </MenuItem>
             ))}
+            {selectedFilter.startsWith('Label: ') ||
+              (selectedFilter.startsWith('Priority: ') && (
+                <MenuItem
+                  key={`filter-list-cancel-all-filters`}
+                  onClick={() => {
+                    setFilteredChores(chores)
+                    setSelectedFilter('All')
+                  }}
+                >
+                  Cancel All Filters
+                </MenuItem>
+              ))}
           </Menu>
         </List>
       </Box>
-
+      {selectedFilter !== 'All' && (
+        <Chip
+          level='title-md'
+          gutterBottom
+          color='warning'
+          label={selectedFilter}
+          onDelete={() => {
+            setFilteredChores(chores)
+            setSelectedFilter('All')
+          }}
+          endDecorator={<CancelRounded />}
+          onClick={() => {
+            setFilteredChores(chores)
+            setSelectedFilter('All')
+          }}
+        >
+          Current Filter: {selectedFilter}
+        </Chip>
+      )}
       {/* </Sheet> */}
       {filteredChores.length === 0 && (
         <Box
@@ -335,6 +403,17 @@ const MyChores = () => {
           <Typography level='title-md' gutterBottom>
             Nothing scheduled
           </Typography>
+          {chores.length > 0 && (
+            <>
+              <Button
+                onClick={() => setFilteredChores(chores)}
+                variant='outlined'
+                color='neutral'
+              >
+                Reset filters
+              </Button>
+            </>
+          )}
         </Box>
       )}
 
@@ -346,6 +425,7 @@ const MyChores = () => {
           onChoreRemove={handleChoreDeleted}
           performers={performers}
           userLabels={userLabels}
+          onChipClick={handleLabelFiltering}
         />
       ))}
 
@@ -421,6 +501,13 @@ const FILTERS = {
       )
     })
   },
+  'Due Later': function (chores) {
+    return chores.filter(chore => {
+      return (
+        new Date(chore.nextDueDate) > new Date(Date.now() + 24 * 60 * 60 * 1000)
+      )
+    })
+  },
   'Created By Me': function (chores, userID) {
     return chores.filter(chore => {
       return chore.createdBy === userID

src/views/Labels/LabelView.jsx

@@ -15,33 +15,55 @@ import { useLabels } from './LabelQueries'
 // import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { Add } from '@mui/icons-material'
 import { useQueryClient } from 'react-query'
+import { useNavigate } from 'react-router-dom'
 import { DeleteLabel } from '../../utils/Fetcher'
+import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
 
 const LabelView = () => {
   const { data: labels, isLabelsLoading, isError } = useLabels()
   const [userLabels, setUserLabels] = useState([labels])
   const [modalOpen, setModalOpen] = useState(false)
-  const [currentLabel, setCurrentLabel] = useState(null) // Label being edited or null for new label
+  const [currentLabel, setCurrentLabel] = useState(null)
   const queryClient = useQueryClient()
+  const [confirmationModel, setConfirmationModel] = useState({})
+  const Navigate = useNavigate()
   const handleAddLabel = () => {
-    setCurrentLabel(null) // Adding a new label
+    setCurrentLabel(null)
     setModalOpen(true)
   }
 
   const handleEditLabel = label => {
-    setCurrentLabel(label) // Editing an existing label
+    setCurrentLabel(label)
     setModalOpen(true)
   }
 
+  const handleDeleteClicked = id => {
+    setConfirmationModel({
+      isOpen: true,
+      title: 'Delete Label',
+
+      message:
+        'Are you sure you want to delete this label? This will remove the label from all tasks.',
+
+      confirmText: 'Delete',
+      color: 'danger',
+      cancelText: 'Cancel',
+      onClose: confirmed => {
+        if (confirmed) {
+          handleDeleteLabel(id)
+        }
+        setConfirmationModel({})
+      },
+    })
+  }
+
   const handleDeleteLabel = id => {
     DeleteLabel(id).then(res => {
-      // Invalidate and refetch labels after deleting a label
       const updatedLabels = userLabels.filter(label => label.id !== id)
       setUserLabels(updatedLabels)
 
       queryClient.invalidateQueries('labels')
     })
-    // Implement deletion logic here
   }
 
   const handleSaveLabel = newOrUpdatedLabel => {
@@ -92,7 +114,13 @@ const LabelView = () => {
         <tbody>
           {userLabels.map(label => (
             <tr key={label.id}>
-              <td>{label.name}</td>
+              <td
+                onClick={() => {
+                  Navigate('/my/chores', { state: { label: label.id } })
+                }}
+              >
+                {label.name}
+              </td>
               <td
                 style={{
                   // center without display flex:
@@ -121,7 +149,7 @@ const LabelView = () => {
                   <EditIcon />
                 </IconButton>
                 <IconButton
-                  onClick={() => handleDeleteLabel(label.id)}
+                  onClick={() => handleDeleteClicked(label.id)}
                   color='danger'
                 >
                   <DeleteIcon />
@@ -151,7 +179,7 @@ const LabelView = () => {
           position: 'fixed',
           bottom: 0,
           left: 10,
-          p: 2, // padding
+          p: 2,
           display: 'flex',
           justifyContent: 'flex-end',
           gap: 2,
@@ -171,6 +199,7 @@ const LabelView = () => {
           <Add />
         </IconButton>
       </Box>
+      <ConfirmationModal config={confirmationModel} />
     </Container>
   )
 }

src/views/Modals/Inputs/ConfirmationModal.jsx

@@ -24,6 +24,7 @@ function ConfirmationModal({ config }) {
             }}
             fullWidth
             sx={{ mr: 1 }}
+            color={config.color ? config.color : 'primary'}
           >
             {config?.confirmText}
           </Button>