Update footer links and add EditThingStateModal component

This commit is contained in:
Mo Tarbin 2025-02-11 20:47:29 -05:00
parent bf9ffc97f2
commit e964985524
4 changed files with 111 additions and 27 deletions

View file

@ -108,15 +108,19 @@ function Footer() {
>
Roadmap
</Link>
<Link disabled={true} level='body2' sx={{ display: 'block' }}>
Documentation(soon)
<Link
href='https://docs.donetick.com/'
level='body2'
sx={{ display: 'block' }}
>
Documentation
</Link>
<Link
href='https://github.com/donetick/donetick/releases'
level='body2'
sx={{ display: 'block' }}
>
Changelog(soon)
Changelog
</Link>
<Link disabled={true} level='body2' sx={{ display: 'block' }}>
V{version}

View file

@ -0,0 +1,69 @@
import {
Box,
Button,
FormControl,
FormHelperText,
Input,
Modal,
ModalDialog,
Typography,
} from '@mui/joy'
import { useState } from 'react'
function EditThingStateModal({ isOpen, onClose, onSave, currentThing }) {
const [state, setState] = useState(currentThing?.state || '')
const [errors, setErrors] = useState({})
const isValid = () => {
const newErrors = {}
if (state.trim() === '') {
newErrors.state = 'State is required'
}
setErrors(newErrors)
return Object.keys(newErrors).length === 0
}
const handleSave = () => {
if (!isValid()) {
return
}
onSave({
name,
type: currentThing?.type,
id: currentThing?.id,
state: state || null,
})
onClose()
}
return (
<Modal open={isOpen} onClose={onClose}>
<ModalDialog>
<Typography level='h4'>Update state</Typography>
<FormControl>
<Typography>Value</Typography>
<Input
placeholder='Thing value'
value={state || ''}
onChange={e => setState(e.target.value)}
sx={{ minWidth: 300 }}
/>
<FormHelperText color='danger'>{errors.state}</FormHelperText>
</FormControl>
<Box display={'flex'} justifyContent={'space-around'} mt={1}>
<Button onClick={handleSave} fullWidth sx={{ mr: 1 }}>
{currentThing?.id ? 'Update' : 'Create'}
</Button>
<Button onClick={onClose} variant='outlined'>
{currentThing?.id ? 'Cancel' : 'Close'}
</Button>
</Box>
</ModalDialog>
</Modal>
)
}
export default EditThingStateModal

View file

@ -29,6 +29,7 @@ import {
} from '../../utils/Fetcher'
import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
import CreateThingModal from '../Modals/Inputs/CreateThingModal'
import EditThingStateModal from '../Modals/Inputs/EditThingState'
const ThingCard = ({
thing,
onEditClick,
@ -164,6 +165,7 @@ const ThingCard = ({
const ThingsView = () => {
const [things, setThings] = useState([])
const [isShowCreateThingModal, setIsShowCreateThingModal] = useState(false)
const [isShowEditThingStateModal, setIsShowEditStateModal] = useState(false)
const [createModalThing, setCreateModalThing] = useState(null)
const [confirmModelConfig, setConfirmModelConfig] = useState({})
@ -206,8 +208,8 @@ const ThingsView = () => {
setIsSnackbarOpen(true)
}
const handleEditClick = thing => {
setIsShowEditStateModal(true)
setCreateModalThing(thing)
setIsShowCreateThingModal(true)
}
const handleDeleteClick = thing => {
setConfirmModelConfig({
@ -240,10 +242,6 @@ const ThingsView = () => {
}
const handleStateChangeRequest = thing => {
if (thing?.type === 'text') {
setCreateModalThing(thing)
setIsShowCreateThingModal(true)
} else {
if (thing?.type === 'number') {
thing.state = Number(thing.state) + 1
} else if (thing?.type === 'boolean') {
@ -264,7 +262,7 @@ const ThingsView = () => {
setThings(currentThings)
})
})
}
setSnackbarMessage('Thing state updated successfully')
setIsSnackbarOpen(true)
}
@ -342,6 +340,18 @@ const ThingsView = () => {
currentThing={createModalThing}
/>
)}
{isShowEditThingStateModal && (
<EditThingStateModal
isOpen={isShowEditThingStateModal}
onClose={() => {
setIsShowEditStateModal(false)
setCreateModalThing(null)
}}
onSave={handleStateChangeRequest}
currentThing={createModalThing}
/>
)}
<ConfirmationModal config={confirmModelConfig} />
</Box>
<Snackbar

View file

@ -121,6 +121,7 @@ const NavBar = () => {
sx={{
fontWeight: 700,
fontSize: 20,
cursor: 'pointer',
}}
>
Done