alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

user details UI

master
Anna Ho 1 year ago
parent
ef4b3b2e2b
commit
c0c57aeb4f
2 changed files with 102 additions and 100 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +96
    -92
      src/pages/User/DetailPage/index.js
  2. +6
    -8
      src/pages/pnspsUserGroupDetailPage/index.js

+ 96
- 92
src/pages/User/DetailPage/index.js View File

@@ -6,22 +6,20 @@ import {
Stack, Stack,
Box, Box,
} from '@mui/material'; } from '@mui/material';
import { useEffect, useState } from "react";
import * as React from "react";
import { useEffect, useState, lazy } from "react";
import axios from "axios"; import axios from "axios";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { GLD_USER_PATH, DELETE_USER, POST_ADMIN_USER_REGISTER,GET_LOGIN_LOG_LIST } from "utils/ApiPathConst";
import { GLD_USER_PATH, DELETE_USER, POST_ADMIN_USER_REGISTER, GET_LOGIN_LOG_LIST } from "utils/ApiPathConst";
import * as HttpUtils from "utils/HttpUtils"; import * as HttpUtils from "utils/HttpUtils";
import {isGrantedAny} from "auth/utils";
import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
import { lazy } from 'react';
const UserInformationCard = Loadable(lazy(() => import('./UserInformationCard'))); const UserInformationCard = Loadable(lazy(() => import('./UserInformationCard')));
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
const UserGroupCard = Loadable(lazy(() => import('./UserGroupCard'))); const UserGroupCard = Loadable(lazy(() => import('./UserGroupCard')));
const UserAuthorityCard = Loadable(lazy(() => import('./UserAuthorityCard'))); const UserAuthorityCard = Loadable(lazy(() => import('./UserAuthorityCard')));
const LoginGrid = Loadable(React.lazy(() => import('./LoginGrid')));
import {ThemeProvider} from "@emotion/react";
import {PNSPS_BUTTON_THEME} from "themes/buttonConst";
const LoginGrid = Loadable(lazy(() => import('./LoginGrid')));
import { ThemeProvider } from "@emotion/react";
import { PNSPS_BUTTON_THEME } from "themes/buttonConst";


