Update footer links and add EditThingStateModal component
This commit is contained in:
parent
bf9ffc97f2
commit
e964985524
4 changed files with 111 additions and 27 deletions
|
@ -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}
|
||||
|
|
69
src/views/Modals/Inputs/EditThingState.jsx
Normal file
69
src/views/Modals/Inputs/EditThingState.jsx
Normal 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
|
|
@ -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
|
||||
|
|
|
@ -121,6 +121,7 @@ const NavBar = () => {
|
|||
sx={{
|
||||
fontWeight: 700,
|
||||
fontSize: 20,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
Done
|
||||
|
|
Loading…
Add table
Reference in a new issue