Kaynağa Gözat

user details UI

master
Anna Ho 1 yıl önce
ebeveyn
işleme
c0c57aeb4f
2 değiştirilmiş dosya ile 102 ekleme ve 100 silme
  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 Dosyayı Görüntüle

@@ -6,22 +6,20 @@ import {
Stack,
Box,
} from '@mui/material';
import { useEffect, useState } from "react";
import * as React from "react";
import { useEffect, useState, lazy } from "react";
import axios from "axios";
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 {isGrantedAny} from "auth/utils";
import Loadable from 'components/Loadable';
import { lazy } from 'react';
const UserInformationCard = Loadable(lazy(() => import('./UserInformationCard')));
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
const UserGroupCard = Loadable(lazy(() => import('./UserGroupCard')));
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 {
GeneralConfirmWindow,
@@ -47,7 +45,7 @@ const BackgroundHead = {
const UserMaintainPage = () => {
const params = useParams();
const navigate = useNavigate();
const [userData, setUserData] = React.useState({});
const [userData, setUserData] = useState({});
const [onReady, setOnReady] = useState(false);
const [isCollectData, setIsCollectData] = useState(false);
const [editedCustomerData, setEditedCustomerData] = useState({});
@@ -55,9 +53,8 @@ const UserMaintainPage = () => {
const [userAuthData, setUserAuthData] = useState([]);
const [userConfirm, setUserConfirm] = 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) {
setEditedCustomerData(userData);
@@ -131,17 +128,17 @@ const UserMaintainPage = () => {
setOnReady(false);
setEditMode(false);
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(() => {
@@ -177,7 +174,7 @@ const UserMaintainPage = () => {
).then((response) => {
if (response.status === 204) {
notifySaveSuccess();
navigate('/userSearchview');
location.reload();
}
})
.catch(error => {
@@ -185,7 +182,7 @@ const UserMaintainPage = () => {
return false;
});
} else {
if(editedCustomerData.pwErr) return;
if (editedCustomerData.pwErr) return;
axios.post(POST_ADMIN_USER_REGISTER,
{
"username": editedCustomerData.username,
@@ -218,8 +215,8 @@ const UserMaintainPage = () => {
const getLoginLogList = () => {
HttpUtils.get({
url: `${GET_LOGIN_LOG_LIST}`,
params:{
userId:params.id
params: {
userId: params.id
},
onSuccess: function (response) {
// console.log(response)
@@ -255,69 +252,76 @@ const UserMaintainPage = () => {
</Grid>
{/*col 1*/}
{/*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 container>
<Grid item xs={12} md={12} lg={12}>
@@ -333,7 +337,7 @@ const UserMaintainPage = () => {
</Grid>

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


+ 6
- 8
src/pages/pnspsUserGroupDetailPage/index.js Dosyayı Görüntüle

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

import Loadable from 'components/Loadable';
import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
const GroupAuthCard = Loadable(lazy(() => import('./GroupAuthCard')));
const UserGroupInfoCard = Loadable(lazy(() => import('./UserGroupInfoCard')));
@@ -52,10 +50,10 @@ const UserMaintainPage = () => {
const [userConfirm, setUserConfirm] = useState(false);
const [groupMember, setGroupMember] = useState([]);
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 = () => {
setIsWindowOpen(false);
};
@@ -101,7 +99,7 @@ const UserMaintainPage = () => {

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


Yükleniyor…
İptal
Kaydet