import { import {
GeneralConfirmWindow, GeneralConfirmWindow,
@@ -47,7 +45,7 @@ const BackgroundHead = {
const UserMaintainPage = () => { const UserMaintainPage = () => {
const params = useParams(); const params = useParams();
const navigate = useNavigate(); const navigate = useNavigate();
const [userData, setUserData] = React.useState({});
const [userData, setUserData] = useState({});
const [onReady, setOnReady] = useState(false); const [onReady, setOnReady] = useState(false);
const [isCollectData, setIsCollectData] = useState(false); const [isCollectData, setIsCollectData] = useState(false);
const [editedCustomerData, setEditedCustomerData] = useState({}); const [editedCustomerData, setEditedCustomerData] = useState({});
@@ -55,9 +53,8 @@ const UserMaintainPage = () => {
const [userAuthData, setUserAuthData] = useState([]); const [userAuthData, setUserAuthData] = useState([]);
const [userConfirm, setUserConfirm] = useState(false); const [userConfirm, setUserConfirm] = useState(false);
const [isNewRecord, setIsNewRecord] = useState(false); const [isNewRecord, setIsNewRecord] = useState(false);
const [refUserData, setRefUserData] = React.useState({});
// const [loginLogData, setLoginLogData] = React.useState([])
const [editMode, setEditMode] = React.useState(false);
const [refUserData, setRefUserData] = useState({});
const [editMode, setEditMode] = useState(false);


function updateUserObject(userData) { function updateUserObject(userData) {
setEditedCustomerData(userData); setEditedCustomerData(userData);
@@ -131,17 +128,17 @@ const UserMaintainPage = () => {
setOnReady(false); setOnReady(false);
setEditMode(false); setEditMode(false);
axios.get(`${GLD_USER_PATH}/${params.id}`) axios.get(`${GLD_USER_PATH}/${params.id}`)
.then((response) => {
if (response.status === 200) {
setRefUserData(response.data);
setUserData(response.data);
getLoginLogList()
}
})
.catch(error => {
console.log(error);
return false;
});
.then((response) => {
if (response.status === 200) {
setRefUserData(response.data);
setUserData(response.data);
getLoginLogList()
}
})
.catch(error => {
console.log(error);
return false;
});
} }


useEffect(() => { useEffect(() => {
@@ -177,7 +174,7 @@ const UserMaintainPage = () => {
).then((response) => { ).then((response) => {
if (response.status === 204) { if (response.status === 204) {
notifySaveSuccess(); notifySaveSuccess();
navigate('/userSearchview');
location.reload();
} }
}) })
.catch(error => { .catch(error => {
@@ -185,7 +182,7 @@ const UserMaintainPage = () => {
return false; return false;
}); });
} else { } else {
if(editedCustomerData.pwErr) return;
if (editedCustomerData.pwErr) return;
axios.post(POST_ADMIN_USER_REGISTER, axios.post(POST_ADMIN_USER_REGISTER,
{ {
"username": editedCustomerData.username, "username": editedCustomerData.username,
@@ -218,8 +215,8 @@ const UserMaintainPage = () => {
const getLoginLogList = () => { const getLoginLogList = () => {
HttpUtils.get({ HttpUtils.get({
url: `${GET_LOGIN_LOG_LIST}`, url: `${GET_LOGIN_LOG_LIST}`,
params:{
userId:params.id
params: {
userId: params.id
}, },
onSuccess: function (response) { onSuccess: function (response) {
// console.log(response) // console.log(response)
@@ -255,69 +252,76 @@ const UserMaintainPage = () => {
</Grid> </Grid>
{/*col 1*/} {/*col 1*/}
{/*bottom button*/} {/*bottom button*/}
<Grid item s={12} md={12} lg={12} sx={{ mt:2, mb:2 }} alignItems={"start"} justifyContent="center">
<Grid container maxWidth justifyContent="flex-start">
{editMode ?
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
variant="contained"
onClick={loadData}
color="cancel"
>
Reset & Back
</Button>
</Grid>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={submitData}
>
Save
</Button>
</Grid>
</ThemeProvider>:
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item sx={{ml: 3,mr: 3 }}>
<Button
variant="contained"
onClick={onEditClick}
>
Edit
</Button>
</Grid>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
disabled={isNewRecord}
onClick={handleDeleteClick}
>
Delete User
</Button>
<GeneralConfirmWindow
isWindowOpen={isWindowOpen}
title={"Attention"}
content={`Confirm to delete User "${userData.data.username}" ?`}
onNormalClose={handleClose}
onConfirmClose={deleteData}
/>
</Grid>
</ThemeProvider>
}
</Grid>
</Grid>

{
isGrantedAny(["MAINTAIN_USER"]) ?
<Grid item s={12} md={12} lg={12} sx={{ mt: 2, mb: 2 }} alignItems={"start"} justifyContent="center">
<Grid container maxWidth justifyContent="flex-start">
{editMode ?
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
variant="contained"
onClick={loadData}
color="cancel"
>
Reset & Back
</Button>
</Grid>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={submitData}
>
Save
</Button>
</Grid>
</ThemeProvider> :
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
variant="contained"
onClick={onEditClick}
>
Edit
</Button>
</Grid>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
disabled={isNewRecord}
onClick={handleDeleteClick}
color='error'
>
Delete User
</Button>
<GeneralConfirmWindow
isWindowOpen={isWindowOpen}
title={"Attention"}
content={`Confirm to delete User "${userData.data.username}" ?`}
onNormalClose={handleClose}
onConfirmClose={deleteData}
/>
</Grid>
</ThemeProvider>

}
</Grid>
</Grid>
: <></>
}

<Grid item xs={12} md={5} lg={5}> <Grid item xs={12} md={5} lg={5}>
<Grid container> <Grid container>
<Grid item xs={12} md={12} lg={12}> <Grid item xs={12} md={12} lg={12}>
@@ -333,7 +337,7 @@ const UserMaintainPage = () => {
</Grid> </Grid>


<Grid item xs={12} md={12} lg={12} sx={{ mt: 0.5 }}> <Grid item xs={12} md={12} lg={12} sx={{ mt: 0.5 }}>
<Box xs={12} ml={4} mt={2} sx={{borderRadius: '10px', backgroundColor: '#fff' }}>
<Box xs={12} ml={4} mt={2} sx={{ borderRadius: '10px', backgroundColor: '#fff' }}>
<UserGroupCard <UserGroupCard
updateUserGroupList={updateUserGroupList} updateUserGroupList={updateUserGroupList}
userData={userData} userData={userData}
@@ -360,7 +364,7 @@ const UserMaintainPage = () => {
<Grid item xs={12} md={12} lg={12}> <Grid item xs={12} md={12} lg={12}>
<Box xs={12} ml={2} mt={2} mr={3} sx={{ borderRadius: '10px', backgroundColor: '#fff' }}> <Box xs={12} ml={2} mt={2} mr={3} sx={{ borderRadius: '10px', backgroundColor: '#fff' }}>
<LoginGrid <LoginGrid
userId = {params.id}
userId={params.id}
/> />
</Box> </Box>
</Grid> </Grid>


+ 6
- 8
src/pages/pnspsUserGroupDetailPage/index.js View File

@@ -3,10 +3,9 @@ import {
Button, Button,
Grid, Typography, Stack, Box Grid, Typography, Stack, Box
} from '@mui/material'; } from '@mui/material';
import { useEffect, useState } from "react";
import * as React from "react";
import { useEffect, useState, lazy } from "react";
import axios from "axios"; import axios from "axios";
import { apiPath } from "../../auth/utils";
import { apiPath } from "auth/utils";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { import {
GeneralConfirmWindow, GeneralConfirmWindow,
@@ -19,7 +18,6 @@ import {
import { POST_AND_UPDATE_USER_GROUP, GET_GROUP_LIST_PATH } from "../../utils/ApiPathConst"; import { POST_AND_UPDATE_USER_GROUP, GET_GROUP_LIST_PATH } from "../../utils/ApiPathConst";


import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
const GroupAuthCard = Loadable(lazy(() => import('./GroupAuthCard'))); const GroupAuthCard = Loadable(lazy(() => import('./GroupAuthCard')));
const UserGroupInfoCard = Loadable(lazy(() => import('./UserGroupInfoCard'))); const UserGroupInfoCard = Loadable(lazy(() => import('./UserGroupInfoCard')));
@@ -52,10 +50,10 @@ const UserMaintainPage = () => {
const [userConfirm, setUserConfirm] = useState(false); const [userConfirm, setUserConfirm] = useState(false);
const [groupMember, setGroupMember] = useState([]); const [groupMember, setGroupMember] = useState([]);
const [isNewRecord, setIsNewRecord] = useState(false); const [isNewRecord, setIsNewRecord] = useState(false);
const [deletedUserList, setDeletedUserList] = React.useState([]);
const [deletedAuthList, setDeletedAuthList] = React.useState([]);
const [deletedUserList, setDeletedUserList] = useState([]);
const [deletedAuthList, setDeletedAuthList] = useState([]);


const [isWindowOpen, setIsWindowOpen] = React.useState(false);
const [isWindowOpen, setIsWindowOpen] = useState(false);
const handleClose = () => { const handleClose = () => {
setIsWindowOpen(false); setIsWindowOpen(false);
}; };
@@ -101,7 +99,7 @@ const UserMaintainPage = () => {


useEffect(() => { useEffect(() => {
if (params.id > 0) { if (params.id > 0) {
axios.get(`${apiPath}${GET_GROUP_LIST_PATH}/${params.id}`)
axios.get(`${GET_GROUP_LIST_PATH}/${params.id}`)
.then((response) => { .then((response) => {
if (response.status === 200) { if (response.status === 200) {
setUserGroupData(response.data); setUserGroupData(response.data);


Write Preview
Loading…
Cancel
Save