PNSPS-frontend-MaterialUI/src/pages/Setting/SystemSetting/Form.js

// material-ui
import {
    FormControl,
    Button,
    Grid,
    // InputAdornment, 
    Typography, FormLabel,
    OutlinedInput,
    TextField,
} from '@mui/material';
import MainCard from "components/MainCard";
import * as React from "react";



// ==============================|| DASHBOARD - DEFAULT ||============================== //
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
        if (selectedItem !== undefined && Object.keys(selectedItem).length > 0) {
            setData(selectedItem);
            setValue(selectedItem.value)
        }
    }, [selectedItem]);

    return (

        <MainCard elevation={0}
            border={false}
            content={false}
        >


            {
                data?.name ?
                    <>
                        <Typography variant="h5" sx={{ mt: 3, ml: 3, mr: 3, borderBottom: "1px solid black" }}>
                            Update
                        </Typography>

                        <form>
                            <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}
                                            sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
                                            <FormLabel>Name:</FormLabel>
                                        </Grid>

                                        <Grid item xs={8} >
                                            <Typography>
                                                {data?.name}
                                            </Typography>
                                        </Grid>
                                    </Grid>
                                </Grid>

                                <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' }}>
                                            <FormLabel >Type:</FormLabel>
                                        </Grid>
                                        <Grid item xs={8}>
                                            <Typography>
                                                {data?.type}
                                            </Typography>
                                        </Grid>
                                    </Grid>
                                </Grid>

                                <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' }}>
                                            <FormLabel>Category:</FormLabel>
                                        </Grid>

                                        <Grid item xs={8}>
                                            <Typography>
                                                {data?.category}
                                            </Typography>
                                        </Grid>
                                    </Grid>
                                </Grid>

                                <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12}
                                            sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'top' }}>
                                            <FormLabel>Value:</FormLabel>
                                        </Grid>

                                        <Grid item xs={12} sx={{ ml: 3, mr: 3 }}>

                                            <FormControl variant="outlined" fullWidth required>
                                                {
                                                    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={() => {
                                if (valueErr.length > 0) return;
                                onSave({ name: data.name, value: value })
                            }}>Save</Button>
                        </form>
                    </>
                    :
                    <Typography variant="h5" sx={{ mt: 3, ml: 3, mr: 3, borderBottom: "1px solid black" }}>
                        Please select system params.
                    </Typography>

            }

        </MainCard>
    );
};

export default Form;