| @@ -2,7 +2,12 @@ | |||
| import { FiDataGrid } from "components/FiDataGrid"; | |||
| import { | |||
| <<<<<<< HEAD | |||
| Typography, Button, Grid, Stack, useMediaQuery | |||
| ======= | |||
| Typography, Button, Grid, Stack, | |||
| Dialog, DialogTitle, DialogContent, DialogActions, | |||
| >>>>>>> 92d5fde (update primary user setting UI) | |||
| } from '@mui/material'; | |||
| import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | |||
| @@ -12,8 +17,12 @@ import * as React from "react"; | |||
| import * as HttpUtils from "utils/HttpUtils"; | |||
| import * as UrlUtils from "utils/ApiPathConst"; | |||
| import * as DateUtils from "utils/DateUtils"; | |||
| <<<<<<< HEAD | |||
| import {FormattedMessage, useIntl} from "react-intl"; | |||
| import {useTheme} from "@emotion/react"; | |||
| ======= | |||
| import { FormattedMessage, useIntl } from "react-intl"; | |||
| >>>>>>> 92d5fde (update primary user setting UI) | |||
| const BackgroundHead = { | |||
| backgroundImage: `url(${titleBackgroundImg})`, | |||
| @@ -32,8 +41,15 @@ const BackgroundHead = { | |||
| const ManageOrgUserPage = () => { | |||
| const [rows, setRows] = React.useState([]); | |||
| const intl = useIntl(); | |||
| <<<<<<< HEAD | |||
| 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({}); | |||
| >>>>>>> 92d5fde (update primary user setting UI) | |||
| const _sx = { | |||
| padding: "4 2 4 2", | |||
| @@ -52,6 +68,7 @@ const ManageOrgUserPage = () => { | |||
| } | |||
| React.useEffect(() => { | |||
| setUserId(JSON.parse(localStorage.getItem("userData")).id); | |||
| loadData(); | |||
| }, []); | |||
| @@ -105,10 +122,11 @@ const ManageOrgUserPage = () => { | |||
| } | |||
| const setPrimaryUser = (params) => { | |||
| const setPrimaryUser = () => { | |||
| setIsWarningPopUp(false) | |||
| HttpUtils.get( | |||
| { | |||
| url: (!params.row.primaryUser ? UrlUtils.GET_SET_PRIMARY_USER : UrlUtils.GET_SET_UN_PRIMARY_USER) + "/" + params.row.id, | |||
| url: (!selectUser.row.primaryUser ? UrlUtils.GET_SET_PRIMARY_USER : UrlUtils.GET_SET_UN_PRIMARY_USER) + "/" + selectUser.row.id, | |||
| onSuccess: function () { | |||
| loadData(); | |||
| } | |||
| @@ -176,9 +194,14 @@ const ManageOrgUserPage = () => { | |||
| { | |||
| field: 'actions', | |||
| type: 'actions', | |||
| <<<<<<< HEAD | |||
| headerName: getHeader(intl.formatMessage({id: 'status'})), | |||
| width: isMdOrLg ? 'auto' : 160, | |||
| flex: isMdOrLg ? 1 : undefined, | |||
| ======= | |||
| headerName: getHeader(intl.formatMessage({ id: 'status' })), | |||
| flex: 1, | |||
| >>>>>>> 92d5fde (update primary user setting UI) | |||
| cellClassName: 'actions', | |||
| getActions: (params) => { | |||
| return [getStatus(params)] | |||
| @@ -194,10 +217,20 @@ const ManageOrgUserPage = () => { | |||
| renderCell: (params) => { | |||
| console.log(params); | |||
| return ( | |||
| <Checkbox | |||
| onClick={() => { setPrimaryUser(params) }} | |||
| checked={params.row.primaryUser} | |||
| /> | |||
| <> | |||
| {params.row.id == userId ? | |||
| <></> : | |||
| <Checkbox | |||
| onClick={() => { | |||
| setSelectUser(params); | |||
| let str = params.row.primaryUser ? "Are you sure to mark " + params.row.username + " as un-primary user?" : "Are you sure to mark " + params.row.username + " as primary user?" | |||
| setWarningText(str); | |||
| setIsWarningPopUp(true); | |||
| }} | |||
| checked={params.row.primaryUser} | |||
| /> | |||
| } | |||
| </> | |||
| ); | |||
| }, | |||
| } | |||
| @@ -209,7 +242,7 @@ const ManageOrgUserPage = () => { | |||
| <div style={BackgroundHead}> | |||
| <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | |||
| <Typography ml={15} color='#FFF' variant="h4"> | |||
| <FormattedMessage id="companyOrUserRecord"/> | |||
| <FormattedMessage id="companyOrUserRecord" /> | |||
| </Typography> | |||
| </Stack> | |||
| </div> | |||
| @@ -227,6 +260,23 @@ const ManageOrgUserPage = () => { | |||
| }} | |||
| /> | |||
| </Grid> | |||
| <div> | |||
| <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)} > | |||
| <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> | |||
| ); | |||
| }; | |||