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

add org

master
Anna Ho 2 years ago
parent
004c57a222
commit
46f5c0b49f
9 changed files with 1139 additions and 19 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3
    -0
      src/layout/MainLayout/Header/index.js
  2. +447
    -0
      src/pages/OrganizationDetailPage/UserInformationCard_Organization.js
  3. +294
    -0
      src/pages/OrganizationDetailPage/UserInformationOrgCard_Organization.js
  4. +73
    -0
      src/pages/OrganizationDetailPage/index.js
  5. +120
    -0
      src/pages/OrganizationSearchPage/OrganizationSearchForm.js
  6. +93
    -0
      src/pages/OrganizationSearchPage/OrganizationTable.js
  7. +78
    -0
      src/pages/OrganizationSearchPage/index.js
  8. +20
    -19
      src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js
  9. +11
    -0
      src/routes/SettingRoutes.js

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

@@ -97,6 +97,9 @@ function Header(props) {
<li> <li>
<Link className="orgUser" to='/orgUser'>Organization User</Link> <Link className="orgUser" to='/orgUser'>Organization User</Link>
</li> </li>
<li>
<Link className="org" to='/org'>Organization</Link>
</li>
<li> <li>
<Link className="usergroupSearchview" to='/usergroupSearchview'>User Group</Link> <Link className="usergroupSearchview" to='/usergroupSearchview'>User Group</Link>
</li> </li>


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

@@ -0,0 +1,447 @@
// material-ui
import {
Grid, TextField, Typography, Button
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {useForm} from "react-hook-form";
import {useEffect, useState} from "react";
import * as DateUtils from '../../utils/DateUtils';
import * as HttpUtils from '../../utils/HttpUtils';
import * as UrlUtils from "../../utils/ApiPathConst";

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


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

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


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

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

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

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

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

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


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

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

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

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

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

<form onSubmit={handleSubmit(onSubmitForm)}>
<Grid container spacing={1}>
<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Username:
</Grid>

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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



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

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

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


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

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

</Grid>

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

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

export default UserInformationCard_Organization;

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

@@ -0,0 +1,294 @@
// material-ui
import {
Grid, TextField, Typography, Button
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {useForm} from "react-hook-form";
import {useEffect, useState} from "react";
import * as DateUtils from '../../utils/DateUtils';
import * as HttpUtils from '../../utils/HttpUtils';
import * as UrlUtils from "../../utils/ApiPathConst";

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


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

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


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

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

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

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

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

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


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


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

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

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

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

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

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

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

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

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

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



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

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

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

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


</Grid>

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

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

export default UserInformationOgCard_Organization;

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

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

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


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


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

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


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

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

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


export default UserMaintainPage_Organization;

+ 120
- 0
src/pages/OrganizationSearchPage/OrganizationSearchForm.js View File

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

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


const OrganizationSearchForm = ({applySearch}) => {

const [type, setType] = useState([]);

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

let typeArray = [];

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

const temp = {
brNo: data.brNo,
enCompanyName: data.enCompanyName,
chCompanyName: data.chCompanyName,
};
applySearch(temp);
};

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

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

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

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

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

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

</Grid>


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

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

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

export default OrganizationSearchForm;

+ 93
- 0
src/pages/OrganizationSearchPage/OrganizationTable.js View File

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

export default function OrganizationTable({recordList}) {
const [rows, setRows] = React.useState(recordList);
const [rowModesModel] = React.useState({});
const navigate = useNavigate()

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

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

const columns = [
{
field: 'actions',
type: 'actions',
headerName: 'Actions',
width: 100,
cellClassName: 'actions',
getActions: ({id}) => {
return [
<GridActionsCellItem
key="OutSave"
icon={<EditIcon/>}
label="Edit"
className="textPrimary"
onClick={handleActionClick(id)}
color="primary"
/>]
},
},
{
id: 'brNo',
field: 'brNo',
headerName: 'BR No.',
flex: 1,
},
{
id: 'enCompanyName',
field: 'enCompanyName',
headerName: 'Name (Eng)',
flex: 1,
},
{
id: 'chCompanyName',
field: 'chCompanyName',
headerName: 'Name (Ch)',
flex: 1,
},
{
id: 'contactTel',
field: 'contactTel',
headerName: 'Tel.',
flex: 1,
},
{
id: 'brExpiryDate',
field: 'brExpiryDate',
headerName: 'Expiry Date',
flex: 1,
},
];

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

+ 78
- 0
src/pages/OrganizationSearchPage/index.js View File

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

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

const OrganizationSearchPage = () => {

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

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

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

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

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

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

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

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

</Grid>

);
};

export default OrganizationSearchPage;

+ 20
- 19
src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js View File

@@ -240,6 +240,26 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => {
</Grid> </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 item lg={4}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4} <Grid item xs={4} s={4} md={4} lg={4}
@@ -281,29 +301,10 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => {
</Grid> </Grid>
</> </>
} }
</Grid> </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 item lg={4}>
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>


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

@@ -15,6 +15,9 @@ const UserSearchPage_Organization= Loadable(lazy(()=>import ('pages/pnspsUserSea
const UserMaintainPage_Organization = Loadable(lazy(() => import('pages/pnspsUserDetailPage_Organization'))); const UserMaintainPage_Organization = Loadable(lazy(() => import('pages/pnspsUserDetailPage_Organization')));
const UserGroupSearchPage = Loadable(lazy(() => import('pages/pnspsUserGroupSearchPage'))); const UserGroupSearchPage = Loadable(lazy(() => import('pages/pnspsUserGroupSearchPage')));
const UserGroupDetailPage = Loadable(lazy(() => import('pages/pnspsUserGroupDetailPage'))); const UserGroupDetailPage = Loadable(lazy(() => import('pages/pnspsUserGroupDetailPage')));
const OrganizationSearchPage = Loadable(lazy(() => import('pages/OrganizationSearchPage')));
const OrganizationDetailPage = Loadable(lazy(() => import('pages/OrganizationDetailPage')));



// ==============================|| AUTH ROUTING ||============================== // // ==============================|| AUTH ROUTING ||============================== //


@@ -54,6 +57,14 @@ const SettingRoutes = {
path: '/orgUser/:id', path: '/orgUser/:id',
element: <UserMaintainPage_Organization /> element: <UserMaintainPage_Organization />
}, },
{
path: 'org',
element: <OrganizationSearchPage />
},
{
path: '/org/:id',
element: <OrganizationDetailPage />
},
{ {
path: 'setting', path: 'setting',
element: <SettingPage /> element: <SettingPage />


Write Preview
Loading…
Cancel
Save