| @@ -160,7 +160,7 @@ const ManageOrgUserPage = () => { | |||
| }, | |||
| }} | |||
| pageSizeOptions={[5, 10]} | |||
| autoHeight = {true} | |||
| autoHeight | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| @@ -86,7 +86,7 @@ export default function OrganizationTable({recordList}) { | |||
| }, | |||
| }} | |||
| pageSizeOptions={[5, 10]} | |||
| autoHeight = {true} | |||
| autoHeight | |||
| /> | |||
| </div> | |||
| ); | |||
| @@ -327,7 +327,7 @@ const BusCustomFormWizard = (props) => { | |||
| } | |||
| function handlePhone(phone) { | |||
| if (phone.length < 11) { | |||
| if (phone.length < 8) { | |||
| return false; | |||
| } else { | |||
| return true; | |||
| @@ -311,9 +311,10 @@ const CustomFormWizard = (props) => { | |||
| } | |||
| function handlePhone(value) { | |||
| if (value.length < 11) { | |||
| if (value.length < 8) { | |||
| return false; | |||
| } else { | |||
| console.log("Phone true") | |||
| return true; | |||
| } | |||
| } | |||
| @@ -322,6 +323,7 @@ const CustomFormWizard = (props) => { | |||
| if (value.length < 6) { | |||
| return false; | |||
| } else { | |||
| console.log("Username true") | |||
| return true; | |||
| } | |||
| } | |||
| @@ -334,6 +336,7 @@ const CustomFormWizard = (props) => { | |||
| else if (idNo.length < 7) { | |||
| return false; | |||
| } else { | |||
| console.log("IdNo true") | |||
| return true; | |||
| } | |||
| } | |||
| @@ -356,6 +359,7 @@ const CustomFormWizard = (props) => { | |||
| } else if (new_pass.length < 8) { | |||
| return false; | |||
| } else { | |||
| console.log("password true") | |||
| return true; | |||
| } | |||
| } | |||
| @@ -367,6 +371,7 @@ const CustomFormWizard = (props) => { | |||
| if (result == false) { | |||
| return false; | |||
| } | |||
| console.log("email true") | |||
| return true; | |||
| } | |||
| @@ -73,11 +73,11 @@ export default function UserAuthTable({setSelectedRow, userAuth}) { | |||
| checkboxSelection | |||
| rowSelectionModel={currentSelectedRow} | |||
| onRowSelectionModelChange={(ids) => { | |||
| console.log(ids); | |||
| // console.log(ids); | |||
| setSelectedRow(ids); | |||
| setCurrentSelectedRow(ids); | |||
| }} | |||
| autoHeight = {true} | |||
| autoHeight | |||
| /> | |||
| </div> | |||
| ); | |||
| @@ -5,10 +5,8 @@ import { | |||
| import {useEffect, useState} from "react"; | |||
| import axios from "axios"; | |||
| import {apiPath} from "../../auth/utils"; | |||
| //import LoadingComponent from "../extra-pages/LoadingComponent"; | |||
| import * as React from "react"; | |||
| import {GET_GROUP_COMBO_PATH} from "../../utils/ApiPathConst"; | |||
| import Loadable from 'components/Loadable'; | |||
| import { lazy } from 'react'; | |||
| const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); | |||
| @@ -35,8 +33,7 @@ export default function UserGroupTable({setSelectedRow, userGroup}) { | |||
| useEffect(() => { | |||
| //if state data are ready and assign to different field | |||
| console.log(groupData.length) | |||
| if (groupData !== "" && groupData !== undefined) { | |||
| if (groupData.length > 0) { | |||
| setOnReady(true); | |||
| } | |||
| }, [groupData]); | |||
| @@ -73,7 +70,7 @@ export default function UserGroupTable({setSelectedRow, userGroup}) { | |||
| setSelectedRow(ids); | |||
| setCurrentSelectedRow(ids); | |||
| }} | |||
| autoHeight = {true} | |||
| autoHeight | |||
| /> | |||
| </div> | |||
| ); | |||
| @@ -1,82 +1,32 @@ | |||
| // material-ui | |||
| import { | |||
| Grid, TextField, Typography | |||
| FormControl, IconButton, | |||
| Grid, InputAdornment, Typography, FormLabel, | |||
| OutlinedInput, | |||
| } from '@mui/material'; | |||
| import MainCard from "../../components/MainCard"; | |||
| import * as React from "react"; | |||
| import {useForm} from "react-hook-form"; | |||
| // import Autocomplete from "@mui/material/Autocomplete"; | |||
| // import { | |||
| // subDivision1, | |||
| // subDivision2, | |||
| // subDivision3, | |||
| // subDivision4, | |||
| // subDivision5, | |||
| // subDivision6 | |||
| // } from "../pnspsUserSearchPage/DummyComboRecord"; | |||
| import {useEffect, useState} from "react"; | |||
| import Checkbox from "@mui/material/Checkbox"; | |||
| //import LoadingComponent from "../extra-pages/LoadingComponent"; | |||
| import Loadable from 'components/Loadable'; | |||
| import { lazy } from 'react'; | |||
| const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); | |||
| //import {useParams} from "react-router-dom"; | |||
| import Visibility from '@mui/icons-material/Visibility'; | |||
| import VisibilityOff from '@mui/icons-material/VisibilityOff'; | |||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
| // const subDivisionArray = [ | |||
| // ...subDivision1, | |||
| // ...subDivision2, | |||
| // ...subDivision3, | |||
| // ...subDivision4, | |||
| // ...subDivision5, | |||
| // ...subDivision6 | |||
| // ]; | |||
| const UserInformationCard = ({isCollectData, updateUserObject,userData}) => { | |||
| const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewRecord}) => { | |||
| //const params = useParams(); | |||
| const [currentUserData, setCurrentUserData] = React.useState({}); | |||
| // const [subDivision, setSubDivision] = useState(null); | |||
| const [locked, setLocked] = useState(false); | |||
| // const [isLotusNoteUser, setIsLotusNoteUser] = useState(false); | |||
| // const [lotusNoteUserList, setLotusNoteUserList] = useState([]) | |||
| // const [selectedLotusUser, setSelectedLotusUser] = useState(null); | |||
| const [showPassword, setShowPassword] = React.useState(false); | |||
| const [onReady, setOnReady] = useState(false); | |||
| const {register, getValues} = useForm() | |||
| // useEffect(() => { | |||
| // //TODO: Get lotus note user list | |||
| // setLotusNoteUserList([ | |||
| // { | |||
| // key: 1, | |||
| // label: "user01", | |||
| // account: "user123456" | |||
| // }, | |||
| // { | |||
| // key: 2, | |||
| // label: "user02", | |||
| // account: "userabcde1" | |||
| // }, | |||
| // { | |||
| // key: 3, | |||
| // label: "user03", | |||
| // account: "user2001" | |||
| // }, | |||
| // { | |||
| // key: 4, | |||
| // label: "user04", | |||
| // account: "user2000" | |||
| // }, | |||
| // { | |||
| // key: 5, | |||
| // label: "user05", | |||
| // account: "user1999" | |||
| // }, | |||
| // ]) | |||
| // }, []); | |||
| const handleClickShowPassword = () => setShowPassword((show) => !show); | |||
| const handleMouseDownPassword = () => setShowPassword(!showPassword); | |||
| useEffect(() => { | |||
| //if user data from parent are not null | |||
| @@ -87,9 +37,12 @@ const UserInformationCard = ({isCollectData, updateUserObject,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&¤tUserData.id!==undefined) { | |||
| setLocked(currentUserData.locked); | |||
| setOnReady(true); | |||
| }else if(isNewRecord){ | |||
| setLocked(false); | |||
| setOnReady(true); | |||
| } | |||
| }, [currentUserData]); | |||
| @@ -98,8 +51,6 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData}) => { | |||
| const values = getValues(); | |||
| const objectData ={ | |||
| ...values, | |||
| // selectedLotusUser: selectedLotusUser, | |||
| // subDivision: subDivision, | |||
| locked: locked, | |||
| } | |||
| updateUserObject(objectData); | |||
| @@ -120,25 +71,28 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData}) => { | |||
| <form> | |||
| <Grid container> | |||
| <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'}}> | |||
| Username: | |||
| <FormLabel required>Username:</FormLabel> | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("userName", | |||
| { | |||
| value: currentUserData.username, | |||
| })} | |||
| id='username' | |||
| disabled | |||
| /> | |||
| <FormControl variant="outlined" fullWidth required> | |||
| <OutlinedInput | |||
| required | |||
| fullWidth | |||
| size="small" | |||
| {...register("username", | |||
| { | |||
| value: currentUserData.username, | |||
| })} | |||
| id='username' | |||
| disabled={!isNewRecord} | |||
| /> | |||
| </FormControl> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| @@ -151,12 +105,28 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData}) => { | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("password")} | |||
| id='password' | |||
| disabled | |||
| /> | |||
| <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> | |||
| @@ -165,18 +135,30 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData}) => { | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Full Name: | |||
| <FormLabel required >Full Name:</FormLabel> | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| {/* <TextField | |||
| fullWidth | |||
| {...register("fullenName", | |||
| {...register("enName", | |||
| { | |||
| value: currentUserData.fullenName, | |||
| value: currentUserData.enName, | |||
| })} | |||
| id='fullenName' | |||
| /> | |||
| id='enName' | |||
| /> */} | |||
| <FormControl variant="outlined" fullWidth required> | |||
| <OutlinedInput | |||
| required | |||
| fullWidth | |||
| size="small" | |||
| {...register("enName", | |||
| { | |||
| value: currentUserData.enName, | |||
| })} | |||
| id='enName' | |||
| /> | |||
| </FormControl> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| @@ -185,89 +167,76 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData}) => { | |||
| <Grid container alignItems={"center"}> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Post: | |||
| <FormLabel>Post:</FormLabel> | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("post", | |||
| { | |||
| value: currentUserData.post, | |||
| })} | |||
| id='post' | |||
| /> | |||
| <FormControl variant="outlined" fullWidth required> | |||
| <OutlinedInput | |||
| fullWidth | |||
| size="small" | |||
| {...register("post", | |||
| { | |||
| value: currentUserData.post, | |||
| })} | |||
| id='post' | |||
| /> | |||
| </FormControl> | |||
| </Grid> | |||
| </Grid> | |||
| </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'}}> | |||
| Sub-Division: | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <Autocomplete | |||
| disablePortal | |||
| id="sub-division-combo" | |||
| value={subDivision === null ? null : subDivision} | |||
| options={subDivisionArray} | |||
| onChange={(event, newValue) => { | |||
| setSubDivision(newValue); | |||
| }} | |||
| renderInput={(params) => <TextField {...params} />} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </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'}}> | |||
| Email: | |||
| <FormLabel required>Email:</FormLabel> | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("email", | |||
| { | |||
| value: currentUserData.email, | |||
| })} | |||
| id='email' | |||
| /> | |||
| <FormControl variant="outlined" fullWidth required> | |||
| <OutlinedInput | |||
| fullWidth | |||
| size="small" | |||
| {...register("emailAddress", | |||
| { | |||
| value: currentUserData.emailAddress, | |||
| })} | |||
| id='emailAddress' | |||
| /> | |||
| </FormControl> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <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 item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Phone: | |||
| <FormLabel>Phone:</FormLabel> | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| <TextField | |||
| fullWidth | |||
| {...register("phone1", | |||
| { | |||
| value: currentUserData.phone1, | |||
| })} | |||
| id='phone1' | |||
| /> | |||
| <FormControl variant="outlined" fullWidth required> | |||
| <OutlinedInput | |||
| fullWidth | |||
| size="small" | |||
| {...register("phone", | |||
| { | |||
| value: currentUserData.phone, | |||
| })} | |||
| id='phone' | |||
| /> | |||
| </FormControl> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> */} | |||
| <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}> | |||
| <Grid container> | |||
| <Grid item xs={4} s={4} md={4} lg={4} | |||
| sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> | |||
| Locked: | |||
| <FormLabel required>Locked:</FormLabel> | |||
| </Grid> | |||
| <Grid item xs={7} s={7} md={7} lg={6}> | |||
| @@ -1,14 +1,15 @@ | |||
| // material-ui | |||
| import { | |||
| Button, | |||
| Grid, Typography | |||
| Grid, | |||
| Typography, | |||
| Stack | |||
| } from '@mui/material'; | |||
| import {useEffect, useState} from "react"; | |||
| import * as React from "react"; | |||
| import axios from "axios"; | |||
| import {apiPath} from "../../auth/utils"; | |||
| import {useParams} from "react-router-dom"; | |||
| import {GET_USER_PATH} from "../../utils/ApiPathConst"; | |||
| import {useNavigate,useParams} from "react-router-dom"; | |||
| import {GLD_USER_PATH,DELETE_USER} from "../../utils/ApiPathConst"; | |||
| import Loadable from 'components/Loadable'; | |||
| import { lazy } from 'react'; | |||
| @@ -16,16 +17,17 @@ 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'))); | |||
| // import UserInformationCard from "./UserInformationCard"; | |||
| // import LoadingComponent from "../extra-pages/LoadingComponent"; | |||
| // import UserGroupCard from "./UserGroupCard"; | |||
| // import UserAuthorityCard from "./UserAuthorityCard"; | |||
| import { | |||
| GeneralConfirmWindow, | |||
| getDeletedRecordWithRefList, | |||
| } from "../../utils/CommonFunction"; | |||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
| const UserMaintainPage = () => { | |||
| const params = useParams(); | |||
| const navigate = useNavigate(); | |||
| const [userData, setUserData] = React.useState({}); | |||
| const [onReady, setOnReady] = useState(false); | |||
| const [isCollectData, setIsCollectData] = useState(false); | |||
| @@ -33,6 +35,9 @@ const UserMaintainPage = () => { | |||
| const [userGroupData,setUserGroupData] = useState([]); | |||
| const [userAuthData,setUserAuthData] = useState([]); | |||
| const [userConfirm, setUserConfirm] = useState(false); | |||
| const [isNewRecord, setIsNewRecord] = useState(false); | |||
| const [refUserData, setRefUserData] = React.useState({}); | |||
| function updateUserObject(userData) { | |||
| setEditedCustomerData(userData); | |||
| @@ -51,30 +56,103 @@ const UserMaintainPage = () => { | |||
| setIsCollectData(!isCollectData); | |||
| } | |||
| useEffect(() => { | |||
| console.log(params) | |||
| axios.get(`${apiPath}${GET_USER_PATH}/${params.id}`) | |||
| // ==============================|| DELETE WINDOW RELATED ||============================== // | |||
| const [isWindowOpen, setIsWindowOpen] = useState(false); | |||
| const handleClose = () => { | |||
| setIsWindowOpen(false); | |||
| }; | |||
| const handleDeleteClick = () => { | |||
| setIsWindowOpen(true); | |||
| }; | |||
| function deleteData(){ | |||
| axios.delete(`${DELETE_USER}/${params.id}`, | |||
| ) | |||
| .then((response) => { | |||
| if (response.status === 200) { | |||
| setUserData(response.data); | |||
| if (response.status === 204) { | |||
| // notifyDeleteSuccess(); | |||
| setIsWindowOpen(false); | |||
| navigate('/userSearchview'); | |||
| } | |||
| }) | |||
| .catch(error => { | |||
| console.log(error); | |||
| return false; | |||
| }); | |||
| } | |||
| // ==============================|| DELETE WINDOW RELATED ||============================== // | |||
| useEffect(() => { | |||
| if(params.id > 0 ){ | |||
| axios.get(`${GLD_USER_PATH}/${params.id}`) | |||
| .then((response) => { | |||
| if (response.status === 200) { | |||
| setRefUserData(response.data); | |||
| setUserData(response.data); | |||
| } | |||
| }) | |||
| .catch(error => { | |||
| console.log(error); | |||
| return false; | |||
| }); | |||
| } | |||
| else{ | |||
| setUserData( | |||
| { | |||
| "authIds": [], | |||
| "data": {}, | |||
| "groupIds": [] | |||
| } | |||
| ); | |||
| setRefUserData( | |||
| { | |||
| "authIds": [], | |||
| "data": {}, | |||
| "groupIds": [] | |||
| } | |||
| ); | |||
| setIsNewRecord(true); | |||
| } | |||
| }, []); | |||
| useEffect(() => { | |||
| setOnReady(true); | |||
| if (Object.keys(userData).length > 0 && userData !== undefined) { | |||
| setOnReady(true); | |||
| } | |||
| else if(isNewRecord){ | |||
| setOnReady(true); | |||
| } | |||
| }, [userData]); | |||
| useEffect(() => { | |||
| if(userConfirm && onReady){ | |||
| console.log("update in parents"); | |||
| console.log(editedCustomerData); | |||
| console.log(userGroupData); | |||
| console.log(userAuthData); | |||
| 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 === 200) { | |||
| // notifySaveSuccess(); | |||
| navigate('/userSearchview'); | |||
| } | |||
| }) | |||
| .catch(error => { | |||
| console.log(error); | |||
| return false; | |||
| }); | |||
| } | |||
| setUserConfirm(false); | |||
| }, [editedCustomerData,userGroupData,userAuthData]); | |||
| @@ -83,9 +161,11 @@ const UserMaintainPage = () => { | |||
| !onReady ? | |||
| <LoadingComponent/> | |||
| : | |||
| <Grid container rowSpacing={4.5} columnSpacing={2.75}> | |||
| <Grid item xs={12} sx={{mb: -2.25}}> | |||
| <Typography variant="h5">Maintain User</Typography> | |||
| <Grid container sx={{minHeight: '90vh', paddingTop: '53px'}}> | |||
| <Grid item xs={12} height='60px'> | |||
| <Stack direction="row" height='100%' justifyContent="flex-start" alignItems="center"> | |||
| <Typography variant="h5">Maintain User</Typography> | |||
| </Stack> | |||
| </Grid> | |||
| {/*col 1*/} | |||
| <Grid item xs={12} md={5} lg={5}> | |||
| @@ -95,6 +175,7 @@ const UserMaintainPage = () => { | |||
| updateUserObject={updateUserObject} | |||
| userData={userData} | |||
| isCollectData={isCollectData} | |||
| isNewRecord={isNewRecord} | |||
| /> | |||
| </Grid> | |||
| @@ -103,6 +184,7 @@ const UserMaintainPage = () => { | |||
| updateUserGroupList={updateUserGroupList} | |||
| userData={userData} | |||
| isCollectData={isCollectData} | |||
| isNewRecord={isNewRecord} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| @@ -113,12 +195,35 @@ const UserMaintainPage = () => { | |||
| updateUserAuthList={updateUserAuthList} | |||
| userData={userData} | |||
| isCollectData={isCollectData} | |||
| isNewRecord={isNewRecord} | |||
| /> | |||
| </Grid> | |||
| {/*bottom button*/} | |||
| <Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"end"} justifyContent="center"> | |||
| <Grid container maxWidth justifyContent="flex-end"> | |||
| <Grid item sx={{ml:3, mr:3, mb: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> | |||
| <Grid item sx={{ml: 3, mr: 3}}> | |||
| <Button | |||
| size="large" | |||
| @@ -19,12 +19,14 @@ const GroupAuthCard = ({isCollectData, updateUserAuthList,userGroupData}) => { | |||
| const [currentAuthData, setCurrentAuthData] = React.useState({}); | |||
| const [onReady, setOnReady] = useState(false); | |||
| const [selectedRow, setSelectedRow] = useState([]); | |||
| const [referenceRow, setReferenceRow] = useState([]); | |||
| useEffect(() => { | |||
| //if user data from parent are not null | |||
| if (Object.keys(userGroupData).length > 0 && userGroupData !== undefined) { | |||
| setCurrentAuthData(userGroupData.data); | |||
| setSelectedRow(userGroupData.authIds); | |||
| setReferenceRow(userGroupData.authIds); | |||
| } | |||
| }, [userGroupData]); | |||
| @@ -37,7 +39,11 @@ const GroupAuthCard = ({isCollectData, updateUserAuthList,userGroupData}) => { | |||
| useEffect(() => { | |||
| //upload latest data to parent | |||
| updateUserAuthList(selectedRow); | |||
| let deletedList = referenceRow.filter(x => !selectedRow.includes(x)); | |||
| updateUserAuthList({ | |||
| "currentList": selectedRow, | |||
| "deletedList": deletedList | |||
| }); | |||
| }, [isCollectData]); | |||
| @@ -73,11 +73,11 @@ export default function GroupAuthTable({setSelectedRow, userAuth}) { | |||
| checkboxSelection | |||
| rowSelectionModel={currentSelectedRow} | |||
| onRowSelectionModelChange={(ids) => { | |||
| console.log(ids); | |||
| // console.log(ids); | |||
| setSelectedRow(ids); | |||
| setCurrentSelectedRow(ids); | |||
| }} | |||
| autoHeight = {true} | |||
| autoHeight | |||
| /> | |||
| </div> | |||
| ); | |||
| @@ -23,19 +23,22 @@ const UserAddTable = Loadable(lazy(() => import('./UserAddTable'))); | |||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
| const UserAddCard = ({isCollectData, updateGroupMember,userGroupData}) => { | |||
| const UserAddCard = ({isCollectData, updateGroupMember,userGroupData,isNewRecord}) => { | |||
| const [currentUserData, setCurrentUserData] = React.useState({}); | |||
| const [onReady, setOnReady] = useState(false); | |||
| const [groupUserData, setGroupUserData] = useState([]); | |||
| const [userComboList, setUserComboList] = useState([]); | |||
| const [selectedUser, setSelectedUser] = useState(null); | |||
| const [deletedList, setDeletedList] = useState([]); | |||
| function updateUserList (){ | |||
| const idList = getIdList(groupUserData); | |||
| if(!idList.includes(selectedUser.id)){ | |||
| const userList = [...groupUserData, selectedUser]; | |||
| setGroupUserData(userList); | |||
| console.log(userList); | |||
| if(selectedUser!==null){ | |||
| if(!idList.includes(selectedUser.id)){ | |||
| const userList = [...groupUserData, selectedUser]; | |||
| setGroupUserData(userList); | |||
| console.log(userList); | |||
| } | |||
| } | |||
| } | |||
| @@ -61,24 +64,32 @@ const UserAddCard = ({isCollectData, updateGroupMember,userGroupData}) => { | |||
| useEffect(() => { | |||
| //if state data are ready and assign to different field | |||
| if (Object.keys(userGroupData).length > 0 &¤tUserData !== undefined) { | |||
| axios.get(`${apiPath}${GET_GROUP_MEMBER_LIST_PATH}?id=${userGroupData.data.id}`) | |||
| .then((response) => { | |||
| if (response.status === 200) { | |||
| setGroupUserData(response.data.records); | |||
| } | |||
| setOnReady(true); | |||
| }) | |||
| .catch(error => { | |||
| console.log(error); | |||
| return false; | |||
| }); | |||
| if(isNewRecord){ | |||
| setOnReady(true); | |||
| } | |||
| else{ | |||
| if (Object.keys(userGroupData).length > 0 &¤tUserData !== undefined) { | |||
| axios.get(`${apiPath}${GET_GROUP_MEMBER_LIST_PATH}?id=${userGroupData.data.id}`) | |||
| .then((response) => { | |||
| if (response.status === 200) { | |||
| setGroupUserData(response.data.records); | |||
| } | |||
| setOnReady(true); | |||
| }) | |||
| .catch(error => { | |||
| console.log(error); | |||
| return false; | |||
| }); | |||
| } | |||
| } | |||
| }, [currentUserData]); | |||
| useEffect(() => { | |||
| //upload latest data to parent | |||
| updateGroupMember(groupUserData); | |||
| updateGroupMember({ | |||
| "currentList" : groupUserData, | |||
| "deletedList" : deletedList | |||
| }); | |||
| }, [isCollectData]); | |||
| @@ -131,6 +142,7 @@ const UserAddCard = ({isCollectData, updateGroupMember,userGroupData}) => { | |||
| <UserAddTable | |||
| setGroupUserData={setGroupUserData} | |||
| setDeletedList={setDeletedList} | |||
| userList={groupUserData} | |||
| /> | |||
| </MainCard> | |||
| @@ -14,9 +14,10 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo | |||
| // ==============================|| EVENT TABLE ||============================== // | |||
| export default function UserAddTable({setGroupUserData, userList}) { | |||
| export default function UserAddTable({setGroupUserData, userList,setDeletedList}) { | |||
| const [groupData, setGroupData] = useState([]); | |||
| const [onReady, setOnReady] = useState(false); | |||
| const [localDeletedList, setLocalDeletedList] = React.useState([]); | |||
| useEffect(() => { | |||
| setGroupData(userList); | |||
| @@ -26,6 +27,10 @@ export default function UserAddTable({setGroupUserData, userList}) { | |||
| setGroupData(userList); | |||
| }, [userList]); | |||
| useEffect(() => { | |||
| setDeletedList(localDeletedList); | |||
| }, [localDeletedList]); | |||
| useEffect(() => { | |||
| //if state data are ready and assign to different field | |||
| if (groupData !== undefined) { | |||
| @@ -34,11 +39,18 @@ export default function UserAddTable({setGroupUserData, userList}) { | |||
| }, [groupData]); | |||
| const handleDeleteClick = (id) => () => { | |||
| if(id >0){ | |||
| const temp = [...localDeletedList, id]; | |||
| console.log("temp here"); | |||
| console.log(temp); | |||
| setLocalDeletedList(temp); | |||
| } | |||
| const newList =removeObjectWithId(groupData,id) | |||
| setGroupUserData(newList); | |||
| setGroupData(newList); | |||
| }; | |||
| const columns = [ | |||
| { | |||
| field: 'actions', | |||
| @@ -64,12 +76,6 @@ export default function UserAddTable({setGroupUserData, userList}) { | |||
| headerName: 'User', | |||
| flex: 1, | |||
| }, | |||
| // { | |||
| // id: 'subDiv', | |||
| // field: 'subDivisionName', | |||
| // headerName: 'Sub-Division', | |||
| // flex: 1, | |||
| // }, | |||
| ]; | |||
| return ( | |||
| @@ -8,8 +8,14 @@ import * as React from "react"; | |||
| import axios from "axios"; | |||
| import {apiPath} from "../../auth/utils"; | |||
| import {useParams} from "react-router-dom"; | |||
| import {getIdList} from "../../utils/CommonFunction"; | |||
| import {GET_GROUP_LIST_PATH} from "../../utils/ApiPathConst"; | |||
| import { | |||
| GeneralConfirmWindow, | |||
| getDeletedRecordWithRefList, | |||
| getIdList, | |||
| notifyDeleteSuccess, | |||
| // notifySaveSuccess | |||
| } from "../../utils/CommonFunction"; | |||
| import {POST_AND_UPDATE_USER_GROUP,GET_GROUP_LIST_PATH } from "../../utils/ApiPathConst"; | |||
| import Loadable from 'components/Loadable'; | |||
| import { lazy } from 'react'; | |||
| @@ -17,10 +23,8 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo | |||
| const GroupAuthCard = Loadable(lazy(() => import('./GroupAuthCard'))); | |||
| const UserGroupInfoCard = Loadable(lazy(() => import('./UserGroupInfoCard'))); | |||
| const UserAddCard = Loadable(lazy(() => import('./UserAddCard'))); | |||
| //import LoadingComponent from "../extra-pages/LoadingComponent"; | |||
| //import GroupAuthCard from "./GroupAuthCard"; | |||
| //import UserGroupInfoCard from "./UserGroupInfoCard"; | |||
| //import UserAddCard from "./UserAddCard"; | |||
| import {useNavigate} from "react-router"; | |||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
| @@ -28,6 +32,7 @@ const UserAddCard = Loadable(lazy(() => import('./UserAddCard'))); | |||
| const UserMaintainPage = () => { | |||
| const params = useParams(); | |||
| const navigate = useNavigate(); | |||
| const [onReady, setOnReady] = useState(false); | |||
| const [isCollectData, setIsCollectData] = useState(false); | |||
| const [editedGroupData, setEditedGroupData] = useState({}); | |||
| @@ -35,17 +40,47 @@ const UserMaintainPage = () => { | |||
| const [userAuthData,setUserAuthData] = useState([]); | |||
| 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 [isWindowOpen, setIsWindowOpen] = React.useState(false); | |||
| const handleClose = () => { | |||
| setIsWindowOpen(false); | |||
| }; | |||
| const handleDeleteClick = () => { | |||
| setIsWindowOpen(true); | |||
| }; | |||
| function deleteData(){ | |||
| axios.delete(`${apiPath}${GET_GROUP_LIST_PATH}/${params.id}`, | |||
| ) | |||
| .then((response) => { | |||
| if (response.status === 204) { | |||
| notifyDeleteSuccess(); | |||
| setIsWindowOpen(false); | |||
| navigate('/usergroupSearchview'); | |||
| } | |||
| }) | |||
| .catch(error => { | |||
| console.log(error); | |||
| return false; | |||
| }); | |||
| } | |||
| function updateGroupObject(groupData) { | |||
| setEditedGroupData(groupData); | |||
| } | |||
| function updateGroupMember(groupMember){ | |||
| setGroupMember(groupMember); | |||
| setGroupMember(groupMember.currentList); | |||
| setDeletedUserList(groupMember.deletedList); | |||
| } | |||
| function updateUserAuthList(userAuthData){ | |||
| setUserAuthData(userAuthData); | |||
| setUserAuthData(userAuthData.currentList); | |||
| setDeletedAuthList(userAuthData.deletedList); | |||
| } | |||
| const submitData = () => { | |||
| @@ -54,30 +89,67 @@ const UserMaintainPage = () => { | |||
| } | |||
| useEffect(() => { | |||
| axios.get(`${apiPath}${GET_GROUP_LIST_PATH}/${params.id}`) | |||
| .then((response) => { | |||
| if (response.status === 200) { | |||
| setUserGroupData(response.data); | |||
| if(params.id > 0 ){ | |||
| axios.get(`${apiPath}${GET_GROUP_LIST_PATH}/${params.id}`) | |||
| .then((response) => { | |||
| if (response.status === 200) { | |||
| setUserGroupData(response.data); | |||
| } | |||
| }) | |||
| .catch(error => { | |||
| console.log(error); | |||
| return false; | |||
| }); | |||
| } | |||
| else{ | |||
| //new record case | |||
| setUserGroupData( | |||
| { | |||
| "authIds": [], | |||
| "data": {}, | |||
| "userIds": [] | |||
| } | |||
| }) | |||
| .catch(error => { | |||
| console.log(error); | |||
| return false; | |||
| }); | |||
| ); | |||
| setIsNewRecord(true); | |||
| } | |||
| }, []); | |||
| useEffect(() => { | |||
| console.log(userGroupData); | |||
| setOnReady(true); | |||
| if (Object.keys(userGroupData).length > 0 && userGroupData !== undefined) { | |||
| setOnReady(true); | |||
| } | |||
| else if(isNewRecord){ | |||
| setOnReady(true); | |||
| } | |||
| }, [userGroupData]); | |||
| useEffect(() => { | |||
| if(userConfirm && onReady){ | |||
| console.log("update in parents"); | |||
| console.log(editedGroupData); | |||
| console.log(groupMember); | |||
| console.log(getIdList(groupMember)); | |||
| console.log(userAuthData); | |||
| //avoid delete and add user at the same time | |||
| let finalDeletedUserList = getDeletedRecordWithRefList(deletedUserList, getIdList(groupMember)); | |||
| console.log(finalDeletedUserList) | |||
| axios.post(POST_AND_UPDATE_USER_GROUP, | |||
| { | |||
| "id": parseInt(params.id) !== -1? parseInt(params.id) : null, | |||
| "name": editedGroupData.userGroupName, | |||
| "description": editedGroupData.description, | |||
| "addUserIds": getIdList(groupMember), | |||
| "removeUserIds": finalDeletedUserList, | |||
| "addAuthIds": userAuthData, | |||
| "removeAuthIds": deletedAuthList, | |||
| }, | |||
| ) | |||
| .then((response) => { | |||
| if (response.status === 200) { | |||
| // notifySaveSuccess(); | |||
| navigate('/usergroupSearchview'); | |||
| } | |||
| }) | |||
| .catch(error => { | |||
| console.log(error); | |||
| return false; | |||
| }); | |||
| } | |||
| setUserConfirm(false); | |||
| }, [editedGroupData,userGroupData,userAuthData]); | |||
| @@ -88,7 +160,7 @@ const UserMaintainPage = () => { | |||
| : | |||
| <Grid container rowSpacing={4.5} columnSpacing={2.75}> | |||
| <Grid item xs={12} sx={{mb: -2.25}}> | |||
| <Typography variant="h5">Maintain User Group</Typography> | |||
| <Typography variant="h5">{isNewRecord? "Create User Group" : "Maintain User Group"}</Typography> | |||
| </Grid> | |||
| {/*col 1*/} | |||
| <Grid item xs={12} md={5} lg={5}> | |||
| @@ -98,6 +170,7 @@ const UserMaintainPage = () => { | |||
| updateGroupObject={updateGroupObject} | |||
| userGroupData={userGroupData} | |||
| isCollectData={isCollectData} | |||
| isNewRecord={isNewRecord} | |||
| /> | |||
| </Grid> | |||
| @@ -106,6 +179,7 @@ const UserMaintainPage = () => { | |||
| updateGroupMember={updateGroupMember} | |||
| userGroupData={userGroupData} | |||
| isCollectData={isCollectData} | |||
| isNewRecord={isNewRecord} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| @@ -116,12 +190,35 @@ const UserMaintainPage = () => { | |||
| updateUserAuthList={updateUserAuthList} | |||
| userGroupData={userGroupData} | |||
| isCollectData={isCollectData} | |||
| isNewRecord={isNewRecord} | |||
| /> | |||
| </Grid> | |||
| {/*bottom button*/} | |||
| <Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"end"} justifyContent="center"> | |||
| <Grid container maxWidth justifyContent="flex-end"> | |||
| <Grid item sx={{ml:3, mr:3, mb:3}}> | |||
| <Button | |||
| size="large" | |||
| variant="contained" | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end' | |||
| }} | |||
| disabled={isNewRecord} | |||
| onClick={handleDeleteClick} | |||
| > | |||
| Delete User Group | |||
| </Button> | |||
| <GeneralConfirmWindow | |||
| isWindowOpen={isWindowOpen} | |||
| title={"Attention"} | |||
| content={`Confirm to delete User Group "${userGroupData.data.name}" ?`} | |||
| onNormalClose={handleClose} | |||
| onConfirmClose={deleteData} | |||
| /> | |||
| </Grid> | |||
| <Grid item sx={{ml: 3, mr: 3}}> | |||
| <Button | |||
| size="large" | |||
| @@ -133,7 +230,7 @@ const UserMaintainPage = () => { | |||
| }} | |||
| onClick={submitData} | |||
| > | |||
| Save User | |||
| Save User Group | |||
| </Button> | |||
| </Grid> | |||
| </Grid> | |||
| @@ -68,7 +68,7 @@ export default function UserGroupTable({recordList}) { | |||
| }, | |||
| }} | |||
| pageSizeOptions={[10, 15, 20]} | |||
| autoHeight = {true} | |||
| autoHeight | |||
| /> | |||
| </div> | |||
| ); | |||
| @@ -1,11 +1,11 @@ | |||
| // material-ui | |||
| import { | |||
| Box, | |||
| Button, | |||
| // Box, | |||
| Stack, | |||
| // Button, | |||
| Grid, Typography | |||
| } from '@mui/material'; | |||
| import MainCard from "../../components/MainCard"; | |||
| import {useEffect, useState} from "react"; | |||
| import axios from "axios"; | |||
| import {apiPath} from "../../auth/utils"; | |||
| @@ -64,15 +64,15 @@ const UserGroupSearchPanel = () => { | |||
| !onReady ? | |||
| <LoadingComponent/> | |||
| : | |||
| <Grid container rowSpacing={4.5} columnSpacing={2.75}> | |||
| <Grid container sx={{minHeight: '90vh', paddingTop: '53px'}}> | |||
| <Grid item xs={12} md={12} lg={12}> | |||
| <Grid container justifyContent="flex-start" alignItems="center"> | |||
| <Grid item xs={1} sx={{mb: -2.25}} > | |||
| <Box sx={{ display: 'flex', alignItems: 'center'}}> | |||
| <Typography align="center" variant="h5" sx={{mb:2}}>View User Group</Typography> | |||
| </Box> | |||
| <Grid item xs={12} height='50px'> | |||
| <Stack direction="row" height='100%' justifyContent="flex-start" alignItems="center"> | |||
| <Typography ml={2} align="center" variant="h5">View User Group</Typography> | |||
| </Stack> | |||
| </Grid> | |||
| <Grid item xs={1} sx={{ml: 3, mr: 3}}> | |||
| {/* <Grid item xs={1} sx={{ml: 3, mr: 3}}> | |||
| <Button | |||
| size="large" | |||
| variant="contained" | |||
| @@ -80,7 +80,7 @@ const UserGroupSearchPanel = () => { | |||
| > | |||
| Create | |||
| </Button> | |||
| </Grid> | |||
| </Grid> */} | |||
| </Grid> | |||
| </Grid> | |||
| @@ -11,34 +11,16 @@ import {useForm} from "react-hook-form"; | |||
| import { | |||
| // useEffect, | |||
| useState} from "react"; | |||
| // import Autocomplete from '@mui/material/Autocomplete'; | |||
| // import { | |||
| // subDivision1, | |||
| // subDivision2, | |||
| // subDivision3, | |||
| // subDivision4, | |||
| // subDivision5, | |||
| // subDivision6 | |||
| // } from "pages/pnspsUserSearchPage/DummyComboRecord"; | |||
| import Checkbox from "@mui/material/Checkbox"; | |||
| import * as React from "react"; | |||
| // import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; | |||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
| // const subDivisionArray =[ | |||
| // ...subDivision1, | |||
| // ...subDivision2, | |||
| // ...subDivision3, | |||
| // ...subDivision4, | |||
| // ...subDivision5, | |||
| // ...subDivision6 | |||
| // ]; | |||
| const UserSearchForm = ({applySearch}) => { | |||
| const [type, setType] = useState([]); | |||
| // const [division, setDivision] = useState(null); | |||
| // const [subDivision, setSubDivision] = useState(null); | |||
| // const [isLotusNoteUser, setIsLotusNoteUser] = useState(false); | |||
| const [locked, setLocked] = useState(false); | |||
| @@ -55,31 +37,24 @@ const UserSearchForm = ({applySearch}) => { | |||
| username: data.userName, | |||
| fullenName: data.fullenName, | |||
| post: data.post, | |||
| // subDivision: subDivision, | |||
| email: data.email, | |||
| phone: data.phone, | |||
| // isLotusNoteUser: isLotusNoteUser, | |||
| locked: locked, | |||
| }; | |||
| applySearch(temp); | |||
| }; | |||
| // useEffect(() => { | |||
| // if(division != null){ | |||
| // setSubDivision(subDivisionArray[division.type-1][0]); | |||
| // } | |||
| // }, [division]); | |||
| function resetForm(){ | |||
| setType([]); | |||
| // setDivision(null); | |||
| // setSubDivision(null); | |||
| // setIsLotusNoteUser(false); | |||
| setLocked(false); | |||
| reset(); | |||
| } | |||
| // const handleNewUserClick = (id) => () => { | |||
| // navigate('/user/'+ id); | |||
| // }; | |||
| return ( | |||
| <MainCard xs={12} md={12} lg={12} | |||
| border={false} | |||
| @@ -89,7 +64,7 @@ const UserSearchForm = ({applySearch}) => { | |||
| {/*row 1*/} | |||
| <CardContent sx={{ px: 2.5, pt: 3 }}> | |||
| <Grid item justifyContent="space-between" alignItems="center"> | |||
| Search Form | |||
| Search Form (GLD User) | |||
| </Grid> | |||
| </CardContent> | |||
| @@ -122,19 +97,6 @@ const UserSearchForm = ({applySearch}) => { | |||
| /> | |||
| </Grid> | |||
| {/* <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}> | |||
| <Autocomplete | |||
| disablePortal | |||
| id="sub-division-combo" | |||
| value={subDivision === null? null : subDivision} | |||
| options={subDivisionArray} | |||
| onChange={(event, newValue) => { | |||
| setSubDivision(newValue); | |||
| }} | |||
| renderInput={(params) => <TextField {...params} label="Sub-Division" />} | |||
| /> | |||
| </Grid> */} | |||
| <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}> | |||
| <TextField | |||
| fullWidth | |||
| @@ -153,21 +115,6 @@ const UserSearchForm = ({applySearch}) => { | |||
| /> | |||
| </Grid> | |||
| {/* <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}> | |||
| <FormControlLabel | |||
| control={ | |||
| <Checkbox | |||
| checked={isLotusNoteUser} | |||
| onChange={(event) => setIsLotusNoteUser(event.target.checked)} | |||
| name="checked" | |||
| color="primary" | |||
| size="small" | |||
| /> | |||
| } | |||
| label={<Typography variant="h6">Lotus Notes User</Typography>} | |||
| /> | |||
| </Grid> */} | |||
| <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}> | |||
| <FormControlLabel | |||
| control={ | |||
| @@ -182,20 +129,10 @@ const UserSearchForm = ({applySearch}) => { | |||
| label={<Typography variant="h6">Locked</Typography>} | |||
| /> | |||
| </Grid> | |||
| {/*<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>*/} | |||
| {/* <TextField*/} | |||
| {/* fullWidth*/} | |||
| {/* {...register("subDivisionId")}*/} | |||
| {/* id="subDivision"*/} | |||
| {/* label="Sub-Division"*/} | |||
| {/* />*/} | |||
| {/*</Grid>*/} | |||
| </Grid> | |||
| {/*last row*/} | |||
| <Grid container maxWidth justifyContent="flex-end"> | |||
| <Grid container maxWidth justifyContent="flex-start" direction="row" alignItems="center"> | |||
| <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}> | |||
| <Button | |||
| size="large" | |||
| @@ -220,7 +157,24 @@ const UserSearchForm = ({applySearch}) => { | |||
| }}> | |||
| Submit | |||
| </Button> | |||
| </Grid> | |||
| </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}}> | |||
| <Button | |||
| size="large" | |||
| variant="contained" | |||
| onClick={handleNewUserClick} | |||
| sx={{ | |||
| textTransform: 'capitalize', | |||
| alignItems: 'end' | |||
| }}> | |||
| <AddCircleOutlineIcon/> | |||
| New User | |||
| </Button> | |||
| </Grid> */} | |||
| </Grid> | |||
| </form> | |||
| </MainCard> | |||
| @@ -9,9 +9,12 @@ import {useEffect} from "react"; | |||
| import {useNavigate} from "react-router-dom"; | |||
| import { useTheme } from '@mui/material/styles'; | |||
| import Checkbox from '@mui/material/Checkbox'; | |||
| import * as UrlUtils from "../../utils/ApiPathConst"; | |||
| import * as HttpUtils from '../../utils/HttpUtils'; | |||
| // ==============================|| EVENT TABLE ||============================== // | |||
| export default function UserTable({recordList}) { | |||
| export default function UserTable({recordList,setChangeLocked}) { | |||
| const [rows, setRows] = React.useState(recordList); | |||
| const [rowModesModel] = React.useState({}); | |||
| const theme = useTheme(); | |||
| @@ -26,6 +29,36 @@ export default function UserTable({recordList}) { | |||
| navigate('/user/'+ id); | |||
| }; | |||
| const handleLock = (params) => () => { | |||
| setChangeLocked(false) | |||
| if (params.row.locked==true){ | |||
| doUnlock(params.id) | |||
| }else{ | |||
| doLock(params.id) | |||
| setRows(recordList); | |||
| } | |||
| } | |||
| const doLock = (id) => { | |||
| HttpUtils.get({ | |||
| url: UrlUtils.GET_USER_LOCK+"/"+id, | |||
| onSuccess: function(){ | |||
| setRows(recordList); | |||
| setChangeLocked(true) | |||
| } | |||
| }); | |||
| }; | |||
| const doUnlock = (id) => { | |||
| HttpUtils.get({ | |||
| url: UrlUtils.GET_USER_UNLOCK+"/"+id, | |||
| onSuccess: function(){ | |||
| setRows(recordList); | |||
| setChangeLocked(true) | |||
| } | |||
| }); | |||
| }; | |||
| const columns = [ | |||
| { | |||
| field: 'actions', | |||
| @@ -52,8 +85,8 @@ export default function UserTable({recordList}) { | |||
| flex: 1, | |||
| }, | |||
| { | |||
| id: 'name', | |||
| field: 'name', | |||
| id: 'enName', | |||
| field: 'enName', | |||
| headerName: 'Full Name', | |||
| flex: 1, | |||
| }, | |||
| @@ -64,47 +97,11 @@ export default function UserTable({recordList}) { | |||
| flex: 1, | |||
| }, | |||
| { | |||
| id: 'email', | |||
| field: 'email', | |||
| id: 'emailAddress', | |||
| field: 'emailAddress', | |||
| headerName: 'Email', | |||
| flex: 1, | |||
| }, | |||
| // { | |||
| // id: 'subDivisionId', | |||
| // field: 'subDivisionId', | |||
| // //type: 'date', | |||
| // //sortable: false, | |||
| // headerName: 'Sub-Division', | |||
| // flex: 1, | |||
| // }, | |||
| // { | |||
| // id: 'subDivisionId', | |||
| // field: 'subDivisionId', | |||
| // //type: 'date', | |||
| // //sortable: false, | |||
| // headerName: 'Sub-Division', | |||
| // flex: 1, | |||
| // }, | |||
| // { | |||
| // id: 'lotusNotesUser', | |||
| // field: 'lotusNotesUser', | |||
| // type: 'bool', | |||
| // headerName: 'Lotus Notes User', | |||
| // flex: 1, | |||
| // renderCell: (params) => { | |||
| // return ( | |||
| // <Checkbox | |||
| // theme={theme} | |||
| // key="locked" | |||
| // checked={params.row.lotusNotesUser} | |||
| // color="primary" | |||
| // size="small" | |||
| // //onChange={handleChange} | |||
| // /> | |||
| // ); | |||
| // }, | |||
| // }, | |||
| { | |||
| id: 'locked', | |||
| @@ -120,7 +117,7 @@ export default function UserTable({recordList}) { | |||
| checked={params.row.locked} | |||
| color="primary" | |||
| size="small" | |||
| //onChange={handleChange} | |||
| onClick={handleLock(params)} | |||
| /> | |||
| ); | |||
| }, | |||
| @@ -140,7 +137,7 @@ export default function UserTable({recordList}) { | |||
| }, | |||
| }} | |||
| pageSizeOptions={[5, 10]} | |||
| autoHeight = {true} | |||
| autoHeight | |||
| /> | |||
| </div> | |||
| ); | |||
| @@ -5,8 +5,7 @@ import { | |||
| import MainCard from "../../components/MainCard"; | |||
| import {useEffect, useState} from "react"; | |||
| import axios from "axios"; | |||
| import {apiPath} from "../../auth/utils"; | |||
| import {GET_USER_PATH} from "../../utils/ApiPathConst"; | |||
| import {GLD_USER_PATH} from "../../utils/ApiPathConst"; | |||
| import * as React from "react"; | |||
| // import LoadingComponent from "../extra-pages/LoadingComponent"; | |||
| @@ -25,10 +24,11 @@ const UserSettingPage = () => { | |||
| const [record,setRecord] = useState([]); | |||
| const [searchCriteria, setSearchCriteria] = useState({}); | |||
| const [onReady, setOnReady] = useState(false); | |||
| const [changelocked, setChangeLocked] = React.useState(false); | |||
| useEffect(() => { | |||
| getUserList(); | |||
| }, []); | |||
| }, [changelocked]); | |||
| useEffect(() => { | |||
| setOnReady(true); | |||
| @@ -39,7 +39,7 @@ const UserSettingPage = () => { | |||
| }, [searchCriteria]); | |||
| function getUserList(){ | |||
| axios.get(`${apiPath}${GET_USER_PATH}`, | |||
| axios.get(`${GLD_USER_PATH}`, | |||
| {params: searchCriteria} | |||
| ) | |||
| .then((response) => { | |||
| @@ -78,6 +78,7 @@ const UserSettingPage = () => { | |||
| > | |||
| <EventTable | |||
| recordList={record} | |||
| setChangeLocked={setChangeLocked} | |||
| /> | |||
| </MainCard> | |||
| </Grid> | |||
| @@ -145,7 +145,7 @@ export default function UserTable_Individual({recordList}) { | |||
| }, | |||
| }} | |||
| pageSizeOptions={[5, 10]} | |||
| autoHeight = {true} | |||
| autoHeight | |||
| /> | |||
| </div> | |||
| ); | |||
| @@ -139,7 +139,7 @@ export default function UserTable_Organization({recordList}) { | |||
| }, | |||
| }} | |||
| pageSizeOptions={[5, 10]} | |||
| autoHeight = {true} | |||
| autoHeight | |||
| /> | |||
| </div> | |||
| ); | |||
| @@ -8,7 +8,7 @@ export const GET_GROUP_COMBO_PATH = '/group/combo'; | |||
| export const GET_GROUP_MEMBER_LIST_PATH = '/group/member'; | |||
| export const GET_GROUP_AUTH_LIST = '/group/auth/combo'; | |||
| export const GET_USER_PATH = '/user/gld'; | |||
| export const GLD_USER_PATH = apiPath+'/user/gld'; | |||
| export const GET_AUTH_LIST = '/user/auth/combo'; | |||
| export const GET_USER_COMBO_LIST = '/user/combo'; | |||
| export const GET_USER_LOCK = apiPath+'/user/lock'; | |||
| @@ -41,6 +41,12 @@ export const POST_CAPTCHA = apiPath+'/captcha'; | |||
| export const POST_PUBLIC_USER_REGISTER = apiPath+'/user/register'; | |||
| //Public | |||
| export const GET_PUBLIC_ORG_USER_LIST = apiPath+'/user/listOrg'; | |||
| export const GET_PUBLIC_ORG_USER_LIST = apiPath+'/user/listOrg'; | |||
| //GLD User | |||
| export const POST_ADMIN_USER_REGISTER = apiPath+'/user/registry'; | |||
| export const DELETE_USER = apiPath+'/user'; | |||
| //User Group | |||
| export const POST_AND_UPDATE_USER_GROUP = apiPath+'/group/save'; | |||
| @@ -1,3 +1,16 @@ | |||
| // import {toast} from "react-toastify"; | |||
| import DialogTitle from "@mui/material/DialogTitle"; | |||
| import DialogContent from "@mui/material/DialogContent"; | |||
| import DialogContentText from "@mui/material/DialogContentText"; | |||
| import DialogActions from "@mui/material/DialogActions"; | |||
| import {Button} from "@mui/material"; | |||
| import Dialog from "@mui/material/Dialog"; | |||
| import * as React from "react"; | |||
| export function getDeletedRecordWithRefList(referenceList, updatedList){ | |||
| return referenceList.filter(x => !updatedList.includes(x)) ; | |||
| } | |||
| export function getIdList(input){ | |||
| const output = input.map(function (obj) { | |||
| return obj.id; | |||
| @@ -5,10 +18,93 @@ export function getIdList(input){ | |||
| return output; | |||
| } | |||
| export function getObjectById(list, id){ | |||
| const obj = list.find((element) => { | |||
| return element.id === id; | |||
| }); | |||
| return obj === undefined || Object.keys(obj).length <= 0? null : obj | |||
| } | |||
| export function removeObjectWithId(arr, id) { | |||
| // Making a copy with the Array from() method | |||
| const arrCopy = Array.from(arr); | |||
| const objWithIdIndex = arrCopy.findIndex((obj) => obj.id === id); | |||
| arrCopy.splice(objWithIdIndex, 1); | |||
| return arrCopy; | |||
| } | |||
| export function getDateString(queryDateArray) { | |||
| return( | |||
| queryDateArray[0] | |||
| + "-" + | |||
| queryDateArray[1] | |||
| + "-" + | |||
| queryDateArray[2] | |||
| + " " + | |||
| queryDateArray[3] | |||
| + ":" + | |||
| queryDateArray[4] | |||
| + ":" + | |||
| queryDateArray[5] | |||
| ) | |||
| } | |||
| // export const notifySaveSuccess = () => toast.success('Save success!', { | |||
| // position: "bottom-right", | |||
| // autoClose: 5000, | |||
| // hideProgressBar: false, | |||
| // closeOnClick: true, | |||
| // pauseOnHover: true, | |||
| // draggable: true, | |||
| // progress: undefined, | |||
| // theme: "light", | |||
| // }); | |||
| export const notifyDeleteSuccess = () => toast.success('Delete Success!', { | |||
| position: "bottom-right", | |||
| autoClose: 5000, | |||
| hideProgressBar: false, | |||
| closeOnClick: true, | |||
| pauseOnHover: true, | |||
| draggable: true, | |||
| progress: undefined, | |||
| theme: "light", | |||
| }); | |||
| export function prettyJson(json){ | |||
| console.log(json); | |||
| console.log(JSON.stringify(json, null, 2)); | |||
| return ( | |||
| <div>{JSON.stringify(json, null, 2)}</div> | |||
| ); | |||
| } | |||
| export function GeneralConfirmWindow({ | |||
| isWindowOpen, | |||
| title, | |||
| content, | |||
| onNormalClose, | |||
| onConfirmClose}){ | |||
| return ( | |||
| <Dialog | |||
| open={isWindowOpen} | |||
| onClose={onNormalClose} | |||
| aria-labelledby="alert-dialog-title" | |||
| aria-describedby="alert-dialog-description" | |||
| > | |||
| <DialogTitle id="alert-dialog-title"> | |||
| {title} | |||
| </DialogTitle> | |||
| <DialogContent> | |||
| <DialogContentText id="alert-dialog-description"> | |||
| {content} | |||
| </DialogContentText> | |||
| </DialogContent> | |||
| <DialogActions> | |||
| <Button onClick={onNormalClose}>Cancel</Button> | |||
| <Button onClick={onConfirmClose} autoFocus> | |||
| Confirm | |||
| </Button> | |||
| </DialogActions> | |||
| </Dialog> | |||
| ) | |||
| } | |||