PNSPS-frontend-MaterialUI/src/pages/User/SearchPage/UserTable.js

// material-ui
import {FiDataGrid} from "components/FiDataGrid";
import {useState, useEffect} from "react";
import {useNavigate} from "react-router-dom";
import { useTheme } from '@mui/material/styles';
import Checkbox from '@mui/material/Checkbox';
import * as HttpUtils from 'utils/HttpUtils';
import { GLD_USER_PATH, GET_USER_LOCK, GET_USER_UNLOCK } from "utils/ApiPathConst";
import { notifyLockSuccess, notifyUnlockSuccess , clickableLink} from 'utils/CommonFunction';
import { isGrantedAny } from "auth/utils";
import * as React from 'react';
// ==============================|| EVENT TABLE ||============================== //

export default function UserTable({searchCriteria, applyGridOnReady,applySearch}) {
    const [_searchCriteria, set_searchCriteria] = useState(searchCriteria);
    const [reloadTime, setReloadTime] = useState(new Date());
    const theme = useTheme();

    const navigate = useNavigate()

    useEffect(() => {
        set_searchCriteria(searchCriteria);
    }, [searchCriteria]);

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

    const handleLock = (params) => () => {
        if(!isGrantedAny(["MAINTAIN_USER", "MAINTAIN_GLD_USER"])) return;
        if (params.row.locked==true){
            doUnlock(params.id)
        }else{
            doLock(params.id)
        }
    }

    const doLock = (id) => {
        HttpUtils.post({
            url: GET_USER_LOCK+"/"+id,
            onSuccess: function(){
                //setChangeLocked(true)
                notifyLockSuccess()
                setReloadTime(new Date());
            }
        }); 
    };

    const doUnlock = (id) => {
        HttpUtils.post({
            url: GET_USER_UNLOCK+"/"+id,
            onSuccess: function(){
                //setChangeLocked(true)
                notifyUnlockSuccess()
                setReloadTime(new Date());
            }
        }); 
    };

    const columns = [
        // {
        //     field: 'actions',
        //     type: 'actions',
        //     headerName: 'Actions',
        //     width: 100,
        //     cellClassName: 'actions',
        //     getActions: ({id}) => {
        //         return [
        //             <GridActionsCellItem
        //                 key="OutSave"
        //                 icon={<EditIcon/>}
        //                 label="Edit"
        //                 className="textPrimary"
        //                 onClick={handleEditClick(id)}
        //                 color="primary"
        //             />]
        //     },
        // },
        {
            id: 'username',
            field: 'username',
            headerName: 'Username',
            flex: 1,
            renderCell: (params) => {
                return clickableLink('/user/'+ params.row.id, params.row.username);
            },
        },
        {
            id: 'enName',
            field: 'enName',
            headerName: 'Full Name',
            flex: 1,
        },
        {
            id: 'post',
            field: 'post',
            headerName: 'Post',
            flex: 1,
        },
        {
            id: 'emailAddress',
            field: 'emailAddress',
            headerName: 'Email',
            flex: 1,
        },

        {
            id: 'locked',
            field: 'locked',
            type: 'bool',
            headerName: 'Locked',
            flex: 1,
            renderCell: (params) => {
                return (
                    <Checkbox
                        theme={theme}
                        key="locked"
                        checked={params.row.locked}
                        color="primary"
                        size="small"
                        onClick={handleLock(params)}
                    />
                );
            },
        },
    ];

    function handleRowDoubleClick(params) {
        navigate('/user/'+ params.id);
    }

    return (
        <div style={{height: "fit-content", width: '100%'}}>
            <FiDataGrid
                columns={columns}
                customPageSize={10}
                onRowDoubleClick={handleRowDoubleClick}
                getRowHeight={() => 'auto'}
                applyGridOnReady={applyGridOnReady}
                applySearch={applySearch}
                // doLoad={{
                //     url: GLD_USER_PATH,
                //     params: _searchCriteria,
                // }}
                doLoad={React.useMemo(() => ({
                    url: GLD_USER_PATH,
                    params: _searchCriteria,
                }), [_searchCriteria])}
            />
        </div>
    );
}