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

add group detail page

master
Alex Cheung 2 years ago
parent
278fd366da
commit
b3cf6279d4
11 changed files with 676 additions and 30 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      src/pages/pnspsUserDetailPage/index.js
  2. +60
    -0
      src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js
  3. +80
    -0
      src/pages/pnspsUserGroupDetailPage/GroupAuthTable.js
  4. +133
    -0
      src/pages/pnspsUserGroupDetailPage/UserAddCard.js
  5. +91
    -0
      src/pages/pnspsUserGroupDetailPage/UserAddTable.js
  6. +105
    -0
      src/pages/pnspsUserGroupDetailPage/UserGroupInfoCard.js
  7. +137
    -0
      src/pages/pnspsUserGroupDetailPage/index.js
  8. +41
    -23
      src/pages/pnspsUserGroupSearchPage/index.js
  9. +9
    -4
      src/routes/SettingRoutes.js
  10. +5
    -2
      src/utils/ApiPathConst.js
  11. +14
    -0
      src/utils/CommonFunction.js

+ 1
- 1
src/pages/pnspsUserDetailPage/index.js View File

@@ -45,7 +45,7 @@ const UserMaintainPage = () => {
} }


useEffect(() => { useEffect(() => {
console.log(params)
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) {


+ 60
- 0
src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js View File

@@ -0,0 +1,60 @@
// material-ui
import {
Typography
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {useEffect, useState} from "react";
import LoadingComponent from "../extra-pages/LoadingComponent";
import GroupAuthTable from "./GroupAuthTable";

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


const GroupAuthCard = ({isCollectData, updateUserAuthList,userGroupData}) => {
const [currentAuthData, setCurrentAuthData] = React.useState({});
const [onReady, setOnReady] = useState(false);
const [selectedRow, setSelectedRow] = useState([]);

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

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

useEffect(() => {
//upload latest data to parent
updateUserAuthList(selectedRow);
}, [isCollectData]);


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

<GroupAuthTable
userAuth={userGroupData.authIds}
setSelectedRow={setSelectedRow}
/>
</MainCard>
);
};

export default GroupAuthCard;

+ 80
- 0
src/pages/pnspsUserGroupDetailPage/GroupAuthTable.js View File

@@ -0,0 +1,80 @@
// material-ui
import {
DataGrid,
} from "@mui/x-data-grid";
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_AUTH_LIST} from "../../utils/ApiPathConst";

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

export default function GroupAuthTable({setSelectedRow, userAuth}) {
const [authData, setAuthData] = useState([]);
const [onReady, setOnReady] = useState(false);
const [currentSelectedRow, setCurrentSelectedRow] = useState(userAuth);

useEffect(() => {
axios.get(`${apiPath}${GET_GROUP_AUTH_LIST}`)
.then((response) => {
if (response.status === 200) {
setAuthData(response.data.records);
}
})
.catch(error => {
console.log(error);
return false;
});
}, []);

useEffect(() => {
//if state data are ready and assign to different field
if (authData.length > 0) {
setOnReady(true);
}
}, [authData]);

const columns = [
{
id: 'module',
field: 'module',
headerName: 'Module',
flex: 1,
},
{
id: 'authority',
field: 'name',
headerName: 'Authority',
flex: 2,
},
];

return (
!onReady ?
<LoadingComponent/>
:
<div style={{height: '100%', width: '100%'}}>
<DataGrid
rows={authData}
columns={columns}
editMode="row"
initialState={{
pagination: {
paginationModel: {page: 0, pageSize: 20},
},
}}
pageSizeOptions={[10, 20, 30]}
checkboxSelection
rowSelectionModel={currentSelectedRow}
onRowSelectionModelChange={(ids) => {
console.log(ids);
setSelectedRow(ids);
setCurrentSelectedRow(ids);
}}
autoHeight
/>
</div>
);
}

+ 133
- 0
src/pages/pnspsUserGroupDetailPage/UserAddCard.js View File

@@ -0,0 +1,133 @@
// material-ui
import {
Button,
Grid, TextField,
Typography
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {useEffect, useState} from "react";
import LoadingComponent from "../extra-pages/LoadingComponent";
import UserAddTable from "./UserAddTable";
import {GET_GROUP_MEMBER_LIST_PATH, GET_USER_COMBO_LIST} from "../../utils/ApiPathConst";
import axios from "axios";
import {apiPath} from "../../auth/utils";
import Autocomplete from "@mui/material/Autocomplete";
import {getIdList} from "../../utils/CommonFunction";
// ==============================|| DASHBOARD - DEFAULT ||============================== //


const UserAddCard = ({isCollectData, updateGroupMember,userGroupData}) => {
const [currentUserData, setCurrentUserData] = React.useState({});
const [onReady, setOnReady] = useState(false);
const [groupUserData, setGroupUserData] = useState([]);
const [userComboList, setUserComboList] = useState([]);
const [selectedUser, setSelectedUser] = useState(null);

function updateUserList (){
const idList = getIdList(groupUserData);
if(!idList.includes(selectedUser.id)){
const userList = [...groupUserData, selectedUser];
setGroupUserData(userList);
console.log(userList);
}
}

useEffect(() => {
axios.get(`${apiPath}${GET_USER_COMBO_LIST}`)
.then((response) => {
if (response.status === 200) {
setUserComboList(response.data.records);
}
})
.catch(error => {
console.log(error);
return false;
});
}, []);

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

useEffect(() => {
//if state data are ready and assign to different field
if (Object.keys(userGroupData).length > 0 &&currentUserData !== 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);
}, [isCollectData]);


return (
!onReady ?
<LoadingComponent/>
:
<MainCard elevation={0}
border={false}
content={false}
>
<Typography variant="h5" sx={{mt: 3, ml: 3}}>
User(s)
</Typography>
<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mt: 2}}>
<Grid container alignItems={"center"}>
<Grid item xs={3} s={3} md={2} lg={2}
sx={{display: 'flex', alignItems: 'center'}}>
User:
</Grid>
<Grid item xs={6} s={5} md={5} lg={5}>
<Autocomplete
disablePortal
id="user-combo"
value={selectedUser === null ? null : selectedUser}
options={userComboList}
onChange={(event, newValue) => {
setSelectedUser(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</Grid>
<Grid item xs={3} s={3} md={4} lg={4} sx={{ml: 3}}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={updateUserList}
>
Add
</Button>
</Grid>
</Grid>
</Grid>

<UserAddTable
setGroupUserData={setGroupUserData}
userList={groupUserData}
/>
</MainCard>
);
};

export default UserAddCard;

+ 91
- 0
src/pages/pnspsUserGroupDetailPage/UserAddTable.js View File

@@ -0,0 +1,91 @@
// material-ui
import {
DataGrid, GridActionsCellItem,
} from "@mui/x-data-grid";
import {useEffect, useState} from "react";
import LoadingComponent from "../extra-pages/LoadingComponent";
import * as React from "react";
import DeleteIcon from "@mui/icons-material/DeleteOutlined";
import {removeObjectWithId} from "../../utils/CommonFunction";

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

export default function UserAddTable({setGroupUserData, userList}) {
const [groupData, setGroupData] = useState([]);
const [onReady, setOnReady] = useState(false);

useEffect(() => {
setGroupData(userList);
}, []);

useEffect(() => {
setGroupData(userList);
}, [userList]);

useEffect(() => {
//if state data are ready and assign to different field
if (groupData !== undefined) {
setOnReady(true);
}
}, [groupData]);

const handleDeleteClick = (id) => () => {
const newList =removeObjectWithId(groupData,id)
setGroupUserData(newList);
setGroupData(newList);
};

const columns = [
{
field: 'actions',
type: 'actions',
headerName: 'Actions',
width: 100,
cellClassName: 'actions',
getActions: ({id}) => {
return [
<GridActionsCellItem
key="OutDelete"
icon={<DeleteIcon/>}
label="Delete"
onClick={handleDeleteClick(id)}
color="inherit"
/>,
]
},
},
{
id: 'name',
field: 'name',
headerName: 'User',
flex: 1,
},
{
id: 'subDiv',
field: 'subDivisionName',
headerName: 'Sub-Division',
flex: 1,
},
];

return (
!onReady ?
<LoadingComponent/>
:
<div style={{height: '100%', width: '100%', overflow: "auto" }}>
<DataGrid
rows={groupData}
columns={columns}
editMode="row"
initialState={{
pagination: {
paginationModel: {page: 0, pageSize: 3},
},
}}
pageSizeOptions={[3, 5]}
pageSize={20}
autoHeight={true}
/>
</div>
);
}

+ 105
- 0
src/pages/pnspsUserGroupDetailPage/UserGroupInfoCard.js View File

@@ -0,0 +1,105 @@
// 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 LoadingComponent from "../extra-pages/LoadingComponent";
//import {useParams} from "react-router-dom";

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

const UserGroupInfoCard = ({isCollectData, updateGroupObject,userGroupData}) => {
//const params = useParams();
const [currentUserGroupData, setCurrentUserGroupData] = React.useState({});
const [onReady, setOnReady] = useState(false);
const {register, getValues} = useForm()

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

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

useEffect(() => {
//upload latest data to parent
const values = getValues();
const objectData ={
...values,
}
updateGroupObject(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'}}>
User Group Name:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("userGroupName",
{
value: currentUserGroupData.name,
})}
id='groupName'
required
/>
</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, mb:3, display: 'flex', alignItems: 'center'}}>
User Group Description:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("description",
{
value: currentUserGroupData.description,
})
}
id='description'
/>
</Grid>
</Grid>
</Grid>
</Grid>
</form>
</MainCard>
);
};

export default UserGroupInfoCard;

+ 137
- 0
src/pages/pnspsUserGroupDetailPage/index.js View File

@@ -0,0 +1,137 @@
// 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 LoadingComponent from "../extra-pages/LoadingComponent";
import {GET_GROUP_LIST_PATH} from "../../utils/ApiPathConst";
import GroupAuthCard from "./GroupAuthCard";
import UserGroupInfoCard from "./UserGroupInfoCard";
import UserAddCard from "./UserAddCard";
import {getIdList} from "../../utils/CommonFunction";

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


const UserMaintainPage = () => {
const params = useParams();
const [onReady, setOnReady] = useState(false);
const [isCollectData, setIsCollectData] = useState(false);
const [editedGroupData, setEditedGroupData] = useState({});
const [userGroupData,setUserGroupData] = useState([]);
const [userAuthData,setUserAuthData] = useState([]);
const [userConfirm, setUserConfirm] = useState(false);
const [groupMember, setGroupMember] = useState([]);

function updateGroupObject(groupData) {
setEditedGroupData(groupData);
}

function updateGroupMember(groupMember){
setGroupMember(groupMember);
}

function updateUserAuthList(userAuthData){
setUserAuthData(userAuthData);
}

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

useEffect(() => {
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;
});
}, []);

useEffect(() => {
console.log(userGroupData);
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);
}
setUserConfirm(false);
}, [editedGroupData,userGroupData,userAuthData]);

