From 1cda2c730fb74727d98705eef201c24ace5adafb Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Tue, 23 Jan 2024 15:49:55 +0800 Subject: [PATCH] add gld user profile --- src/layout/MainLayout/Header/index.js | 8 + src/pages/User/DetailPage/UserAuthTable.js | 4 +- src/pages/User/DetailPage/UserGroupCard.js | 1 + src/pages/User/DetailPage/UserGroupTable.js | 8 +- src/pages/User/DetailPage/index.js | 4 +- .../GLDUserProfile/UserInformationCard.js | 160 ++++++++++++++++++ src/pages/User/GLDUserProfile/index.js | 153 +++++++++++++++++ src/routes/GLDUserRoutes.js | 8 +- 8 files changed, 338 insertions(+), 8 deletions(-) create mode 100644 src/pages/User/GLDUserProfile/UserInformationCard.js create mode 100644 src/pages/User/GLDUserProfile/index.js diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js index 0de0877..50e80d1 100644 --- a/src/layout/MainLayout/Header/index.js +++ b/src/layout/MainLayout/Header/index.js @@ -137,6 +137,14 @@ function Header(props) {
  • Email Template
    • +
  • + Setting +
      +
    • + Users Profile +
      • +
    +
  • Logout
    • diff --git a/src/pages/User/DetailPage/UserAuthTable.js b/src/pages/User/DetailPage/UserAuthTable.js index 2f53a39..c84f30c 100644 --- a/src/pages/User/DetailPage/UserAuthTable.js +++ b/src/pages/User/DetailPage/UserAuthTable.js @@ -4,10 +4,10 @@ import { } from "@mui/x-data-grid"; import {useEffect, useState} from "react"; import axios from "axios"; -import {apiPath} from "../../../auth/utils"; +import {apiPath} from "auth/utils"; //import LoadingComponent from "../extra-pages/LoadingComponent"; import * as React from "react"; -import {GET_AUTH_LIST} from "../../../utils/ApiPathConst"; +import {GET_AUTH_LIST} from "utils/ApiPathConst"; import Loadable from 'components/Loadable'; import { lazy } from 'react'; diff --git a/src/pages/User/DetailPage/UserGroupCard.js b/src/pages/User/DetailPage/UserGroupCard.js index d926c95..890cd20 100644 --- a/src/pages/User/DetailPage/UserGroupCard.js +++ b/src/pages/User/DetailPage/UserGroupCard.js @@ -23,6 +23,7 @@ const UserGroupCard = ({isCollectData, updateUserGroupList,userData,isNewRecord} useEffect(() => { //if user data from parent are not null if (Object.keys(userData).length > 0 && userData !== undefined) { + // console.log(userData.groupIds) setCurrentUserData(userData.data); setSelectedRow(userData.groupIds); } diff --git a/src/pages/User/DetailPage/UserGroupTable.js b/src/pages/User/DetailPage/UserGroupTable.js index 060499c..6480ac3 100644 --- a/src/pages/User/DetailPage/UserGroupTable.js +++ b/src/pages/User/DetailPage/UserGroupTable.js @@ -4,9 +4,9 @@ import { } from "@mui/x-data-grid"; import {useEffect, useState} from "react"; import axios from "axios"; -import {apiPath} from "../../../auth/utils"; +import {apiPath} from "auth/utils"; import * as React from "react"; -import {GET_GROUP_COMBO_PATH} from "../../../utils/ApiPathConst"; +import {GET_GROUP_COMBO_PATH} from "utils/ApiPathConst"; import Loadable from 'components/Loadable'; import { lazy } from 'react'; const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); @@ -41,7 +41,9 @@ export default function UserGroupTable({setSelectedRow, userGroup,isNewRecord}) axios.get(`${apiPath}${GET_GROUP_COMBO_PATH}`) .then((response) => { if (response.status === 200) { + // console.log(userGroup) setGroupData(response.data.records); + setCurrentSelectedRow(userGroup); } }) .catch(error => { @@ -85,7 +87,7 @@ export default function UserGroupTable({setSelectedRow, userGroup,isNewRecord}) checkboxSelection rowSelectionModel={currentSelectedRow} onRowSelectionModelChange={(ids) => { - console.log(ids); + // console.log(ids); setSelectedRow(ids); setCurrentSelectedRow(ids); }} diff --git a/src/pages/User/DetailPage/index.js b/src/pages/User/DetailPage/index.js index fc21433..158b4df 100644 --- a/src/pages/User/DetailPage/index.js +++ b/src/pages/User/DetailPage/index.js @@ -10,7 +10,7 @@ import { useEffect, useState } from "react"; import * as React from "react"; import axios from "axios"; import { useNavigate, useParams } from "react-router-dom"; -import { GLD_USER_PATH, DELETE_USER, POST_ADMIN_USER_REGISTER } from "../../../utils/ApiPathConst"; +import { GLD_USER_PATH, DELETE_USER, POST_ADMIN_USER_REGISTER } from "utils/ApiPathConst"; import Loadable from 'components/Loadable'; import { lazy } from 'react'; @@ -23,7 +23,7 @@ import { getDeletedRecordWithRefList, notifyDeleteSuccess, notifySaveSuccess, -} from "../../../utils/CommonFunction"; +} from "utils/CommonFunction"; import ForwardIcon from '@mui/icons-material/Forward'; import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' diff --git a/src/pages/User/GLDUserProfile/UserInformationCard.js b/src/pages/User/GLDUserProfile/UserInformationCard.js new file mode 100644 index 0000000..aaf5c0f --- /dev/null +++ b/src/pages/User/GLDUserProfile/UserInformationCard.js @@ -0,0 +1,160 @@ +// material-ui +import { + FormControl, + // IconButton, + Grid, + // InputAdornment, + Typography, FormLabel, + OutlinedInput, +} from '@mui/material'; +import MainCard from "components/MainCard"; +import * as React from "react"; + +import {useEffect, useState} from "react"; +import Loadable from 'components/Loadable'; +import { lazy } from 'react'; +const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); + + +// ==============================|| DASHBOARD - DEFAULT ||============================== // +const UserInformationCard = ({userData}) => { + const [currentUserData, setCurrentUserData] = React.useState({}); + // const [locked, setLocked] = useState(false); + const [onReady, setOnReady] = useState(false); + + 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 &¤tUserData !== undefined&¤tUserData.id!==undefined) { + console.log(currentUserData) + // setLocked(currentUserData.locked); + setOnReady(true); + } + }, [currentUserData]); + + return ( + !onReady ? + + : + + + Information + + +
    + + + + + Username: + + + + + + + + + + + + + + Full Name: + + + + + + + + + + + + + + Post: + + + + + + + + + + + + + + Email: + + + + + + + + + + + + +
    +     + ); +}; + +export default UserInformationCard; diff --git a/src/pages/User/GLDUserProfile/index.js b/src/pages/User/GLDUserProfile/index.js new file mode 100644 index 0000000..eb40134 --- /dev/null +++ b/src/pages/User/GLDUserProfile/index.js @@ -0,0 +1,153 @@ +// material-ui +import { + Button, + Grid, + Typography, + Stack, + Box, +} from '@mui/material'; +import { useEffect, useState } from "react"; +import * as React from "react"; +import axios from "axios"; +import { useNavigate, + // useParams +} from "react-router-dom"; +import { GLD_USER_PATH, + // DELETE_USER, + // POST_ADMIN_USER_REGISTER +} from "utils/ApiPathConst"; + +import Loadable from 'components/Loadable'; +import { lazy } from 'react'; +const UserInformationCard = Loadable(lazy(() => import('./UserInformationCard'))); +const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); +// const UserGroupCard = Loadable(lazy(() => import('./UserGroupCard'))); +// const UserAuthorityCard = Loadable(lazy(() => import('./UserAuthorityCard'))); +import { + // GeneralConfirmWindow, + // getDeletedRecordWithRefList, + // notifyDeleteSuccess, + // notifySaveSuccess, +} from "utils/CommonFunction"; +import ForwardIcon from '@mui/icons-material/Forward'; +import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' + +import { + getUserId, +} from "utils/Utils"; + +const BackgroundHead = { + backgroundImage: `url(${titleBackgroundImg})`, + width: '100%', + height: '100%', + backgroundSize: 'contain', + backgroundRepeat: 'no-repeat', + backgroundColor: '#0C489E', + backgroundPosition: 'right' +} +// ==============================|| DASHBOARD - DEFAULT ||============================== // + + +const UserMaintainPage = () => { + // const params = useParams(); + const navigate = useNavigate(); + const [userData, setUserData] = React.useState({}); + const [onReady, setOnReady] = useState(false); + // const [isCollectData, setIsCollectData] = useState(false); + // const [editedCustomerData, setEditedCustomerData] = useState({}); + // const [userConfirm, setUserConfirm] = useState(false); + // const [isNewRecord, setIsNewRecord] = useState(false); + // const [refUserData, setRefUserData] = React.useState({}); + + + // function updateUserObject(userData) { + // setEditedCustomerData(userData); + // } + + // const submitData = () => { + // setUserConfirm(true); + // setIsCollectData(!isCollectData); + // } + + // ==============================|| DELETE WINDOW RELATED ||============================== // + // const [isWindowOpen, setIsWindowOpen] = useState(false); + // const handleClose = () => { + // setIsWindowOpen(false); + // }; + + // const handleDeleteClick = () => { + // setIsWindowOpen(true); + // }; + + // function deleteData() { + // axios.delete(`${DELETE_USER}/${params.id}`, + // ) + // .then((response) => { + // if (response.status === 204) { + // notifyDeleteSuccess(); + // setIsWindowOpen(false); + // navigate('/userSearchview'); + // } + // }) + // .catch(error => { + // console.log(error); + // return false; + // }); + // } + // ==============================|| DELETE WINDOW RELATED ||============================== // + + useEffect(() => { + axios.get(`${GLD_USER_PATH}/${getUserId()}`) + .then((response) => { + if (response.status === 200) { + setUserData(response.data); + } + }) + .catch(error => { + console.log(error); + return false; + }); + }, []); + + useEffect(() => { + if (Object.keys(userData).length > 0 && userData !== undefined) { + setOnReady(true); + } + }, [userData]); + + return ( + !onReady ? + + : + + +
    + + User Profile + +
    +     + + + + {/*col 1*/} + + + + + + + + + + {/*col 2*/} + +     + ); +}; + +export default UserMaintainPage; diff --git a/src/routes/GLDUserRoutes.js b/src/routes/GLDUserRoutes.js index a56c2b8..6c84823 100644 --- a/src/routes/GLDUserRoutes.js +++ b/src/routes/GLDUserRoutes.js @@ -18,6 +18,8 @@ const DemandNote_Create = Loadable(lazy(() => import('pages/DemandNote/Create')) const DemandNote_Search = Loadable(lazy(() => import('pages/DemandNote/Search'))); const DemandNote_Details = Loadable(lazy(() => import('pages/DemandNote/Details'))); const GFMIS_Search = Loadable(lazy(() => import('pages/GFMIS'))); +const UserMaintainPage = Loadable(lazy(() => import('pages/User/GLDUserProfile'))); + // ==============================|| MAIN ROUTING ||============================== // const GLDUserRoutes = { @@ -78,7 +80,11 @@ const GLDUserRoutes = { { path: '/gfmis/search', element: - } + }, + { + path: '/user/profile', + element: + }, ] }, ]