diff --git a/src/pages/pnspsUserDetailPage/index.js b/src/pages/pnspsUserDetailPage/index.js
index b6fab10..12e24a5 100644
--- a/src/pages/pnspsUserDetailPage/index.js
+++ b/src/pages/pnspsUserDetailPage/index.js
@@ -45,7 +45,7 @@ const UserMaintainPage = () => {
}
useEffect(() => {
-
+ console.log(params)
axios.get(`${apiPath}${GET_USER_PATH}/${params.id}`)
.then((response) => {
if (response.status === 200) {
diff --git a/src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js b/src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js
new file mode 100644
index 0000000..490ac1e
--- /dev/null
+++ b/src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js
@@ -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 ?
+
+ :
+
+
+ User Authority
+
+
+
+
+ );
+};
+
+export default GroupAuthCard;
diff --git a/src/pages/pnspsUserGroupDetailPage/GroupAuthTable.js b/src/pages/pnspsUserGroupDetailPage/GroupAuthTable.js
new file mode 100644
index 0000000..f48e546
--- /dev/null
+++ b/src/pages/pnspsUserGroupDetailPage/GroupAuthTable.js
@@ -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 ?
+
+ :
+
+ {
+ console.log(ids);
+ setSelectedRow(ids);
+ setCurrentSelectedRow(ids);
+ }}
+ autoHeight
+ />
+
+ );
+}
diff --git a/src/pages/pnspsUserGroupDetailPage/UserAddCard.js b/src/pages/pnspsUserGroupDetailPage/UserAddCard.js
new file mode 100644
index 0000000..8f4806c
--- /dev/null
+++ b/src/pages/pnspsUserGroupDetailPage/UserAddCard.js
@@ -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 &¤tUserData !== undefined) {
+ axios.get(`${apiPath}${GET_GROUP_MEMBER_LIST_PATH}?id=${userGroupData.data.id}`)
+ .then((response) => {
+ if (response.status === 200) {
+ setGroupUserData(response.data.records);
+ }
+ setOnReady(true);
+ })
+ .catch(error => {
+ console.log(error);
+ return false;
+ });
+ }
+ }, [currentUserData]);
+
+ useEffect(() => {
+ //upload latest data to parent
+ updateGroupMember(groupUserData);
+ }, [isCollectData]);
+
+
+ return (
+ !onReady ?
+
+ :
+
+
+ User(s)
+
+
+
+
+ User:
+
+
+ {
+ setSelectedUser(newValue);
+ }}
+ renderInput={(params) => }
+ />
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default UserAddCard;
diff --git a/src/pages/pnspsUserGroupDetailPage/UserAddTable.js b/src/pages/pnspsUserGroupDetailPage/UserAddTable.js
new file mode 100644
index 0000000..8e2b766
--- /dev/null
+++ b/src/pages/pnspsUserGroupDetailPage/UserAddTable.js
@@ -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 [
+ }
+ 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 ?
+
+ :
+
+
+
+ );
+}
diff --git a/src/pages/pnspsUserGroupDetailPage/UserGroupInfoCard.js b/src/pages/pnspsUserGroupDetailPage/UserGroupInfoCard.js
new file mode 100644
index 0000000..d5a0797
--- /dev/null
+++ b/src/pages/pnspsUserGroupDetailPage/UserGroupInfoCard.js
@@ -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 &¤tUserGroupData !== undefined) {
+ setOnReady(true);
+ }
+ }, [currentUserGroupData]);
+
+ useEffect(() => {
+ //upload latest data to parent
+ const values = getValues();
+ const objectData ={
+ ...values,
+ }
+ updateGroupObject(objectData);
+ }, [isCollectData]);
+
+
+ return (
+ !onReady ?
+
+ :
+
+
+ Information
+
+
+
+
+ );
+};
+
+export default UserGroupInfoCard;
diff --git a/src/pages/pnspsUserGroupDetailPage/index.js b/src/pages/pnspsUserGroupDetailPage/index.js
new file mode 100644
index 0000000..2695165
--- /dev/null
+++ b/src/pages/pnspsUserGroupDetailPage/index.js
@@ -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 ?
+
+ :
+
+
+ Maintain User Group
+
+ {/*col 1*/}
+
+
+
+
+
+
+
+
+
+
+
+ {/*col 2*/}
+
+
+
+
+ {/*bottom button*/}
+
+
+
+
+
+
+
+
+ );
+};
+
+export default UserMaintainPage;
diff --git a/src/pages/pnspsUserGroupSearchPage/index.js b/src/pages/pnspsUserGroupSearchPage/index.js
index d5a8399..6aa9969 100644
--- a/src/pages/pnspsUserGroupSearchPage/index.js
+++ b/src/pages/pnspsUserGroupSearchPage/index.js
@@ -1,5 +1,7 @@
// material-ui
import {
+ Box,
+ Button,
Grid, Typography
} from '@mui/material';
import MainCard from "../../components/MainCard";
@@ -16,7 +18,7 @@ import * as React from "react";
const UserGroupSearchPanel = () => {
- const [record,setRecord] = useState([]);
+ const [record, setRecord] = useState([]);
const [searchCriteria, setSearchCriteria] = useState({});
const [onReady, setOnReady] = useState(false);
@@ -32,7 +34,7 @@ const UserGroupSearchPanel = () => {
getGroupList();
}, [searchCriteria]);
- function getGroupList(){
+ function getGroupList() {
axios.get(`${apiPath}${GET_GROUP_LIST_PATH}`,
{params: searchCriteria}
)
@@ -47,7 +49,7 @@ const UserGroupSearchPanel = () => {
});
}
- function applySearch(input){
+ function applySearch(input) {
setSearchCriteria(input);
}
@@ -55,27 +57,43 @@ const UserGroupSearchPanel = () => {
!onReady ?
:
-
-
- View User Group
-
- {/*row 1*/}
-
-
-
- {/*row 2*/}
-
-
-
-
-
+
+
+
+
+
+ View User Group
+
+
+
+
+
+
+
-
+ {/*row 1*/}
+
+
+
+ {/*row 2*/}
+
+
+
+
+
+
+
);
};
diff --git a/src/routes/SettingRoutes.js b/src/routes/SettingRoutes.js
index 4a7b8fa..4710b60 100644
--- a/src/routes/SettingRoutes.js
+++ b/src/routes/SettingRoutes.js
@@ -8,9 +8,10 @@ import MainLayout from "../layout/MainLayout";
const SettingPage = Loadable(lazy(() => import('pages/pnspsSettingPage')));
const PasswordPolicyPage = Loadable(lazy(()=> import('pages/pnspsPasswordPolicyPage')))
const UserSettingPage = Loadable(lazy(()=>import ('pages/pnspsUserSettingPage/')));
-const UserGroupSearchPage = Loadable(lazy(() => import('pages/pnspsUserGroupSearchPage')));
const UserSearchPage = Loadable(lazy(()=>import ('pages/pnspsUserSearchPage')));
const UserMaintainPage = Loadable(lazy(() => import('pages/pnspsUserDetailPage')));
+const UserGroupSearchPage = Loadable(lazy(() => import('pages/pnspsUserGroupSearchPage')));
+const UserGroupDetailPage = Loadable(lazy(() => import('pages/pnspsUserGroupDetailPage')));
// ==============================|| AUTH ROUTING ||============================== //
@@ -23,13 +24,17 @@ const SettingRoutes = {
element:
},
{
- path: '/user/:id',
- element:
+ path: '/userGroup/:id',
+ element:
},
{
path: 'userSearchview',
element:
},
+ {
+ path: '/user/:id',
+ element:
+ },
{
path: 'usersetting',
element:
@@ -41,7 +46,7 @@ const SettingRoutes = {
{
path: 'passwordpolicy',
element:
- }
+ },
]
};
diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js
index bda6106..2a52c0f 100644
--- a/src/utils/ApiPathConst.js
+++ b/src/utils/ApiPathConst.js
@@ -1,4 +1,7 @@
-export const GET_GROUP_COMBO_PATH = "/group/combo"
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_AUTH_LIST = "/user/auth/combo"
\ No newline at end of file
+export const GET_AUTH_LIST = "/user/auth/combo"
+export const GET_USER_COMBO_LIST = "/user/combo"
\ No newline at end of file
diff --git a/src/utils/CommonFunction.js b/src/utils/CommonFunction.js
new file mode 100644
index 0000000..5bf7263
--- /dev/null
+++ b/src/utils/CommonFunction.js
@@ -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;
+}
\ No newline at end of file