alex
/
PNSPS-frontend-MaterialUI
1
0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
ソースを参照

org load form user

master
Anna Ho 2年前
親
593f00a7d3
コミット
fe54ab184a
3個のファイルの変更、438行の追加、3行の削除
分割表示
差分オプション
統計情報を表示 Patchファイルをダウンロード Diffファイルをダウンロード
  1. +429
    -0
      src/pages/OrganizationDetailPage/OrganizationCard_loadFromUser.js
  2. +3
    -1
      src/pages/OrganizationDetailPage/index_loadFormUser.js
  3. +6
    -2
      src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js

+ 429
- 0
src/pages/OrganizationDetailPage/OrganizationCard_loadFromUser.js ファイルの表示

@@ -0,0 +1,429 @@
// 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";
import {useNavigate} from "react-router-dom";

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


const OrganizationCard = ({userData, id}) => {

const [currentUserData, setCurrentUserData] = useState(userData);
const from = useForm({defaultValues: userData});
const {register,reset, handleSubmit} = from;

const navigate = useNavigate();

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(responseData){
navigate('/org/'+responseData.id);
}
});
}

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 }}
{...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'
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'
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'
/>
</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'
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'
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'
/>
</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'
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'
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
type="tel"
inputProps={{ maxLength: 20 }}
{...register("phoneNumber")}
id='phoneNumber'
/>
</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'
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
inputProps={{ maxLength: 20 }}
type="number"
{...register("faxNumber")}
id='faxNumber'
/>
</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'
/>
</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'
/>
</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'
inputProps={{ maxLength: 255 }}
/>
</Grid>
<Grid item lg={12}>
<TextField
fullWidth
{...register("addressLine2")}
id='addressLine2'
inputProps={{ maxLength: 255 }}
/>
</Grid>
<Grid item lg={12}>
<TextField
fullWidth
{...register("addressLine3")}
id='addressLine3'
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">

<Grid item sx={{ml: 3, mr: 3}}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Create
</Button>
</Grid>
</Grid>
</Grid>

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

export default OrganizationCard;

+ 3
- 1
src/pages/OrganizationDetailPage/index_loadFormUser.js ファイルの表示

@@ -4,8 +4,9 @@ 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 InfoCard from "./OrganizationCard_loadFromUser";
import LoadingComponent from "../extra-pages/LoadingComponent";
import {useNavigate} from "react-router-dom";
import * as UrlUtils from "../../utils/ApiPathConst";

// ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -15,6 +16,7 @@ const OrganizationDetailPage = () => {
const params = useParams();
const [formData, setFormData] = useState({})
const [isLoading, setLoding] = useState(true);
const navigate = useNavigate();


useEffect(()=>{


+ 6
- 2
src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js ファイルの表示

@@ -74,6 +74,10 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => {
setEditMode(true);
};

const createOrgClick = () => {
window.open("/org/fromUser/"+userData.id, "_blank", "noreferrer");
};

const doLock = () => {
HttpUtils.get({
url: UrlUtils.GET_USER_LOCK+"/"+userData.id,
@@ -446,8 +450,8 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => {
</Grid>

<Grid item lg={2}>
<Button
variant="contained"
<Button variant="contained"
onClick={createOrgClick}
>
Create Organization
</Button>


書き込み プレビュー
読み込み中…
キャンセル
保存