return (
!onReady ?
<LoadingComponent/>
:
<Grid container rowSpacing={4.5} columnSpacing={2.75}>
<Grid item xs={12} sx={{mb: -2.25}}>
<Typography variant="h5">Maintain User Group</Typography>
</Grid>
{/*col 1*/}
<Grid item xs={12} md={5} lg={5}>
<Grid container>
<Grid item xs={12} md={12} lg={12}>
<UserGroupInfoCard
updateGroupObject={updateGroupObject}
userGroupData={userGroupData}
isCollectData={isCollectData}
/>
</Grid>

<Grid item xs={12} md={12} lg={12} sx={{mt:3}}>
<UserAddCard
updateGroupMember={updateGroupMember}
userGroupData={userGroupData}
isCollectData={isCollectData}
/>
</Grid>
</Grid>
</Grid>
{/*col 2*/}
<Grid item xs={12} md={7} lg={7}>
<GroupAuthCard
updateUserAuthList={updateUserAuthList}
userGroupData={userGroupData}
isCollectData={isCollectData}
/>
</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}}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={submitData}
>
Save User
</Button>
</Grid>
</Grid>
</Grid>
</Grid>
);
};

export default UserMaintainPage;

+ 41
- 23
src/pages/pnspsUserGroupSearchPage/index.js View File

