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

ind and org

master
Anna Ho 2 years ago
parent
2cf1affccc
commit
1345b61a3a
15 changed files with 1220 additions and 55 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +4
    -1
      src/layout/MainLayout/Header/index.js
  2. +5
    -5
      src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js
  3. +9
    -11
      src/pages/pnspsUserDetailPage_Individual/index.js
  4. +445
    -0
      src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js
  5. +294
    -0
      src/pages/pnspsUserDetailPage_Organization/UserInformationOrgCard_Organization.js
  6. +73
    -0
      src/pages/pnspsUserDetailPage_Organization/index.js
  7. +2
    -2
      src/pages/pnspsUserSearchPage_Individual/UserSearchForm_Individual.js
  8. +2
    -2
      src/pages/pnspsUserSearchPage_Individual/UserTable_Individual.js
  9. +16
    -21
      src/pages/pnspsUserSearchPage_Individual/index.js
  10. +159
    -0
      src/pages/pnspsUserSearchPage_Organization/UserSearchForm_Organization.js
  11. +104
    -0
      src/pages/pnspsUserSearchPage_Organization/UserTable_Organization.js
  12. +80
    -0
      src/pages/pnspsUserSearchPage_Organization/index.js
  13. +16
    -6
      src/routes/SettingRoutes.js
  14. +7
    -5
      src/utils/ApiPathConst.js
  15. +4
    -2
      src/utils/HttpUtils.js

+ 4
- 1
src/layout/MainLayout/Header/index.js View File

