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

add gld user profile

master
Alex Cheung 1 year ago
parent
94502f8405
commit
1cda2c730f
8 changed files with 338 additions and 8 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +8
    -0
      src/layout/MainLayout/Header/index.js
  2. +2
    -2
      src/pages/User/DetailPage/UserAuthTable.js
  3. +1
    -0
      src/pages/User/DetailPage/UserGroupCard.js
  4. +5
    -3
      src/pages/User/DetailPage/UserGroupTable.js
  5. +2
    -2
      src/pages/User/DetailPage/index.js
  6. +160
    -0
      src/pages/User/GLDUserProfile/UserInformationCard.js
  7. +153
    -0
      src/pages/User/GLDUserProfile/index.js
  8. +7
    -1
      src/routes/GLDUserRoutes.js

+ 8
- 0
src/layout/MainLayout/Header/index.js View File

@@ -137,6 +137,14 @@ function Header(props) {
<li>
<Link className="emailTemplate" to='/emailTemplate'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Email Template</Typography></Link>
</li>
<li>
<Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Setting</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} /></Link>
<ul className='dropdown'>
<li>
<Link className="userProfileGld" to='/user/profile'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Users Profile</Typography></Link>
</li>
</ul>
</li>
<li>
<Link className="logout" onClick={handleLogout}><Typography variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Logout</Typography></Link>
</li>


+ 2
- 2
src/pages/User/DetailPage/UserAuthTable.js View File

@@ -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';


+ 1
- 0
src/pages/User/DetailPage/UserGroupCard.js View File

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


+ 5
- 3
src/pages/User/DetailPage/UserGroupTable.js View File

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


+ 2
- 2
src/pages/User/DetailPage/index.js View File

@@ -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'



+ 160
- 0
src/pages/User/GLDUserProfile/UserInformationCard.js View File

@@ -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 &&currentUserData !== undefined&&currentUserData.id!==undefined) {
console.log(currentUserData)
// setLocked(currentUserData.locked);
setOnReady(true);
}
}, [currentUserData]);

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

<form>
<Grid container>
<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3, mt:3}}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
<FormLabel required>Username:</FormLabel>
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<FormControl variant="outlined" fullWidth required>
<OutlinedInput
required
fullWidth
size="small"
// {...register("username",
// {
// })}
id='username'
disabled={true}
value={currentUserData.username}
/>
</FormControl>
</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'}}>
<FormLabel required >Full Name:</FormLabel>
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<FormControl variant="outlined" fullWidth required>
<OutlinedInput
required
fullWidth
size="small"
value= {currentUserData.enName}
disabled={true}
// {...register("enName",
// {
// })}
id='enName'
/>
</FormControl>
</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'}}>
<FormLabel>Post:</FormLabel>
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<FormControl variant="outlined" fullWidth required>
<OutlinedInput
fullWidth
size="small"
value= {currentUserData.post}
disabled={true}
// {...register("post",
// {
// })}
id='post'
/>
</FormControl>
</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'}}>
<FormLabel required>Email:</FormLabel>
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<FormControl variant="outlined" fullWidth required>
<OutlinedInput
fullWidth
size="small"
value={currentUserData.emailAddress}
disabled={true}
// {...register("emailAddress",
// {
// })}
id='emailAddress'
/>
</FormControl>
</Grid>
</Grid>
</Grid>

</Grid>

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

export default UserInformationCard;

+ 153
- 0
src/pages/User/GLDUserProfile/index.js View File

@@ -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 ?
<LoadingComponent />
:
<Grid container sx={{ backgroundColor: 'backgroundColor.default' }}>
<Grid item xs={12}>
<div style={BackgroundHead}>
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
<Typography ml={15} color='#FFF' variant="h4">User Profile</Typography>
</Stack>
</div>
</Grid>
<Grid item xs={12}>
<Button title="Back" sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/userSearchview") }}>
<ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
</Button>
</Grid>
{/*col 1*/}
<Grid item xs={12}>
<Grid container>
<Grid item xs={12} md={12} lg={12}>
<Box xs={12} ml={4} mt={3} sx={{ p: 1, borderRadius: '10px', backgroundColor: '#fff' }}>
<UserInformationCard
userData={userData}
/>
</Box>
</Grid>
</Grid>
</Grid>
{/*col 2*/}

</Grid>
);
};

export default UserMaintainPage;

+ 7
- 1
src/routes/GLDUserRoutes.js View File

@@ -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: <GFMIS_Search/>
}
},
{
path: '/user/profile',
element: <UserMaintainPage />
},
]
},
]


Write Preview
Loading…
Cancel
Save