From 7f4e5928492a71135f6817874461c80a0ecc155c Mon Sep 17 00:00:00 2001 From: Mo Tarbin Date: Tue, 16 Jul 2024 19:37:18 -0400 Subject: Add SkipChore function to Fetcher utility module, Update Loading Comp --- src/views/ChoreEdit/ChoreView.jsx | 193 ++++++++++++++++++++++++------------- src/views/Chores/ChoreCard.jsx | 8 ++ src/views/Chores/MyChores.jsx | 16 +-- src/views/History/ChoreHistory.jsx | 140 ++++++++++++--------------- src/views/History/HistoryCard.jsx | 53 ++++++++-- src/views/Landing/DemoHistory.jsx | 6 +- src/views/components/Loading.jsx | 51 ++++++++++ 7 files changed, 296 insertions(+), 171 deletions(-) create mode 100644 src/views/components/Loading.jsx (limited to 'src') diff --git a/src/views/ChoreEdit/ChoreView.jsx b/src/views/ChoreEdit/ChoreView.jsx index afdc379..172ad9b 100644 --- a/src/views/ChoreEdit/ChoreView.jsx +++ b/src/views/ChoreEdit/ChoreView.jsx @@ -26,6 +26,7 @@ import { styled, Typography, } from '@mui/joy' +import { Divider } from '@mui/material' import moment from 'moment' import { useEffect, useState } from 'react' import { useNavigate, useParams, useSearchParams } from 'react-router-dom' @@ -135,7 +136,7 @@ const ChoreView = () => { ? `${ performers.find(p => p.id === chore.lastCompletedBy)?.displayName }` - : 'Never', + : '--', }, { size: 6, @@ -230,8 +231,8 @@ const ChoreView = () => { level='h3' // textAlign={'center'} sx={{ - mt: 2, - mb: 1, + mt: 1, + mb: 0.5, }} > {chore.name} @@ -243,7 +244,7 @@ const ChoreView = () => { - + Details @@ -265,9 +266,13 @@ const ChoreView = () => { {detail.text} - + {detail.subtext ? detail.subtext : '--'} - + @@ -286,28 +291,6 @@ const ChoreView = () => { )} - - - - {/* { mt: 2, }} > - Additional Notes - { - if (e.target.value.trim() === '') { - setNote(null) - return + + Complete the task + + + + { + if (e.target.checked) { + setNote('') + } else { + setNote(null) + } + }} + overlay + sx={ + { + // my: 1, + } } - setNote(e.target.value) - }} - size='md' - sx={{ - mb: 1, - }} - /> + label={ + + Add Additional Notes + + } + /> + + {note !== null && ( + { + if (e.target.value.trim() === '') { + setNote(null) + return + } + setNote(e.target.value) + }} + size='md' + sx={{ + mb: 1, + }} + /> + )} { // my: 1, } } - label={Set completion date} + label={ + + Specify completion date + + } /> {completedDate !== null && ( @@ -390,30 +422,55 @@ const ChoreView = () => { > Mark as done - + + + + { navigate(`/chores/${chore.id}/edit`) } + const handleView = () => { + navigate(`/chores/${chore.id}`) + } const handleDelete = () => { setConfirmModelConfig({ isOpen: true, @@ -579,6 +583,10 @@ const ChoreCard = ({ Edit + + + View + Delete diff --git a/src/views/Chores/MyChores.jsx b/src/views/Chores/MyChores.jsx index cd90942..d4eed5a 100644 --- a/src/views/Chores/MyChores.jsx +++ b/src/views/Chores/MyChores.jsx @@ -3,7 +3,6 @@ import { Badge, Box, Checkbox, - CircularProgress, Container, IconButton, Input, @@ -18,8 +17,8 @@ import Fuse from 'fuse.js' import { useContext, useEffect, useRef, useState } from 'react' import { useNavigate } from 'react-router-dom' import { UserContext } from '../../contexts/UserContext' -import Logo from '../../Logo' import { GetAllUsers, GetChores, GetUserProfile } from '../../utils/Fetcher' +import LoadingComponent from '../components/Loading' import ChoreCard from './ChoreCard' const MyChores = () => { @@ -184,18 +183,7 @@ const MyChores = () => { } if (userProfile === null) { - return ( - - - - - - - - ) + return } return ( diff --git a/src/views/History/ChoreHistory.jsx b/src/views/History/ChoreHistory.jsx index b85e456..1db1f06 100644 --- a/src/views/History/ChoreHistory.jsx +++ b/src/views/History/ChoreHistory.jsx @@ -1,15 +1,13 @@ -import { Checklist, EventBusy, Timelapse } from '@mui/icons-material' +import { Checklist, EventBusy, Group, Timelapse } from '@mui/icons-material' import { Avatar, - Box, Button, - CircularProgress, + Chip, Container, Grid, List, ListItem, ListItemContent, - ListItemDecorator, Sheet, Typography, } from '@mui/joy' @@ -19,6 +17,7 @@ import { Link, useParams } from 'react-router-dom' import { API_URL } from '../../Config' import { GetAllCircleMembers } from '../../utils/Fetcher' import { Fetch } from '../../utils/TokenManager' +import LoadingComponent from '../components/Loading' import HistoryCard from './HistoryCard' const ChoreHistory = () => { @@ -92,59 +91,49 @@ const ChoreHistory = () => { const historyInfo = [ { - icon: ( - - - - ), - text: `${histories.length} completed`, - subtext: `${Object.keys(userHistories).length} users contributed`, + icon: , + text: 'Total Completed', + subtext: `${histories.length} times`, }, { - icon: ( - - - - ), - text: `Completed within ${moment - .duration(averageDelayMoment) - .humanize()}`, - subtext: `Maximum delay was ${moment - .duration(maxDelayMoment) - .humanize()}`, + icon: , + text: 'Usually Within', + subtext: moment.duration(averageDelayMoment).humanize(), }, { - icon: , - text: `${ + icon: , + text: 'Maximum Delay', + subtext: moment.duration(maxDelayMoment).humanize(), + }, + { + icon: , + text: ' Completed Most', + subtext: `${ performers.find(p => p.userId === Number(userCompletedByMost)) ?.displayName - } completed most`, - subtext: `${userHistories[userCompletedByMost]} time/s`, + } `, + }, + // contributes: + { + icon: , + text: 'Total Performers', + subtext: `${Object.keys(userHistories).length} users`, + }, + { + icon: , + text: 'Last Completed', + subtext: `${ + performers.find(p => p.userId === Number(histories[0].completedBy)) + ?.displayName + }`, }, ] - if (userCompletedByLeast !== userCompletedByMost) { - historyInfo.push({ - icon: ( - - { - performers.find(p => p.userId === userCompletedByLeast) - ?.displayName - } - - ), - text: `${ - performers.find(p => p.userId === Number(userCompletedByLeast)) - .displayName - } completed least`, - subtext: `${userHistories[userCompletedByLeast]} time/s`, - }) - } setHistoryInfo(historyInfo) } if (isLoading) { - return // Show loading indicator + return } if (!choreHistory.length) { return ( @@ -184,50 +173,43 @@ const ChoreHistory = () => { return ( - + Summary: - {/* - - - - - - - - - {choreHistory.length} completed - - - {Object.keys(userHistory).length} users contributed - - - - */} - - {historyInfo.map((info, index) => ( - - - - {info.icon} + + + {historyInfo.map((info, index) => ( + + {/* divider between the list items: */} + + - + {info.text} - - {info.subtext} - + + {info.subtext ? info.subtext : '--'} + - - - ))} - + + ))} + + + {/* User History Cards */} - + History: - + {/* Chore History List (Updated Style) */} @@ -241,7 +223,7 @@ const ChoreHistory = () => { /> ))} - + ) } diff --git a/src/views/History/HistoryCard.jsx b/src/views/History/HistoryCard.jsx index c606fbf..5e71f52 100644 --- a/src/views/History/HistoryCard.jsx +++ b/src/views/History/HistoryCard.jsx @@ -1,3 +1,4 @@ +import { CalendarViewDay, Check, Timelapse } from '@mui/icons-material' import { Avatar, Box, @@ -30,6 +31,50 @@ const HistoryCard = ({ allHistory, performers, historyEntry, index }) => { return `${timeValue} ${unit}${timeValue !== 1 ? 's' : ''}` } + + const getCompletedChip = historyEntry => { + var text = 'No Due Date' + var color = 'info' + var icon = + // if completed few hours +-6 hours + if ( + historyEntry.dueDate && + historyEntry.completedAt > historyEntry.dueDate - 1000 * 60 * 60 * 6 && + historyEntry.completedAt < historyEntry.dueDate + 1000 * 60 * 60 * 6 + ) { + text = 'On Time' + color = 'success' + icon = + } else if ( + historyEntry.dueDate && + historyEntry.completedAt < historyEntry.dueDate + ) { + text = 'On Time' + color = 'success' + icon = + } + + // if completed after due date then it's late + else if ( + historyEntry.dueDate && + historyEntry.completedAt > historyEntry.dueDate + ) { + text = 'Late' + color = 'warning' + icon = + } else { + text = 'No Due Date' + color = 'info' + icon = + } + + return ( + + {text} + + ) + } + return ( <> @@ -55,13 +100,7 @@ const HistoryCard = ({ allHistory, performers, historyEntry, index }) => { {moment(historyEntry.completedAt).format('ddd MM/DD/yyyy HH:mm')} - - - {historyEntry.dueDate && - historyEntry.completedAt > historyEntry.dueDate - ? 'Late' - : 'On Time'} - + {getCompletedChip(historyEntry)} diff --git a/src/views/Landing/DemoHistory.jsx b/src/views/Landing/DemoHistory.jsx index 2c713f1..4e0f45e 100644 --- a/src/views/Landing/DemoHistory.jsx +++ b/src/views/Landing/DemoHistory.jsx @@ -7,7 +7,7 @@ const DemoHistory = () => { { id: 32, choreId: 12, - completedAt: moment().format(), + completedAt: moment().hour(4).format(), completedBy: 1, assignedTo: 1, notes: null, @@ -25,8 +25,8 @@ const DemoHistory = () => { { id: 31, choreId: 12, - completedAt: moment().day(-10).format(), - completedBy: 1, + completedAt: moment().day(-10).hour(1).format(), + completedBy: 2, assignedTo: 1, notes: null, dueDate: moment().day(-10).format(), diff --git a/src/views/components/Loading.jsx b/src/views/components/Loading.jsx new file mode 100644 index 0000000..a31cf20 --- /dev/null +++ b/src/views/components/Loading.jsx @@ -0,0 +1,51 @@ +import { Box, CircularProgress, Container } from '@mui/joy' +import { Typography } from '@mui/material' +import { useEffect, useState } from 'react' +import Logo from '../../Logo' + +const LoadingComponent = () => { + const [message, setMessage] = useState('Loading...') + const [subMessage, setSubMessage] = useState('') + useEffect(() => { + // if loading took more than 5 seconds update submessage to mention there might be an error: + const timeout = setTimeout(() => { + setSubMessage( + 'This is taking longer than usual. There might be an issue.', + ) + }, 5000) + return () => clearTimeout(timeout) + }, []) + + return ( + + + + + + + {message} + + + {subMessage} + + + + ) +} + +export default LoadingComponent -- cgit