kelvinsuen
/
LIONER-frontend
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

update user page

master
kelvinsuen 4 weeks ago
parent
2a08338e8f
commit
0d5014818c
7 changed files with 194 additions and 464 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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 View File

@@ -26,27 +26,25 @@ const AutoLogoutProvider = ({ children }) => {
const userData = getUserData(); const userData = getUserData();
const checked = localStorage.getItem("checkPasswordExpired"); const checked = localStorage.getItem("checkPasswordExpired");
if(userData !== null){ 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 View File

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


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


@@ -37,181 +38,78 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,
requestError}) => { requestError}) => {
const params = useParams(); const params = useParams();
const [currentUserData, setCurrentUserData] = React.useState({}); const [currentUserData, setCurrentUserData] = React.useState({});
const [subDivision, setSubDivision] = useState(null);
const [userGroup, setUserGroup] = useState(null);
const [locked, setLocked] = useState(false); 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 [showPassword, setShowPassword] = React.useState(false);
const [onReady, setOnReady] = useState(false); const [onReady, setOnReady] = useState(false);
const {register, getValues, setValue} = useForm() const {register, getValues, setValue} = useForm()
const [errors, setErrors] = useState({}); const [errors, setErrors] = useState({});
const [tempLotusDetail, setTempLotusDetail] = useState(null);


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


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

const handleLockSwitchToggle = () => { const handleLockSwitchToggle = () => {
setLocked(!locked); 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(() => { 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(() => { useEffect(() => {
setErrors(requestError); setErrors(requestError);
}, [requestError]); }, [requestError]);


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

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


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


useEffect(() => { useEffect(() => {
//upload latest data to parent //upload latest data to parent
if(isCollectData){ 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 = {}; const formErrors = {};


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


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


@@ -219,18 +117,17 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,
formErrors.fullname = 'Full Name is required'; 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)){ // else if(!validateEmail(values.email)){
// formErrors.email = 'Invalid Email'; // formErrors.email = 'Invalid Email';
// } // }



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

setErrors(formErrors); setErrors(formErrors);


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


<form> <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 container>
<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 1}}> <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, value: currentUserData.username,
})} })}
id='username' id='username'
InputProps={{
readOnly: isLotusNoteUser,
}}
// InputProps={{
// readOnly: {},
// }}
disabled={!isNewRecord} disabled={!isNewRecord}
error={!!errors.username} error={!!errors.username}
helperText={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 item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 1}}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4} <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>


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


<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 1}}> <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>


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


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


<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 1}}> <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> </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>
</Grid>
)}


</Grid> </Grid>
</form> </form>


+ 38
- 42
src/pages/lionerUserDetailPage/index.js View File

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


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


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


