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

// material-ui
import {
    Autocomplete,
    TextField,
    Typography
} from '@mui/material';
import MainCard from "components/MainCard";
import * as React from "react";
import { FiDataGrid } from "components/FiDataGrid";
import { GET_SYS_PARAMS, GET_SYS_PARAM_NAMES } from "utils/ApiPathConst";
import SafeHtml from 'components/SafeHtml';
import * as HttpUtils from "utils/HttpUtils";
import { useIntl } from "react-intl";

const LANG_SUFFIX = /\.(en|zh|cn)$/i;

function toSearchKey(name) {
    return String(name || "").replace(LANG_SUFFIX, "");
}

// ==============================|| DASHBOARD - DEFAULT ||============================== //
const Table = ({onRowClick, searchCriteria, refreshTrigger}) => {
    const intl = useIntl();
    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
    const [nameOptions, setNameOptions] = React.useState([]);
    const [selectedName, setSelectedName] = React.useState("");

    React.useEffect(() => {
        HttpUtils.get({
            url: GET_SYS_PARAM_NAMES,
            onSuccess: (responseData) => {
                const keys = (Array.isArray(responseData) ? responseData : [])
                    .map((item) => toSearchKey(item?.label ?? item))
                    .filter(Boolean);
                setNameOptions([...new Set(keys)].sort((a, b) => a.localeCompare(b)));
            }
        });
    }, []);

    React.useEffect(() => {
        const next = { ...searchCriteria };
        if (selectedName) {
            next.name = selectedName;
        } else {
            delete next.name;
        }
        set_searchCriteria(next);
    }, [searchCriteria, selectedName]);

    const columns = [
        {
            field: 'name',
            headerName: 'Name',
            width: 300,
        },
        {
            id: 'type',
            field: 'type',
            headerName: 'Type',
            width: 150,
            valueGetter: (params) => {
                return params.row.type
            }
        },
        {
            id: 'category',
            field: 'category',
            headerName: 'Category',
            width: 150,
        },
        {
            id: 'value',
            field: 'value',
            headerName: 'Value',
            flex: 1,
            minWidth: 400,
            renderCell:(params)=>{
                return <SafeHtml html={params.value} />
            }
        },
    ];
    return (
     
            <MainCard elevation={0}
                      border={false}
                      content={false}
                      height='100%'
            >
                <Typography variant="h5" sx={{mt: 3, ml: 3, mr: 3, borderBottom: "1px solid black"}}>
                    System Params
                </Typography>

                <Autocomplete
                    disablePortal
                    options={nameOptions}
                    value={selectedName || null}
                    onChange={(event, newValue) => {
                        setSelectedName(newValue || "");
                    }}
                    getOptionLabel={(option) => (option != null ? String(option) : "")}
                    isOptionEqualToValue={(option, value) => String(option) === String(value)}
                    sx={{
                        mt: 2,
                        ml: 3,
                        mr: 3,
                        maxWidth: 480,
                        '& .MuiInputBase-root': { alignItems: 'center' },
                        '& .MuiAutocomplete-endAdornment': { top: '50%', transform: 'translateY(-50%)' },
                        '& .MuiOutlinedInput-root': { height: 40 }
                    }}
                    renderInput={(params) => (
                        <TextField
                            {...params}
                            label={intl.formatMessage({ id: "systemSettingName" })}
                            InputLabelProps={{ shrink: true }}
                        />
                    )}
                    clearText={intl.formatMessage({ id: "muiClear" })}
                    closeText={intl.formatMessage({ id: "muiClose" })}
                    openText={intl.formatMessage({ id: "muiOpen" })}
                    noOptionsText={intl.formatMessage({ id: "muiNoOptions" })}
                />

                <div style={{ width: { xs: '92vw', sm: '96.5vw', md: "auto" }, }}>
                {/* <Box  width= '100%' sx={{ backgroundColor: "#fff", ml: 2 }} height='100%'> */}
                    <FiDataGrid
                        columns={columns}
                        customPageSize={10}
                        getRowHeight={() => 'auto'}
                        onRowClick={onRowClick}
                        doLoad={React.useMemo(() => ({
                            url:GET_SYS_PARAMS,
                            params:_searchCriteria
                        }), [_searchCriteria, refreshTrigger])}
                    />
                {/* </Box> */}
                </div>
            </MainCard>
    );
};

export default Table;