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

add file list

master
Anna Ho 2 years ago
parent
c686c3a27a
commit
593f00a7d3
15 changed files with 927 additions and 1068 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -1
      package.json
  2. +2
    -1
      src/auth/utils.js
  3. +156
    -0
      src/components/FileList.js
  4. +479
    -0
      src/pages/OrganizationDetailPage/OrganizationCard.js
  5. +0
    -447
      src/pages/OrganizationDetailPage/UserInformationCard_Organization.js
  6. +0
    -294
      src/pages/OrganizationDetailPage/UserInformationOrgCard_Organization.js
  7. +18
    -22
      src/pages/OrganizationDetailPage/index.js
  8. +71
    -0
      src/pages/OrganizationDetailPage/index_loadFormUser.js
  9. +1
    -3
      src/pages/OrganizationSearchPage/index.js
  10. +164
    -0
      src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js
  11. +0
    -294
      src/pages/pnspsUserDetailPage_Organization/UserInformationOrgCard_Organization.js
  12. +13
    -6
      src/pages/pnspsUserDetailPage_Organization/index.js
  13. +5
    -0
      src/routes/SettingRoutes.js
  14. +6
    -0
      src/utils/ApiPathConst.js
  15. +10
    -0
      src/utils/IconUtils.js

+ 2
- 1
package.json View File

