@@ -97,6 +97,9 @@ function Header(props) { | |||
<li> | |||
<Link className="orgUser" to='/orgUser'>Organization User</Link> | |||
</li> | |||
<li> | |||
<Link className="org" to='/org'>Organization</Link> | |||
</li> | |||
<li> | |||
<Link className="usergroupSearchview" to='/usergroupSearchview'>User Group</Link> | |||
</li> | |||
@@ -0,0 +1,447 @@ | |||
// 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'}}> | |||
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'}}> | |||
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'}}> | |||
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; |
@@ -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; |
@@ -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; |
@@ -0,0 +1,120 @@ | |||
// material-ui | |||
import { | |||
Button, | |||
CardContent, | |||
Grid, TextField | |||
} from '@mui/material'; | |||
import MainCard from "../../components/MainCard"; | |||
import {useForm} from "react-hook-form"; | |||
import { useState} from "react"; | |||
import * as React from "react"; | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const OrganizationSearchForm = ({applySearch}) => { | |||
const [type, setType] = useState([]); | |||
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 = { | |||
brNo: data.brNo, | |||
enCompanyName: data.enCompanyName, | |||
chCompanyName: data.chCompanyName, | |||
}; | |||
applySearch(temp); | |||
}; | |||
function resetForm(){ | |||
setType([]); | |||
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("brNo")} | |||
id='brNo' | |||
label="BR No." | |||
/> | |||
</Grid> | |||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}> | |||
<TextField | |||
fullWidth | |||
{...register("enCompanyName")} | |||
id="enCompanyName" | |||
label="Name (English)" | |||
/> | |||
</Grid> | |||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}> | |||
<TextField | |||
fullWidth | |||
{...register("chCompanyName")} | |||
id="chCompanyName" | |||
label="Name (Chinese)" | |||
/> | |||
</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 OrganizationSearchForm; |
@@ -0,0 +1,93 @@ | |||
// material-ui | |||
import * as React from 'react'; | |||
import { | |||
DataGrid, | |||
GridActionsCellItem, | |||
} from "@mui/x-data-grid"; | |||
import EditIcon from '@mui/icons-material/Visibility'; | |||
import {useEffect} from "react"; | |||
import {useNavigate} from "react-router-dom"; | |||
// ==============================|| EVENT TABLE ||============================== // | |||
export default function OrganizationTable({recordList}) { | |||
const [rows, setRows] = React.useState(recordList); | |||
const [rowModesModel] = React.useState({}); | |||
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={<EditIcon/>} | |||
label="Edit" | |||
className="textPrimary" | |||
onClick={handleActionClick(id)} | |||
color="primary" | |||
/>] | |||
}, | |||
}, | |||
{ | |||
id: 'brNo', | |||
field: 'brNo', | |||
headerName: 'BR No.', | |||
flex: 1, | |||
}, | |||
{ | |||
id: 'enCompanyName', | |||
field: 'enCompanyName', | |||
headerName: 'Name (Eng)', | |||
flex: 1, | |||
}, | |||
{ | |||
id: 'chCompanyName', | |||
field: 'chCompanyName', | |||
headerName: 'Name (Ch)', | |||
flex: 1, | |||
}, | |||
{ | |||
id: 'contactTel', | |||
field: 'contactTel', | |||
headerName: 'Tel.', | |||
flex: 1, | |||
}, | |||
{ | |||
id: 'brExpiryDate', | |||
field: 'brExpiryDate', | |||
headerName: 'Expiry Date', | |||
flex: 1, | |||
}, | |||
]; | |||
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> | |||
); | |||
} |
@@ -0,0 +1,78 @@ | |||
// material-ui | |||
import { | |||
Grid, Typography | |||
} from '@mui/material'; | |||
import MainCard from "../../components/MainCard"; | |||
import SearchForm from "./OrganizationSearchForm"; | |||
import EventTable from "./OrganizationTable"; | |||
import {useEffect, useState} from "react"; | |||
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 OrganizationSearchPage = () => { | |||
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</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 OrganizationSearchPage; |
@@ -240,6 +240,26 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { | |||
</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} | |||
@@ -281,29 +301,10 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { | |||
</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"}> | |||
@@ -15,6 +15,9 @@ const UserSearchPage_Organization= Loadable(lazy(()=>import ('pages/pnspsUserSea | |||
const UserMaintainPage_Organization = Loadable(lazy(() => import('pages/pnspsUserDetailPage_Organization'))); | |||
const UserGroupSearchPage = Loadable(lazy(() => import('pages/pnspsUserGroupSearchPage'))); | |||
const UserGroupDetailPage = Loadable(lazy(() => import('pages/pnspsUserGroupDetailPage'))); | |||
const OrganizationSearchPage = Loadable(lazy(() => import('pages/OrganizationSearchPage'))); | |||
const OrganizationDetailPage = Loadable(lazy(() => import('pages/OrganizationDetailPage'))); | |||
// ==============================|| AUTH ROUTING ||============================== // | |||
@@ -54,6 +57,14 @@ const SettingRoutes = { | |||
path: '/orgUser/:id', | |||
element: <UserMaintainPage_Organization /> | |||
}, | |||
{ | |||
path: 'org', | |||
element: <OrganizationSearchPage /> | |||
}, | |||
{ | |||
path: '/org/:id', | |||
element: <OrganizationDetailPage /> | |||
}, | |||
{ | |||
path: 'setting', | |||
element: <SettingPage /> | |||