diff --git a/src/views/Chores/ChoreListView.jsx b/src/views/Chores/ChoreListView.jsx index 0fdf1ff..5825a24 100644 --- a/src/views/Chores/ChoreListView.jsx +++ b/src/views/Chores/ChoreListView.jsx @@ -1,3 +1,11 @@ +import { + Type as ListType, + SwipeableList, + SwipeableListItem, + SwipeAction, + TrailingActions, +} from '@meauxt/react-swipeable-list' +import '@meauxt/react-swipeable-list/dist/styles.css' import { Check, Delete, @@ -10,14 +18,6 @@ import { } from '@mui/icons-material' import { Box, Typography } from '@mui/joy' import { useNavigate } from 'react-router-dom' -import { - Type as ListType, - SwipeableList, - SwipeableListItem, - SwipeAction, - TrailingActions, -} from 'react-swipeable-list' -import 'react-swipeable-list/dist/styles.css' import ChoreCard from './ChoreCard' import CompactChoreCard from './CompactChoreCard' diff --git a/src/views/Filters/FilterView.jsx b/src/views/Filters/FilterView.jsx index dd1a1c0..c097057 100644 --- a/src/views/Filters/FilterView.jsx +++ b/src/views/Filters/FilterView.jsx @@ -1,3 +1,11 @@ +import { + Type as ListType, + SwipeableList, + SwipeableListItem, + SwipeAction, + TrailingActions, +} from '@meauxt/react-swipeable-list' +import '@meauxt/react-swipeable-list/dist/styles.css' import DeleteIcon from '@mui/icons-material/Delete' import EditIcon from '@mui/icons-material/Edit' import { @@ -12,16 +20,15 @@ import { } from '@mui/joy' import { useEffect, useMemo, useState } from 'react' import { useNavigate } from 'react-router-dom' -import { - Type as ListType, - SwipeableList, - SwipeableListItem, - SwipeAction, - TrailingActions, -} from 'react-swipeable-list' -import 'react-swipeable-list/dist/styles.css' -import { Add, FilterAlt, Star, StarBorder, Task } from '@mui/icons-material' +import { + Add, + FilterAlt, + MoreVert, + Star, + StarBorder, + Task, +} from '@mui/icons-material' import { useChores } from '../../queries/ChoreQueries' import { useCircleMembers, useUserProfile } from '../../queries/UserQueries' import { getFilterCount, getFilterOverdueCount } from '../../utils/FilterEngine' @@ -39,7 +46,12 @@ import { useUpdateFilter, } from './FilterQueries' -const FilterCardContent = ({ filter, taskCount = 0, overdueCount = 0 }) => { +const FilterCardContent = ({ + filter, + taskCount = 0, + overdueCount = 0, + onToggleActions, +}) => { // Get condition labels for display const getConditionSummary = () => { if (!filter.conditions || filter.conditions.length === 0) { @@ -212,6 +224,21 @@ const FilterCardContent = ({ filter, taskCount = 0, overdueCount = 0 }) => { )} + + {onToggleActions && ( + { + e.stopPropagation() + onToggleActions() + }} + > + + + )} + ) } @@ -236,7 +263,7 @@ const FilterView = () => { useState(false) const [editingFilter, setEditingFilter] = useState(null) const [confirmationModel, setConfirmationModel] = useState({}) - + const [showMoreInfoId, setShowMoreInfoId] = useState(null) // Sort filters: pinned first, then by usage count, then by last used const savedFilters = useMemo(() => { return [...filtersData].sort((a, b) => { @@ -415,99 +442,119 @@ const FilterView = () => { ) : ( - {savedFilters.map(filter => ( - - navigate(`/chores?filterId=${encodeURIComponent(filter.id)}`) - } - key={filter.id} - trailingActions={ - - - handlePinFilter(filter.id)}> - - {filter.isPinned ? ( - - ) : ( - - )} - - {filter.isPinned ? 'Unpin' : 'Pin'} - - - - handleEditFilter(filter)}> - - - - Edit - - - - handleDeleteClicked(filter.id)} + {savedFilters.map(filter => { + return ( + + navigate( + `/chores?filterId=${encodeURIComponent(filter.id)}`, + ) + } + key={filter.id} + trailingActions={ + + - - - handlePinFilter(filter.id)}> + - Delete - - - - - - } - > - - - ))} + {filter.isPinned ? ( + + ) : ( + + )} + + {filter.isPinned ? 'Unpin' : 'Pin'} + + + + handleEditFilter(filter)}> + + + + Edit + + + + handleDeleteClicked(filter.id)} + > + + + + Delete + + + + + + } + > + { + console.log( + 'Toggling actions for filter:', + filter.id, + showMoreInfoId, + ) + + if (showMoreInfoId === filter.id) { + setShowMoreInfoId(null) + } else { + setShowMoreInfoId(filter.id) + } + }} + filter={filter} + taskCount={filterCounts[filter.id]?.count || 0} + overdueCount={filterCounts[filter.id]?.overdueCount || 0} + /> + + ) + })} )} diff --git a/src/views/History/ChoreHistory.jsx b/src/views/History/ChoreHistory.jsx index c89bf52..ca1371e 100644 --- a/src/views/History/ChoreHistory.jsx +++ b/src/views/History/ChoreHistory.jsx @@ -1,12 +1,20 @@ import { - Analytics, - Checklist, - EventBusy, - Group, - History, - Star, - Timelapse, - TrendingUp, + Type as ListType, + SwipeableList, + SwipeableListItem, + SwipeAction, + TrailingActions, +} from '@meauxt/react-swipeable-list' +import '@meauxt/react-swipeable-list/dist/styles.css' +import { + Analytics, + Checklist, + EventBusy, + Group, + History, + Star, + Timelapse, + TrendingUp, } from '@mui/icons-material' import DeleteIcon from '@mui/icons-material/Delete' import EditIcon from '@mui/icons-material/Edit' @@ -14,19 +22,11 @@ import { Box, Button, Card, Container, Grid, Sheet, Typography } from '@mui/joy' import moment from 'moment' import { useEffect, useState } from 'react' import { Link, useParams } from 'react-router-dom' -import { - Type as ListType, - SwipeableList, - SwipeableListItem, - SwipeAction, - TrailingActions, -} from 'react-swipeable-list' -import 'react-swipeable-list/dist/styles.css' import useConfirmationModal from '../../hooks/useConfirmationModal' import { - useChoreHistory, - useDeleteChoreHistory, - useUpdateChoreHistory, + useChoreHistory, + useDeleteChoreHistory, + useUpdateChoreHistory, } from '../../queries/ChoreQueries' import { useCircleMembers } from '../../queries/UserQueries' import { ChoreHistoryStatus } from '../../utils/Chores' diff --git a/src/views/Labels/LabelView.jsx b/src/views/Labels/LabelView.jsx index 1a6ddcb..4f60801 100644 --- a/src/views/Labels/LabelView.jsx +++ b/src/views/Labels/LabelView.jsx @@ -13,16 +13,16 @@ import { import { useEffect, useState } from 'react' import LabelModal from '../Modals/Inputs/LabelModal' -import { Add } from '@mui/icons-material' -import { useQueryClient } from '@tanstack/react-query' import { Type as ListType, SwipeableList, SwipeableListItem, SwipeAction, TrailingActions, -} from 'react-swipeable-list' -import 'react-swipeable-list/dist/styles.css' +} from '@meauxt/react-swipeable-list' +import '@meauxt/react-swipeable-list/dist/styles.css' +import { Add } from '@mui/icons-material' +import { useQueryClient } from '@tanstack/react-query' import { useUserProfile } from '../../queries/UserQueries' import { getTextColorFromBackgroundColor } from '../../utils/Colors' import { DeleteLabel } from '../../utils/Fetcher' diff --git a/src/views/Projects/ProjectView.jsx b/src/views/Projects/ProjectView.jsx index 8d4da1d..8552858 100644 --- a/src/views/Projects/ProjectView.jsx +++ b/src/views/Projects/ProjectView.jsx @@ -1,29 +1,29 @@ import DeleteIcon from '@mui/icons-material/Delete' import EditIcon from '@mui/icons-material/Edit' import { - Avatar, - Box, - Chip, - CircularProgress, - Container, - IconButton, - Stack, - Typography, + Avatar, + Box, + Chip, + CircularProgress, + Container, + IconButton, + Stack, + Typography, } from '@mui/joy' import { useEffect, useState } from 'react' import { useNavigate } from 'react-router-dom' import ProjectModal from '../Modals/Inputs/ProjectModal' +import { + Type as ListType, + SwipeableList, + SwipeableListItem, + SwipeAction, + TrailingActions, +} from '@meauxt/react-swipeable-list' +import '@meauxt/react-swipeable-list/dist/styles.css' import { Add, Task } from '@mui/icons-material' import { useQueryClient } from '@tanstack/react-query' -import { - Type as ListType, - SwipeableList, - SwipeableListItem, - SwipeAction, - TrailingActions, -} from 'react-swipeable-list' -import 'react-swipeable-list/dist/styles.css' import { useChores } from '../../queries/ChoreQueries' import { useUserProfile } from '../../queries/UserQueries' import { getTextColorFromBackgroundColor } from '../../utils/Colors' diff --git a/src/views/Things/ThingsView.jsx b/src/views/Things/ThingsView.jsx index 0384ed2..c63bfcd 100644 --- a/src/views/Things/ThingsView.jsx +++ b/src/views/Things/ThingsView.jsx @@ -1,39 +1,39 @@ import { - Add, - Delete, - Edit, - Flip, - PlusOne, - ToggleOff, - ToggleOn, - Widgets, + Type as ListType, + SwipeableList, + SwipeableListItem, + SwipeAction, + TrailingActions, +} from '@meauxt/react-swipeable-list' +import '@meauxt/react-swipeable-list/dist/styles.css' +import { + Add, + Delete, + Edit, + Flip, + PlusOne, + ToggleOff, + ToggleOn, + Widgets, } from '@mui/icons-material' import { - Avatar, - Box, - Chip, - Container, - IconButton, - Stack, - Typography, + Avatar, + Box, + Chip, + Container, + IconButton, + Stack, + Typography, } from '@mui/joy' import { useEffect, useState } from 'react' import { useNavigate } from 'react-router-dom' -import { - Type as ListType, - SwipeableList, - SwipeableListItem, - SwipeAction, - TrailingActions, -} from 'react-swipeable-list' -import 'react-swipeable-list/dist/styles.css' import { useNotification } from '../../service/NotificationProvider' import { - CreateThing, - DeleteThing, - GetThings, - SaveThing, - UpdateThingState, + CreateThing, + DeleteThing, + GetThings, + SaveThing, + UpdateThingState, } from '../../utils/Fetcher' import { getSafeBottomStyles } from '../../utils/SafeAreaUtils' import ConfirmationModal from '../Modals/Inputs/ConfirmationModal' diff --git a/src/views/Timer/TimerDetails.jsx b/src/views/Timer/TimerDetails.jsx index d162ba4..f54017b 100644 --- a/src/views/Timer/TimerDetails.jsx +++ b/src/views/Timer/TimerDetails.jsx @@ -1,47 +1,47 @@ import { - AccessTime, - Add, - BrowseGallery, - Delete, - Edit, - PauseCircle, - Person, - PlayArrow, + Type as ListType, + SwipeableList, + SwipeableListItem, + SwipeAction, + TrailingActions, +} from '@meauxt/react-swipeable-list' +import '@meauxt/react-swipeable-list/dist/styles.css' +import { + AccessTime, + Add, + BrowseGallery, + Delete, + Edit, + PauseCircle, + Person, + PlayArrow, } from '@mui/icons-material' import DeleteIcon from '@mui/icons-material/Delete' import EditIcon from '@mui/icons-material/Edit' import { - Alert, - Avatar, - Box, - Button, - Card, - CardContent, - Chip, - Container, - FormControl, - FormHelperText, - Grid, - IconButton, - Input, - Typography, + Alert, + Avatar, + Box, + Button, + Card, + CardContent, + Chip, + Container, + FormControl, + FormHelperText, + Grid, + IconButton, + Input, + Typography, } from '@mui/joy' import moment from 'moment' import { useEffect, useState } from 'react' import { useParams } from 'react-router-dom' import { - Type as ListType, - SwipeableList, - SwipeableListItem, - SwipeAction, - TrailingActions, -} from 'react-swipeable-list' -import 'react-swipeable-list/dist/styles.css' -import { - useChoreTimer, - usePauseChore, - useStartChore, - useUpdateTimeSession, + useChoreTimer, + usePauseChore, + useStartChore, + useUpdateTimeSession, } from '../../queries/TimeQueries' import { useCircleMembers } from '../../queries/UserQueries' import { useNotification } from '../../service/NotificationProvider'