update primary user setting UI

src/pages/User/ManagePage_OrgPublic/index.js

@@ -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>
     );
 };