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