@@ -2,7 +2,7 @@ | |||
"name": "pnsps-react", | |||
"version": "1.1.2", | |||
"private": true, | |||
"homepage": ".", | |||
"homepage": "/", | |||
"dependencies": { | |||
"@ant-design/colors": "^6.0.0", | |||
"@ant-design/icons": "^4.7.0", | |||
@@ -15,6 +15,7 @@ | |||
"@mui/lab": "^5.0.0-alpha.139", | |||
"@mui/material": "^5.10.6", | |||
"@mui/x-data-grid": "^6.11.1", | |||
"@mui/x-date-pickers": "^6.12.0", | |||
"@reduxjs/toolkit": "^1.8.5", | |||
"@testing-library/jest-dom": "^5.16.5", | |||
"@testing-library/react": "^13.4.0", | |||
@@ -7,9 +7,10 @@ import useJwt from 'auth/jwt/coreUseJwt'; | |||
*/ | |||
// eslint-disable-next-line arrow-body-style | |||
export const hostname = 'localhost'; | |||
const hostPort = '8090'; | |||
const hostPort = '8080'; | |||
export const hostPath = `http://${hostname}:${hostPort}`; | |||
export const apiPath = `${hostPath}/api`; | |||
//export const apiPath = `/api`; | |||
export const isUserLoggedIn = () => { | |||
return localStorage.getItem('userData') && localStorage.getItem(useJwt.jwtConfig.storageTokenKeyName); | |||
@@ -0,0 +1,156 @@ | |||
// material-ui | |||
import * as React from 'react'; | |||
import { | |||
DataGrid, | |||
GridActionsCellItem, | |||
} from "@mui/x-data-grid"; | |||
import {useEffect} from "react"; | |||
import * as Icon from '../utils/IconUtils'; | |||
import * as HttpUtils from "../utils/HttpUtils" | |||
import * as UrlUtils from "../utils/ApiPathConst" | |||
import * as DateUtils from "../utils/DateUtils" | |||
// ==============================|| EVENT TABLE ||============================== // | |||
export default function FileList({refType, refId, allowDelete, sx}) { | |||
const [rows, setRows] = React.useState([]); | |||
const [rowModesModel] = React.useState({}); | |||
useEffect(() => { | |||
loadData(); | |||
}, []); | |||
const onDeleteClick = (fileId, skey, filename) => () => { | |||
HttpUtils.get( | |||
{ | |||
url: UrlUtils.GET_FILE_DELETE, | |||
params:{ | |||
fileId: fileId, | |||
skey:skey, | |||
filename: filename | |||
}, | |||
onSuccess: function(){ | |||
loadData(); | |||
} | |||
} | |||
); | |||
}; | |||
const onDownloadClick = (fileId, skey, filename) => () => { | |||
HttpUtils.fileDownload({ | |||
fileId:fileId, | |||
skey:skey, | |||
filename:filename, | |||
}); | |||
}; | |||
const loadData = ()=>{ | |||
HttpUtils.post( | |||
{ | |||
url: UrlUtils.POST_FILE_LIST, | |||
params:{ | |||
refType: refType, | |||
refId: refId, | |||
}, | |||
onSuccess: function(responseData){ | |||
setRows(responseData.records); | |||
} | |||
} | |||
); | |||
}; | |||
const convertToStr=(bytes,decimals)=>{ | |||
if(bytes == 0) return '0 Bytes'; | |||
var dm = decimals || 2, | |||
sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; | |||
let i = 0; | |||
i = Math.floor(Math.log(bytes) / Math.log(1024)); | |||
return parseFloat((bytes / Math.pow(1024, i)).toFixed(dm)) + ' ' + sizes[i]; | |||
} | |||
const columns = [ | |||
{ | |||
id: 'created', | |||
field: 'created', | |||
headerName: 'created', | |||
flex: 1, | |||
valueGetter:(params)=>{ | |||
return DateUtils.datetimeStr(params.value); | |||
} | |||
}, | |||
{ | |||
field: 'actions', | |||
type: 'actions', | |||
headerName: '', | |||
width: 50, | |||
cellClassName: 'actions', | |||
getActions: (params) => { | |||
return [ | |||
<GridActionsCellItem | |||
key="OutSave" | |||
icon={<Icon.Download/>} | |||
label="Download" | |||
className="textPrimary" | |||
onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)} | |||
color="primary" | |||
/>] | |||
}, | |||
},{ | |||
id: 'filename', | |||
field: 'filename', | |||
headerName: 'filename', | |||
flex: 3, | |||
}, | |||
{ | |||
id: 'filesize', | |||
field: 'filesize', | |||
headerName: 'filesize', | |||
flex: 1, | |||
valueGetter:(params)=>{ | |||
return convertToStr(params.value); | |||
} | |||
}, | |||
]; | |||
if(allowDelete){ | |||
columns.push({ | |||
field: 'actions', | |||
type: 'actions', | |||
headerName: 'Delete', | |||
width: 100, | |||
cellClassName: 'actions', | |||
getActions: (params) => { | |||
return [ | |||
<GridActionsCellItem | |||
key="OutSave" | |||
icon={<Icon.Delete/>} | |||
label="Delete" | |||
className="textPrimary" | |||
onClick={onDeleteClick(params.id, params.row.skey, params.row.filename)} | |||
color="primary" | |||
/>] | |||
}, | |||
}); | |||
} | |||
return ( | |||
<div style={{height: 400, width: '100%'}}> | |||
<DataGrid | |||
sx={sx} | |||
rows={rows} | |||
columns={columns} | |||
editMode="row" | |||
rowModesModel={rowModesModel} | |||
initialState={{ | |||
pagination: { | |||
paginationModel: {page: 0, pageSize: 5}, | |||
}, | |||
}} | |||
pageSizeOptions={[5, 10]} | |||
autoHeight | |||
/> | |||
</div> | |||
); | |||
} |
@@ -0,0 +1,479 @@ | |||
// material-ui | |||
import { | |||
Grid, TextField, Typography, Button | |||
} from '@mui/material'; | |||
import { DatePicker } from '@mui/x-date-pickers/DatePicker'; | |||
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; | |||
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; | |||
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 OrganizationCard = ({userData, loadDataFun, id}) => { | |||
const [currentUserData, setCurrentUserData] = useState(userData); | |||
const [editMode, setEditMode] = useState(false); | |||
const [createMode, setCreateMode] = useState(false); | |||
const from = useForm({defaultValues: userData}); | |||
const {register,reset, handleSubmit} = from; | |||
useEffect(() => { | |||
if(id>0){ | |||
userData["country"] = userData.addressTemp?.country; | |||
userData["district"] = userData.addressTemp?.district; | |||
userData["addressLine1"] = userData.addressTemp?.addressLine1; | |||
userData["addressLine2"] = userData.addressTemp?.addressLine2; | |||
userData["addressLine3"] = userData.addressTemp?.addressLine3; | |||
userData["phoneNumber"] = userData.contactTel?.phoneNumber; | |||
userData["tel_countryCode"] = userData.contactTel?.countryCode; | |||
userData["faxNumber"] = userData.faxNo?.faxNumber; | |||
userData["fax_countryCode"] = userData.faxNo?.countryCode; | |||
userData["brExpiryDate"] = userData.brExpiryDate?userData.brExpiryDate: ""; | |||
userData["brExpiryDateTemp"] = userData.brExpiryDateTemp?userData.brExpiryDate: ""; | |||
}else{ | |||
setCreateMode(id==0); | |||
setEditMode(id==0); | |||
userData["brExpiryDate"] = ""; | |||
userData["brExpiryDateTemp"] = ""; | |||
} | |||
setCurrentUserData(userData); | |||
}, [userData]); | |||
useEffect(() => { | |||
reset(currentUserData); | |||
}, [currentUserData]); | |||
function onSubmitForm(_formData) { | |||
HttpUtils.post({ | |||
url: UrlUtils.POST_ORG_SAVE_PATH, | |||
params: { | |||
id:id>0?id:null, | |||
enCompanyName: _formData.enCompanyName, | |||
chCompanyName: _formData.chCompanyName, | |||
brNo: _formData.brNo, | |||
brExpiryDate: _formData.brExpiryDate, | |||
enCompanyNameTemp: _formData.enCompanyNameTemp, | |||
chCompanyNameTemp: _formData.chCompanyNameTemp, | |||
brExpiryDateTemp: _formData.brExpiryDateTemp, | |||
contactPerson: _formData.contactPerson, | |||
contactTel: { | |||
countryCode: _formData.tel_countryCode, | |||
phoneNumber: _formData.phoneNumber | |||
}, | |||
faxNo: { | |||
countryCode: _formData.fax_countryCode, | |||
faxNumber: _formData.faxNumber | |||
}, | |||
addressTemp: { | |||
country: _formData.country, | |||
district: _formData.district, | |||
addressLine1: _formData.addressLine1, | |||
addressLine2: _formData.addressLine2, | |||
addressLine3: _formData.addressLine3, | |||
} | |||
}, | |||
onSuccess: function(){ | |||
loadDataFun(); | |||
setEditMode(false); | |||
} | |||
}); | |||
} | |||
const onEditClick = () => { | |||
setEditMode(true); | |||
}; | |||
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'}}> | |||
BR No.: | |||
</Grid> | |||
<Grid item xs={7} s={7} md={7} lg={6}> | |||
<TextField | |||
fullWidth | |||
id='brNo' | |||
inputProps={{ maxLength: 8 }} | |||
disabled={!editMode} | |||
{...register("brNo")} | |||
/> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid item lg={8} > | |||
</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 (Eng): | |||
</Grid> | |||
<Grid item xs={7} s={7} md={7} lg={6}> | |||
<TextField | |||
fullWidth | |||
{...register("enCompanyName")} | |||
id='enCompanyName' | |||
disabled={!editMode} | |||
inputProps={{ maxLength: 150 }} | |||
/> | |||
</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 (Ch): | |||
</Grid> | |||
<Grid item xs={7} s={7} md={7} lg={6}> | |||
<TextField | |||
fullWidth | |||
{...register("chCompanyName")} | |||
id='chCompanyName' | |||
disabled={!editMode} | |||
inputProps={{ maxLength: 150 }} | |||
/> | |||
</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'}}> | |||
Expiry Date: | |||
</Grid> | |||
<Grid item xs={7} s={7} md={7} lg={6}> | |||
<LocalizationProvider fullWidth dateAdapter={AdapterDayjs}> | |||
<DatePicker | |||
fullWidth | |||
{...register("brExpiryDate")} | |||
id='brExpiryDate' | |||
name='brExpiryDate' | |||
disabled={!editMode} | |||
/> | |||
</LocalizationProvider> | |||
</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'}}> | |||
Temp Name (Eng): | |||
</Grid> | |||
<Grid item xs={7} s={7} md={7} lg={6}> | |||
<TextField | |||
fullWidth | |||
{...register("enCompanyNameTemp")} | |||
id='enCompanyNameTemp' | |||
disabled={!editMode} | |||
inputProps={{ maxLength: 150 }} | |||
/> | |||
</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'}}> | |||
Temp Name (Ch): | |||
</Grid> | |||
<Grid item xs={7} s={7} md={7} lg={6}> | |||
<TextField | |||
fullWidth | |||
{...register("chCompanyNameTemp")} | |||
id='chCompanyNameTemp' | |||
disabled={!editMode} | |||
inputProps={{ maxLength: 150 }} | |||
/> | |||
</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'}}> | |||
Temp Expiry Date: | |||
</Grid> | |||
<Grid item xs={7} s={7} md={7} lg={6}> | |||
<LocalizationProvider fullWidth dateAdapter={AdapterDayjs}> | |||
<DatePicker | |||
fullWidth | |||
{...register("brExpiryDateTemp")} | |||
id='brExpiryDateTemp' | |||
name='brExpiryDateTemp' | |||
disabled={!editMode} | |||
/> | |||
</LocalizationProvider> | |||
</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 Person: | |||
</Grid> | |||
<Grid item xs={7} s={7} md={7} lg={6}> | |||
<TextField | |||
fullWidth | |||
{...register("contactPerson")} | |||
id='contactPerson' | |||
disabled={!editMode} | |||
inputProps={{ maxLength: 150 }} | |||
/> | |||
</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 | |||
type="number" | |||
defaultValue="852" | |||
{...register("tel_countryCode")} | |||
id='tel_countryCode' | |||
disabled={!editMode} | |||
/> | |||
</Grid> | |||
<Grid item xs={4}> | |||
<TextField | |||
fullWidth | |||
type="tel" | |||
inputProps={{ maxLength: 20 }} | |||
{...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'}}> | |||
fax No: | |||
</Grid> | |||
<Grid item xs={2}> | |||
<TextField | |||
fullWidth | |||
type="number" | |||
defaultValue="852" | |||
{...register("fax_countryCode")} | |||
id='fax_countryCode' | |||
disabled={!editMode} | |||
/> | |||
</Grid> | |||
<Grid item xs={4}> | |||
<TextField | |||
fullWidth | |||
inputProps={{ maxLength: 20 }} | |||
type="number" | |||
{...register("faxNumber")} | |||
id='faxNumber' | |||
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'}}> | |||
Country : | |||
</Grid> | |||
<Grid item xs={7} s={7} md={7} lg={6}> | |||
<TextField | |||
fullWidth | |||
{...register("country")} | |||
id='country' | |||
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'}}> | |||
District : | |||
</Grid> | |||
<Grid item xs={7} s={7} md={7} lg={6}> | |||
<TextField | |||
fullWidth | |||
{...register("district")} | |||
id='district' | |||
disabled={!editMode} | |||
/> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid item lg={4} > | |||
<Grid container alignItems={"top"}> | |||
<Grid item xs={4} s={4} md={4} lg={4} | |||
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'top'}}> | |||
<Grid item lg={12} sx={{alignItems: 'center'}}>Adress :</Grid> | |||
</Grid> | |||
<Grid item lg={6}> | |||
<Grid item lg={12}> | |||
<TextField | |||
fullWidth | |||
{...register("addressLine1")} | |||
id='addressLine1' | |||
disabled={!editMode} | |||
inputProps={{ maxLength: 255 }} | |||
/> | |||
</Grid> | |||
<Grid item lg={12}> | |||
<TextField | |||
fullWidth | |||
{...register("addressLine2")} | |||
id='addressLine2' | |||
disabled={!editMode} | |||
inputProps={{ maxLength: 255 }} | |||
/> | |||
</Grid> | |||
<Grid item lg={12}> | |||
<TextField | |||
fullWidth | |||
{...register("addressLine3")} | |||
id='addressLine3' | |||
disabled={!editMode} | |||
inputProps={{ maxLength: 255 }} | |||
/> | |||
</Grid> | |||
</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? | |||
<> | |||
{createMode? | |||
<> | |||
<Grid item sx={{ml: 3, mr: 3}}> | |||
<Button | |||
size="large" | |||
variant="contained" | |||
type="submit" | |||
sx={{ | |||
textTransform: 'capitalize', | |||
alignItems: 'end' | |||
}} | |||
> | |||
Create | |||
</Button> | |||
</Grid> | |||
</>: | |||
<> | |||
<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" | |||
sx={{ | |||
textTransform: 'capitalize', | |||
alignItems: 'end' | |||
}} | |||
onClick={onEditClick} | |||
> | |||
Edit | |||
</Button> | |||
</Grid> | |||
</> | |||
} | |||
</Grid> | |||
</Grid> | |||
</form> | |||
</MainCard> | |||
); | |||
}; | |||
export default OrganizationCard; |
@@ -1,447 +0,0 @@ | |||
// 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; |
@@ -1,294 +0,0 @@ | |||
// 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; |
@@ -2,43 +2,42 @@ | |||
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 InfoCard from "./OrganizationCard"; | |||
import LoadingComponent from "../extra-pages/LoadingComponent"; | |||
import * as UrlUtils from "../../utils/ApiPathConst"; | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const UserMaintainPage_Organization = () => { | |||
const OrganizationDetailPage = () => { | |||
const params = useParams(); | |||
const [userData, setUserData] = useState({}) | |||
const [formData, setFormData] = useState({}) | |||
const [isLoading, setLoding] = useState(true); | |||
useEffect(()=>{ | |||
console.log(userData); | |||
console.log(formData); | |||
loadData(); | |||
},[]); | |||
const loadData = ()=>{ | |||
setLoding(true); | |||
HttpUtils.get({ | |||
url: `${apiPath}${UrlUtils.GET_USER_PATH}/${params.id}`, | |||
onSuccess: function(response){ | |||
setUserData(response.data) | |||
} | |||
}); | |||
if(params.id>0){ | |||
HttpUtils.get({ | |||
url: UrlUtils.GET_ORG_PATH+"/"+params.id, | |||
onSuccess: function(response){ | |||
setFormData(response.data) | |||
} | |||
}); | |||
} | |||
}; | |||
useEffect(() => { | |||
setLoding(false); | |||
}, [userData]); | |||
}, [formData]); | |||
return ( | |||
isLoading ? | |||
@@ -46,19 +45,16 @@ const UserMaintainPage_Organization = () => { | |||
: | |||
<Grid container rowSpacing={4.5} columnSpacing={2.75}> | |||
<Grid item xs={12} sx={{mb: -2.25}}> | |||
<Typography variant="h5">Organization User</Typography> | |||
<Typography variant="h5">Organization</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} | |||
<InfoCard | |||
userData={formData} | |||
loadDataFun={loadData} | |||
id={params.id} | |||
/> | |||
</Grid> | |||
@@ -70,4 +66,4 @@ const UserMaintainPage_Organization = () => { | |||
}; | |||
export default UserMaintainPage_Organization; | |||
export default OrganizationDetailPage; |
@@ -0,0 +1,71 @@ | |||
// material-ui | |||
import {Grid, Typography} from '@mui/material'; | |||
import {useEffect, useState} from "react"; | |||
import * as React from "react"; | |||
import * as HttpUtils from "../../utils/HttpUtils"; | |||
import {useParams} from "react-router-dom"; | |||
import InfoCard from "./OrganizationCard"; | |||
import LoadingComponent from "../extra-pages/LoadingComponent"; | |||
import * as UrlUtils from "../../utils/ApiPathConst"; | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const OrganizationDetailPage = () => { | |||
const params = useParams(); | |||
const [formData, setFormData] = useState({}) | |||
const [isLoading, setLoding] = useState(true); | |||
useEffect(()=>{ | |||
console.log(formData); | |||
loadData(); | |||
},[]); | |||
const loadData = ()=>{ | |||
setLoding(true); | |||
if(params.id>0){ | |||
HttpUtils.get({ | |||
url: UrlUtils.GET_ORG_FROM_USER_PATH+"/"+params.id, | |||
onSuccess: function(response){ | |||
setFormData(response.data) | |||
} | |||
}); | |||
}else{ | |||
navigate('/org/0'); | |||
} | |||
}; | |||
useEffect(() => { | |||
setLoding(false); | |||
}, [formData]); | |||
return ( | |||
isLoading ? | |||
<LoadingComponent/> | |||
: | |||
<Grid container rowSpacing={4.5} columnSpacing={2.75}> | |||
<Grid item xs={12} sx={{mb: -2.25}}> | |||
<Typography variant="h5">Organization (Create From User)</Typography> | |||
</Grid> | |||
{/*col 1*/} | |||
<Grid item xs={12} > | |||
<Grid container> | |||
<Grid item xs={12} md={12} lg={12}> | |||
<InfoCard | |||
userData={formData} | |||
loadDataFun={loadData} | |||
id={params.id} | |||
/> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
{/*col 2*/} | |||
</Grid> | |||
); | |||
}; | |||
export default OrganizationDetailPage; |
@@ -33,7 +33,7 @@ const OrganizationSearchPage = () => { | |||
function getUserList(){ | |||
HttpUtils.get({ | |||
url: UrlUtils.GET_ORG_USER_PATH, | |||
url: UrlUtils.GET_ORG_PATH, | |||
params: searchCriteria, | |||
onSuccess: function(responseData){ | |||
setRecord(responseData); | |||
@@ -69,9 +69,7 @@ const OrganizationSearchPage = () => { | |||
/> | |||
</MainCard> | |||
</Grid> | |||
</Grid> | |||
); | |||
}; | |||
@@ -438,6 +438,170 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { | |||
</Grid> | |||
</Grid> | |||
<Grid container spacing={1}> | |||
<Grid item lg={1} > | |||
<Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}> | |||
Organization | |||
</Typography> | |||
</Grid> | |||
<Grid item lg={2}> | |||
<Button | |||
variant="contained" | |||
> | |||
Create Organization | |||
</Button> | |||
</Grid> | |||
</Grid> | |||
<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> | |||
</form> | |||
</MainCard> | |||
); | |||
@@ -1,294 +0,0 @@ | |||
// 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; |
@@ -6,8 +6,9 @@ import * as React from "react"; | |||
import * as HttpUtils from "../../utils/HttpUtils"; | |||
import {apiPath} from "../../auth/utils"; | |||
import {useParams} from "react-router-dom"; | |||
import FileList from "../../components/FileList" | |||
import MainCard from "../../components/MainCard"; | |||
import UserInformationCard from "./UserInformationCard_Organization"; | |||
import OrgCard from "./UserInformationOrgCard_Organization"; | |||
import LoadingComponent from "../extra-pages/LoadingComponent"; | |||
import * as UrlUtils from "../../utils/ApiPathConst"; | |||
@@ -56,12 +57,18 @@ const UserMaintainPage_Organization = () => { | |||
userData={userData} | |||
loadDataFun={loadData} | |||
/> | |||
<OrgCard | |||
userData={userData} | |||
loadDataFun={loadData} | |||
/> | |||
</Grid> | |||
<Grid item xs={12} md={12} lg={12}> | |||
<MainCard elevation={0} border={false} content={false}> | |||
<Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}> | |||
Files | |||
</Typography> | |||
<FileList sx={{mt: 3, ml: 3, mb: 1}} | |||
refId={params.id} | |||
refType={"brFile"} | |||
/> | |||
</MainCard> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
{/*col 2*/} | |||
@@ -17,6 +17,7 @@ const UserGroupSearchPage = Loadable(lazy(() => import('pages/pnspsUserGroupSear | |||
const UserGroupDetailPage = Loadable(lazy(() => import('pages/pnspsUserGroupDetailPage'))); | |||
const OrganizationSearchPage = Loadable(lazy(() => import('pages/OrganizationSearchPage'))); | |||
const OrganizationDetailPage = Loadable(lazy(() => import('pages/OrganizationDetailPage'))); | |||
const OrganizationDetailPage_fromUser = Loadable(lazy(() => import('pages/OrganizationDetailPage/index_loadFormUser'))); | |||
// ==============================|| AUTH ROUTING ||============================== // | |||
@@ -65,6 +66,10 @@ const SettingRoutes = { | |||
path: '/org/:id', | |||
element: <OrganizationDetailPage /> | |||
}, | |||
{ | |||
path: '/org/fromUser/:id', | |||
element: <OrganizationDetailPage_fromUser /> | |||
}, | |||
{ | |||
path: 'setting', | |||
element: <SettingPage /> | |||
@@ -20,10 +20,16 @@ export const POST_IND_USER = apiPath+'/user/ind'; | |||
export const GET_ORG_USER_PATH = apiPath+'/user/org'; | |||
export const GET_ORG_PATH = apiPath+'/org'; | |||
export const GET_ORG_FROM_USER_PATH = apiPath+'/org/from-user'; | |||
export const POST_ORG_SAVE_PATH = apiPath+'/org/save'; | |||
//File Up/Download | |||
export const FILE_UP_POST = apiPath+'/file/ul'; | |||
export const FILE_DOWN_GET = apiPath+"/file/dl"; | |||
export const POST_FILE_LIST = apiPath+'/file/list'; | |||
export const GET_FILE_DELETE = apiPath+'/file/delete'; | |||
//export const FILE_DOWN_GET = ({id,skey,filename})=>{ return apiPath+'/file/dl/'+id+'/'+skey+'/'+filename}; | |||
// POST request | |||
@@ -0,0 +1,10 @@ | |||
import DeleteIcon from '@mui/icons-material/DeleteForever'; | |||
import EditIcon from '@mui/icons-material/Edit'; | |||
import ViewIcon from '@mui/icons-material/Visibility'; | |||
import DownloadICon from '@mui/icons-material/Download'; | |||
export const Delete = DeleteIcon; | |||
export const Edit = EditIcon; | |||
export const View = ViewIcon; | |||
export const Download = DownloadICon; |