@@ -1,5 +1,7 @@
// material-ui // material-ui
import { import {
Box,
Button,
Grid, Typography Grid, Typography
} from '@mui/material'; } from '@mui/material';
import MainCard from "../../components/MainCard"; import MainCard from "../../components/MainCard";
@@ -16,7 +18,7 @@ import * as React from "react";


const UserGroupSearchPanel = () => { const UserGroupSearchPanel = () => {


const [record,setRecord] = useState([]);
const [record, setRecord] = useState([]);
const [searchCriteria, setSearchCriteria] = useState({}); const [searchCriteria, setSearchCriteria] = useState({});
const [onReady, setOnReady] = useState(false); const [onReady, setOnReady] = useState(false);


@@ -32,7 +34,7 @@ const UserGroupSearchPanel = () => {
getGroupList(); getGroupList();
}, [searchCriteria]); }, [searchCriteria]);


function getGroupList(){
function getGroupList() {
axios.get(`${apiPath}${GET_GROUP_LIST_PATH}`, axios.get(`${apiPath}${GET_GROUP_LIST_PATH}`,
{params: searchCriteria} {params: searchCriteria}
) )
@@ -47,7 +49,7 @@ const UserGroupSearchPanel = () => {
}); });
} }


function applySearch(input){
function applySearch(input) {
setSearchCriteria(input); setSearchCriteria(input);
} }