@@ -73,7 +73,10 @@ function Header(props) {
<Link className="userSearchview" to='/userSearchview'>User</Link> <Link className="userSearchview" to='/userSearchview'>User</Link>
</li> </li>
<li> <li>
<Link className="publicUser" to='/publicUser'>Public User</Link>
<Link className="indUser" to='/indUser'>Individual User</Link>
</li>
<li>
<Link className="orgUser" to='/orgUser'>Organization User</Link>
</li> </li>
<li> <li>
<Link className="usergroupSearchview" to='/usergroupSearchview'>User Group</Link> <Link className="usergroupSearchview" to='/usergroupSearchview'>User Group</Link>


src/pages/pnspsUserDetailPage_Public/UserInformationCard_Public.js → src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js View File

@@ -18,7 +18,7 @@ import * as UrlUtils from "../../utils/ApiPathConst";
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //




const UserInformationCard_Public = ({userData, loadDataFun}) => {
const UserInformationCard_Individual = ({userData, loadDataFun}) => {


const [currentUserData, setCurrentUserData] = useState(userData); const [currentUserData, setCurrentUserData] = useState(userData);
const [editMode, setEditMode] = useState(false); const [editMode, setEditMode] = useState(false);
@@ -90,7 +90,7 @@ const UserInformationCard_Public = ({userData, loadDataFun}) => {
// }); // });


HttpUtils.post({ HttpUtils.post({
url: UrlUtils.POST_PUBLIC_USER+"/"+userData.id,
url: UrlUtils.POST_IND_USER+"/"+userData.id,
params: { params: {
prefix: _formData.prefix, prefix: _formData.prefix,
enName: _formData.enName, enName: _formData.enName,
@@ -125,7 +125,7 @@ const UserInformationCard_Public = ({userData, loadDataFun}) => {


const doLock = () => { const doLock = () => {
HttpUtils.get({ HttpUtils.get({
url: UrlUtils.GET_PUBLIC_USER_LOCK+"/"+userData.id,
url: UrlUtils.GET_USER_LOCK+"/"+userData.id,
onSuccess: function(){ onSuccess: function(){
loadDataFun(); loadDataFun();
} }
@@ -134,7 +134,7 @@ const UserInformationCard_Public = ({userData, loadDataFun}) => {


const doUnlock = () => { const doUnlock = () => {
HttpUtils.get({ HttpUtils.get({
url: UrlUtils.GET_PUBLIC_USER_UNLOCK+"/"+userData.id,
url: UrlUtils.GET_USER_UNLOCK+"/"+userData.id,
onSuccess: function(){ onSuccess: function(){
loadDataFun(); loadDataFun();
} }
@@ -644,4 +644,4 @@ const UserInformationCard_Public = ({userData, loadDataFun}) => {
); );
}; };


export default UserInformationCard_Public;
export default UserInformationCard_Individual;

src/pages/pnspsUserDetailPage_Public/index.js → src/pages/pnspsUserDetailPage_Individual/index.js View File

@@ -6,14 +6,14 @@ import * as React from "react";
import * as HttpUtils from "../../utils/HttpUtils"; import * as HttpUtils from "../../utils/HttpUtils";
import {apiPath} from "../../auth/utils"; import {apiPath} from "../../auth/utils";
import {useParams} from "react-router-dom"; import {useParams} from "react-router-dom";
import UserInformationCard from "./UserInformationCard_Public";
import UserInformationCard from "./UserInformationCard_Individual";
import LoadingComponent from "../extra-pages/LoadingComponent"; import LoadingComponent from "../extra-pages/LoadingComponent";
import * as UrlUtils from "../../utils/ApiPathConst"; import * as UrlUtils from "../../utils/ApiPathConst";


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




const UserMaintainPage_Public = () => {
const UserMaintainPage_Individual = () => {
const params = useParams(); const params = useParams();
const [userData, setUserData] = useState({}) const [userData, setUserData] = useState({})
const [isLoading, setLoding] = useState(true); const [isLoading, setLoding] = useState(true);
@@ -26,14 +26,12 @@ const UserMaintainPage_Public = () => {


const loadData = ()=>{ const loadData = ()=>{
setLoding(true); setLoding(true);
HttpUtils.get(
{
url: `${apiPath}${UrlUtils.GET_USER_PATH}/${params.id}`,
onSuccess: function(response){
setUserData(response.data)
}
HttpUtils.get({
url: `${apiPath}${UrlUtils.GET_USER_PATH}/${params.id}`,
onSuccess: function(response){
setUserData(response.data)
} }
);
});
}; };




@@ -47,7 +45,7 @@ const UserMaintainPage_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">Public User</Typography>
<Typography variant="h5">Individual User</Typography>
</Grid> </Grid>
{/*col 1*/} {/*col 1*/}
<Grid item xs={12} > <Grid item xs={12} >
@@ -67,4 +65,4 @@ const UserMaintainPage_Public = () => {
}; };




export default UserMaintainPage_Public;
export default UserMaintainPage_Individual;

+ 445
- 0
src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js View File

@@ -0,0 +1,445 @@
// material-ui
import {
Grid, TextField, Typography, Button
} 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 * as DateUtils from '../../utils/DateUtils';
import * as HttpUtils from '../../utils/HttpUtils';
import * as UrlUtils from "../../utils/ApiPathConst";

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


const UserInformationCard_Organization = ({userData, loadDataFun}) => {

const [currentUserData, setCurrentUserData] = useState(userData);
const [editMode, setEditMode] = useState(false);
const [locked, setLocked] = useState(false);


const from = useForm({defaultValues: userData});
const {register,reset, handleSubmit} = from;

useEffect(() => {
let createDate = DateUtils.datetimeStr(userData.created);
let modifiedBy = DateUtils.datetimeStr(userData.modified)+", "+userData.modifiedBy;
userData["createDate"] = createDate;
userData["modifieDate"] = modifiedBy;
userData["verifiedStatus"] = userData.verified? "Not verify yet":"Verified";

userData["country"] = userData.address?.country;
userData["addressLine1"] = userData.address?.addressLine1;
userData["addressLine2"] = userData.address?.addressLine2;
userData["addressLine3"] = userData.address?.addressLine3;
userData["addressLine3"] = userData.address?.addressLine3;

userData["phoneNumber"] = userData.contactTel?.phoneNumber;
userData["tel_countryCode"] = userData.contactTel?.countryCode;

userData["faxNumber"] = userData.faxNo?.faxNumber;
userData["fax_countryCode"] = userData.faxNo?.countryCode;
setCurrentUserData(userData);
}, [userData]);

useEffect(() => {
reset(currentUserData);
setLocked(currentUserData.locked);
}, [currentUserData]);


function onSubmitForm(_formData) {
HttpUtils.post({
url: UrlUtils.POST_IND_USER+"/"+userData.id,
params: {
name: _formData.name,
prefix: _formData.prefix,
contactTel: {
countryCode: _formData.tel_countryCode,
phoneNumber: _formData.phoneNumber
},
identification: _formData.identification,
emailAddress:_formData.emailAddress,
},
onSuccess: function(){
loadDataFun();
}
});
}

const onEditClick = () => {
setEditMode(true);
};

const doLock = () => {
HttpUtils.get({
url: UrlUtils.GET_USER_LOCK+"/"+userData.id,
onSuccess: function(){
loadDataFun();
}
});
};

const doUnlock = () => {
HttpUtils.get({
url: UrlUtils.GET_USER_UNLOCK+"/"+userData.id,
onSuccess: function(){
loadDataFun();
}
});
};

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

<form onSubmit={handleSubmit(onSubmitForm)}>
<Grid container spacing={1}>
<Grid item lg={4} >
<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
id='username'
disabled
{...register("username")}
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Name:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("name")}
id='name'
disabled={!editMode}
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Created Date:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("createDate")}
id='createDate'
disabled
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Prefix:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("prefix")}
id='prefix'
disabled={!editMode}
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Contact Tel:
</Grid>
<Grid item xs={2}>
<TextField
fullWidth
{...register("tel_countryCode")}
id='tel_countryCode'
disabled={!editMode}
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
{...register("phoneNumber")}
id='phoneNumber'
disabled={!editMode}
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Last Updated:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("modifieDate")}
id='modifieDate'
disabled
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Organization:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6} >
<TextField
{...register("identification",
{
value: currentUserData?.identification,
})}
id='identification'
disabled={!editMode}
/>
{/* <Button lg={2} variant="contained" onClick={downloadFile} >View File</Button> */}
</Grid>
</Grid>
</Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Verified:
</Grid>

{
currentUserData.verified || editMode?
<Grid item xs={6}>
<TextField
fullWidth
{...register("verifiedStatus")}
id='verifiedStatus'
disabled
/>
</Grid>
:
<>
<Grid item xs={4}>
<TextField
fullWidth
{...register("verifiedStatus")}
id='verifiedStatus'
disabled
/>
</Grid>
<Grid item xs={1}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Verified
</Button>
</Grid>
</>
}
</Grid>
</Grid>


<Grid item lg={4}>
<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("emailAddress")}
id='emailAddress'
disabled={!editMode}
/>
</Grid>
</Grid>
</Grid>


<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Last Login:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>

<TextField
fullWidth
{...register("lastLogin",
{
value: currentUserData?.lastLogin,
})}
id='lastLogin'
disabled
>
</TextField>
</Grid>
</Grid>
</Grid>


<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Status:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("status")}
id='status'
disabled
/>
</Grid>
</Grid>
</Grid>

</Grid>

{/*bottom button*/}
<Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"end"} justifyContent="center">
<Grid container maxWidth justifyContent="flex-end">
{editMode?
<>
<Grid item sx={{ml: 3, mr: 3}}>
<Button
size="large"
variant="contained"
type="submit"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Save
</Button>
</Grid>
<Grid item sx={{ml: 3, mr: 3}}>
<Button
size="large"
variant="contained"
onClick={loadDataFun}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Cancel & Back
</Button>
</Grid>
</>
:
<>
{locked?
<Grid item sx={{ml: 3, mr: 3}}>
<Button
size="large"
variant="contained"
color="primary"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doUnlock}
>
Unlock
</Button>
</Grid>
:
<Grid item sx={{ml: 3, mr: 3}}>
<Button
size="large"
variant="contained"
color="primary"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doLock}
>
Lock
</Button>
</Grid>
}
<Grid item sx={{ml: 3, mr: 3}}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={onEditClick}
>
Edit
</Button>
</Grid>
</>
}
</Grid>
</Grid>

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

export default UserInformationCard_Organization;

+ 294
- 0
src/pages/pnspsUserDetailPage_Organization/UserInformationOrgCard_Organization.js View File

@@ -0,0 +1,294 @@
// material-ui
import {
Grid, TextField, Typography, Button
} 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 * as DateUtils from '../../utils/DateUtils';
import * as HttpUtils from '../../utils/HttpUtils';
import * as UrlUtils from "../../utils/ApiPathConst";

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


const UserInformationOgCard_Organization = ({userData, loadDataFun}) => {

const [currentUserData, setCurrentUserData] = useState(userData);
const [editMode, setEditMode] = useState(false);


const from = useForm({defaultValues: userData});
const {register,reset, handleSubmit} = from;

useEffect(() => {
let createDate = DateUtils.datetimeStr(userData.created);
let modifiedBy = DateUtils.datetimeStr(userData.modified)+", "+userData.modifiedBy;
userData["createDate"] = createDate;
userData["modifieDate"] = modifiedBy;
userData["verifiedStatus"] = userData.verified? "Not verify yet":"Verified";

userData["country"] = userData.address?.country;
userData["addressLine1"] = userData.address?.addressLine1;
userData["addressLine2"] = userData.address?.addressLine2;
userData["addressLine3"] = userData.address?.addressLine3;
userData["addressLine3"] = userData.address?.addressLine3;

userData["phoneNumber"] = userData.contactTel?.phoneNumber;
userData["tel_countryCode"] = userData.contactTel?.countryCode;

userData["faxNumber"] = userData.faxNo?.faxNumber;
userData["fax_countryCode"] = userData.faxNo?.countryCode;
setCurrentUserData(userData);
setEditMode(false);
}, [userData]);

useEffect(() => {
reset(currentUserData);
}, [currentUserData]);


function onSubmitForm(_formData) {
HttpUtils.post({
url: UrlUtils.POST_IND_USER+"/"+userData.id,
params: {
name: _formData.name,
prefix: _formData.prefix,
contactTel: {
countryCode: _formData.tel_countryCode,
phoneNumber: _formData.phoneNumber
},
identification: _formData.identification,
emailAddress:_formData.emailAddress,
},
onSuccess: function(){
loadDataFun();
}
});
}


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

<form onSubmit={handleSubmit(onSubmitForm)}>
<Grid container spacing={1}>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Org.Name (English):
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("enCompanyName")}
id='enCompanyName'
disabled={!editMode}
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Org.Name (Chinese):
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("chCompanyName")}
id='chCompanyName'
disabled
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
BR No.:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("brNo")}
id='brNo'
disabled={!editMode}
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Fax No.:
</Grid>
<Grid item xs={2}>
<TextField
fullWidth
{...register("fax_countryCode")}
id='tel_countryCode'
disabled={!editMode}
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
{...register("number")}
id='number'
disabled={!editMode}
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Contact Tel:
</Grid>
<Grid item xs={2}>
<TextField
fullWidth
{...register("tel_countryCode")}
id='tel_countryCode'
disabled={!editMode}
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
{...register("phoneNumber")}
id='phoneNumber'
disabled={!editMode}
/>
</Grid>
</Grid>
</Grid>



<Grid item lg={4}>
<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("emailAddress")}
id='emailAddress'
disabled={!editMode}
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
BR Expiry Date.:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("brExpiryDateTemp")}
id='brExpiryDateTemp'
disabled={!editMode}
/>
</Grid>
</Grid>
</Grid>


</Grid>

{/*bottom button*/}
<Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"end"} justifyContent="center">
<Grid container maxWidth justifyContent="flex-end">
{editMode?
<>
<Grid item sx={{ml: 3, mr: 3}}>
<Button
size="large"
variant="contained"
type="submit"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Create
</Button>
</Grid>
<Grid item sx={{ml: 3, mr: 3}}>
<Button
size="large"
variant="contained"
onClick={loadDataFun}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
View File
</Button>
</Grid>
</>
:
<Grid item sx={{ml: 3, mr: 3}}>
<Button
size="large"
variant="contained"
color="primary"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
View File
</Button>
</Grid>
}
</Grid>
</Grid>

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

export default UserInformationOgCard_Organization;

+ 73
- 0
src/pages/pnspsUserDetailPage_Organization/index.js View File

@@ -0,0 +1,73 @@
// material-ui
import {Grid, Typography} from '@mui/material';
import {useEffect, useState} from "react";
import * as React from "react";
//import axios from "axios";
import * as HttpUtils from "../../utils/HttpUtils";
import {apiPath} from "../../auth/utils";
import {useParams} from "react-router-dom";
import UserInformationCard from "./UserInformationCard_Organization";
import OrgCard from "./UserInformationOrgCard_Organization";
import LoadingComponent from "../extra-pages/LoadingComponent";
import * as UrlUtils from "../../utils/ApiPathConst";

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


const UserMaintainPage_Organization = () => {
const params = useParams();
const [userData, setUserData] = useState({})
const [isLoading, setLoding] = useState(true);


useEffect(()=>{
console.log(userData);
loadData();
},[]);

const loadData = ()=>{
setLoding(true);
HttpUtils.get({
url: `${apiPath}${UrlUtils.GET_USER_PATH}/${params.id}`,
onSuccess: function(response){
setUserData(response.data)
}
});
};


useEffect(() => {
setLoding(false);
}, [userData]);

return (
isLoading ?
<LoadingComponent/>
:
<Grid container rowSpacing={4.5} columnSpacing={2.75}>
<Grid item xs={12} sx={{mb: -2.25}}>
<Typography variant="h5">Organization User</Typography>
</Grid>
{/*col 1*/}
<Grid item xs={12} >
<Grid container>
<Grid item xs={12} md={12} lg={12}>
<UserInformationCard
userData={userData}
loadDataFun={loadData}
/>
<OrgCard
userData={userData}
loadDataFun={loadData}
/>
</Grid>

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


export default UserMaintainPage_Organization;

src/pages/pnspsUserSearchPage_Public/UserSearchForm_Public.js → src/pages/pnspsUserSearchPage_Individual/UserSearchForm_Individual.js View File

@@ -14,7 +14,7 @@ import * as React from "react";
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //




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


const [type, setType] = useState([]); const [type, setType] = useState([]);
const [locked, setLocked] = useState(false); const [locked, setLocked] = useState(false);
@@ -156,4 +156,4 @@ const UserSearchForm_Public = ({applySearch}) => {
); );
}; };


export default UserSearchForm_Public;
export default UserSearchForm_Individual;

src/pages/pnspsUserSearchPage_Public/UserTable_Public.js → src/pages/pnspsUserSearchPage_Individual/UserTable_Individual.js View File

@@ -11,7 +11,7 @@ import { useTheme } from '@mui/material/styles';
import Checkbox from '@mui/material/Checkbox'; import Checkbox from '@mui/material/Checkbox';
// ==============================|| EVENT TABLE ||============================== // // ==============================|| EVENT TABLE ||============================== //


export default function UserTable_Public({recordList}) {
export default function UserTable_Individual({recordList}) {
const [rows, setRows] = React.useState(recordList); const [rows, setRows] = React.useState(recordList);
const [rowModesModel] = React.useState({}); const [rowModesModel] = React.useState({});
const theme = useTheme(); const theme = useTheme();
@@ -23,7 +23,7 @@ export default function UserTable_Public({recordList}) {
}, [recordList]); }, [recordList]);


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


const columns = [ const columns = [

src/pages/pnspsUserSearchPage_Public/index.js → src/pages/pnspsUserSearchPage_Individual/index.js View File

@@ -3,18 +3,19 @@ import {
Grid, Typography Grid, Typography
} from '@mui/material'; } from '@mui/material';
import MainCard from "../../components/MainCard"; import MainCard from "../../components/MainCard";
import SearchForm from "./UserSearchForm_Public";
import EventTable from "./UserTable_Public";
import SearchForm from "./UserSearchForm_Individual";
import EventTable from "./UserTable_Individual";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import axios from "axios";
import {apiPath} from "../../auth/utils";
import {GET_PUBLIC_USER_PATH} from "../../utils/ApiPathConst";
//import axios from "axios";
//import {apiPath} from "../../auth/utils";
import {GET_IND_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";
import * as HttpUtils from "../../utils/HttpUtils";


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


const UserSearchPage_Public = () => {
const UserSearchPage_Individual = () => {


const [record,setRecord] = useState([]); const [record,setRecord] = useState([]);
const [searchCriteria, setSearchCriteria] = useState({}); const [searchCriteria, setSearchCriteria] = useState({});
@@ -33,19 +34,13 @@ const UserSearchPage_Public = () => {
}, [searchCriteria]); }, [searchCriteria]);


function getUserList(){ function getUserList(){

axios.get(`${apiPath}${GET_PUBLIC_USER_PATH}`,
{params: searchCriteria}
)
.then((response) => {
if (response.status === 200) {
setRecord(response.data);
}
})
.catch(error => {
console.log(error);
return false;
});
HttpUtils.get({
url: GET_IND_USER_PATH,
params: searchCriteria,
onSuccess: function(responseData){
setRecord(responseData);
}
});
} }


function applySearch(input) { function applySearch(input) {
@@ -58,7 +53,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 Public User</Typography>
<Typography variant="h5">View Individual User</Typography>
</Grid> </Grid>


{/*row 1*/} {/*row 1*/}
@@ -82,4 +77,4 @@ const UserSearchPage_Public = () => {
); );
}; };


export default UserSearchPage_Public;
export default UserSearchPage_Individual;

+ 159
- 0
src/pages/pnspsUserSearchPage_Organization/UserSearchForm_Organization.js View File

@@ -0,0 +1,159 @@
// material-ui
import {
Button,
CardContent, FormControlLabel,
Grid, TextField,
Typography
} from '@mui/material';
import MainCard from "../../components/MainCard";
import {useForm} from "react-hook-form";

import { useState} from "react";
import Checkbox from "@mui/material/Checkbox";
import * as React from "react";
// ==============================|| DASHBOARD - DEFAULT ||============================== //


const UserSearchForm_Organization = ({applySearch}) => {

const [type, setType] = useState([]);
const [locked, setLocked] = useState(false);


const { reset, register, handleSubmit } = useForm()
const onSubmit = (data) => {

let typeArray = [];

for(let i =0; i < type.length; i++){
typeArray.push(type[i].label);
}

const temp = {
username: data.userName,
fullName: data.fullName,
email: data.email,
phone: data.phone,
locked: locked,
};
applySearch(temp);
};

function resetForm(){
setType([]);
setLocked(false);
reset();
}

return (
<MainCard xs={12} md={12} lg={12}
border={false}
content={false}>

<form onSubmit={handleSubmit(onSubmit)}>
{/*row 1*/}
<CardContent sx={{ px: 2.5, pt: 3 }}>
<Grid item justifyContent="space-between" alignItems="center">
Search Form
</Grid>
</CardContent>

{/*row 2*/}
<Grid container alignItems={"center"}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
<TextField
fullWidth
{...register("userName")}
id='userName'
label="Username"
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
<TextField
fullWidth
{...register("fullName")}
id="fullName"
label="Full Name"
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
<TextField
fullWidth
{...register("email")}
id="email"
label="Email"
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
<TextField
fullWidth
{...register("phone")}
id="phone"
label="Phone"
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
<FormControlLabel
control={
<Checkbox
checked={locked}
onChange={(event) => setLocked(event.target.checked)}
name="checked"
color="primary"
size="small"
/>
}
label={<Typography variant="h6">Locked</Typography>}
/>
</Grid>
{/*<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>*/}
{/* <TextField*/}
{/* fullWidth*/}
{/* {...register("subDivisionId")}*/}
{/* id="subDivision"*/}
{/* label="Sub-Division"*/}
{/* />*/}
{/*</Grid>*/}

</Grid>


{/*last row*/}
<Grid container maxWidth justifyContent="flex-end">

<Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
<Button
size="large"
variant="contained"
onClick={resetForm}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
Clear
</Button>
</Grid>

<Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
Submit
</Button>
</Grid>
</Grid>
</form>
</MainCard>
);
};

export default UserSearchForm_Organization;

+ 104
- 0
src/pages/pnspsUserSearchPage_Organization/UserTable_Organization.js View File

@@ -0,0 +1,104 @@
// material-ui
import * as React from 'react';
import {
DataGrid,
GridActionsCellItem,
} from "@mui/x-data-grid";
import VisibilityIcon from '@mui/icons-material/Visibility';
import {useEffect} from "react";
import {useNavigate} from "react-router-dom";
import { useTheme } from '@mui/material/styles';
import Checkbox from '@mui/material/Checkbox';
// ==============================|| EVENT TABLE ||============================== //

export default function UserTable_Organization({recordList}) {
const [rows, setRows] = React.useState(recordList);
const [rowModesModel] = React.useState({});
const theme = useTheme();

const navigate = useNavigate()

useEffect(() => {
setRows(recordList);
}, [recordList]);

const handleActionClick = (id) => () => {
navigate('/orgUser/'+ id);
};

const columns = [
{
field: 'actions',
type: 'actions',
headerName: 'Actions',
width: 100,
cellClassName: 'actions',
getActions: ({id}) => {
return [
<GridActionsCellItem
key="OutSave"
icon={<VisibilityIcon/>}
label="View"
className="textPrimary"
onClick={handleActionClick(id)}
color="primary"
/>]
},
},
{
id: 'username',
field: 'username',
headerName: 'User Name',
flex: 1,
},
{
id: 'name',
field: 'name',
headerName: 'Full Name',
flex: 1,
},
{
id: 'email',
field: 'email',
headerName: 'Email',
flex: 1,
},
{
id: 'locked',
field: 'locked',
type: 'bool',
headerName: 'Locked',
flex: 1,
renderCell: (params) => {
return (
<Checkbox
theme={theme}
key="locked"
checked={params.row.locked}
color="primary"
size="small"
//onChange={handleChange}
/>
);
},
},
];

return (
<div style={{height: 400, width: '100%'}}>
<DataGrid
rows={rows}
columns={columns}
editMode="row"
rowModesModel={rowModesModel}
initialState={{
pagination: {
paginationModel: {page: 0, pageSize: 5},
},
}}
pageSizeOptions={[5, 10]}
autoHeight
/>
</div>
);
}

+ 80
- 0
src/pages/pnspsUserSearchPage_Organization/index.js View File

@@ -0,0 +1,80 @@
// material-ui
import {
Grid, Typography
} from '@mui/material';
import MainCard from "../../components/MainCard";
import SearchForm from "./UserSearchForm_Organization";
import EventTable from "./UserTable_Organization";
import {useEffect, useState} from "react";
//import axios from "axios";
//import {apiPath} from "../../auth/utils";
import * as UrlUtils from "../../utils/ApiPathConst";
import * as React from "react";
import LoadingComponent from "../extra-pages/LoadingComponent";
import * as HttpUtils from "../../utils/HttpUtils";

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

const UserSearchPage_Organization = () => {

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

useEffect(() => {
getUserList();
}, []);

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

useEffect(() => {
getUserList();
}, [searchCriteria]);

function getUserList(){
HttpUtils.get({
url: UrlUtils.GET_ORG_USER_PATH,
params: searchCriteria,
onSuccess: function(responseData){
setRecord(responseData);
}
});
}

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

return (
!onReady ?
<LoadingComponent/>
:
<Grid container rowSpacing={4.5} columnSpacing={2.75}>
<Grid item xs={12} sx={{mb: -2.25}}>
<Typography variant="h5">View Organization User</Typography>
</Grid>

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

</Grid>

);
};

export default UserSearchPage_Organization;

+ 16
- 6
src/routes/SettingRoutes.js View File

@@ -9,8 +9,10 @@ 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 UserSearchPage_Individual= Loadable(lazy(()=>import ('pages/pnspsUserSearchPage_Individual')));
const UserMaintainPage_Individual = Loadable(lazy(() => import('pages/pnspsUserDetailPage_Individual')));
const UserSearchPage_Organization= Loadable(lazy(()=>import ('pages/pnspsUserSearchPage_Organization')));
const UserMaintainPage_Organization = Loadable(lazy(() => import('pages/pnspsUserDetailPage_Organization')));
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')));


@@ -37,12 +39,20 @@ const SettingRoutes = {
element: <UserMaintainPage /> element: <UserMaintainPage />
}, },
{ {
path: 'publicUser',
element: <UserSearchPage_Public />
path: 'indUser',
element: <UserSearchPage_Individual />
}, },
{ {
path: '/publicUser/:id',
element: <UserMaintainPage_Public />
path: '/indUser/:id',
element: <UserMaintainPage_Individual />
},
{
path: 'orgUser',
element: <UserSearchPage_Organization />
},
{
path: '/orgUser/:id',
element: <UserMaintainPage_Organization />
}, },
{ {
path: 'setting', path: 'setting',


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

@@ -9,14 +9,16 @@ 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';
export const GET_USER_LOCK = apiPath+'/user/lock';
export const GET_USER_UNLOCK = apiPath+'/user/unlock';


export const POST_PUBLIC_USER = apiPath+'/user/public';
export const GET_PUBLIC_USER_LOCK = apiPath+'/user/public/lock';
export const GET_PUBLIC_USER_UNLOCK = apiPath+'/user/public/unlock';
export const GET_PUBLIC_USER_VERiFY = apiPath+'/user/public/verify';
export const GET_IND_USER_PATH = apiPath+'/user/ind';
export const GET_IND_USER_VERiFY = apiPath+'/user/ind/verify';
export const POST_IND_USER = apiPath+'/user/ind';

export const GET_ORG_USER_PATH = apiPath+'/user/org';




//File Up/Download //File Up/Download


+ 4
- 2
src/utils/HttpUtils.js View File

@@ -1,8 +1,10 @@
import axios from "axios"; import axios from "axios";
import {FILE_UP_POST, FILE_DOWN_GET} from "../utils/ApiPathConst"; import {FILE_UP_POST, FILE_DOWN_GET} from "../utils/ApiPathConst";


export const get = ({url, onSuccess, onFail, onError}) =>{
axios.get(url).then(
export const get = ({url, params, onSuccess, onFail, onError}) =>{
axios.get(url,{
params: params
}).then(
(response)=>{onResponse(response, onSuccess, onFail);} (response)=>{onResponse(response, onSuccess, onFail);}
).catch(error => { ).catch(error => {
return handleError(error,onError); return handleError(error,onError);


Write Preview
Loading…
Cancel
Save