amy/donetick-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a date when having repeatable frequency type, Fix logo bug

Browse source
This commit is contained in:
Mo Tarbin 2024-07-07 19:48:34 -04:00
parent 45deaf476f
commit c4bf06b11c
5 changed files with 216 additions and 181 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/views/Authorization/ForgotPasswordView.jsx
View file

@ -1,4 +1,5 @@
// create boilerplate for ResetPasswordView: // create boilerplate for ResetPasswordView:
import LogoSVG from '@/assets/logo.svg'
import { import {
Box, Box,
Button, Button,
@ -12,7 +13,6 @@ import {
} from '@mui/joy' } from '@mui/joy'
import { useState } from 'react' import { useState } from 'react'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { API_URL } from './../../Config' import { API_URL } from './../../Config'
const ForgotPasswordView = () => { const ForgotPasswordView = () => {
@ -105,12 +105,7 @@ const ForgotPasswordView = () => {
}} }}
> >
<Box> <Box>
<img <img src={LogoSVG} alt='logo' width='128px' height='128px' />
src='/src/assets/logo.svg'
alt='logo'
width='128px'
height='128px'
/>
{/* <Logo /> */} {/* <Logo /> */}
<Typography level='h2'> <Typography level='h2'>
Done Done

8
src/views/ChoreEdit/ChoreEdit.jsx
View file