useEffect(() => { useEffect(() => {
if(params.id > 0 ){
if(params.id > 0){
axios.get(`${apiPath}${GET_USER_PATH}/${params.id}`) axios.get(`${apiPath}${GET_USER_PATH}/${params.id}`)
.then((response) => { .then((response) => {
if (response.status === 200) { if (response.status === 200) {
@@ -146,22 +146,18 @@ const UserMaintainPage = () => {
axios.post(`${apiPath}${CREATE_USER_PATH}`, axios.post(`${apiPath}${CREATE_USER_PATH}`,
{ {
"id": parseInt(params.id), "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) => { ).then((response) => {
if (response.status === 200) { if (response.status === 200) {
@@ -190,7 +186,7 @@ const UserMaintainPage = () => {
} }
setUserConfirm(false); setUserConfirm(false);
setIsCollectData(false); setIsCollectData(false);
}, [editedCustomerData]);
}, [editedUserData]);


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


</Grid> </Grid>


</Grid>
</Grid>*/}


{/*bottom button*/} {/*bottom button*/}
<Grid item s={12} md={12} lg={12} sx={{mt:-1.5}} alignItems={"end"} justifyContent="center"> <Grid item s={12} md={12} lg={12} sx={{mt:-1.5}} alignItems={"end"} justifyContent="center">
@@ -262,25 +258,25 @@ const UserMaintainPage = () => {
Cancel Cancel
</Button> </Button>
</Grid> </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> </Grid>
</ThemeProvider> </ThemeProvider>


+ 31
- 84
src/pages/lionerUserSearchPage/UserSearchForm.js View File

@@ -12,13 +12,12 @@ import {useEffect, useState} from "react";
import Autocomplete from '@mui/material/Autocomplete'; import Autocomplete from '@mui/material/Autocomplete';
import Checkbox from "@mui/material/Checkbox"; import Checkbox from "@mui/material/Checkbox";
import * as React from "react"; import * as React from "react";
import axios from "axios";
import {apiPath} from "../../auth/utils"; 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 {useNavigate} from 'react-router-dom';
import {ThemeProvider} from "@emotion/react"; import {ThemeProvider} from "@emotion/react";
import {LIONER_BUTTON_THEME} from "../../themes/colorConst"; 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"; import {CARD_MAX_WIDTH} from "../../themes/themeConst";


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


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




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


useEffect(() => { 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(){ function resetForm(){
setType([]); setType([]);
setSubDivision(null);
setUserGroup(null);
setSelectedUserType(null); setSelectedUserType(null);
setLocked(false); setLocked(false);
reset(); 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 }}> <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}>
<Typography variant="lionerLabel" component="span"> <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> </Typography>
<Autocomplete <Autocomplete
disablePortal disablePortal
id="sub-division-combo"
id="user-group-combo"
size="small" size="small"
value={subDivision === null? null : subDivision}
options={subDivisionList}
value={userGroup === null? null : userGroup}
options={USER_GROUP_COMBO}//{userGroupList}
onChange={(event, newValue) => { onChange={(event, newValue) => {
setSubDivision(newValue);
setUserGroup(newValue);
}} }}
renderInput={(params) => <TextField {...params}/>} renderInput={(params) => <TextField {...params}/>}
/> />
@@ -174,57 +160,18 @@ const UserSearchForm = ({applySearch}) => {
/> />
</Grid> </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"> <Typography variant="lionerLabel" component="span">
User Type
Show Locked User Only
</Typography> </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> </Grid>




+ 23
- 41
src/pages/lionerUserSearchPage/UserTable.js View File

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

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


export default function UserTable({recordList}) { export default function UserTable({recordList}) {
@@ -70,30 +72,23 @@ export default function UserTable({recordList}) {
flex: 0.75, flex: 0.75,
}, },
{ {
id: 'post',
field: 'post',
headerName: 'Post',
id: 'groupId',
field: 'groupId',
headerName: 'User Group',
flex: 0.5, flex: 0.5,
},
{
id: 'email',
field: 'email',
headerName: 'Email',
flex: 1.45,
renderCell: (params) => { renderCell: (params) => {
const userGroup = USER_GROUP_COMBO.find(item => item.id === params.value)?? {label: "N/A"};
return ( return (
<div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', whiteSpace: 'normal', wordBreak: 'break-word'}}> <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', whiteSpace: 'normal', wordBreak: 'break-word'}}>
{params.value}
{userGroup.label}
</div> </div>
); );
} }
}, },
{ {
id: 'subDivision',
field: 'subDivision',
//type: 'date',
//sortable: false,
headerName: 'Sub-Division',
id: 'email',
field: 'email',
headerName: 'Email',
flex: 1.45, flex: 1.45,
renderCell: (params) => { renderCell: (params) => {
return ( 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', id: 'locked',
field: 'locked', field: 'locked',
@@ -130,14 +106,20 @@ export default function UserTable({recordList}) {
flex: 0.5, flex: 0.5,
renderCell: (params) => { renderCell: (params) => {
return ( 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 View File

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


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

useEffect(() => { useEffect(() => {
getUserList(); getUserList();
}, [searchCriteria]); }, [searchCriteria]);
@@ -42,7 +38,11 @@ const UserSettingPage = () => {
) )
.then((response) => { .then((response) => {
if (response.status === 200) { 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 => { .catch(error => {
@@ -56,9 +56,6 @@ const UserSettingPage = () => {
} }


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




+ 4
- 4
src/utils/ComboConst.js View File

@@ -50,10 +50,10 @@ export const MODULE_COMBO = [
{id:3, key: 3, label: 'Award'}, {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 = [ export const EVENT_REGION_COMBO = [


Write Preview
Loading…
Cancel
Save