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

// material-ui
import {
    FormControl,
    Button,
    Grid,
    // InputAdornment, 
    Typography, FormLabel,
    OutlinedInput,
} 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("");

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

                                        <Grid item xs={8}>
                                            <FormControl variant="outlined" fullWidth required>
                                                <OutlinedInput
                                                    fullWidth
                                                    size="small"
                                                    value={value}
                                                    onChange={(event)=>{
                                                        setValue(event.target.value);
                                                    }}
                                                />
                                            </FormControl>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Button onClick={()=>{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;