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

import {
    Grid,
    Typography,
    Stack,
    // Box,
} from '@mui/material';
import * as React from "react";

import { GET_SYS_PARAMS } from "utils/ApiPathConst";

import Loadable from 'components/Loadable';
import MainCard from "components/MainCard";
const Table = Loadable(React.lazy(() => import('./Table')));
const Form = Loadable(React.lazy(() => import('./Form')));

import { notifyActionSuccess } from 'utils/CommonFunction';

import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

import * as HttpUtils from "utils/HttpUtils";

const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
}
// ==============================|| DASHBOARD - DEFAULT ||============================== //


const SystemSetting = () => {
    const [searchCriteria, setSearchCriteria] = React.useState({});
    const [selectedItem, setSelectedItem] = React.useState({});
    const [reloadTime, setReloadTime] = React.useState(new Date())

    React.useEffect(()=>{
        setSearchCriteria({})
    }, []);

    const onRowClick = (param) => {
        setSelectedItem(param.row);
    }

    React.useEffect(() => {
        searchCriteria.reloadTime = reloadTime;
        setSearchCriteria(searchCriteria);
    }, [reloadTime]);

    const onSave = (param) => {
        HttpUtils.post({
            url: GET_SYS_PARAMS + "/update",
            params: {
                name: param.name,
                value: param.value
            },
            onSuccess: () => {
                notifyActionSuccess();
                setReloadTime(new Date());
            }
        });
    }

    return (

        <Grid container sx={{ minHeight: '87vh', backgroundColor: 'backgroundColor.default' }} direction="column"
            justifyContent="flex-start">
            <>
                <Grid item xs={12}>
                    <div style={BackgroundHead}>
                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                            <Typography ml={15} color='#FFF' variant="h4">System Setting</Typography>
                        </Stack>
                    </div>
                </Grid>

                {/*col 1*/}
                <Grid item xs={12} >
                    <Grid container direction="row" sx={{ p: 2 }} spacing={1} >
                        <Grid item xs={12} sm={8} md={8} lg={8} >
                            <Grid container>
                                <Grid item xs={12} md={12}>
                                    <MainCard elevation={0}
                                        border={false}
                                        content={false}
                                    >
                                        <Table
                                            searchCriteria={searchCriteria}
                                            onRowClick={onRowClick}
                                        />
                                    </MainCard>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item xs={12} sm={4} md={4} lg={4}>
                            <Grid container>
                                <Grid item xs={12} md={12}>
                                    <MainCard elevation={0}
                                        border={false}
                                        content={false}
                                    >
                                        <Form
                                            selectedItem={selectedItem}
                                            onSave={onSave}
                                        />
                                    </MainCard>
                                </Grid>
                            </Grid>    
                        </Grid>
                    </Grid>
                </Grid>
                {/*col 2*/}
            </>
        </Grid>
    );
};

export default SystemSetting;