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

Make label Clickable

Browse source 
Fix changing URL for selfhosted
Update styling for calendar and thingview
This commit is contained in:
Mo Tarbin 2025-02-01 01:51:20 -05:00
parent 4527b229ed
commit ba149d0e96
10 changed files with 171 additions and 166 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/utils/TokenManager.jsx
View file

@ -25,6 +25,7 @@ class ApiManager {
}
updateApiURL(url) {
this.customServerURL = url
this.init()
}
}

214
src/views/Authorization/LoginSettings.jsx
View file

@ -1,36 +1,26 @@
import GoogleIcon from '@mui/icons-material/Google'
import { Preferences } from '@capacitor/preferences'
import {
Avatar,
Box,
Button,
Container,
Divider,
IconButton,
Input,
Sheet,
Snackbar,
Typography,
} from '@mui/joy'
import React from 'react'
import { LoginSocialGoogle } from 'reactjs-social-login'
import { API_URL, GOOGLE_CLIENT_ID, REDIRECT_URL } from '../../Config'
import Logo from '../../Logo'
import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
import { Capacitor } from '@capacitor/core'
import { Settings } from '@mui/icons-material'
import { useNavigate } from 'react-router-dom'
import { Preferences } from '@capacitor/preferences'
import { API_URL } from '../../Config'
import Logo from '../../Logo'
import { apiManager } from '../../utils/TokenManager'
const LoginSettings = () => {
const [error, setError] = React.useState(null)
const Navigate = useNavigate()
const [serverURL, setServerURL] = React.useState('')
React.useEffect(() => {
Preferences.get({ key: 'customServerUrl' }).then((result) => {
Preferences.get({ key: 'customServerUrl' }).then(result => {
setServerURL(result.value || API_URL)
})
}, [])
@ -38,13 +28,9 @@ const LoginSettings = () => {
const isValidServerURL = () => {
return serverURL.match(/^(http|https):\/\/[^ "]+$/)
}
return (
<Container
component='main'
maxWidth='xs'
>
return (
<Container component='main' maxWidth='xs'>
<Box
sx={{
marginTop: 4,
@ -58,7 +44,7 @@ const LoginSettings = () => {
sx={{
mt: 1,
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
@ -67,103 +53,101 @@ const LoginSettings = () => {
boxShadow: 'md',
}}
>
<Logo />
<Logo />
<Typography level='h2'>
Done
<span
style={{
color: '#06b6d4',
}}
>
tick
</span>
</Typography>
<Typography level='h2'>
Done
<span
style={{
color: '#06b6d4',
}}
>
tick
</span>
</Typography>
<Typography level='body2' alignSelf={'start'} mt={4}>
Server URL
</Typography>
<Input
margin='normal'
required
fullWidth
id='serverURL'
name='serverURL'
autoFocus
value={serverURL}
onChange={e => {
setServerURL(e.target.value)
}}
/>
<Typography level='body2' alignSelf={'start'} mt={4} >
Server URL
</Typography>
<Input
margin='normal'
required
fullWidth
id='serverURL'
name='serverURL'
autoFocus
value={serverURL}
onChange={e => {
setServerURL(e.target.value)
}}
/>
<Typography mt={1} level='body-xs'>
Change the server URL to connect to a different server, such as your own self-hosted Donetick server.
</Typography>
<Typography mt={1} level='body-xs'>
Please ensure to include the protocol (http:// or https://) and the port number if necessary (default Donetick port is 2021).
</Typography>
<Button
fullWidth
size='lg'
variant='solid'
sx={{
width: '100%',
mt: 3,
mb: 2,
border: 'moccasin',
borderRadius: '8px',
}}
onClick={() => {
if (serverURL === '') {
Preferences.set({ key: 'customServerUrl', value: API_URL }).then(() => {
Navigate('/login')
})
return
}
if (!isValidServerURL()){
setError('Invalid server URL')
return
}
Preferences.set({ key: 'customServerUrl', value: serverURL }).then(() => {
Navigate('/login')
}
)
}
<Typography mt={1} level='body-xs'>
Change the server URL to connect to a different server, such as your
own self-hosted Donetick server.
</Typography>
<Typography mt={1} level='body-xs'>
Please ensure to include the protocol (http:// or https://) and the
port number if necessary (default Donetick port is 2021).
</Typography>
<Button
fullWidth
size='lg'
variant='solid'
sx={{
width: '100%',
mt: 3,
mb: 2,
border: 'moccasin',
borderRadius: '8px',
}}
onClick={() => {
if (serverURL === '') {
Preferences.set({
key: 'customServerUrl',
value: API_URL,
}).then(() => {
Navigate('/login')
})
return
}
>
Save
</Button>
<Button
fullWidth
size='lg'
variant='soft'
color='danger'
sx={{
width: '100%',
mb: 2,
border: 'moccasin',
borderRadius: '8px',
}}
onClick={() => {
Preferences.set({ key: 'customServerUrl', value: API_URL }).then(() => {
Navigate('/login')
})
}
if (!isValidServerURL()) {
setError('Invalid server URL')
return
}
>
Cancel and Reset
</Button>
Preferences.set({
key: 'customServerUrl',
value: serverURL,
}).then(() => {
apiManager.updateApiURL(serverURL + '/api/v1')
Navigate('/login')
})
}}
>
Save
</Button>
<Button
fullWidth
size='lg'
variant='soft'
color='danger'
sx={{
width: '100%',
mb: 2,
border: 'moccasin',
borderRadius: '8px',
}}
onClick={() => {
Preferences.set({ key: 'customServerUrl', value: API_URL }).then(
() => {
Navigate('/login')
},
)
}}
>
Cancel and Reset
</Button>
</Sheet>
</Box>
<Snackbar

38
src/views/Authorization/LoginView.jsx
View file

@ -140,27 +140,23 @@ const LoginView = () => {
boxShadow: 'md',
}}
>
<IconButton
// on top right of the screen:
sx={{
position: 'absolute',
top: 2,
right: 2,
color: 'black',
}}
onClick={() => {
Navigate('/login/settings')
}}
>
{' '}
<Settings />
</IconButton>
{/* <img
src='/src/assets/logo.svg'
alt='logo'
width='128px'
height='128px'
/> */}
{Capacitor.isNativePlatform() && (
<IconButton
// on top right of the screen:
sx={{
position: 'absolute',
top: 2,
right: 2,
color: 'black',
}}
onClick={() => {
Navigate('/login/settings')
}}
>
{' '}
<Settings />
</IconButton>
)}
<Logo />
<Typography level='h2'>

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

@ -435,6 +435,7 @@ const ChoreView = () => {
sx={{
p: 2,
borderRadius: 'lg',
mb: 1,
}}
>
<IconButton

60
src/views/Chores/ChoreCard.jsx
View file

@ -194,7 +194,7 @@ const ChoreCard = ({
setTimeoutId(null)
setSecondsLeftToCancel(null)
})
}, 3000)
}, 2000)
setTimeoutId(id)
}
@ -529,29 +529,45 @@ const ChoreCard = ({
)}
{chore.labelsV2?.map((l, index) => {
return (
<Chip
variant='solid'
key={`chorecard-${chore.id}-label-${l.id}`}
color='primary'
sx={{
position: 'relative',
ml: index === 0 ? 0 : 0.5,
top: 2,
zIndex: 1,
backgroundColor: `${l?.color} !important`,
color: getTextColorFromBackgroundColor(l?.color),
// apply background color for th clickable button:
<div
role='none'
tabIndex={0}
onClick={e => {
e.stopPropagation()
onChipClick({ label: l })
}}
// onClick={e => {
// e.stopPropagation()
// onChipClick({ label: l })
// }}
// startDecorator={getIconForLabel(label)}
onKeyDown={e => {
if (e.key === 'Enter' || e.key === ' ') {
e.stopPropagation()
onChipClick({ label: l })
}
}}
style={{ display: 'inline-block', cursor: 'pointer' }} // Make the wrapper clickable
key={`chorecard-${chore.id}-label-${l.id}`}
>
{l?.name}
</Chip>
<Chip
variant='solid'
color='primary'
sx={{
position: 'relative',
ml: index === 0 ? 0 : 0.5,
top: 2,
zIndex: 1,
backgroundColor: `${l?.color} !important`,
color: getTextColorFromBackgroundColor(l?.color),
// apply background color for th clickable button:
}}
// onClick={e => {
// e.stopPropagation()
// onChipClick({ label: l })
// }}
// startDecorator={getIconForLabel(label)}
>
{l?.name}
</Chip>
</div>
)
})}
</Box>

2
src/views/Chores/MyChores.jsx
View file

@ -426,7 +426,6 @@ const MyChores = () => {
<Search />
</IconButton>
)}
<Divider orientation='vertical' />
<IconButtonWithMenu
title='Group by'
@ -632,6 +631,7 @@ const MyChores = () => {
key={section.name + index}
sx={{
my: 0,
px: 0,
}}
expanded={Boolean(openChoreSections[index])}
>

2
src/views/Chores/Sidepanel.jsx
View file

@ -31,7 +31,7 @@ const Sidepanel = ({ chores }) => {
}
return (
<Sheet
variant='outlined'
variant='plain'
sx={{
p: 2,
// borderRadius: 'sm',

10
src/views/Things/ThingsView.jsx
View file

@ -64,15 +64,15 @@ const ThingCard = ({
return (
<Card
variant='outlined'
variant='plain'
sx={{
// display: 'flex',
// flexDirection: 'row', // Change to 'row'
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
p: 2,
boxShadow: 'sm',
borderRadius: 8,
mb: 1,
borderRadius: 20,
mb: 2,
}}
>
<Grid container>

7
src/views/components/AddTaskModal.jsx
View file

@ -21,6 +21,7 @@ import { CSSTransition } from 'react-transition-group'
import { UserContext } from '../../contexts/UserContext'
import useDebounce from '../../utils/Debounce'
import { CreateChore } from '../../utils/Fetcher'
import { isPlusAccount } from '../../utils/Helpers'
import { useLabels } from '../Labels/LabelQueries'
import LearnMoreButton from './LearnMore'
const VALID_DAYS = {
@ -429,16 +430,22 @@ const TaskInput = ({ autoFocus, onChoreUpdate }) => {
assignedTo: userProfile.id,
assignStrategy: 'random',
isRolling: false,
notification: false,
description: description || null,
labelsV2: [],
priority: priority || 0,
status: 0,
frequencyType: 'once',
}
if (frequency) {
chore.frequencyType = frequency.frequencyType
chore.frequencyMetadata = frequency.frequencyMetadata
chore.frequency = frequency.frequency
if (isPlusAccount()) {
chore.notification = true
chore.notificationMetadata = { dueDate: true }
}
}
CreateChore(chore).then(resp => {

2
src/views/components/CalendarView.jsx
View file

@ -124,7 +124,7 @@ const CalendarView = ({ chores }) => {
.map((chore, idx) => (
<Card
key={idx}
variant='soft'
variant='outlined'
onClick={() => {
Navigate('/chores/' + chore.id)
}}