kelvinsuen
/
LIONER-frontend
1
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

update user page

master
kelvinsuen 4 个月前
父节点
2a08338e8f
当前提交
0d5014818c
共有 7 个文件被更改，包括 194 次插入 和 464 次删除
分列视图
Diff 选项
显示统计 下载 Patch 文件 下载 Diff 文件
  1. +17
    -19
      src/components/AutoLogoutProvider.js
  2. +72
    -265
      src/pages/lionerUserDetailPage/UserInformationCard.js
  3. +38
    -42
      src/pages/lionerUserDetailPage/index.js
  4. +31
    -84
      src/pages/lionerUserSearchPage/UserSearchForm.js
  5. +23
    -41
      src/pages/lionerUserSearchPage/UserTable.js
  6. +9
    -9
      src/pages/lionerUserSearchPage/index.js
  7. +4
    -4
      src/utils/ComboConst.js

+ 17
- 19
src/components/AutoLogoutProvider.js 查看文件

@@ -26,27 +26,25 @@ const AutoLogoutProvider = ({ children }) => {
const userData = getUserData();
const checked = localStorage.getItem("checkPasswordExpired");
if(userData !== null){
if(!userData.lotusNotesUser){
//system user
if(checked === "false"){
axios.get(`${apiPath}${GET_USER_PASSWORD_DURATION}`,{
params:{
id: userData.id
//system user
if(checked === "false"){
axios.get(`${apiPath}${GET_USER_PASSWORD_DURATION}`,{
params:{
id: userData.id
}
})
.then((response) => {
if (response.status === 200) {
setForceChangePassword(response.data.expired);
if(!response.data.expired){
localStorage.setItem("checkPasswordExpired",true);
}
}
})
.then((response) => {
if (response.status === 200) {
setForceChangePassword(response.data.expired);
if(!response.data.expired){
localStorage.setItem("checkPasswordExpired",true);
}
}
})
.catch(error => {
console.log(error);
return false;
});
}
.catch(error => {
console.log(error);
return false;
});
}
}
}, []);


+ 72
- 265
src/pages/lionerUserDetailPage/UserInformationCard.js 查看文件

@@ -29,6 +29,7 @@ import {parseString} from "xml2js";
import {useParams} from "react-router-dom";
import {isObjEmpty} from "../../utils/Utils";
import {GENERAL_RED_COLOR} from "../../themes/colorConst";
import {USER_GROUP_COMBO} from "../../utils/ComboConst";

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

@@ -37,181 +38,78 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,
requestError}) => {
const params = useParams();
const [currentUserData, setCurrentUserData] = React.useState({});
const [subDivision, setSubDivision] = useState(null);
const [userGroup, setUserGroup] = useState(null);
const [locked, setLocked] = useState(false);
const [isLotusNoteUser, setIsLotusNoteUser] = useState(false);
const [lotusNoteUserList, setLotusNoteUserList] = useState([])
const [selectedLotusUser, setSelectedLotusUser] = useState(null);
const [receiveReminder, setReceiveReminder] = useState(false);
const [subDivisionList, setSubDivisionList] = useState([]);
const [userGroupList, setUserGroupList] = useState([]);
const [showPassword, setShowPassword] = React.useState(false);
const [onReady, setOnReady] = useState(false);
const {register, getValues, setValue} = useForm()
const [errors, setErrors] = useState({});
const [tempLotusDetail, setTempLotusDetail] = useState(null);

const handleClickShowPassword = () => setShowPassword((show) => !show);
const handleMouseDownPassword = () => setShowPassword(!showPassword);

const handleReceiveSwitchToggle = () => {
setReceiveReminder(!receiveReminder);
};

const handleLockSwitchToggle = () => {
setLocked(!locked);
};

const handleLocationCodeChange = (event, value) => {
if (value.length >2 && !value.includes("(")) {
fetchLotusUserList(value);
} else {
setLotusNoteUserList(lotusNoteUserList);
}
};
// Function to fetch user name options based on locationCode
const fetchLotusUserListDetail = async (input) => {
try {
axios.get(`${apiPath}${GET_LDAP_USER_LIST}`,{
params:{
"EMSDlotus": input,
}
})
.then((response) => {
if (response.status === 200) {
let xml = response.data;
parseString(xml, function (err, result) {
const tempRecordList = convertXmlToObject(result.RECORDS.RECORD);
const tempRecord = getObjectByValueName(tempRecordList,"EMSDlotus", input)
setTempLotusDetail(tempRecord);
});
}
})
.catch(error => {
console.log(error);
return false;
});
} catch (error) {
console.error('Error fetching user name options:', error);
}
};

const fetchLotusUserList = async (input) => {
try {
axios.get(`${apiPath}${GET_LDAP_USER_COMBO}`,{
params:{
"username": input,
}
})
.then((response) => {
if (response.status === 200) {
setLotusNoteUserList(response.data.records);
}
})
.catch(error => {
console.log(error);
return false;
});
} catch (error) {
console.error('Error fetching user name options:', error);
}
};

// const validateEmail = (email) => {
// // Regular expression for email validation
// const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
// return emailRegex.test(email);
// };

useEffect(() => {
if(!isObjEmpty(selectedLotusUser)){
//set basic info
if(isNewRecord){
setValue('username', selectedLotusUser.label);
}
setValue('email', selectedLotusUser.mail);
fetchLotusUserListDetail(selectedLotusUser.label);
}
else{
if(isNewRecord){
setValue('username', null);
setValue('post', null);
setValue('fullname',null);
setValue('email', null);
setValue("phone1", null);
}
}
}, [selectedLotusUser]);

useEffect(()=>{
if(!isObjEmpty(tempLotusDetail)){
setValue('post',tempLotusDetail.EMSDtitle);
setValue('fullname',tempLotusDetail.EMSDlastname + " " + tempLotusDetail.EMSDfirstname);
setValue("phone1", tempLotusDetail.EMSDofftel.substring(0,8));
}
else if(isNewRecord){
setValue('post',"");
setValue('fullname',"");
setValue("phone1","");
}
},[tempLotusDetail]);
useEffect(() => {
axios.get(`${apiPath}${GET_SUB_DIVISION_COMBO_LIST}`)
.then((response) => {
if (response.status === 200) {
setSubDivisionList(response.data.records);
}
})
.catch(error => {
console.log(error);
return false;
});
// axios.get(`${apiPath}${GET_USER_GROUP_COMBO_LIST}`)
// .then((response) => {
// if (response.status === 200) {
// setSubDivisionList(response.data.records);
// }
// })
// .catch(error => {
// console.log(error);
// return false;
// });
}, []);

useEffect(() => {
setErrors(requestError);
}, [requestError]);

useEffect(() => {
if(isNewRecord){
setValue("password", null);
setValue("username", null);
}
}, [isLotusNoteUser]);

useEffect(() => {
//if user data from parent are not null
if (Object.keys(userData).length > 0 && userData !== undefined) {
setIsLotusNoteUser(userData.data.lotusNotesUser);
setCurrentUserData(userData.data);
}
}, [userData]);

useEffect(() => {
//if state data are ready and assign to different field
if (Object.keys(currentUserData).length > 0 &&currentUserData !== undefined) {
if (Object.keys(currentUserData).length > 0 && currentUserData !== undefined) {
setLocked(currentUserData.locked);
setReceiveReminder(currentUserData.reminderFlag);
setSubDivision(getObjectById(subDivisionList, currentUserData.subDivisionId));
setUserGroup(USER_GROUP_COMBO.find(item => item.id == userData.groupId));
setOnReady(true);
}
else if(isNewRecord){
setLocked(false);
setOnReady(true);
}
}, [currentUserData,subDivisionList]);
}, [currentUserData]);

useEffect(() => {
//upload latest data to parent
if(isCollectData){
const values = getValues();
let submitUserGroupId = userGroup?.key;
if (userGroup?.key == userData.groupId) { // User Group is not updated
submitUserGroupId = 0;
}
const values = {
...getValues(),
userGroupId:submitUserGroupId
};

const formErrors = {};

if (isStringEmptyAfterTrim(values.username) ) {
formErrors.username = 'User Name is required';
}

if (isStringEmptyAfterTrim(values.password) && !isLotusNoteUser && isNewRecord){
if (isStringEmptyAfterTrim(values.password) && isNewRecord){
formErrors.password = "Password is required"
}

@@ -219,18 +117,17 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,
formErrors.fullname = 'Full Name is required';
}

if(isStringEmptyAfterTrim(values.email)){
formErrors.email = 'Email is required';
if (userGroup == null) {
formErrors.userGroup = 'User Group is required';
}

// if(isStringEmptyAfterTrim(values.email)){
// formErrors.email = 'Email is required';
// }
// else if(!validateEmail(values.email)){
// formErrors.email = 'Invalid Email';
// }


if(subDivision === null){
formErrors.subDivision = 'Sub-Division is required';
}

setErrors(formErrors);

if (Object.keys(formErrors).length === 0) {
@@ -253,11 +150,7 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,
else if(!response.data.isTaken){
const objectData ={
...values,
lotusNotesUser: isLotusNoteUser ? true : selectedLotusUser !== null,
selectedLotusUser: (isLotusNoteUser && selectedLotusUser !== null)? selectedLotusUser.account : null,
subDivisionId: subDivision !== null ? subDivision.id : null,
locked: locked,
reminderFlag: receiveReminder,
}
updateUserObject(objectData);
}
@@ -282,63 +175,15 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,
:
<MainCard elevation={0}
content={false}
sx={{height:'77.5vh'}}
// sx={{height:'77.5vh'}}
>
<Typography variant="h5" sx={{mt: 1.5, ml: 3, mb: 1}}>
Information
</Typography>

<form>
<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb:1}}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
<Typography variant="lionerSize" component="span">
Lotus Note User:
</Typography>
</Grid>

<Grid item xs={1} s={1} md={1} lg={1}>
<Checkbox
checked={isLotusNoteUser}
onChange={(event) => setIsLotusNoteUser(event.target.checked)}
name="isLotusNoteUser"
color="primary"
size="medium"
disabled={!isNewRecord}
/>
</Grid>

<Grid item xs={6} s={6} md={6} lg={5}>
<Autocomplete
disablePortal
id="lotus-note-combo"
value={selectedLotusUser === null ? null : selectedLotusUser}
options={lotusNoteUserList}
disabled={!isLotusNoteUser || !isNewRecord}
size="small"
onInputChange={handleLocationCodeChange}
onChange={(event, newValue) => {
if(lotusNoteUserList.length >0){
if(newValue !== null){
if(getComboValueByLabel(lotusNoteUserList, newValue.label) !== null){
setSelectedLotusUser(newValue);
}
}
else{
setSelectedLotusUser(null);
}
}
}}
isOptionEqualToValue={isOptionEqualToValue}
renderInput={(params) => <TextField
{...params}
label={"Search LN User"}
/>}
/>
</Grid>
</Grid>
</Grid>
{/* <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb:1}}>
</Grid> */}

<Grid container>
<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 1}}>
@@ -362,9 +207,9 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,
value: currentUserData.username,
})}
id='username'
InputProps={{
readOnly: isLotusNoteUser,
}}
// InputProps={{
// readOnly: {},
// }}
disabled={!isNewRecord}
error={!!errors.username}
helperText={errors.username}
@@ -383,17 +228,11 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,
<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 1}}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
{isLotusNoteUser || !isNewRecord?
<Typography variant="lionerSize" component="span">
Password:
</Typography>
:
<Typography variant="lionerSize" component="span">
Password:
<Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
</Typography>
}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
<Typography variant="lionerSize" component="span">
Password:
{isNewRecord && (<Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>)}
</Typography>
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
@@ -405,7 +244,7 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,
{...register("password")}
id='password'
type={showPassword ? 'text' : 'password'}
disabled={isLotusNoteUser}
// disabled={}
error={!!errors.password}
autoComplete="off"
inputProps={{
@@ -480,30 +319,6 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,
</Grid>

<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 1}}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
<Typography variant="lionerSize" component="span">
Post:
</Typography>
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<FormControl fullWidth required>
<TextField
fullWidth
size="small"
autoComplete="off"
inputProps={{maxLength: 50}}
{...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: 1}}>
@@ -511,7 +326,7 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
<Typography variant="lionerSize" component="span">
Sub-Division:
User Group:
<Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
</Typography>
</Grid>
@@ -519,19 +334,24 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,
<Grid item xs={7} s={7} md={7} lg={6}>
<Autocomplete
disablePortal
id="sub-division-combo"
// {...register("userGroup",
// {
// value: USER_GROUP_COMBO.find(item => item.id = currentUserData.groupId),
// })}
id="userGroup"
size="small"
value={subDivision === null ? null : subDivision}
options={subDivisionList}
value= {userGroup}
// value={userGroup ?? null}
options={USER_GROUP_COMBO}//{userGroupList}
onChange={(event, newValue) => {
setSubDivision(newValue);
setUserGroup(newValue);
}}
renderInput={(params) => (
<TextField
{...params}
//label={content2}
error={!!errors.subDivision}
helperText={errors.subDivision}
error={!!errors.userGroup}
helperText={errors.userGroup}
InputProps={{
...params.InputProps,
style: {
@@ -558,7 +378,7 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
<Typography variant="lionerSize" component="span">
Email:
<Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
{/* <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography> */}
</Typography>
</Grid>

@@ -610,38 +430,25 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,
</Grid>

<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 1}}>
<Grid container>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
<Typography variant="lionerSize" component="span">
Receive Reminder:
<Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
</Typography>
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<Switch checked={receiveReminder} onChange={handleReceiveSwitchToggle} />
</Grid>

</Grid>
</Grid>
{!isNewRecord && (
<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 1}}>
<Grid container>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
<Typography variant="lionerSize" component="span">
Locked:
{/* <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography> */}
</Typography>
</Grid>

<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 1}}>
<Grid container>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
<Typography variant="lionerSize" component="span">
Locked:
<Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
</Typography>
</Grid>
<Grid item xs={7} s={7} md={7} lg={6}>
<Switch checked={locked} onChange={handleLockSwitchToggle} />
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<Switch checked={locked} onChange={handleLockSwitchToggle} />
</Grid>

</Grid>
</Grid>
)}

