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

add public

master
Anna Ho 2 years ago
parent
47838f49c1
commit
ce24ace472
7 changed files with 379 additions and 106 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +252
    -0
      src/pages/pnspsUserDetailPage_Public/UserInformationCard_Public.js
  2. +107
    -0
      src/pages/pnspsUserDetailPage_Public/index.js
  3. +1
    -61
      src/pages/pnspsUserSearchPage_Public/UserSearchForm_Public.js
  4. +6
    -39
      src/pages/pnspsUserSearchPage_Public/UserTable_Public.js
  5. +3
    -3
      src/pages/pnspsUserSearchPage_Public/index.js
  6. +9
    -3
      src/routes/SettingRoutes.js
  7. +1
    -0
      src/utils/ApiPathConst.js

+ 252
- 0
src/pages/pnspsUserDetailPage_Public/UserInformationCard_Public.js View File

@@ -0,0 +1,252 @@
// material-ui
import {
Grid, TextField, Typography
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {useForm} from "react-hook-form";
import {useEffect, useState} from "react";
import Checkbox from "@mui/material/Checkbox";
import LoadingComponent from "../extra-pages/LoadingComponent";
//import {useParams} from "react-router-dom";

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


const UserInformationCard_Public = ({isCollectData, updateUserObject,userData}) => {

const readOnly = true;

//const params = useParams();
const [currentUserData, setCurrentUserData] = React.useState({});
const [locked, setLocked] = useState(false);
const [onReady, setOnReady] = useState(false);
const {register, getValues} = useForm()

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

useEffect(() => {
//if state data are ready and assign to different field
if (Object.keys(userData).length > 0 &&currentUserData !== undefined) {
setLocked(currentUserData.locked);
setOnReady(true);
}
}, [currentUserData]);

useEffect(() => {
//upload latest data to parent
const values = getValues();
const objectData ={
...values,
locked: locked,
}
updateUserObject(objectData);
}, [isCollectData]);

return (
!onReady ?
<LoadingComponent/>
:
<MainCard elevation={0}
border={false}
content={false}
>
<Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
Information
</Typography>


<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:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("userName",
{
value: currentUserData.username,
})}
id='username'
disabled
/>
</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'}}>
ID Type:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("idDocType")}
id='idDocType'
disabled
/>
</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'}}>
Identification No.:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("identification")}
id='identification'
disabled
/>
</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'}}>
English Name:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("enName",
{
value: currentUserData.fullname,
})}
id='enName'
disabled={readOnly}
/>
</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'}}>
Chinese Name:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("chName",
{
value: currentUserData.fullname,
})}
id='chName'
disabled={readOnly}
/>
</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'}}>
Post:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("post",
{
value: currentUserData.post,
})}
id='post'
/>
</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:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("email",
{
value: currentUserData.email,
})}
id='email'
/>
</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'}}>
Phone:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("phone1",
{
value: currentUserData.phone1,
})}
id='phone1'
/>
</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:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<Checkbox
checked={locked}
onChange={(event) => setLocked(event.target.checked)}
name="checked"
color="primary"
size="small"
/>
</Grid>
</Grid>
</Grid>

</Grid>

</form>
</MainCard>
);
};

export default UserInformationCard_Public;

+ 107
- 0
src/pages/pnspsUserDetailPage_Public/index.js View File

@@ -0,0 +1,107 @@
// material-ui
import {
Button,
Grid, Typography
} 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 UserInformationCard from "./UserInformationCard_Public";
import LoadingComponent from "../extra-pages/LoadingComponent";
import {GET_USER_PATH} from "../../utils/ApiPathConst";

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


