73 lines
1.7 KiB
JavaScript
73 lines
1.7 KiB
JavaScript
import {
|
|
Box,
|
|
Button,
|
|
FormControl,
|
|
FormHelperText,
|
|
Input,
|
|
Typography,
|
|
} from '@mui/joy'
|
|
import { useState } from 'react'
|
|
import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
|
|
|
|
function EditThingStateModal({ isOpen, onClose, onSave, currentThing }) {
|
|
const { ResponsiveModal } = useResponsiveModal()
|
|
|
|
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 (
|
|
<ResponsiveModal
|
|
open={isOpen}
|
|
onClose={onClose}
|
|
size='lg'
|
|
fullWidth={true}
|
|
title='Update state'
|
|
>
|
|
<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 size='lg' onClick={handleSave} fullWidth sx={{ mr: 1 }}>
|
|
{currentThing?.id ? 'Update' : 'Create'}
|
|
</Button>
|
|
<Button size='lg' onClick={onClose} variant='outlined'>
|
|
{currentThing?.id ? 'Cancel' : 'Close'}
|
|
</Button>
|
|
</Box>
|
|
</ResponsiveModal>
|
|
)
|
|
}
|
|
export default EditThingStateModal
|