@@ -55,27 +57,43 @@ const UserGroupSearchPanel = () => {
!onReady ? !onReady ?
<LoadingComponent/> <LoadingComponent/>
: :
<Grid container rowSpacing={4.5} columnSpacing={2.75}>
<Grid item xs={12} sx={{mb: -2.25}}>
<Typography variant="h5">View User Group</Typography>
</Grid>
{/*row 1*/}
<Grid item xs={12} md={12} lg={12}>
<UserGroupSearchForm applySearch={applySearch}/>
</Grid>
{/*row 2*/}
<Grid item xs={12} md={12} lg={12}>
<MainCard elevation={0}
border={false}
content={false}
>
<UserGroupTable
recordList={record}
/>
</MainCard>
</Grid>
<Grid container rowSpacing={4.5} columnSpacing={2.75}>
<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>
<Grid item xs={1} sx={{ml: 3, mr: 3}}>
<Button
size="large"
variant="contained"
type="submit"
>
Create
</Button>
</Grid>
</Grid>
</Grid>


</Grid>
{/*row 1*/}
<Grid item xs={12} md={12} lg={12}>
<UserGroupSearchForm applySearch={applySearch}/>
</Grid>
{/*row 2*/}
<Grid item xs={12} md={12} lg={12}>
<MainCard elevation={0}
border={false}
content={false}
>
<UserGroupTable
recordList={record}
/>
</MainCard>
</Grid>

</Grid>


); );
}; };


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

@@ -8,9 +8,10 @@ import MainLayout from "../layout/MainLayout";
const SettingPage = Loadable(lazy(() => import('pages/pnspsSettingPage'))); const SettingPage = Loadable(lazy(() => import('pages/pnspsSettingPage')));
const PasswordPolicyPage = Loadable(lazy(()=> import('pages/pnspsPasswordPolicyPage'))) const PasswordPolicyPage = Loadable(lazy(()=> import('pages/pnspsPasswordPolicyPage')))
const UserSettingPage = Loadable(lazy(()=>import ('pages/pnspsUserSettingPage/'))); const UserSettingPage = Loadable(lazy(()=>import ('pages/pnspsUserSettingPage/')));
const UserGroupSearchPage = Loadable(lazy(() => import('pages/pnspsUserGroupSearchPage')));
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 UserGroupSearchPage = Loadable(lazy(() => import('pages/pnspsUserGroupSearchPage')));
const UserGroupDetailPage = Loadable(lazy(() => import('pages/pnspsUserGroupDetailPage')));


// ==============================|| AUTH ROUTING ||============================== // // ==============================|| AUTH ROUTING ||============================== //


@@ -23,13 +24,17 @@ const SettingRoutes = {
element: <UserGroupSearchPage /> element: <UserGroupSearchPage />
}, },
{ {
path: '/user/:id',
element: <UserMaintainPage />
path: '/userGroup/:id',
element: <UserGroupDetailPage />
}, },
{ {
path: 'userSearchview', path: 'userSearchview',
element: <UserSearchPage /> element: <UserSearchPage />
}, },
{
path: '/user/:id',
element: <UserMaintainPage />
},
{ {
path: 'usersetting', path: 'usersetting',
element: <UserSettingPage /> element: <UserSettingPage />
@@ -41,7 +46,7 @@ const SettingRoutes = {
{ {
path: 'passwordpolicy', path: 'passwordpolicy',
element: <PasswordPolicyPage /> element: <PasswordPolicyPage />
}
},
] ]
}; };




+ 5
- 2
src/utils/ApiPathConst.js View File

@@ -1,4 +1,7 @@
export const GET_GROUP_COMBO_PATH = "/group/combo"
export const GET_GROUP_LIST_PATH = "/group" export const GET_GROUP_LIST_PATH = "/group"
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" export const GET_USER_PATH = "/user"
export const GET_AUTH_LIST = "/user/auth/combo"
export const GET_AUTH_LIST = "/user/auth/combo"
export const GET_USER_COMBO_LIST = "/user/combo"

+ 14
- 0
src/utils/CommonFunction.js View File

@@ -0,0 +1,14 @@
export function getIdList(input){
const output = input.map(function (obj) {
return obj.id;
});
return output;
}

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;
}

Write Preview
Loading…
Cancel
Save