const UserMaintainPage_Public = () => {
const params = useParams();
const [userData, setUserData] = React.useState({});
const [onReady, setOnReady] = useState(false);
const [isCollectData, setIsCollectData] = useState(false);
const [editedCustomerData, setEditedCustomerData] = useState({});
const [userConfirm, setUserConfirm] = useState(false);

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

const submitData = () => {
setUserConfirm(true);
setIsCollectData(!isCollectData);
}

useEffect(() => {
console.log(params)
axios.get(`${apiPath}${GET_USER_PATH}/${params.id}`)
.then((response) => {
if (response.status === 200) {
setUserData(response.data);
}
})
.catch(error => {
console.log(error);
return false;
});
}, []);

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

useEffect(() => {
if(userConfirm && onReady){
console.log("update in parents");
console.log(editedCustomerData);
}
setUserConfirm(false);
}, [editedCustomerData]);

return (
!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>
{/*col 1*/}
<Grid item xs={12} md={5} lg={5}>
<Grid container>
<Grid item xs={12} md={12} lg={12}>
<UserInformationCard
updateUserObject={updateUserObject}
userData={userData}
isCollectData={isCollectData}
/>
</Grid>

</Grid>
</Grid>
{/*col 2*/}

{/*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}}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={submitData}
>
Save User
</Button>
</Grid>
</Grid>
</Grid>
</Grid>
);
};

export default UserMaintainPage_Public;

+ 1
- 61
src/pages/pnspsUserSearchPage_Public/UserSearchForm_Public.js View File

@@ -8,35 +8,15 @@ import {
import MainCard from "../../components/MainCard"; import MainCard from "../../components/MainCard";
import {useForm} from "react-hook-form"; 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/pnspsUserSettingPage/DummyComboRecord";
import { useState} from "react";
import Checkbox from "@mui/material/Checkbox"; import Checkbox from "@mui/material/Checkbox";
import * as React from "react"; import * as React from "react";
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //


const subDivisionArray =[
...subDivision1,
...subDivision2,
...subDivision3,
...subDivision4,
...subDivision5,
...subDivision6
];


const UserSearchForm_Public = ({applySearch}) => { const UserSearchForm_Public = ({applySearch}) => {


const [type, setType] = useState([]); const [type, setType] = useState([]);
const [division, setDivision] = useState(null);
const [subDivision, setSubDivision] = useState(null);
const [isLotusNoteUser, setIsLotusNoteUser] = useState(false);
const [locked, setLocked] = useState(false); const [locked, setLocked] = useState(false);




@@ -52,27 +32,15 @@ const UserSearchForm_Public = ({applySearch}) => {
const temp = { const temp = {
username: data.userName, username: data.userName,
fullName: data.fullName, fullName: data.fullName,
subDivision: subDivision,
email: data.email, email: data.email,
phone: data.phone, phone: data.phone,
isLotusNoteUser: isLotusNoteUser,
locked: locked, locked: locked,
}; };
applySearch(temp); applySearch(temp);
}; };


useEffect(() => {
if(division != null){
setSubDivision(subDivisionArray[division.type-1][0]);
}

}, [division]);

function resetForm(){ function resetForm(){
setType([]); setType([]);
setDivision(null);
setSubDivision(null);
setIsLotusNoteUser(false);
setLocked(false); setLocked(false);
reset(); reset();
} }
@@ -110,19 +78,6 @@ const UserSearchForm_Public = ({applySearch}) => {
/> />
</Grid> </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}}> <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
<TextField <TextField
fullWidth fullWidth
@@ -141,21 +96,6 @@ const UserSearchForm_Public = ({applySearch}) => {
/> />
</Grid> </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}}> <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
<FormControlLabel <FormControlLabel
control={ control={


+ 6
- 39
src/pages/pnspsUserSearchPage_Public/UserTable_Public.js View File

@@ -4,7 +4,7 @@ import {
DataGrid, DataGrid,
GridActionsCellItem, GridActionsCellItem,
} from "@mui/x-data-grid"; } from "@mui/x-data-grid";
import EditIcon from '@mui/icons-material/Edit';
import VisibilityIcon from '@mui/icons-material/Visibility';
import {useEffect} from "react"; import {useEffect} from "react";
import {useNavigate} from "react-router-dom"; import {useNavigate} from "react-router-dom";
import { useTheme } from '@mui/material/styles'; import { useTheme } from '@mui/material/styles';
@@ -22,8 +22,8 @@ export default function UserTable_Public({recordList}) {
setRows(recordList); setRows(recordList);
}, [recordList]); }, [recordList]);


const handleEditClick = (id) => () => {
navigate('/user/'+ id);
const handleActionClick = (id) => () => {
navigate('/publicUser/'+ id);
}; };


const columns = [ const columns = [
@@ -37,10 +37,10 @@ export default function UserTable_Public({recordList}) {
return [ return [
<GridActionsCellItem <GridActionsCellItem
key="OutSave" key="OutSave"
icon={<EditIcon/>}
label="Edit"
icon={<VisibilityIcon/>}
label="View"
className="textPrimary" className="textPrimary"
onClick={handleEditClick(id)}
onClick={handleActionClick(id)}
color="primary" color="primary"
/>] />]
}, },
@@ -57,45 +57,12 @@ export default function UserTable_Public({recordList}) {
headerName: 'Full Name', headerName: 'Full Name',
flex: 1, flex: 1,
}, },
{
id: 'post',
field: 'post',
headerName: 'Post',
flex: 1,
},
{ {
id: 'email', id: 'email',
field: 'email', field: 'email',
headerName: 'Email', headerName: 'Email',
flex: 1, 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', id: 'locked',
field: 'locked', field: 'locked',


+ 3
- 3
src/pages/pnspsUserSearchPage_Public/index.js View File

@@ -8,7 +8,7 @@ import EventTable from "./UserTable_Public";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import axios from "axios"; import axios from "axios";
import {apiPath} from "../../auth/utils"; import {apiPath} from "../../auth/utils";
import {GET_USER_PATH} from "../../utils/ApiPathConst";
import {GET_PUBLIC_USER_PATH} from "../../utils/ApiPathConst";
import * as React from "react"; import * as React from "react";
import LoadingComponent from "../extra-pages/LoadingComponent"; import LoadingComponent from "../extra-pages/LoadingComponent";


@@ -33,7 +33,7 @@ const UserSearchPage_Public = () => {
}, [searchCriteria]); }, [searchCriteria]);


function getUserList(){ function getUserList(){
axios.get(`${apiPath}${GET_USER_PATH}`,
axios.get(`${apiPath}${GET_PUBLIC_USER_PATH}`,
{params: searchCriteria} {params: searchCriteria}
) )
.then((response) => { .then((response) => {
@@ -57,7 +57,7 @@ const UserSearchPage_Public = () => {
: :
<Grid container rowSpacing={4.5} columnSpacing={2.75}> <Grid container rowSpacing={4.5} columnSpacing={2.75}>
<Grid item xs={12} sx={{mb: -2.25}}> <Grid item xs={12} sx={{mb: -2.25}}>
<Typography variant="h5">View User</Typography>
<Typography variant="h5">View Public User</Typography>
</Grid> </Grid>


{/*row 1*/} {/*row 1*/}


+ 9
- 3
src/routes/SettingRoutes.js View File

@@ -9,6 +9,8 @@ const SettingPage = Loadable(lazy(() => import('pages/pnspsSettingPage')));
const PasswordPolicyPage = Loadable(lazy(()=> import('pages/pnspsPasswordPolicyPage'))) const PasswordPolicyPage = Loadable(lazy(()=> import('pages/pnspsPasswordPolicyPage')))
const UserSearchPage = Loadable(lazy(()=>import ('pages/pnspsUserSearchPage'))); const UserSearchPage = Loadable(lazy(()=>import ('pages/pnspsUserSearchPage')));
const UserMaintainPage = Loadable(lazy(() => import('pages/pnspsUserDetailPage'))); const UserMaintainPage = Loadable(lazy(() => import('pages/pnspsUserDetailPage')));
const UserSearchPage_Public = Loadable(lazy(()=>import ('pages/pnspsUserSearchPage_Public')));
const UserMaintainPage_Public = Loadable(lazy(() => import('pages/pnspsUserDetailPage_Public')));
const UserGroupSearchPage = Loadable(lazy(() => import('pages/pnspsUserGroupSearchPage'))); const UserGroupSearchPage = Loadable(lazy(() => import('pages/pnspsUserGroupSearchPage')));
const UserGroupDetailPage = Loadable(lazy(() => import('pages/pnspsUserGroupDetailPage'))); const UserGroupDetailPage = Loadable(lazy(() => import('pages/pnspsUserGroupDetailPage')));


@@ -31,12 +33,16 @@ const SettingRoutes = {
element: <UserSearchPage /> element: <UserSearchPage />
}, },
{ {
path: 'publicUserSearchview',
path: '/user/:id',
element: <UserMaintainPage />
},
{
path: 'publicUser',
element: <UserSearchPage_Public /> element: <UserSearchPage_Public />
}, },
{ {
path: '/user/:id',
element: <UserMaintainPage />
path: '/publicUser/:id',
element: <UserMaintainPage_Public />
}, },
{ {
path: 'setting', path: 'setting',


+ 1
- 0
src/utils/ApiPathConst.js View File

@@ -3,6 +3,7 @@ export const GET_GROUP_COMBO_PATH = "/group/combo"
export const GET_GROUP_MEMBER_LIST_PATH = "/group/member" export const GET_GROUP_MEMBER_LIST_PATH = "/group/member"
export const GET_GROUP_AUTH_LIST = "/group/auth/combo" export const GET_GROUP_AUTH_LIST = "/group/auth/combo"
export const GET_USER_PATH = "/user" export const GET_USER_PATH = "/user"
export const GET_PUBLIC_USER_PATH = "/user/public"
export const GET_AUTH_LIST = "/user/auth/combo" export const GET_AUTH_LIST = "/user/auth/combo"
export const GET_USER_COMBO_LIST = "/user/combo" export const GET_USER_COMBO_LIST = "/user/combo"



Write Preview
Loading…
Cancel
Save