|
@@ -1,7 +1,7 @@ |
|
|
// material-ui |
|
|
// material-ui |
|
|
import { |
|
|
import { |
|
|
Grid, TextField, Typography, Button, |
|
|
Grid, TextField, Typography, Button, |
|
|
OutlinedInput, FormHelperText |
|
|
|
|
|
|
|
|
OutlinedInput, FormHelperText, Autocomplete |
|
|
} from '@mui/material'; |
|
|
} from '@mui/material'; |
|
|
import MainCard from "../../components/MainCard"; |
|
|
import MainCard from "../../components/MainCard"; |
|
|
import * as React from "react"; |
|
|
import * as React from "react"; |
|
@@ -10,6 +10,7 @@ import {useEffect, useState} from "react"; |
|
|
import * as DateUtils from '../../utils/DateUtils'; |
|
|
import * as DateUtils from '../../utils/DateUtils'; |
|
|
import * as HttpUtils from '../../utils/HttpUtils'; |
|
|
import * as HttpUtils from '../../utils/HttpUtils'; |
|
|
import * as UrlUtils from "../../utils/ApiPathConst"; |
|
|
import * as UrlUtils from "../../utils/ApiPathConst"; |
|
|
|
|
|
import * as ComboData from "../../utils/ComboData"; |
|
|
|
|
|
|
|
|
import { useFormik,FormikProvider } from 'formik'; |
|
|
import { useFormik,FormikProvider } from 'formik'; |
|
|
import * as yup from 'yup'; |
|
|
import * as yup from 'yup'; |
|
@@ -23,6 +24,9 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { |
|
|
const [editMode, setEditMode] = useState(false); |
|
|
const [editMode, setEditMode] = useState(false); |
|
|
const [locked, setLocked] = useState(false); |
|
|
const [locked, setLocked] = useState(false); |
|
|
|
|
|
|
|
|
|
|
|
const [district, setDistrict] = useState(null); |
|
|
|
|
|
const [country, setCountry] = useState(ComboData.country[0]); |
|
|
|
|
|
|
|
|
const from = useForm({defaultValues: userData}); |
|
|
const from = useForm({defaultValues: userData}); |
|
|
const {register,reset, handleSubmit} = from; |
|
|
const {register,reset, handleSubmit} = from; |
|
|
|
|
|
|
|
@@ -57,6 +61,8 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { |
|
|
userData["modifieDate"] = modifiedBy; |
|
|
userData["modifieDate"] = modifiedBy; |
|
|
userData["verifiedStatus"] = userData.verifiedBy? DateUtils.datetimeStr(userData.verifiedDate)+", "+userData.verifiedByName: "Not verify yet"; |
|
|
userData["verifiedStatus"] = userData.verifiedBy? DateUtils.datetimeStr(userData.verifiedDate)+", "+userData.verifiedByName: "Not verify yet"; |
|
|
|
|
|
|
|
|
|
|
|
userData["lastLoginDate"] = userData.lastLogin?DateUtils.datetimeStr(lastLoginDate):""; |
|
|
|
|
|
|
|
|
userData["country"] = userData.addressBus?.country; |
|
|
userData["country"] = userData.addressBus?.country; |
|
|
userData["district"] = userData.addressBus?.district; |
|
|
userData["district"] = userData.addressBus?.district; |
|
|
userData["addressLine1"] = userData.addressBus?.addressLine1; |
|
|
userData["addressLine1"] = userData.addressBus?.addressLine1; |
|
@@ -68,6 +74,12 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { |
|
|
|
|
|
|
|
|
userData["faxNumber"] = userData.faxNo?.faxNumber; |
|
|
userData["faxNumber"] = userData.faxNo?.faxNumber; |
|
|
userData["fax_countryCode"] = userData.faxNo?.countryCode; |
|
|
userData["fax_countryCode"] = userData.faxNo?.countryCode; |
|
|
|
|
|
|
|
|
|
|
|
userData["brExpiryDate"] = userData.brExpiryDate?DateUtils.convertToDate(brExpiryDate):""; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setDistrict(userData.district); |
|
|
|
|
|
setCountry(userData.country); |
|
|
|
|
|
|
|
|
setCurrentUserData(userData); |
|
|
setCurrentUserData(userData); |
|
|
}, [userData]); |
|
|
}, [userData]); |
|
@@ -79,33 +91,33 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function onSubmitForm() { |
|
|
|
|
|
|
|
|
function onSubmitForm(_data) { |
|
|
HttpUtils.post({ |
|
|
HttpUtils.post({ |
|
|
url: UrlUtils.POST_IND_USER+"/"+userData.id, |
|
|
url: UrlUtils.POST_IND_USER+"/"+userData.id, |
|
|
params: { |
|
|
params: { |
|
|
chName: formik.values.chName, |
|
|
|
|
|
enName: formik.values.enName, |
|
|
|
|
|
|
|
|
chName: _data.chName, |
|
|
|
|
|
enName: _data.enName, |
|
|
contactTel: { |
|
|
contactTel: { |
|
|
countryCode: formik.values.tel_countryCode, |
|
|
|
|
|
phoneNumber: formik.values.phoneNumber |
|
|
|
|
|
|
|
|
countryCode: _data.tel_countryCode, |
|
|
|
|
|
phoneNumber: _data.phoneNumber |
|
|
}, |
|
|
}, |
|
|
faxNo: { |
|
|
faxNo: { |
|
|
countryCode: formik.values.fax_countryCode, |
|
|
|
|
|
faxNumber: formik.values.faxNumber |
|
|
|
|
|
|
|
|
countryCode: _data.fax_countryCode, |
|
|
|
|
|
faxNumber: _data.faxNumber |
|
|
}, |
|
|
}, |
|
|
addressBus: { |
|
|
addressBus: { |
|
|
country: formik.values.country, |
|
|
|
|
|
district: formik.values.district, |
|
|
|
|
|
addressLine1: formik.values.addressLine1, |
|
|
|
|
|
addressLine2: formik.values.addressLine2, |
|
|
|
|
|
addressLine3: formik.values.addressLine3, |
|
|
|
|
|
|
|
|
country: country, |
|
|
|
|
|
district: district, |
|
|
|
|
|
addressLine1: _data.addressLine1, |
|
|
|
|
|
addressLine2: _data.addressLine2, |
|
|
|
|
|
addressLine3: _data.addressLine3, |
|
|
}, |
|
|
}, |
|
|
identification: formik.values.identification, |
|
|
|
|
|
emailBus:formik.values.emailBus, |
|
|
|
|
|
contactPerson: formik.values.contactPerson, |
|
|
|
|
|
enCompanyName: formik.values.enCompanyName, |
|
|
|
|
|
chCompanyName: formik.values.chCompanyName, |
|
|
|
|
|
brNo: formik.values.brNo, |
|
|
|
|
|
|
|
|
identification: _data.identification, |
|
|
|
|
|
emailBus:_data.emailBus, |
|
|
|
|
|
contactPerson: _data.contactPerson, |
|
|
|
|
|
enCompanyName: _data.enCompanyName, |
|
|
|
|
|
chCompanyName: _data.chCompanyName, |
|
|
|
|
|
brNo: _data.brNo, |
|
|
brExpiryDate: formik.values.brExpiryDate, |
|
|
brExpiryDate: formik.values.brExpiryDate, |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
@@ -437,11 +449,8 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { |
|
|
|
|
|
|
|
|
<TextField |
|
|
<TextField |
|
|
fullWidth |
|
|
fullWidth |
|
|
{...register("lastLogin", |
|
|
|
|
|
{ |
|
|
|
|
|
value: currentUserData?.lastLogin, |
|
|
|
|
|
})} |
|
|
|
|
|
id='lastLogin' |
|
|
|
|
|
|
|
|
{...register("lastLoginDate")} |
|
|
|
|
|
id='lastLoginDate' |
|
|
disabled |
|
|
disabled |
|
|
> |
|
|
> |
|
|
</TextField> |
|
|
</TextField> |
|
@@ -603,7 +612,7 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { |
|
|
<TextField |
|
|
<TextField |
|
|
fullWidth |
|
|
fullWidth |
|
|
{...register("contactPerson")} |
|
|
{...register("contactPerson")} |
|
|
id='brExpiryDateTemp' |
|
|
|
|
|
|
|
|
id='contactPerson' |
|
|
disabled={!editMode} |
|
|
disabled={!editMode} |
|
|
/> |
|
|
/> |
|
|
</Grid> |
|
|
</Grid> |
|
@@ -651,6 +660,7 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { |
|
|
id="brExpiryDate" |
|
|
id="brExpiryDate" |
|
|
type="date" |
|
|
type="date" |
|
|
value={formik.values.brExpiryDate} |
|
|
value={formik.values.brExpiryDate} |
|
|
|
|
|
format="dd/MM/yyyy" |
|
|
name="brExpiryDate" |
|
|
name="brExpiryDate" |
|
|
onChange={formik.handleChange} |
|
|
onChange={formik.handleChange} |
|
|
placeholder="與與商業登記證相同如有" |
|
|
placeholder="與與商業登記證相同如有" |
|
@@ -701,7 +711,7 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { |
|
|
</Grid> |
|
|
</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} |
|
|
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> |
|
|
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> |
|
@@ -709,17 +719,25 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { |
|
|
</Grid> |
|
|
</Grid> |
|
|
|
|
|
|
|
|
<Grid item xs={7} s={7} md={7} lg={6}> |
|
|
<Grid item xs={7} s={7} md={7} lg={6}> |
|
|
<TextField |
|
|
|
|
|
fullWidth |
|
|
|
|
|
{...register("district")} |
|
|
|
|
|
id='district' |
|
|
|
|
|
disabled={!editMode} |
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
<Autocomplete |
|
|
|
|
|
fullWidth |
|
|
|
|
|
disablePortal |
|
|
|
|
|
id="district" |
|
|
|
|
|
{...register("district")} |
|
|
|
|
|
value={district} |
|
|
|
|
|
options={ComboData.district} |
|
|
|
|
|
onChange={(event, newValue) => { |
|
|
|
|
|
setDistrict(newValue); |
|
|
|
|
|
}} |
|
|
|
|
|
disabled={!editMode} |
|
|
|
|
|
sx={{"& .MuiInputBase-root": { height: "41px" },"#district":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} |
|
|
|
|
|
renderInput={(params) => <TextField {...params} placeholder="區域 (只適用於香港)"/>} |
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
</Grid> |
|
|
</Grid> |
|
|
</Grid> |
|
|
</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} |
|
|
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> |
|
|
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}> |
|
@@ -727,16 +745,26 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => { |
|
|
</Grid> |
|
|
</Grid> |
|
|
|
|
|
|
|
|
<Grid item xs={7} s={7} md={7} lg={6}> |
|
|
<Grid item xs={7} s={7} md={7} lg={6}> |
|
|
<TextField |
|
|
|
|
|
fullWidth |
|
|
|
|
|
{...register("country")} |
|
|
|
|
|
id='country' |
|
|
|
|
|
|
|
|
<Autocomplete |
|
|
|
|
|
fullWidth |
|
|
|
|
|
disablePortal |
|
|
disabled={!editMode} |
|
|
disabled={!editMode} |
|
|
|
|
|
id="country" |
|
|
|
|
|
value={country} |
|
|
|
|
|
options={ComboData.country} |
|
|
|
|
|
{...register("country")} |
|
|
|
|
|
onChange={(event, newValue) => { |
|
|
|
|
|
setCountry(newValue); |
|
|
|
|
|
}} |
|
|
|
|
|
|
|
|
|
|
|
sx={{"& .MuiInputBase-root": { height: "41px" },"#country":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} |
|
|
|
|
|
renderInput={(params) => <TextField {...params} placeholder="國家/地區"/>} |
|
|
/> |
|
|
/> |
|
|
</Grid> |
|
|
</Grid> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Grid> |
|
|
</Grid> |
|
|
</Grid> |
|
|
</Grid> |
|
|
|
|
|
|
|
|
</Grid> |
|
|
</Grid> |
|
|
|
|
|
|
|
|
</form> |
|
|
</form> |
|
|