@ -67,7 +67,7 @@ const ChoreEdit = () => {
const [frequencyMetadata, setFrequencyMetadata] = useState({}) const [frequencyMetadata, setFrequencyMetadata] = useState({})
const [labels, setLabels] = useState([]) const [labels, setLabels] = useState([])
const [allUserThings, setAllUserThings] = useState([]) const [allUserThings, setAllUserThings] = useState([])
const [thingTrigger, setThingTrigger] = useState({}) const [thingTrigger, setThingTrigger] = useState(null)
const [isThingValid, setIsThingValid] = useState(false) const [isThingValid, setIsThingValid] = useState(false)
const [notificationMetadata, setNotificationMetadata] = useState({}) const [notificationMetadata, setNotificationMetadata] = useState({})
@ -459,6 +459,12 @@ const ChoreEdit = () => {
onFrequencyTypeUpdate={setFrequencyType} onFrequencyTypeUpdate={setFrequencyType}
frequencyMetadata={frequencyMetadata} frequencyMetadata={frequencyMetadata}
onFrequencyMetadataUpdate={setFrequencyMetadata} onFrequencyMetadataUpdate={setFrequencyMetadata}
onFrequencyTimeUpdate={t => {
setFrequencyMetadata({
...frequencyMetadata,
time: t,
})
}}
frequencyError={errors?.frequency} frequencyError={errors?.frequency}
allUserThings={allUserThings} allUserThings={allUserThings}
onTriggerUpdate={thingUpdate => { onTriggerUpdate={thingUpdate => {

32
src/views/ChoreEdit/ChoreView.jsx
View file

@ -10,9 +10,9 @@ import {
import { import {
Box, Box,
Button, Button,
Card,
Checkbox, Checkbox,
Container, Container,
Divider,
FormControl, FormControl,
Grid, Grid,
Input, Input,
@ -26,7 +26,7 @@ import {
} from '@mui/joy' } from '@mui/joy'
import moment from 'moment' import moment from 'moment'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useNavigate, useParams, useSearchParams } from 'react-router-dom' import { useParams, useSearchParams } from 'react-router-dom'
import { import {
GetAllUsers, GetAllUsers,
GetChoreDetailById, GetChoreDetailById,
@ -50,8 +50,6 @@ const ChoreView = () => {
const { choreId } = useParams() const { choreId } = useParams()
const [note, setNote] = useState(null) const [note, setNote] = useState(null)
const Navigate = useNavigate()
const [searchParams] = useSearchParams() const [searchParams] = useSearchParams()
const [isPendingCompletion, setIsPendingCompletion] = useState(false) const [isPendingCompletion, setIsPendingCompletion] = useState(false)
@ -128,12 +126,9 @@ const ChoreView = () => {
chore.lastCompletedDate && chore.lastCompletedDate &&
moment(chore.lastCompletedDate).fromNow() moment(chore.lastCompletedDate).fromNow()
// moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A')) // moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A'))
}( }(${
${ performers.find(p => p.id === chore.lastCompletedBy)?.displayName
performers.find(p => p.id === chore.lastCompletedBy) })`
?.displayName
}
)`
: 'Never', : 'Never',
}, },
{ {
@ -234,13 +229,20 @@ const ChoreView = () => {
))} ))}
</Grid> </Grid>
</Box> </Box>
<Divider {/* <Divider
sx={{ sx={{
my: 2, my: 2,
}} }}
/> /> */}
<Box> <Card
sx={{
p: 2,
borderRadius: 'md',
boxShadow: 'sm',
mt: 2,
}}
>
<Typography level='title-md'>Additional Notes</Typography> <Typography level='title-md'>Additional Notes</Typography>
<Input <Input
fullWidth fullWidth
@ -260,11 +262,13 @@ const ChoreView = () => {
my: 1, my: 1,
}} }}
/> />
<FormControl size='sm' sx={{ width: 400 }}> <FormControl size='sm' sx={{ width: 400 }}>
<Checkbox <Checkbox
defaultChecked={completedDate !== null} defaultChecked={completedDate !== null}
checked={completedDate !== null} checked={completedDate !== null}
value={completedDate !== null} value={completedDate !== null}
size='lg'
onChange={e => { onChange={e => {
if (e.target.checked) { if (e.target.checked) {
setCompletedDate( setCompletedDate(
@ -330,7 +334,7 @@ const ChoreView = () => {
> >
<Box>Mark as {isPendingCompletion ? 'completed' : 'done'}</Box> <Box>Mark as {isPendingCompletion ? 'completed' : 'done'}</Box>
</Button> */} </Button> */}
</Box> </Card>
<Snackbar <Snackbar
open={isPendingCompletion} open={isPendingCompletion}

342
src/views/ChoreEdit/RepeatSection.jsx
View file

@ -15,6 +15,7 @@ import {
Select, Select,
Typography, Typography,
} from '@mui/joy' } from '@mui/joy'
import moment from 'moment'
import { useContext, useState } from 'react' import { useContext, useState } from 'react'
import { UserContext } from '../../contexts/UserContext' import { UserContext } from '../../contexts/UserContext'
import { isPlusAccount } from '../../utils/Helpers' import { isPlusAccount } from '../../utils/Helpers'
@ -59,6 +60,7 @@ const RepeatOnSections = ({
onFrequencyTypeUpdate, onFrequencyTypeUpdate,
frequencyMetadata, frequencyMetadata,
onFrequencyMetadataUpdate, onFrequencyMetadataUpdate,
onFrequencyTimeUpdate,
things, things,
}) => { }) => {
const [months, setMonths] = useState({}) const [months, setMonths] = useState({})
@ -66,104 +68,200 @@ const RepeatOnSections = ({
const [daysOfTheWeek, setDaysOfTheWeek] = useState({}) const [daysOfTheWeek, setDaysOfTheWeek] = useState({})
const [monthsOfTheYear, setMonthsOfTheYear] = useState({}) const [monthsOfTheYear, setMonthsOfTheYear] = useState({})
const [intervalUnit, setIntervalUnit] = useState('days') const [intervalUnit, setIntervalUnit] = useState('days')
const [frequancyMetadata, setFrequancyMetadata] = useState({})
const [time, setTime] = useState('18:00')
const timePickerComponent = (
<Grid item sm={12} sx={{ display: 'flex', alignItems: 'center' }}>
<Typography level='h5'>At: </Typography>
<Input
type='time'
defaultValue={
frequencyMetadata?.time
? moment(frequencyMetadata?.time).format('HH:mm')
: '18:00'
}
onChange={e => {
// create new today date with selected time with Timezone:
onFrequencyTimeUpdate(
moment(
moment(new Date()).format('YYYY-MM-DD') + 'T' + e.target.value,
).format(),
)
}}
/>
</Grid>
)
switch (frequencyType) { switch (frequencyType) {
case 'interval': case 'interval':
return ( return (
<Grid item sm={12} sx={{ display: 'flex', alignItems: 'center' }}> <>
<Typography level='h5'>Every: </Typography> <Grid item sm={12} sx={{ display: 'flex', alignItems: 'center' }}>
<Input <Typography level='h5'>Every: </Typography>
type='number' <Input
value={frequency} type='number'
onChange={e => { value={frequency}
if (e.target.value < 1) { onChange={e => {
e.target.value = 1 if (e.target.value < 1) {
} e.target.value = 1
onFrequencyUpdate(e.target.value) }
}} onFrequencyUpdate(e.target.value)
/> }}
<Select placeholder='Unit' value={intervalUnit}> />
{['hours', 'days', 'weeks', 'months', 'years'].map(item => ( <Select placeholder='Unit' value={intervalUnit}>
<Option {['hours', 'days', 'weeks', 'months', 'years'].map(item => (
key={item} <Option
value={item} key={item}
onClick={() => { value={item}
setIntervalUnit(item) onClick={() => {
onFrequencyMetadataUpdate({ setIntervalUnit(item)
unit: item, onFrequencyMetadataUpdate({
}) unit: item,
}} })
> }}
{item.charAt(0).toUpperCase() + item.slice(1)} >
</Option> {item.charAt(0).toUpperCase() + item.slice(1)}
))} </Option>
</Select> ))}
</Grid> </Select>
</Grid>
{timePickerComponent}
</>
) )
case 'days_of_the_week': case 'days_of_the_week':
return ( return (
<Grid item sm={12} sx={{ display: 'flex', alignItems: 'center' }}> <>
<Card> <Grid item sm={12} sx={{ display: 'flex', alignItems: 'center' }}>
<List <Card>
orientation='horizontal' <List
wrap orientation='horizontal'
sx={{ wrap
'--List-gap': '8px', sx={{
'--ListItem-radius': '20px', '--List-gap': '8px',
}} '--ListItem-radius': '20px',
> }}
{[ >
'monday', {[
'tuesday', 'monday',
'wednesday', 'tuesday',
'thursday', 'wednesday',
'friday', 'thursday',
'saturday', 'friday',
'sunday', 'saturday',
].map(item => ( 'sunday',
<ListItem key={item}> ].map(item => (
<Checkbox <ListItem key={item}>
// disabled={index === 0} <Checkbox
// disabled={index === 0}
checked={frequencyMetadata?.days?.includes(item) || false} checked={frequencyMetadata?.days?.includes(item) || false}
onClick={() => { onClick={() => {
const newDaysOfTheWeek = frequencyMetadata['days'] || [] const newDaysOfTheWeek = frequencyMetadata['days'] || []
if (newDaysOfTheWeek.includes(item)) { if (newDaysOfTheWeek.includes(item)) {
newDaysOfTheWeek.splice( newDaysOfTheWeek.splice(
newDaysOfTheWeek.indexOf(item), newDaysOfTheWeek.indexOf(item),
1, 1,
) )
} else { } else {
newDaysOfTheWeek.push(item) newDaysOfTheWeek.push(item)
} }
onFrequencyMetadataUpdate({ onFrequencyMetadataUpdate({
days: newDaysOfTheWeek.sort(), days: newDaysOfTheWeek.sort(),
}) })
}} }}
overlay overlay
disableIcon disableIcon
variant='soft' variant='soft'
label={item.charAt(0).toUpperCase() + item.slice(1)} label={item.charAt(0).toUpperCase() + item.slice(1)}
/> />
</ListItem> </ListItem>
))} ))}
</List> </List>
</Card> </Card>
</Grid> </Grid>
{timePickerComponent}
</>
) )
case 'day_of_the_month': case 'day_of_the_month':
return ( return (
<Grid <>
item <Grid
sm={12} item
sx={{ sm={12}
display: 'flex', sx={{
alignItems: 'center', display: 'flex',
flexDirection: 'column', alignItems: 'center',
justifyContent: 'space-between', flexDirection: 'column',
}} justifyContent: 'space-between',
> }}
>
<Card>
<List
orientation='horizontal'
wrap
sx={{
'--List-gap': '8px',
'--ListItem-radius': '20px',
}}
>
{[
'january',
'february',
'march',
'april',
'may',
'june',
'july',
'august',
'september',
'october',
'november',
'december',
].map(item => (
<ListItem key={item}>
<Checkbox
// disabled={index === 0}
checked={frequencyMetadata?.months?.includes(item)}
// checked={months[item] || false}
// onClick={() => {
// const newMonthsOfTheYear = {
// ...monthsOfTheYear,
// }
// newMonthsOfTheYear[item] = !newMonthsOfTheYear[item]
// onFrequencyMetadataUpdate({
// months: newMonthsOfTheYear,
// })
// setMonthsOfTheYear(newMonthsOfTheYear)
// }}
onClick={() => {
const newMonthsOfTheYear =
frequencyMetadata['months'] || []
if (newMonthsOfTheYear.includes(item)) {
newMonthsOfTheYear.splice(
newMonthsOfTheYear.indexOf(item),
1,
)
} else {
newMonthsOfTheYear.push(item)
}
onFrequencyMetadataUpdate({
months: newMonthsOfTheYear.sort(),
})
console.log('newMonthsOfTheYear', newMonthsOfTheYear)
// setDaysOfTheWeek(newDaysOfTheWeek)
}}
overlay
disableIcon
variant='soft'
label={item.charAt(0).toUpperCase() + item.slice(1)}
/>
</ListItem>
))}
</List>
</Card>
</Grid>
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
@ -187,74 +285,10 @@ const RepeatOnSections = ({
onFrequencyUpdate(e.target.value) onFrequencyUpdate(e.target.value)
}} }}
/> />
<Typography>of the following month/s: </Typography> <Typography>of the above month/s</Typography>
</Box> </Box>
<Card> {timePickerComponent}
<List </>
orientation='horizontal'
wrap
sx={{
'--List-gap': '8px',
'--ListItem-radius': '20px',
}}
>
{[
'january',
'february',
'march',
'april',
'may',
'june',
'july',
'august',
'september',
'october',
'november',
'december',
].map(item => (
<ListItem key={item}>
<Checkbox
// disabled={index === 0}
checked={frequencyMetadata?.months?.includes(item)}
// checked={months[item] || false}
// onClick={() => {
// const newMonthsOfTheYear = {
// ...monthsOfTheYear,
// }
// newMonthsOfTheYear[item] = !newMonthsOfTheYear[item]
// onFrequencyMetadataUpdate({
// months: newMonthsOfTheYear,
// })
// setMonthsOfTheYear(newMonthsOfTheYear)
// }}
onClick={() => {
const newMonthsOfTheYear =
frequencyMetadata['months'] || []
if (newMonthsOfTheYear.includes(item)) {
newMonthsOfTheYear.splice(
newMonthsOfTheYear.indexOf(item),
1,
)
} else {
newMonthsOfTheYear.push(item)
}
onFrequencyMetadataUpdate({
months: newMonthsOfTheYear.sort(),
})
console.log('newMonthsOfTheYear', newMonthsOfTheYear)
// setDaysOfTheWeek(newDaysOfTheWeek)
}}
overlay
disableIcon
variant='soft'
label={item.charAt(0).toUpperCase() + item.slice(1)}
/>
</ListItem>
))}
</List>
</Card>
</Grid>
) )
default: default:
@ -269,6 +303,7 @@ const RepeatSection = ({
onFrequencyTypeUpdate, onFrequencyTypeUpdate,
frequencyMetadata, frequencyMetadata,
onFrequencyMetadataUpdate, onFrequencyMetadataUpdate,
onFrequencyTimeUpdate,
frequencyError, frequencyError,
allUserThings, allUserThings,
onTriggerUpdate, onTriggerUpdate,
@ -440,6 +475,7 @@ const RepeatSection = ({
onFrequencyTypeUpdate={onFrequencyTypeUpdate} onFrequencyTypeUpdate={onFrequencyTypeUpdate}
frequencyMetadata={frequencyMetadata || {}} frequencyMetadata={frequencyMetadata || {}}
onFrequencyMetadataUpdate={onFrequencyMetadataUpdate} onFrequencyMetadataUpdate={onFrequencyMetadataUpdate}
onFrequencyTimeUpdate={onFrequencyTimeUpdate}
things={allUserThings} things={allUserThings}
/> />
</Grid> </Grid>

6
src/views/Circles/JoinCircle.jsx
View file

@ -40,12 +40,6 @@ const JoinCircleView = () => {
boxShadow: 'md', boxShadow: 'md',
}} }}
> >
{/* <img
src='/src/assets/logo.svg'
alt='logo'
width='128px'
height='128px'
/> */}
<Logo /> <Logo />
<Typography level='h2'> <Typography level='h2'>