|
|
@@ -6,6 +6,7 @@ import { |
|
|
|
// InputAdornment, |
|
|
|
Typography, FormLabel, |
|
|
|
OutlinedInput, |
|
|
|
TextField, |
|
|
|
} from '@mui/material'; |
|
|
|
import MainCard from "components/MainCard"; |
|
|
|
import * as React from "react"; |
|
|
@@ -16,6 +17,7 @@ import * as React from "react"; |
|
|
|
const Form = ({ selectedItem, onSave }) => { |
|
|
|
const [data, setData] = React.useState({}); |
|
|
|
const [value, setValue] = React.useState(""); |
|
|
|
const [valueErr, setValueErr] = React.useState(""); |
|
|
|
|
|
|
|
React.useEffect(() => { |
|
|
|
//if user data from parent are not null |
|
|
@@ -44,7 +46,7 @@ const Form = ({ selectedItem, onSave }) => { |
|
|
|
<Grid container> |
|
|
|
<Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}> |
|
|
|
<Grid container alignItems={"center"}> |
|
|
|
<Grid item xs={2} |
|
|
|
<Grid item xs={2} |
|
|
|
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}> |
|
|
|
<FormLabel>Name:</FormLabel> |
|
|
|
</Grid> |
|
|
@@ -59,7 +61,7 @@ const Form = ({ selectedItem, onSave }) => { |
|
|
|
|
|
|
|
<Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}> |
|
|
|
<Grid container alignItems={"center"}> |
|
|
|
<Grid item xs={2} |
|
|
|
<Grid item xs={2} |
|
|
|
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}> |
|
|
|
<FormLabel >Type:</FormLabel> |
|
|
|
</Grid> |
|
|
@@ -88,27 +90,61 @@ const Form = ({ selectedItem, onSave }) => { |
|
|
|
|
|
|
|
<Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}> |
|
|
|
<Grid container alignItems={"center"}> |
|
|
|
<Grid item xs={2} |
|
|
|
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}> |
|
|
|
<Grid item xs={12} |
|
|
|
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'top' }}> |
|
|
|
<FormLabel>Value:</FormLabel> |
|
|
|
</Grid> |
|
|
|
|
|
|
|
<Grid item xs={8}> |
|
|
|
<Grid item xs={12} sx={{ ml: 3, mr: 3 }}> |
|
|
|
|
|
|
|
<FormControl variant="outlined" fullWidth required> |
|
|
|
<OutlinedInput |
|
|
|
fullWidth |
|
|
|
size="small" |
|
|
|
value={value} |
|
|
|
onChange={(event)=>{ |
|
|
|
setValue(event.target.value); |
|
|
|
}} |
|
|
|
/> |
|
|
|
{ |
|
|
|
data?.type != "HTML" ? |
|
|
|
<OutlinedInput |
|
|
|
fullWidth |
|
|
|
size="small" |
|
|
|
value={value} |
|
|
|
error={valueErr} |
|
|
|
onChange={(event) => { |
|
|
|
setValueErr(""); |
|
|
|
setValue(event.target.value); |
|
|
|
}} |
|
|
|
/> |
|
|
|
: |
|
|
|
<TextField |
|
|
|
variant="outlined" |
|
|
|
multiline |
|
|
|
rows={15} |
|
|
|
value={value} |
|
|
|
inputComponent='textarea' |
|
|
|
error={valueErr} |
|
|
|
onChange={(event) => { |
|
|
|
setValue(event.target.value); |
|
|
|
if (event.target.value.length >= 1000) { |
|
|
|
setValueErr("The number of characters cannot exceed 1000 words."); |
|
|
|
return; |
|
|
|
} |
|
|
|
setValueErr(""); |
|
|
|
|
|
|
|
}} |
|
|
|
InputProps={ |
|
|
|
{ |
|
|
|
style: { minHeight: '42.5px', maxHeight: '50vh', height: 'auto' }, |
|
|
|
} |
|
|
|
} |
|
|
|
/> |
|
|
|
|
|
|
|
} |
|
|
|
<span style={{ color: "red" }}>{valueErr}</span> |
|
|
|
</FormControl> |
|
|
|
</Grid> |
|
|
|
</Grid> |
|
|
|
</Grid> |
|
|
|
</Grid> |
|
|
|
<Button onClick={()=>{onSave({ name: data.name, value:value})}}>Save</Button> |
|
|
|
<Button onClick={() => { |
|
|
|
if (valueErr.length > 0) return; |
|
|
|
onSave({ name: data.name, value: value }) |
|
|
|
}}>Save</Button> |
|
|
|
</form> |
|
|
|
</> |
|
|
|
: |
|
|
|