@@ -15,7 +15,7 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const UserGroupCard = ({isCollectData, updateUserGroupList,userData}) => { | |||
const UserGroupCard = ({isCollectData, updateUserGroupList,userData,isNewRecord}) => { | |||
const [currentUserData, setCurrentUserData] = React.useState({}); | |||
const [onReady, setOnReady] = useState(false); | |||
const [selectedRow, setSelectedRow] = useState([]); | |||
@@ -30,7 +30,6 @@ const UserGroupCard = ({isCollectData, updateUserGroupList,userData}) => { | |||
useEffect(() => { | |||
//if state data are ready and assign to different field | |||
// if (Object.keys(userData).length > 0 &¤tUserData !== undefined) { | |||
if (Object.keys(userData).length > 0 &¤tUserData !== undefined) { | |||
setOnReady(true); | |||
} | |||
@@ -56,6 +55,7 @@ const UserGroupCard = ({isCollectData, updateUserGroupList,userData}) => { | |||
<UserGroupTable | |||
userGroup={userData.groupIds} | |||
setSelectedRow={setSelectedRow} | |||
isNewRecord={isNewRecord} | |||
/> | |||
</MainCard> | |||
); | |||
@@ -13,7 +13,7 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo | |||
// ==============================|| EVENT TABLE ||============================== // | |||
export default function UserGroupTable({setSelectedRow, userGroup}) { | |||
export default function UserGroupTable({setSelectedRow, userGroup,isNewRecord}) { | |||
const [groupData, setGroupData] = useState([]); | |||
const [onReady, setOnReady] = useState(false); | |||
const [currentSelectedRow, setCurrentSelectedRow] = useState(userGroup); | |||
@@ -33,8 +33,7 @@ export default function UserGroupTable({setSelectedRow, userGroup}) { | |||
useEffect(() => { | |||
//if state data are ready and assign to different field | |||
console.log(groupData) | |||
if (groupData!== undefined) { | |||
if (groupData.length > 0||isNewRecord) { | |||
setOnReady(true); | |||
} | |||
}, [groupData]); | |||
@@ -1,7 +1,10 @@ | |||
// material-ui | |||
import { | |||
FormControl, IconButton, | |||
Grid, InputAdornment, Typography, FormLabel, | |||
FormControl, | |||
IconButton, | |||
Grid, | |||
InputAdornment, | |||
Typography, FormLabel, | |||
OutlinedInput, | |||
} from '@mui/material'; | |||
import MainCard from "../../components/MainCard"; | |||
@@ -96,40 +99,42 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco | |||
</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 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 container alignItems={"center"}> | |||
@@ -9,7 +9,7 @@ import {useEffect, useState} from "react"; | |||
import * as React from "react"; | |||
import axios from "axios"; | |||
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 { lazy } from 'react'; | |||
@@ -130,29 +130,58 @@ const UserMaintainPage = () => { | |||
if(userConfirm && onReady){ | |||
const deletedUserAuth = getDeletedRecordWithRefList(refUserData.authIds,userAuthData); | |||
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); | |||
}, [editedCustomerData,userGroupData,userAuthData]); | |||
@@ -14,11 +14,14 @@ import { | |||
import Checkbox from "@mui/material/Checkbox"; | |||
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 ||============================== // | |||
const UserSearchForm = ({applySearch}) => { | |||
const navigate = useNavigate(); | |||
const [type, setType] = useState([]); | |||
const [locked, setLocked] = useState(false); | |||
@@ -51,9 +54,10 @@ const UserSearchForm = ({applySearch}) => { | |||
reset(); | |||
} | |||
// const handleNewUserClick = (id) => () => { | |||
// navigate('/user/'+ id); | |||
// }; | |||
const handleNewUserClick = (id) => { | |||
// console.log(id) | |||
navigate('/user/'+ id); | |||
}; | |||
return ( | |||
<MainCard xs={12} md={12} lg={12} | |||
@@ -132,37 +136,11 @@ const UserSearchForm = ({applySearch}) => { | |||
</Grid> | |||
{/*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 | |||
size="large" | |||
variant="contained" | |||
@@ -172,9 +150,38 @@ const UserSearchForm = ({applySearch}) => { | |||
alignItems: 'end' | |||
}}> | |||
<AddCircleOutlineIcon/> | |||
New User | |||
New User | |||
</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> | |||
</form> | |||
</MainCard> | |||
@@ -1,6 +1,9 @@ | |||
// material-ui | |||
import { | |||
Grid, Typography | |||
Grid, | |||
Typography, | |||
Stack, | |||
// Button | |||
} from '@mui/material'; | |||
import MainCard from "../../components/MainCard"; | |||
import {useEffect, useState} from "react"; | |||
@@ -8,9 +11,6 @@ import axios from "axios"; | |||
import {GLD_USER_PATH} from "../../utils/ApiPathConst"; | |||
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 { lazy } from 'react'; | |||
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); | |||
@@ -20,7 +20,6 @@ const EventTable = Loadable(lazy(() => import('./UserTable'))); | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const UserSettingPage = () => { | |||
const [record,setRecord] = useState([]); | |||
const [searchCriteria, setSearchCriteria] = useState({}); | |||
const [onReady, setOnReady] = useState(false); | |||
@@ -61,10 +60,16 @@ const UserSettingPage = () => { | |||
!onReady ? | |||
<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*/} | |||
<Grid item xs={12} md={12} lg={12}> | |||