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

// material-ui
import { FiDataGrid } from "components/FiDataGrid";
import {
    Typography, Button, Grid, Stack, useMediaQuery,
    Dialog, DialogTitle, DialogContent, DialogActions,
} 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 [userId, setUserId] = React.useState("");
    const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
    const [warningText, setWarningText] = React.useState("");
    const [selectUser, setSelectUser] = React.useState({});

    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(() => {
        setUserId(JSON.parse(localStorage.getItem("userData")).id);
        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 = () => {
        setIsWarningPopUp(false)
        HttpUtils.get(
            {
                url: (!selectUser.row.primaryUser ? UrlUtils.GET_SET_PRIMARY_USER : UrlUtils.GET_SET_UN_PRIMARY_USER) + "/" + selectUser.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 (
                    <>
                        {params.row.id == userId ?
                            <></> :
                            <Checkbox
                                onClick={() => {
                                    setSelectUser(params);
                                    let str = params.row.primaryUser ?
                                        intl.formatMessage({ id: 'MSG.revokePrimay' },
                                            {
                                                username: params.row.username
                                            })
                                        :
                                        intl.formatMessage({ id: 'MSG.setPrimay' },
                                            {
                                                username: params.row.username
                                            });
                                    setWarningText(str);
                                    setIsWarningPopUp(true);
                                }}
                                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" sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}>
                            <FormattedMessage id="companyOrUserRecord" />
                        </Typography>
                    </Stack>
                </div>
            </Grid>

            <Grid item lg={12} sx={{ padding: 2 }}>
                <FiDataGrid
                    sx={_sx}
                    rows={rows}
                    columns={columns}
                    customPageSize={10}
                />
            </Grid>
            <div>
                <Dialog
                    open={isWarningPopUp}
                    onClose={() => setIsWarningPopUp(false)}
                    PaperProps={{
                        sx: {
                            minWidth: '40vw',
                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
                        }
                    }}
                >
                    <DialogTitle>
                        <FormattedMessage id="confirm" />
                    </DialogTitle>
                    <DialogContent style={{ display: 'flex', }}>
                        <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={() => {
                            setSelectUser({})
                            setIsWarningPopUp(false)
                        }}><FormattedMessage id="cancel" /></Button>
                        <Button onClick={() => setPrimaryUser()}><FormattedMessage id="confirm" /></Button>
                    </DialogActions>
                </Dialog>
            </div>
        </Grid>
    );
};


export default ManageOrgUserPage;