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

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

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

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

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

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

@ -15,6 +15,7 @@ import {
Select,
Typography,
} from '@mui/joy'
import moment from 'moment'
import { useContext, useState } from 'react'
import { UserContext } from '../../contexts/UserContext'
import { isPlusAccount } from '../../utils/Helpers'
@ -59,6 +60,7 @@ const RepeatOnSections = ({
onFrequencyTypeUpdate,
frequencyMetadata,
onFrequencyMetadataUpdate,
onFrequencyTimeUpdate,
things,
}) => {
const [months, setMonths] = useState({})
@ -66,104 +68,200 @@ const RepeatOnSections = ({
const [daysOfTheWeek, setDaysOfTheWeek] = useState({})
const [monthsOfTheYear, setMonthsOfTheYear] = useState({})
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) {
case 'interval':
return (
<Grid item sm={12} sx={{ display: 'flex', alignItems: 'center' }}>
<Typography level='h5'>Every: </Typography>
<Input
type='number'
value={frequency}
onChange={e => {
if (e.target.value < 1) {
e.target.value = 1
}
onFrequencyUpdate(e.target.value)
}}
/>
<Select placeholder='Unit' value={intervalUnit}>
{['hours', 'days', 'weeks', 'months', 'years'].map(item => (
<Option
key={item}
value={item}
onClick={() => {
setIntervalUnit(item)
onFrequencyMetadataUpdate({
unit: item,
})
}}
>
{item.charAt(0).toUpperCase() + item.slice(1)}
</Option>
))}
</Select>
</Grid>
<>
<Grid item sm={12} sx={{ display: 'flex', alignItems: 'center' }}>
<Typography level='h5'>Every: </Typography>
<Input
type='number'
value={frequency}
onChange={e => {
if (e.target.value < 1) {
e.target.value = 1
}
onFrequencyUpdate(e.target.value)
}}
/>
<Select placeholder='Unit' value={intervalUnit}>
{['hours', 'days', 'weeks', 'months', 'years'].map(item => (
<Option
key={item}
value={item}
onClick={() => {
setIntervalUnit(item)
onFrequencyMetadataUpdate({
unit: item,
})
}}
>
{item.charAt(0).toUpperCase() + item.slice(1)}
</Option>
))}
</Select>
</Grid>
{timePickerComponent}
</>
)
case 'days_of_the_week':
return (
<Grid item sm={12} sx={{ display: 'flex', alignItems: 'center' }}>
<Card>
<List
orientation='horizontal'
wrap
sx={{
'--List-gap': '8px',
'--ListItem-radius': '20px',
}}
>
{[
'monday',
'tuesday',
'wednesday',
'thursday',
'friday',
'saturday',
'sunday',
].map(item => (
<ListItem key={item}>
<Checkbox
// disabled={index === 0}
<>
<Grid item sm={12} sx={{ display: 'flex', alignItems: 'center' }}>
<Card>
<List
orientation='horizontal'
wrap
sx={{
'--List-gap': '8px',
'--ListItem-radius': '20px',
}}
>
{[
'monday',
'tuesday',
'wednesday',
'thursday',
'friday',
'saturday',
'sunday',
].map(item => (
<ListItem key={item}>
<Checkbox
// disabled={index === 0}
checked={frequencyMetadata?.days?.includes(item) || false}
onClick={() => {
const newDaysOfTheWeek = frequencyMetadata['days'] || []
if (newDaysOfTheWeek.includes(item)) {
newDaysOfTheWeek.splice(
newDaysOfTheWeek.indexOf(item),
1,
)
} else {
newDaysOfTheWeek.push(item)
}
checked={frequencyMetadata?.days?.includes(item) || false}
onClick={() => {
const newDaysOfTheWeek = frequencyMetadata['days'] || []
if (newDaysOfTheWeek.includes(item)) {
newDaysOfTheWeek.splice(
newDaysOfTheWeek.indexOf(item),
1,
)
} else {
newDaysOfTheWeek.push(item)
}
onFrequencyMetadataUpdate({
days: newDaysOfTheWeek.sort(),
})
}}
overlay
disableIcon
variant='soft'
label={item.charAt(0).toUpperCase() + item.slice(1)}
/>
</ListItem>
))}
</List>
</Card>
</Grid>
onFrequencyMetadataUpdate({
days: newDaysOfTheWeek.sort(),
})
}}
overlay
disableIcon
variant='soft'
label={item.charAt(0).toUpperCase() + item.slice(1)}
/>
</ListItem>
))}
</List>
</Card>
</Grid>
{timePickerComponent}
</>
)
case 'day_of_the_month':
return (
<Grid
item
sm={12}
sx={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'space-between',
}}
>
<>
<Grid
item
sm={12}
sx={{
display: 'flex',
alignItems: 'center',
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
sx={{
display: 'flex',
@ -187,74 +285,10 @@ const RepeatOnSections = ({
onFrequencyUpdate(e.target.value)
}}
/>
<Typography>of the following month/s: </Typography>
<Typography>of the above month/s</Typography>
</Box>
<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>
{timePickerComponent}
</>
)
default:
@ -269,6 +303,7 @@ const RepeatSection = ({
onFrequencyTypeUpdate,
frequencyMetadata,
onFrequencyMetadataUpdate,
onFrequencyTimeUpdate,
frequencyError,
allUserThings,
onTriggerUpdate,
@ -440,6 +475,7 @@ const RepeatSection = ({
onFrequencyTypeUpdate={onFrequencyTypeUpdate}
frequencyMetadata={frequencyMetadata || {}}
onFrequencyMetadataUpdate={onFrequencyMetadataUpdate}
onFrequencyTimeUpdate={onFrequencyTimeUpdate}
things={allUserThings}
/>
</Grid>

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

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