@@ -2,7 +2,7 @@
"name": "pnsps-react", "name": "pnsps-react",
"version": "1.1.2", "version": "1.1.2",
"private": true, "private": true,
"homepage": ".",
"homepage": "/",
"dependencies": { "dependencies": {
"@ant-design/colors": "^6.0.0", "@ant-design/colors": "^6.0.0",
"@ant-design/icons": "^4.7.0", "@ant-design/icons": "^4.7.0",
@@ -15,6 +15,7 @@
"@mui/lab": "^5.0.0-alpha.139", "@mui/lab": "^5.0.0-alpha.139",
"@mui/material": "^5.10.6", "@mui/material": "^5.10.6",
"@mui/x-data-grid": "^6.11.1", "@mui/x-data-grid": "^6.11.1",
"@mui/x-date-pickers": "^6.12.0",
"@reduxjs/toolkit": "^1.8.5", "@reduxjs/toolkit": "^1.8.5",
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",


+ 2
- 1
src/auth/utils.js View File

@@ -7,9 +7,10 @@ import useJwt from 'auth/jwt/coreUseJwt';
*/ */
// eslint-disable-next-line arrow-body-style // eslint-disable-next-line arrow-body-style
export const hostname = 'localhost'; export const hostname = 'localhost';
const hostPort = '8090';
const hostPort = '8080';
export const hostPath = `http://${hostname}:${hostPort}`; export const hostPath = `http://${hostname}:${hostPort}`;
export const apiPath = `${hostPath}/api`; export const apiPath = `${hostPath}/api`;
//export const apiPath = `/api`;


export const isUserLoggedIn = () => { export const isUserLoggedIn = () => {
return localStorage.getItem('userData') && localStorage.getItem(useJwt.jwtConfig.storageTokenKeyName); return localStorage.getItem('userData') && localStorage.getItem(useJwt.jwtConfig.storageTokenKeyName);


+ 156
- 0
src/components/FileList.js View File

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

+ 479
- 0
src/pages/OrganizationDetailPage/OrganizationCard.js View File

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

+ 0
- 447
src/pages/OrganizationDetailPage/UserInformationCard_Organization.js View File

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

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

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

+ 18
- 22
src/pages/OrganizationDetailPage/index.js View File

@@ -2,43 +2,42 @@
import {Grid, Typography} from '@mui/material'; import {Grid, Typography} from '@mui/material';
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import * as React from "react"; import * as React from "react";
//import axios from "axios";
import * as HttpUtils from "../../utils/HttpUtils"; import * as HttpUtils from "../../utils/HttpUtils";
import {apiPath} from "../../auth/utils";
import {useParams} from "react-router-dom"; 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 LoadingComponent from "../extra-pages/LoadingComponent";
import * as UrlUtils from "../../utils/ApiPathConst"; import * as UrlUtils from "../../utils/ApiPathConst";


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




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




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


const loadData = ()=>{ const loadData = ()=>{
setLoding(true); 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(() => { useEffect(() => {
setLoding(false); setLoding(false);
}, [userData]);
}, [formData]);


return ( return (
isLoading ? isLoading ?
@@ -46,19 +45,16 @@ const UserMaintainPage_Organization = () => {
: :
<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">Organization User</Typography>
<Typography variant="h5">Organization</Typography>
</Grid> </Grid>
{/*col 1*/} {/*col 1*/}
<Grid item xs={12} > <Grid item xs={12} >
<Grid container> <Grid container>
<Grid item xs={12} md={12} lg={12}> <Grid item xs={12} md={12} lg={12}>
<UserInformationCard
userData={userData}
loadDataFun={loadData}
/>
<OrgCard
userData={userData}
<InfoCard
userData={formData}
loadDataFun={loadData} loadDataFun={loadData}
id={params.id}
/> />
</Grid> </Grid>


@@ -70,4 +66,4 @@ const UserMaintainPage_Organization = () => {
}; };




export default UserMaintainPage_Organization;
export default OrganizationDetailPage;

+ 71
- 0
src/pages/OrganizationDetailPage/index_loadFormUser.js View File

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

+ 1
- 3
src/pages/OrganizationSearchPage/index.js View File

@@ -33,7 +33,7 @@ const OrganizationSearchPage = () => {


function getUserList(){ function getUserList(){
HttpUtils.get({ HttpUtils.get({
url: UrlUtils.GET_ORG_USER_PATH,
url: UrlUtils.GET_ORG_PATH,
params: searchCriteria, params: searchCriteria,
onSuccess: function(responseData){ onSuccess: function(responseData){
setRecord(responseData); setRecord(responseData);
@@ -69,9 +69,7 @@ const OrganizationSearchPage = () => {
/> />
</MainCard> </MainCard>
</Grid> </Grid>

</Grid> </Grid>

); );
}; };




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

@@ -438,6 +438,170 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => {
</Grid> </Grid>
</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> </form>
</MainCard> </MainCard>
); );


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

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

+ 13
- 6
src/pages/pnspsUserDetailPage_Organization/index.js View File

@@ -6,8 +6,9 @@ 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 FileList from "../../components/FileList"
import MainCard from "../../components/MainCard";
import UserInformationCard from "./UserInformationCard_Organization"; import UserInformationCard from "./UserInformationCard_Organization";
import OrgCard from "./UserInformationOrgCard_Organization";
import LoadingComponent from "../extra-pages/LoadingComponent"; import LoadingComponent from "../extra-pages/LoadingComponent";
import * as UrlUtils from "../../utils/ApiPathConst"; import * as UrlUtils from "../../utils/ApiPathConst";


@@ -56,12 +57,18 @@ const UserMaintainPage_Organization = () => {
userData={userData} userData={userData}
loadDataFun={loadData} loadDataFun={loadData}
/> />
<OrgCard
userData={userData}
loadDataFun={loadData}
/>
</Grid> </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>
</Grid> </Grid>
{/*col 2*/} {/*col 2*/}


+ 5
- 0
src/routes/SettingRoutes.js View File

@@ -17,6 +17,7 @@ const UserGroupSearchPage = Loadable(lazy(() => import('pages/pnspsUserGroupSear
const UserGroupDetailPage = Loadable(lazy(() => import('pages/pnspsUserGroupDetailPage'))); const UserGroupDetailPage = Loadable(lazy(() => import('pages/pnspsUserGroupDetailPage')));
const OrganizationSearchPage = Loadable(lazy(() => import('pages/OrganizationSearchPage'))); const OrganizationSearchPage = Loadable(lazy(() => import('pages/OrganizationSearchPage')));
const OrganizationDetailPage = Loadable(lazy(() => import('pages/OrganizationDetailPage'))); const OrganizationDetailPage = Loadable(lazy(() => import('pages/OrganizationDetailPage')));
const OrganizationDetailPage_fromUser = Loadable(lazy(() => import('pages/OrganizationDetailPage/index_loadFormUser')));




// ==============================|| AUTH ROUTING ||============================== // // ==============================|| AUTH ROUTING ||============================== //
@@ -65,6 +66,10 @@ const SettingRoutes = {
path: '/org/:id', path: '/org/:id',
element: <OrganizationDetailPage /> element: <OrganizationDetailPage />
}, },
{
path: '/org/fromUser/:id',
element: <OrganizationDetailPage_fromUser />
},
{ {
path: 'setting', path: 'setting',
element: <SettingPage /> element: <SettingPage />


+ 6
- 0
src/utils/ApiPathConst.js View File

@@ -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_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 //File Up/Download
export const FILE_UP_POST = apiPath+'/file/ul'; export const FILE_UP_POST = apiPath+'/file/ul';
export const FILE_DOWN_GET = apiPath+"/file/dl"; 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}; //export const FILE_DOWN_GET = ({id,skey,filename})=>{ return apiPath+'/file/dl/'+id+'/'+skey+'/'+filename};


// POST request // POST request


+ 10
- 0
src/utils/IconUtils.js View File

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

Write Preview
Loading…
Cancel
Save