</Grid>
</form>


+ 38
- 42
src/pages/lionerUserDetailPage/index.js 查看文件

@@ -37,7 +37,7 @@ const UserMaintainPage = () => {
const [userData, setUserData] = React.useState({});
const [onReady, setOnReady] = useState(false);
const [isCollectData, setIsCollectData] = useState(false);
const [editedCustomerData, setEditedCustomerData] = useState({});
const [editedUserData, setEditedUserData] = useState({});
const [userGroupData,setUserGroupData] = useState([]);
const [userAuthData,setUserAuthData] = useState([]);
const [userConfirm, setUserConfirm] = useState(false);
@@ -45,7 +45,7 @@ const UserMaintainPage = () => {
const [requestError, setRequestError] = useState({});

function updateUserObject(userData) {
setEditedCustomerData(userData);
setEditedUserData(userData);
}

function updateUserGroupList(userGroupData){
@@ -96,7 +96,7 @@ const UserMaintainPage = () => {
// ==============================|| DELETE WINDOW RELATED ||============================== //

useEffect(() => {
if(params.id > 0 ){
if(params.id > 0){
axios.get(`${apiPath}${GET_USER_PATH}/${params.id}`)
.then((response) => {
if (response.status === 200) {
@@ -146,22 +146,18 @@ const UserMaintainPage = () => {
axios.post(`${apiPath}${CREATE_USER_PATH}`,
{
"id": parseInt(params.id),
"fullname": editedCustomerData.fullname.trim(),
"name": editedCustomerData.username.trim(),
"locked": editedCustomerData.locked,
"lotusNotesUser": editedCustomerData.lotusNotesUser,
"selectedLotusUser": editedCustomerData.selectedLotusUser,
"username": editedCustomerData.username.trim(),
"password": editedCustomerData.lotusNotesUser? null : editedCustomerData.password,
"phone1": editedCustomerData.phone1 === null ? "" : editedCustomerData.phone1.trim(),
"post": editedCustomerData.post === null ? "" : editedCustomerData.post.trim(),
"email": editedCustomerData.email === null ? "": editedCustomerData.email.trim(),
"reminderFlag": editedCustomerData.reminderFlag,
"subDivisionId": editedCustomerData.subDivisionId,
"addGroupIds": userGroupData,
"removeGroupIds": deletedUserGroup,
"addAuthIds": userAuthData,
"removeAuthIds": deletedUserAuth,
"fullname": editedUserData.fullname.trim(),
"name": editedUserData.username.trim(),
"locked": editedUserData.locked,
"username": editedUserData.username.trim(),
"phone1": editedUserData.phone1 === null ? "" : editedUserData.phone1.trim(),
// "post": editedUserData.post === null ? "" : editedUserData.post.trim(),
"email": editedUserData.email === null ? "": editedUserData.email.trim(),
"userGroupId": editedUserData.userGroupId ?? null,
// "addGroupIds": userGroupData,
// "removeGroupIds": deletedUserGroup,
// "addAuthIds": userAuthData,
// "removeAuthIds": deletedUserAuth,
},
).then((response) => {
if (response.status === 200) {
@@ -190,7 +186,7 @@ const UserMaintainPage = () => {
}
setUserConfirm(false);
setIsCollectData(false);
}, [editedCustomerData]);
}, [editedUserData]);

return (
!onReady ?
@@ -202,7 +198,7 @@ const UserMaintainPage = () => {
<Typography variant="h5">{isNewRecord? "Create User" : "Maintain User"}</Typography>
</Grid>
{/*col 1*/}
<Grid item xs={12} md={12} lg={5}>
<Grid item xs={12} md={12}/* lg={5}*/>
<UserInformationCard
updateUserObject={updateUserObject}
userData={userData}
@@ -214,7 +210,7 @@ const UserMaintainPage = () => {
/>
</Grid>
{/*col 2*/}
<Grid item xs={12} md={12} lg={7}>
{/*<Grid item xs={12} md={12} lg={7}>
<Grid container>
<Grid item xs={12} md={12} lg={12} >
<UserGroupCard
@@ -236,7 +232,7 @@ const UserMaintainPage = () => {

</Grid>

</Grid>
</Grid>*/}

{/*bottom button*/}
<Grid item s={12} md={12} lg={12} sx={{mt:-1.5}} alignItems={"end"} justifyContent="center">
@@ -262,25 +258,25 @@ const UserMaintainPage = () => {
Cancel
</Button>
</Grid>
<Grid item sx={{ml:{xs:1.5, md:1.5, lg:1.5}, mr:1.5}}>
<Button
variant="contained"
color="delete"
disabled={isNewRecord}
onClick={handleDeleteClick}
>
Delete
</Button>
<GeneralConfirmWindow
isWindowOpen={isWindowOpen}
title={"Attention"}
//content={`Confirm to delete User "${userData.data.username}" ?`}
content={"Are you sure to delete this user?"}
onNormalClose={handleClose}
onConfirmClose={deleteData}
/>
</Grid>
{!isNewRecord && (
<Grid item sx={{ml:{xs:1.5, md:1.5, lg:1.5}, mr:1.5}}>
<Button
variant="contained"
color="delete"
onClick={handleDeleteClick}
>
Delete
</Button>
<GeneralConfirmWindow
isWindowOpen={isWindowOpen}
title={"Attention"}
//content={`Confirm to delete User "${userData.data.username}" ?`}
content={"Are you sure to delete this user?"}
onNormalClose={handleClose}
onConfirmClose={deleteData}
/>
</Grid>
)}

</Grid>
</ThemeProvider>


+ 31
- 84
src/pages/lionerUserSearchPage/UserSearchForm.js 查看文件

@@ -12,13 +12,12 @@ import {useEffect, useState} from "react";
import Autocomplete from '@mui/material/Autocomplete';
import Checkbox from "@mui/material/Checkbox";
import * as React from "react";
import axios from "axios";
import {apiPath} from "../../auth/utils";
import {GET_SUB_DIVISION_COMBO_LIST} from "../../utils/ApiPathConst";
// import {GET_USER_GROUP_COMBO_LIST} from "../../utils/ApiPathConst";
import {useNavigate} from 'react-router-dom';
import {ThemeProvider} from "@emotion/react";
import {LIONER_BUTTON_THEME} from "../../themes/colorConst";
import {USER_TYPE_COMBO} from "../../utils/ComboConst";
import {USER_GROUP_COMBO} from "../../utils/ComboConst";
import {CARD_MAX_WIDTH} from "../../themes/themeConst";

// ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -27,9 +26,9 @@ const UserSearchForm = ({applySearch}) => {

const navigate = useNavigate()
const [type, setType] = useState([]);
const [subDivision, setSubDivision] = useState(null);
const [userGroup, setUserGroup] = useState(null);
const [selectedUserType, setSelectedUserType] = useState(null);
const [subDivisionList, setSubDivisionList] = useState([]);
const [userGroupList, setUserGroupList] = useState([]);
const [locked, setLocked] = useState(false);


@@ -46,31 +45,31 @@ const UserSearchForm = ({applySearch}) => {
username: data.userName,
fullname: data.fullName,
post: data.post,
subDivisionId: subDivision !== null ? subDivision.id : null,
groupId: userGroup !== null ? userGroup.id : null,
email: data.email,
phone: data.phone,
isLotusNotesUser: selectedUserType === null ? null : selectedUserType.id === 1 ? null : selectedUserType.id === 2,
locked: locked,
};
applySearch(temp);
};

useEffect(() => {
axios.get(`${apiPath}${GET_SUB_DIVISION_COMBO_LIST}`)
.then((response) => {
if (response.status === 200) {
setSubDivisionList(response.data.records);
}
})
.catch(error => {
console.log(error);
return false;
});
// axios.get(`${apiPath}${GET_USER_GROUP_COMBO_LIST}`)
// .then((response) => {
// if (response.status === 200) {
// setUserGroupList(response.data.records);
// }
// })
// .catch(error => {
// console.log(error);
// return false;
// });

}, []);

function resetForm(){
setType([]);
setSubDivision(null);
setUserGroup(null);
setSelectedUserType(null);
setLocked(false);
reset();
@@ -120,29 +119,16 @@ const UserSearchForm = ({applySearch}) => {

<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}>
<Typography variant="lionerLabel" component="span">
Post
</Typography>
<TextField
fullWidth
{...register("post")}
inputProps={{maxLength: 50}}
id="post"
autoComplete="off"
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}>
<Typography variant="lionerLabel" component="span">
Sub-Division
User Group
</Typography>
<Autocomplete
disablePortal
id="sub-division-combo"
id="user-group-combo"
size="small"
value={subDivision === null? null : subDivision}
options={subDivisionList}
value={userGroup === null? null : userGroup}
options={USER_GROUP_COMBO}//{userGroupList}
onChange={(event, newValue) => {
setSubDivision(newValue);
setUserGroup(newValue);
}}
renderInput={(params) => <TextField {...params}/>}
/>
@@ -174,57 +160,18 @@ const UserSearchForm = ({applySearch}) => {
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}>
{/* <Grid item xs={9} s={6} md={5} lg={3} sx={{mt:2.5,ml:3, mr:3 }}>
<Typography variant="lionerLabel" component="span">
User Type
Show Locked User Only
</Typography>
<Autocomplete
disablePortal
id="user-type-combo"
size="small"
value={selectedUserType === null? null : selectedUserType}
options={USER_TYPE_COMBO}
onChange={(event, newValue) => {
setSelectedUserType(newValue);
}}
renderInput={(params) => <TextField {...params}/>}
<Checkbox
checked={locked}
onChange={(event) => setLocked(event.target.checked)}
name="checked"
color="primary"
size="medium"
/>
{/*<FormControlLabel*/}
{/* control={*/}
{/* <Checkbox*/}
{/* checked={selectedUserType}*/}
{/* onChange={(event) => setSelectedUserType(event.target.checked)}*/}
{/* name="checked"*/}
{/* color="primary"*/}
{/* size="medium"*/}
{/* />*/}
{/* }*/}
{/* label={<Typography variant="lionerLabel">Lotus Notes User</Typography>}*/}
{/*/>*/}
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{mt:2.5,ml:3, mr:3 }}>
<FormControlLabel
control={
<Checkbox
checked={locked}
onChange={(event) => setLocked(event.target.checked)}
name="checked"
color="primary"
size="medium"
/>
}
label={<Typography variant="lionerLabel">Locked</Typography>}
/>
</Grid>
{/*<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}>*/}
{/* <TextField*/}
{/* fullWidth*/}
{/* {...register("subDivisionId")}*/}
{/* id="subDivision"*/}
{/* label="Sub-Division"*/}
{/* />*/}
{/*</Grid>*/}
</Grid> */}

</Grid>



+ 23
- 41
src/pages/lionerUserSearchPage/UserTable.js 查看文件

@@ -11,7 +11,9 @@ import { useTheme } from '@mui/material/styles';
import Checkbox from '@mui/material/Checkbox';
import {CustomNoRowsOverlay} from "../../utils/CommonFunction";
import {LIONER_BUTTON_THEME} from "../../themes/colorConst";
import {USER_GROUP_COMBO} from "../../utils/ComboConst";
import {ThemeProvider} from "@emotion/react";

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

export default function UserTable({recordList}) {
@@ -70,30 +72,23 @@ export default function UserTable({recordList}) {
flex: 0.75,
},
{
id: 'post',
field: 'post',
headerName: 'Post',
id: 'groupId',
field: 'groupId',
headerName: 'User Group',
flex: 0.5,
},
{
id: 'email',
field: 'email',
headerName: 'Email',
flex: 1.45,
renderCell: (params) => {
const userGroup = USER_GROUP_COMBO.find(item => item.id === params.value)?? {label: "N/A"};
return (
<div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', whiteSpace: 'normal', wordBreak: 'break-word'}}>
{params.value}
{userGroup.label}
</div>
);
}
},
{
id: 'subDivision',
field: 'subDivision',
//type: 'date',
//sortable: false,
headerName: 'Sub-Division',
id: 'email',
field: 'email',
headerName: 'Email',
flex: 1.45,
renderCell: (params) => {
return (
@@ -103,25 +98,6 @@ export default function UserTable({recordList}) {
);
}
},
{
id: 'lotusNotesUser',
field: 'lotusNotesUser',
type: 'bool',
headerName: 'Lotus Notes',
flex: 0.63,
renderCell: (params) => {
return (
<Checkbox
theme={theme}
key="locked"
checked={params.row.lotusNotesUser}
color="primary"
size="medium"
//onChange={handleChange}
/>
);
},
},
{
id: 'locked',
field: 'locked',
@@ -130,14 +106,20 @@ export default function UserTable({recordList}) {
flex: 0.5,
renderCell: (params) => {
return (
<Checkbox
theme={theme}
key="locked"
checked={params.row.locked}
color="primary"
size="medium"
//onChange={handleChange}
<input
type="checkbox"
checked={params.row.locked}
// onClick={handleClick} // Prevent click effect
/>
// <Checkbox
// theme={theme}
// key="locked"
// checked={params.row.locked}
// color="primary"
// size="medium"
// disabled
// //onChange={handleChange}
// />
);
},
},


+ 9
- 9
src/pages/lionerUserSearchPage/index.js 查看文件

@@ -28,10 +28,6 @@ const UserSettingPage = () => {
getUserList();
}, []);

useEffect(() => {
setOnReady(true);
}, [record]);

useEffect(() => {
getUserList();
}, [searchCriteria]);
@@ -42,7 +38,11 @@ const UserSettingPage = () => {
)
.then((response) => {
if (response.status === 200) {
setRecord(response.data);
const suId = response.data.find(item => item.groupId == 3)?.id;
const res = response.data.filter(item => item?.id !== suId);

setRecord(res);
setOnReady(true);
}
})
.catch(error => {
@@ -56,9 +56,6 @@ const UserSettingPage = () => {
}

return (
!onReady ?
<LoadingComponent/>
:
<Grid container rowSpacing={3} columnSpacing={2.75}>
<ThemeProvider theme={LIONER_FORM_THEME}>
<Grid item xs={12} md={12} lg={12} sx={{mt:-1}}>
@@ -76,6 +73,9 @@ const UserSettingPage = () => {
<SearchForm applySearch={applySearch}/>
</Grid>
{/*row 2*/}
{!onReady ?
<LoadingComponent/>
:
<Grid item xs={12} md={12} lg={12} sx={{mt:{lg:-1.5}}}>
<MainCard elevation={0}
content={false}
@@ -85,7 +85,7 @@ const UserSettingPage = () => {
recordList={record}
/>
</MainCard>
</Grid>
</Grid>}
</ThemeProvider>
</Grid>



+ 4
- 4
src/utils/ComboConst.js 查看文件

@@ -50,10 +50,10 @@ export const MODULE_COMBO = [
{id:3, key: 3, label: 'Award'},
];

export const USER_TYPE_COMBO = [
{id:1, key: 1, label: 'All Type'},
{id:2, key: 2, label: 'Lotus Note User'},
{id:3, key: 3, label: 'System User'},
export const USER_GROUP_COMBO = [
// {id:0, key: 0, label: 'System Admin'},
{id:1, key: 1, label: 'Case Officer'},
{id:2, key: 2, label: 'Administrator'},
];

export const EVENT_REGION_COMBO = [


撰写 预览
正在加载...
取消
保存