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

update new gld use by admin

master
Alex Cheung 1 year ago
parent
669736b7de
commit
dcdbc542ee
6 changed files with 153 additions and 108 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      src/pages/pnspsUserDetailPage/UserGroupCard.js
  2. +2
    -3
      src/pages/pnspsUserDetailPage/UserGroupTable.js
  3. +39
    -34
      src/pages/pnspsUserDetailPage/UserInformationCard.js
  4. +52
    -23
      src/pages/pnspsUserDetailPage/index.js
  5. +44
    -37
      src/pages/pnspsUserSearchPage/UserSearchForm.js
  6. +14
    -9
      src/pages/pnspsUserSearchPage/index.js

+ 2
- 2
src/pages/pnspsUserDetailPage/UserGroupCard.js View File

@@ -15,7 +15,7 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //




const UserGroupCard = ({isCollectData, updateUserGroupList,userData}) => {
const UserGroupCard = ({isCollectData, updateUserGroupList,userData,isNewRecord}) => {
const [currentUserData, setCurrentUserData] = React.useState({}); const [currentUserData, setCurrentUserData] = React.useState({});
const [onReady, setOnReady] = useState(false); const [onReady, setOnReady] = useState(false);
const [selectedRow, setSelectedRow] = useState([]); const [selectedRow, setSelectedRow] = useState([]);
@@ -30,7 +30,6 @@ const UserGroupCard = ({isCollectData, updateUserGroupList,userData}) => {


useEffect(() => { useEffect(() => {
//if state data are ready and assign to different field //if state data are ready and assign to different field
// if (Object.keys(userData).length > 0 &&currentUserData !== undefined) {
if (Object.keys(userData).length > 0 &&currentUserData !== undefined) { if (Object.keys(userData).length > 0 &&currentUserData !== undefined) {
setOnReady(true); setOnReady(true);
} }
@@ -56,6 +55,7 @@ const UserGroupCard = ({isCollectData, updateUserGroupList,userData}) => {
<UserGroupTable <UserGroupTable
userGroup={userData.groupIds} userGroup={userData.groupIds}
setSelectedRow={setSelectedRow} setSelectedRow={setSelectedRow}
isNewRecord={isNewRecord}
/> />
</MainCard> </MainCard>
); );


+ 2
- 3
src/pages/pnspsUserDetailPage/UserGroupTable.js View File

@@ -13,7 +13,7 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo


// ==============================|| EVENT TABLE ||============================== // // ==============================|| EVENT TABLE ||============================== //


export default function UserGroupTable({setSelectedRow, userGroup}) {
export default function UserGroupTable({setSelectedRow, userGroup,isNewRecord}) {
const [groupData, setGroupData] = useState([]); const [groupData, setGroupData] = useState([]);
const [onReady, setOnReady] = useState(false); const [onReady, setOnReady] = useState(false);
const [currentSelectedRow, setCurrentSelectedRow] = useState(userGroup); const [currentSelectedRow, setCurrentSelectedRow] = useState(userGroup);
@@ -33,8 +33,7 @@ export default function UserGroupTable({setSelectedRow, userGroup}) {


useEffect(() => { useEffect(() => {
//if state data are ready and assign to different field //if state data are ready and assign to different field
console.log(groupData)
if (groupData!== undefined) {
if (groupData.length > 0||isNewRecord) {
setOnReady(true); setOnReady(true);
} }
}, [groupData]); }, [groupData]);


+ 39
- 34
src/pages/pnspsUserDetailPage/UserInformationCard.js View File

@@ -1,7 +1,10 @@
// material-ui // material-ui
import { import {
FormControl, IconButton,
Grid, InputAdornment, Typography, FormLabel,
FormControl,
IconButton,
Grid,
InputAdornment,
Typography, FormLabel,
OutlinedInput, OutlinedInput,
} from '@mui/material'; } from '@mui/material';
import MainCard from "../../components/MainCard"; import MainCard from "../../components/MainCard";
@@ -96,40 +99,42 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
{
isNewRecord?
<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
<FormLabel required>Password:</FormLabel>
</Grid>


<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Password:
<Grid item xs={7} s={7} md={7} lg={6}>
<FormControl variant="outlined" fullWidth required>
<OutlinedInput
fullWidth
size="small"
{...register("password")}
id='password'
type={showPassword ? 'text' : 'password'}
disabled = {!isNewRecord}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
/>
</FormControl>
</Grid>
</Grid> </Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<FormControl variant="outlined" fullWidth required>
<OutlinedInput
fullWidth
size="small"
{...register("password")}
id='password'
type={showPassword ? 'text' : 'password'}
disabled
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
/>
</FormControl>
</Grid>
</Grid>
</Grid>
</Grid>: null
}


<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}> <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>


+ 52
- 23
src/pages/pnspsUserDetailPage/index.js View File

@@ -9,7 +9,7 @@ import {useEffect, useState} from "react";
import * as React from "react"; import * as React 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} from "../../utils/ApiPathConst";
import {GLD_USER_PATH,DELETE_USER,POST_ADMIN_USER_REGISTER} from "../../utils/ApiPathConst";


import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
import { lazy } from 'react'; import { lazy } from 'react';
@@ -130,29 +130,58 @@ const UserMaintainPage = () => {
if(userConfirm && onReady){ if(userConfirm && onReady){
const deletedUserAuth = getDeletedRecordWithRefList(refUserData.authIds,userAuthData); const deletedUserAuth = getDeletedRecordWithRefList(refUserData.authIds,userAuthData);
const deletedUserGroup = getDeletedRecordWithRefList(refUserData.groupIds,userGroupData); const deletedUserGroup = getDeletedRecordWithRefList(refUserData.groupIds,userGroupData);
axios.post(`${GLD_USER_PATH}/${params.id}`,
{
"enName": editedCustomerData.enName,
"locked": editedCustomerData.locked,
// "password": editedCustomerData.password,
// "phone": editedCustomerData.phone,
"post": editedCustomerData.post,
"emailAddress": editedCustomerData.emailAddress,
"addGroupIds": userGroupData,
"removeGroupIds": deletedUserGroup,
"addAuthIds": userAuthData,
"removeAuthIds": deletedUserAuth,
},
).then((response) => {
if (response.status === 204) {
// notifySaveSuccess();
navigate('/userSearchview');
}
})
.catch(error => {
console.log(error);
return false;
// console.log(userGroupData)
// console.log(userAuthData)
if( parseInt(params.id) >= -1){
axios.post(`${GLD_USER_PATH}/${params.id}`,
{
"enName": editedCustomerData.enName,
"locked": editedCustomerData.locked,
// "password": editedCustomerData.password,
// "phone": editedCustomerData.phone,
"post": editedCustomerData.post,
"emailAddress": editedCustomerData.emailAddress,
"addGroupIds": userGroupData,
"removeGroupIds": deletedUserGroup,
"addAuthIds": userAuthData,
"removeAuthIds": deletedUserAuth,
},
).then((response) => {
if (response.status === 204) {
// notifySaveSuccess();
navigate('/userSearchview');
}
})
.catch(error => {
console.log(error);
return false;
});
}else{
axios.post(POST_ADMIN_USER_REGISTER,
{
"username": editedCustomerData.username,
"name": editedCustomerData.username,
"password": editedCustomerData.password,
"enName": editedCustomerData.enName,
"locked": editedCustomerData.locked,
"emailAddress": editedCustomerData.emailAddress,
"post": editedCustomerData.post,
"addGroupIds": userGroupData,
"removeGroupIds": [],
"addAuthIds": userAuthData,
"removeAuthIds": [],
},
).then((response) => {
if (response.status === 200) {
// notifySaveSuccess();
navigate('/userSearchview');
}
})
.catch(error => {
console.log(error);
return false;
}); });
}
} }
setUserConfirm(false); setUserConfirm(false);
}, [editedCustomerData,userGroupData,userAuthData]); }, [editedCustomerData,userGroupData,userAuthData]);


+ 44
- 37
src/pages/pnspsUserSearchPage/UserSearchForm.js View File

@@ -14,11 +14,14 @@ import {


import Checkbox from "@mui/material/Checkbox"; import Checkbox from "@mui/material/Checkbox";
import * as React from "react"; import * as React from "react";
// import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
import {useNavigate} from "react-router";

// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //




const UserSearchForm = ({applySearch}) => { const UserSearchForm = ({applySearch}) => {
const navigate = useNavigate();


const [type, setType] = useState([]); const [type, setType] = useState([]);
const [locked, setLocked] = useState(false); const [locked, setLocked] = useState(false);
@@ -51,9 +54,10 @@ const UserSearchForm = ({applySearch}) => {
reset(); reset();
} }


// const handleNewUserClick = (id) => () => {
// navigate('/user/'+ id);
// };
const handleNewUserClick = (id) => {
// console.log(id)
navigate('/user/'+ id);
};


return ( return (
<MainCard xs={12} md={12} lg={12} <MainCard xs={12} md={12} lg={12}
@@ -132,37 +136,11 @@ const UserSearchForm = ({applySearch}) => {
</Grid> </Grid>


{/*last row*/} {/*last row*/}
<Grid container maxWidth justifyContent="flex-start" direction="row" alignItems="center">
<Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
<Button
size="large"
variant="contained"
onClick={resetForm}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
Clear
</Button>
</Grid>

<Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
Submit
</Button>
</Grid>
{/* <Grid item sx={{ml:6, mr:6, mb:6, mt:6}}>
<Grid container direction="row" justifyContent="flex-start" alignItems="center">
</Grid>
</Grid> */}
{/* <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
<Grid container direction="row"
justifyContent="space-between"
alignItems="center">
<Grid item xs={3} md={3} sx={{ml:1, mr:1, mb:3, mt:3}}>
<Button <Button
size="large" size="large"
variant="contained" variant="contained"
@@ -172,9 +150,38 @@ const UserSearchForm = ({applySearch}) => {
alignItems: 'end' alignItems: 'end'
}}> }}>
<AddCircleOutlineIcon/> <AddCircleOutlineIcon/>
New User
New User
</Button> </Button>
</Grid> */}
</Grid>
<Grid item xs={8} md={8} sx={{ml:3, mr:3, mb:3, mt:3}}>
<Grid container >
<Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
<Button
size="large"
variant="contained"
onClick={resetForm}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
Clear
</Button>
</Grid>

<Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
Search
</Button>
</Grid>
</Grid>
</Grid>
</Grid> </Grid>
</form> </form>
</MainCard> </MainCard>


+ 14
- 9
src/pages/pnspsUserSearchPage/index.js View File

@@ -1,6 +1,9 @@
// material-ui // material-ui
import { import {
Grid, Typography
Grid,
Typography,
Stack,
// Button
} from '@mui/material'; } from '@mui/material';
import MainCard from "../../components/MainCard"; import MainCard from "../../components/MainCard";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
@@ -8,9 +11,6 @@ import axios from "axios";
import {GLD_USER_PATH} from "../../utils/ApiPathConst"; import {GLD_USER_PATH} from "../../utils/ApiPathConst";
import * as React from "react"; import * as React from "react";


// import LoadingComponent from "../extra-pages/LoadingComponent";
// import SearchForm from "./UserSearchForm";
// import EventTable from "./UserTable";
import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
import { lazy } from 'react'; import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
@@ -20,7 +20,6 @@ const EventTable = Loadable(lazy(() => import('./UserTable')));
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //


const UserSettingPage = () => { const UserSettingPage = () => {

const [record,setRecord] = useState([]); const [record,setRecord] = useState([]);
const [searchCriteria, setSearchCriteria] = useState({}); const [searchCriteria, setSearchCriteria] = useState({});
const [onReady, setOnReady] = useState(false); const [onReady, setOnReady] = useState(false);
@@ -61,10 +60,16 @@ const UserSettingPage = () => {
!onReady ? !onReady ?
<LoadingComponent/> <LoadingComponent/>
: :
<Grid container rowSpacing={4.5} columnSpacing={2.75}>
<Grid item xs={12} sx={{mb: -2.25}}>
<Typography variant="h5">View User</Typography>
</Grid>
<Grid container sx={{minHeight: '90vh', paddingTop: '53px'}}>
<Grid item xs={12} md={12} lg={12}>
<Grid direction="row" container justifyContent="flex-start" alignItems="center" ml={2}>
<Grid item xs={2} height='50px'>
<Stack direction="row" height='100%' justifyContent="space-between" alignItems="center">
<Typography align="center" variant="h5">View User</Typography>
</Stack>
</Grid>
</Grid>
</Grid>


{/*row 1*/} {/*row 1*/}
<Grid item xs={12} md={12} lg={12}> <Grid item xs={12} md={12} lg={12}>


Write Preview
Loading…
Cancel
Save