aboutsummaryrefslogtreecommitdiffstats
path: root/src/views/Modals/Inputs
diff options
context:
space:
mode:
authorLibravatar Mo Tarbin <mhed.t91@gmail.com>2024-07-01 22:12:19 -0400
committerLibravatar Mo Tarbin <mhed.t91@gmail.com>2024-07-01 22:12:19 -0400
commit5e54da8271c7fac5062f0aca9b10e7370fd4bae2 (patch)
tree376e53b60c9639d9db80cbcd809212253f29f0d0 /src/views/Modals/Inputs
parent6bc28be9e351662025a3eb0662f32902e64eb143 (diff)
downloaddonetick-frontend-5e54da8271c7fac5062f0aca9b10e7370fd4bae2.tar.gz
donetick-frontend-5e54da8271c7fac5062f0aca9b10e7370fd4bae2.tar.bz2
donetick-frontend-5e54da8271c7fac5062f0aca9b10e7370fd4bae2.zip
Update button re-enable timeout to 3 seconds, update thing history
Diffstat (limited to 'src/views/Modals/Inputs')
-rw-r--r--src/views/Modals/Inputs/CreateThingModal.jsx151
1 files changed, 97 insertions, 54 deletions
diff --git a/src/views/Modals/Inputs/CreateThingModal.jsx b/src/views/Modals/Inputs/CreateThingModal.jsx
index 59263ff..ffce51c 100644
--- a/src/views/Modals/Inputs/CreateThingModal.jsx
+++ b/src/views/Modals/Inputs/CreateThingModal.jsx
@@ -1,6 +1,8 @@
import {
Box,
Button,
+ FormControl,
+ FormHelperText,
FormLabel,
Input,
Modal,
@@ -14,8 +16,9 @@ import { useEffect, useState } from 'react'
function CreateThingModal({ isOpen, onClose, onSave, currentThing }) {
const [name, setName] = useState(currentThing?.name || '')
- const [type, setType] = useState(currentThing?.type || 'numeric')
+ const [type, setType] = useState(currentThing?.type || 'number')
const [state, setState] = useState(currentThing?.state || '')
+ const [errors, setErrors] = useState({})
useEffect(() => {
if (type === 'boolean') {
if (state !== 'true' && state !== 'false') {
@@ -27,7 +30,31 @@ function CreateThingModal({ isOpen, onClose, onSave, currentThing }) {
}
}
}, [type])
+
+ const isValid = () => {
+ const newErrors = {}
+ if (!name || name.trim() === '') {
+ newErrors.name = 'Name is required'
+ }
+
+ if (type === 'number' && isNaN(state)) {
+ newErrors.state = 'State must be a number'
+ }
+ if (type === 'boolean' && !['true', 'false'].includes(state)) {
+ newErrors.state = 'State must be true or false'
+ }
+ if ((type === 'text' && !state) || state.trim() === '') {
+ newErrors.state = 'State is required'
+ }
+
+ setErrors(newErrors)
+ return Object.keys(newErrors).length === 0
+ }
+
const handleSave = () => {
+ if (!isValid()) {
+ return
+ }
onSave({ name, type, id: currentThing?.id, state: state || null })
onClose()
}
@@ -36,64 +63,81 @@ function CreateThingModal({ isOpen, onClose, onSave, currentThing }) {
<Modal open={isOpen} onClose={onClose}>
<ModalDialog>
{/* <ModalClose /> */}
- <Typography variant='h4'>P;lease add info</Typography>
- <FormLabel>Name</FormLabel>
-
- <Textarea
- placeholder='Thing name'
- value={name}
- onChange={e => setName(e.target.value)}
- sx={{ minWidth: 300 }}
- />
- <FormLabel>Type</FormLabel>
- <Select value={type} sx={{ minWidth: 300 }}>
- {['text', 'number', 'boolean'].map(type => (
- <Option value={type} key={type} onClick={() => setType(type)}>
- {type.charAt(0).toUpperCase() + type.slice(1)}
- </Option>
- ))}
- </Select>
-
- {type === 'text' && (
- <>
- <FormLabel>Value</FormLabel>
- <Input
- placeholder='Thing value'
- value={state || ''}
- onChange={e => setState(e.target.value)}
+ <Typography level='h4'>
+ {currentThing?.id ? 'Edit' : 'Create'} Thing
+ </Typography>
+ <FormControl>
+ <FormLabel>
+ Name
+ <Textarea
+ placeholder='Thing name'
+ value={name}
+ onChange={e => setName(e.target.value)}
sx={{ minWidth: 300 }}
/>
- </>
+ </FormLabel>
+ <FormHelperText color='danger'>{errors.name}</FormHelperText>
+ </FormControl>
+ <FormControl>
+ <FormLabel>
+ Type
+ <Select value={type} sx={{ minWidth: 300 }}>
+ {['text', 'number', 'boolean'].map(type => (
+ <Option value={type} key={type} onClick={() => setType(type)}>
+ {type.charAt(0).toUpperCase() + type.slice(1)}
+ </Option>
+ ))}
+ </Select>
+ </FormLabel>
+ <FormHelperText color='danger'>{errors.type}</FormHelperText>
+ </FormControl>
+ {type === 'text' && (
+ <FormControl>
+ <FormLabel>
+ Value
+ <Input
+ placeholder='Thing value'
+ value={state || ''}
+ onChange={e => setState(e.target.value)}
+ sx={{ minWidth: 300 }}
+ />
+ </FormLabel>
+ <FormHelperText color='danger'>{errors.state}</FormHelperText>
+ </FormControl>
)}
{type === 'number' && (
- <>
- <FormLabel>Value</FormLabel>
- <Input
- placeholder='Thing value'
- type='number'
- value={state || ''}
- onChange={e => {
- setState(e.target.value)
- }}
- sx={{ minWidth: 300 }}
- />
- </>
+ <FormControl>
+ <FormLabel>
+ Value
+ <Input
+ placeholder='Thing value'
+ type='number'
+ value={state || ''}
+ onChange={e => {
+ setState(e.target.value)
+ }}
+ sx={{ minWidth: 300 }}
+ />
+ </FormLabel>
+ </FormControl>
)}
{type === 'boolean' && (
- <>
- <FormLabel>Value</FormLabel>
- <Select sx={{ minWidth: 300 }} value={state}>
- {['true', 'false'].map(value => (
- <Option
- value={value}
- key={value}
- onClick={() => setState(value)}
- >
- {value.charAt(0).toUpperCase() + value.slice(1)}
- </Option>
- ))}
- </Select>
- </>
+ <FormControl>
+ <FormLabel>
+ Value
+ <Select sx={{ minWidth: 300 }} value={state}>
+ {['true', 'false'].map(value => (
+ <Option
+ value={value}
+ key={value}
+ onClick={() => setState(value)}
+ >
+ {value.charAt(0).toUpperCase() + value.slice(1)}
+ </Option>
+ ))}
+ </Select>
+ </FormLabel>
+ </FormControl>
)}
<Box display={'flex'} justifyContent={'space-around'} mt={1}>
@@ -108,5 +152,4 @@ function CreateThingModal({ isOpen, onClose, onSave, currentThing }) {
</Modal>
)
}
-
export default CreateThingModal