diff --git a/src/utils/Fetcher.jsx b/src/utils/Fetcher.jsx index 5b3bbd9..106f17d 100644 --- a/src/utils/Fetcher.jsx +++ b/src/utils/Fetcher.jsx @@ -88,7 +88,7 @@ const UpdateChoreAssignee = (id, assignee) => { return Fetch(`${API_URL}/chores/${id}/assignee`, { method: 'PUT', headers: HEADERS(), - body: JSON.stringify({ assignee:Number(assignee) }), + body: JSON.stringify({ assignee: Number(assignee) }), }) } @@ -108,13 +108,20 @@ const DeleteChore = id => { } const SaveChore = chore => { - console.log('chore', chore) return Fetch(`${API_URL}/chores/`, { method: 'PUT', headers: HEADERS(), body: JSON.stringify(chore), }) } + +const UpdateChorePriority = (id, priority) => { + return Fetch(`${API_URL}/chores/${id}/priority `, { + method: 'PUT', + headers: HEADERS(), + body: JSON.stringify({ priority: priority }), + }) +} const GetChoreHistory = choreId => { return Fetch(`${API_URL}/chores/${choreId}/history`, { method: 'GET', @@ -312,8 +319,9 @@ export { SaveThing, signUp, SkipChore, + UpdateChoreAssignee, UpdateChoreHistory, + UpdateChorePriority, UpdateThingState, UpdateUserDetails, - UpdateChoreAssignee, } diff --git a/src/utils/Priorities.jsx b/src/utils/Priorities.jsx new file mode 100644 index 0000000..0d1f1f1 --- /dev/null +++ b/src/utils/Priorities.jsx @@ -0,0 +1,31 @@ +import { + HorizontalRule, + KeyboardControlKey, + KeyboardDoubleArrowUp, + PriorityHigh, +} from '@mui/icons-material' + +const Priorities = [ + { + name: 'P4', + value: 4, + icon: , + }, + { + name: 'P3 ', + value: 3, + icon: , + }, + { + name: 'P2', + value: 2, + icon: , + }, + { + name: 'P1', + value: 1, + icon: , + }, +] + +export default Priorities diff --git a/src/views/ChoreEdit/ChoreEdit.jsx b/src/views/ChoreEdit/ChoreEdit.jsx index 9a61d9d..01a947d 100644 --- a/src/views/ChoreEdit/ChoreEdit.jsx +++ b/src/views/ChoreEdit/ChoreEdit.jsx @@ -630,10 +630,11 @@ const ChoreEdit = () => { description: 'before a task is due in few hours', id: 'predue', }, - { - title: 'Overdue', - description: 'A notification when a task is overdue', - }, + // { + // title: 'Overdue', + // description: 'A notification when a task is overdue', + // id: 'overdue', + // }, { title: 'Nagging', description: 'Daily reminders until the task is completed', diff --git a/src/views/ChoreEdit/ChoreView.jsx b/src/views/ChoreEdit/ChoreView.jsx index b77b511..f81f0de 100644 --- a/src/views/ChoreEdit/ChoreView.jsx +++ b/src/views/ChoreEdit/ChoreView.jsx @@ -5,6 +5,7 @@ import { Checklist, Edit, History, + LowPriority, PeopleAlt, Person, SwitchAccessShortcut, @@ -17,11 +18,15 @@ import { Checkbox, Chip, Container, + Dropdown, FormControl, Grid, Input, ListItem, ListItemContent, + Menu, + MenuButton, + MenuItem, Sheet, Snackbar, styled, @@ -36,7 +41,9 @@ import { GetChoreDetailById, MarkChoreComplete, SkipChore, + UpdateChorePriority, } from '../../utils/Fetcher' +import Priorities from '../../utils/Priorities' import ConfirmationModal from '../Modals/Inputs/ConfirmationModal' const IconCard = styled('div')({ display: 'flex', @@ -48,6 +55,7 @@ const IconCard = styled('div')({ height: '40px', marginRight: '16px', }) + const ChoreView = () => { const [chore, setChore] = useState({}) const navigate = useNavigate() @@ -63,13 +71,17 @@ const ChoreView = () => { const [secondsLeftToCancel, setSecondsLeftToCancel] = useState(null) const [completedDate, setCompletedDate] = useState(null) const [confirmModelConfig, setConfirmModelConfig] = useState({}) - + const [chorePriority, setChorePriority] = useState(null) useEffect(() => { Promise.all([ GetChoreDetailById(choreId).then(resp => { if (resp.ok) { return resp.json().then(data => { setChore(data.res) + setChorePriority( + Priorities.find(p => p.value === data.res.priority), + ) + document.title = 'Donetick: ' + data.res.name }) } }), @@ -89,7 +101,14 @@ const ChoreView = () => { generateInfoCards(chore) } }, [chore, performers]) - + const handleUpdatePriority = priority => { + if (priority.value === 0) { + setChorePriority(null) + } else { + setChorePriority(priority) + } + UpdateChorePriority(choreId, priority.value) + } const generateInfoCards = chore => { const cards = [ { @@ -217,6 +236,8 @@ const ChoreView = () => { flexDirection: 'column', // space between : justifyContent: 'space-between', + // max height of the container: + maxHeight: 'calc(100vh - 500px)', }} > { > {chore.name} - } size='lg' sx={{ mb: 4 }}> + } size='md' sx={{ mb: 1 }}> {chore.nextDueDate ? `Due at ${moment(chore.nextDueDate).format('MM/DD/YYYY hh:mm A')}` : 'N/A'} - - Details - - { ))} + + + + {chorePriority ? chorePriority.icon : } + {chorePriority ? chorePriority.name : 'No Priority'} + + + {Priorities.map((priority, index) => ( + { + handleUpdatePriority(priority) + }} + > + {priority.name} + + ))} + + { + handleUpdatePriority({ + name: 'No Priority', + value: 0, + }) + setChorePriority(null) + }} + > + No Priority + + + + + + + + {chore.notes && ( <> @@ -298,9 +410,7 @@ const ChoreView = () => { my: 2, }} /> */} - - Actions - + { }} /> )} - { justifyContent: 'center', }} > - - + }} + > + Mark as done + + - - More + - - - - - - { - // GetAllUsers() - // .then(response => response.json()) - // .then(data => { - // setPerformers(data.res) - // }) - // }, []) - + const { userProfile } = React.useContext(UserContext) useEffect(() => { document.addEventListener('mousedown', handleMenuOutsideClick) return () => { @@ -282,7 +279,18 @@ const ChoreCard = ({ return } } - + const getPriorityIcon = priority => { + switch (Number(priority)) { + case 1: + return + case 2: + return + case 3: + return + default: + return + } + } const getRecurrentChipText = chore => { const dayOfMonthSuffix = n => { if (n >= 11 && n <= 13) { @@ -438,16 +446,37 @@ const ChoreCard = ({ {getName(chore.name)} - - Assigned to{' '} - - { - performers.find(p => p.id === chore.assignedTo) - ?.displayName - } - - + {chore.assignedTo !== userProfile.id && ( + + Assigned to{' '} + + { + performers.find(p => p.id === chore.assignedTo) + ?.displayName + } + + + )} + {chore.priority > 0 && ( + + P{chore.priority} + + )} {chore.labels?.split(',').map((label, index) => ( { return aDueDate - bDueDate // Sort ascending by due date } - const handleSelectedFilter = selected => { - setFilteredChores(FILTERS[selected](chores)) - - setSelectedFilter(selected) - } - useEffect(() => { if (userProfile === null) { GetUserProfile()