PNSPS-frontend-MaterialUI/src/pages/User/ManagePage_OrgPublic/index.js

// material-ui
import { FiDataGrid } from "components/FiDataGrid";

import {
    Typography, Button, Grid, Stack, useMediaQuery
} from '@mui/material';

import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
import Checkbox from '@mui/material/Checkbox';

import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst";
import * as DateUtils from "utils/DateUtils";
import {FormattedMessage, useIntl} from "react-intl";
import {useTheme} from "@emotion/react";

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


// ==============================|| DASHBOARD - DEFAULT ||============================== //


const ManageOrgUserPage = () => {
    const [rows, setRows] = React.useState([]);
    const intl = useIntl();
    const theme = useTheme();
    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));

    const _sx = {
        padding: "4 2 4 2",
        boxShadow: 1,
        border: 1,
        borderColor: '#DDD',
        '& .MuiDataGrid-cell': {
            borderTop: 1,
            borderBottom: 1,
            borderColor: "#EEE"
        },
        '& .MuiDataGrid-footerContainer': {
            border: 1,
            borderColor: "#EEE"
        }
    }

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


    function loadData() {
        HttpUtils.get(
            {
                url: UrlUtils.GET_PUBLIC_ORG_USER_LIST,
                onSuccess: function (responseData) {
                    setRows(responseData);
                }
            }
        );
    }

    function onActiveClick(params) {
        HttpUtils.get({
            url: UrlUtils.GET_USER_UNLOCK + "/" + params.row.id,
            onSuccess: () => {
                loadData();
            }
        });
    }

    function getHeader(headerStr) {
        return <Typography variant="h5" >{headerStr}</Typography>;
    }

    function getStatus(params) {
        if (params.row.locked) {
            return (
                <>
                    {getStatusTag({ color: "#525150", text: intl.formatMessage({id: 'locked'}) })}
                    <Button variant="outlined" onClick={() => onActiveClick(params)}>
                        <FormattedMessage id="unlock" />
                    </Button>
                </>
            )
        } else if (!params.row.verifiedBy) {
            return getStatusTag({ color: "#fca503", text: intl.formatMessage({id: 'pendingFor'}) })
        } else if (params.row.status === "active") {
            return getStatusTag({ color: "#73AD21", text: intl.formatMessage({id: 'active'}) })
        }
        return getStatusTag({ text: params.row.status })
    }

    function getStatusTag({ color = "#000", textColor = "#FFF", text = "" }) {
        return (
            <div style={{ borderRadius: "25px", "background": color, "color": textColor, "padding": "5px 10px 5px 10px" }}><b>{text}</b></div>
        )
    }


    const setPrimaryUser = (params) => {
        HttpUtils.get(
            {
                url: (!params.row.primaryUser ? UrlUtils.GET_SET_PRIMARY_USER : UrlUtils.GET_SET_UN_PRIMARY_USER) + "/" + params.row.id,
                onSuccess: function () {
                    loadData();
                }
            }
        );
    }



    const columns = [
        {
            id: 'username',
            field: 'username',
            headerName: getHeader(intl.formatMessage({id: 'loginName'})),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,

        },
        {
            id: 'contactPerson',
            field: 'contactPerson',
            headerName: getHeader(intl.formatMessage({id: 'userName'})),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,

        },
        {
            id: 'contactTel',
            field: 'contactTel',
            headerName: getHeader(intl.formatMessage({id: 'userContactNumber'})),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            valueGetter: (params) => {
                let contactTel = JSON.parse(params.value)
                return contactTel?.countryCode + " " + contactTel?.phoneNumber;
            }
        },
        {
            id: 'emailBus',
            field: 'emailBus',
            headerName: getHeader(intl.formatMessage({id: 'userContactEmail'})),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
        },
        {
            id: 'lastLogin',
            field: 'lastLogin',
            headerName: getHeader(intl.formatMessage({id: 'lastLoginDate'})),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            valueGetter: (params) => {
                return DateUtils.datetimeStr(params.value);
            }
        },
        {
            id: 'lastApply',
            field: 'lastApply',
            headerName: getHeader(intl.formatMessage({id: 'lastSubmissionDate'})),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            valueGetter: () => {
                return "--";
            }
        },
        {
            field: 'actions',
            type: 'actions',
            headerName: getHeader(intl.formatMessage({id: 'status'})),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            cellClassName: 'actions',
            getActions: (params) => {
                return [getStatus(params)]
            },
        },
        {
            id: 'primaryUser',
            field: 'primaryUser',
            type: 'bool',
            headerName: getHeader(intl.formatMessage({id: 'primary'})),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            renderCell: (params) => {
                console.log(params);
                return (
                    <Checkbox
                        onClick={() => { setPrimaryUser(params) }}
                        checked={params.row.primaryUser}
                    />
                );
            },
        }
    ];

    return (
        <Grid container>
            <Grid item xs={12}>
                <div style={BackgroundHead}>
                    <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                        <Typography ml={15} color='#FFF' variant="h4">
                            <FormattedMessage id="companyOrUserRecord"/>
                        </Typography>
                    </Stack>
                </div>
            </Grid>

            <Grid item lg={12} sx={{ padding: 2 }}>
                <FiDataGrid
                    sx={_sx}
                    rows={rows}
                    columns={columns}
                    initialState={{
                        pagination: {
                            paginationModel: { page: 0, pageSize: 10 },
                        },
                    }}
                />
            </Grid>
        </Grid>
    );
};


export default ManageOrgUserPage;