|
|
@@ -1,16 +1,20 @@ |
|
|
|
// material-ui |
|
|
|
import { |
|
|
|
Grid, TextField, Typography, Button |
|
|
|
Grid, TextField, Typography, Button, Autocomplete, Stack, FormHelperText, OutlinedInput |
|
|
|
} 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 yup from 'yup'; |
|
|
|
//import Checkbox from "@mui/material/Checkbox"; |
|
|
|
//import LoadingComponent from "../extra-pages/LoadingComponent"; |
|
|
|
|
|
|
|
import { useFormik,FormikProvider } from 'formik'; |
|
|
|
import * as DateUtils from '../../utils/DateUtils'; |
|
|
|
import * as HttpUtils from '../../utils/HttpUtils'; |
|
|
|
import * as UrlUtils from "../../utils/ApiPathConst"; |
|
|
|
import * as ComboData from "../../utils/ComboData"; |
|
|
|
//import axios from 'axios'; |
|
|
|
|
|
|
|
//import {useParams} from "react-router-dom"; |
|
|
@@ -24,28 +28,60 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { |
|
|
|
const [editMode, setEditMode] = useState(false); |
|
|
|
const [locked, setLocked] = useState(false); |
|
|
|
|
|
|
|
const [idDocType, setIdDocType] = useState(null); |
|
|
|
const [district, setDistrict] = useState(null); |
|
|
|
const [country, setCountry] = useState(ComboData.country[0]); |
|
|
|
|
|
|
|
|
|
|
|
const from = useForm({defaultValues: userData}); |
|
|
|
const {register,reset, handleSubmit} = from; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const formik = useFormik({ |
|
|
|
initialValues:(currentUserData), |
|
|
|
validationSchema:yup.object().shape({ |
|
|
|
enName: yup.string().max(255).required('請輸入英文姓名'), |
|
|
|
chName: yup.string().max(255).required('請輸入中文姓名'), |
|
|
|
addressLine1: yup.string().max(255).required('請輸入第一行地址'), |
|
|
|
addressLine2: yup.string().max(255).required('請輸入第二行地址'), |
|
|
|
addressLine3: yup.string().max(255).required('請輸入第三行地址'), |
|
|
|
emailAddress: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵'), |
|
|
|
identification: yup.string().min(7,"請輸入證件號碼").required('請輸入證件號碼'), |
|
|
|
checkDigit:yup.string().max(1).required('請輸入括號內的數字或字母'), |
|
|
|
idDocType: yup.string().max(255).required('請輸入證件類別'), |
|
|
|
tel_countryCode: yup.string().min(3,'請輸入3位數字').required('請輸入國際區號'), |
|
|
|
fax_countryCode: yup.string().min(3,'請輸入3位數字'), |
|
|
|
phoneNumber: yup.string().min(8,'請輸入8位數字').required('請輸入聯絡電話'), |
|
|
|
faxNumber: yup.string().min(8,'請輸入8位數字'), |
|
|
|
}), |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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["verifiedStatus"] = userData.verifiedBy? DateUtils.datetimeStr(userData.verifiedDate)+", "+userData.verifiedByName: "Not verify yet"; |
|
|
|
|
|
|
|
userData["country"] = userData.address?.country; |
|
|
|
userData["district"] = userData.address?.district; |
|
|
|
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; |
|
|
|
|
|
|
|
setIdDocType(userData.idDocType); |
|
|
|
setDistrict(userData.district); |
|
|
|
setCountry(userData.country); |
|
|
|
|
|
|
|
setCurrentUserData(userData); |
|
|
|
}, [userData]); |
|
|
@@ -56,29 +92,31 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { |
|
|
|
}, [currentUserData]); |
|
|
|
|
|
|
|
|
|
|
|
function onSubmitForm(_formData) { |
|
|
|
function onSubmitForm() { |
|
|
|
HttpUtils.post({ |
|
|
|
url: UrlUtils.POST_IND_USER+"/"+userData.id, |
|
|
|
params: { |
|
|
|
prefix: _formData.prefix, |
|
|
|
enName: _formData.enName, |
|
|
|
chName: _formData.chName, |
|
|
|
idDocType: _formData.idDocType, |
|
|
|
prefix: formik.values.prefix, |
|
|
|
enName: formik.values.enName, |
|
|
|
chName: formik.values.chName, |
|
|
|
idDocType: idDocType, |
|
|
|
contactTel: { |
|
|
|
countryCode: _formData.tel_countryCode, |
|
|
|
phoneNumber: _formData.phoneNumber |
|
|
|
countryCode: formik.values.tel_countryCode, |
|
|
|
phoneNumber: formik.values.phoneNumber |
|
|
|
}, |
|
|
|
identification: _formData.identification, |
|
|
|
identification: formik.values.identification, |
|
|
|
checkDigit: formik.values.checkDigit, |
|
|
|
faxNo:{ |
|
|
|
countryCode: _formData.fax_countryCode, |
|
|
|
faxNumber: _formData.faxNumber |
|
|
|
countryCode: formik.values.fax_countryCode, |
|
|
|
faxNumber: formik.values.faxNumber |
|
|
|
}, |
|
|
|
emailAddress:_formData.emailAddress, |
|
|
|
emailAddress:formik.values.emailAddress, |
|
|
|
address:{ |
|
|
|
country:_formData.country, |
|
|
|
addressLine1: _formData.addressLine1, |
|
|
|
addressLine2: _formData.addressLine2, |
|
|
|
addressLine3: _formData.addressLine3, |
|
|
|
country:country, |
|
|
|
district:district, |
|
|
|
addressLine1: formik.values.addressLine1, |
|
|
|
addressLine2: formik.values.addressLine2, |
|
|
|
addressLine3: formik.values.addressLine3, |
|
|
|
}, |
|
|
|
}, |
|
|
|
onSuccess: function(){ |
|
|
@@ -93,7 +131,7 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { |
|
|
|
|
|
|
|
const onVerifiedClick = () => { |
|
|
|
HttpUtils.get({ |
|
|
|
url: UrlUtils.GET_IND_USER_VERIFY+"/"+id, |
|
|
|
url: UrlUtils.GET_IND_USER_VERIFY+"/"+userData.id, |
|
|
|
onSuccess: function(){ |
|
|
|
loadDataFun(); |
|
|
|
} |
|
|
@@ -135,7 +173,66 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { |
|
|
|
Information |
|
|
|
</Typography> |
|
|
|
|
|
|
|
<FormikProvider value={formik}> |
|
|
|
<form onSubmit={handleSubmit(onSubmitForm)}> |
|
|
|
|
|
|
|
|
|
|
|
{/*top button*/} |
|
|
|
<Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"start"} justifyContent="center"> |
|
|
|
<Grid container maxWidth justifyContent="flex-start"> |
|
|
|
|
|
|
|
{editMode? |
|
|
|
<> |
|
|
|
<Grid item sx={{ml: 3, mr: 3}}> |
|
|
|
<Button |
|
|
|
size="large" |
|
|
|
variant="contained" |
|
|
|
onClick={loadDataFun} |
|
|
|
sx={{ |
|
|
|
textTransform: 'capitalize', |
|
|
|
alignItems: 'end' |
|
|
|
}} |
|
|
|
> |
|
|
|
Cancel Edit |
|
|
|
</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> |
|
|
|
{/*end top button*/} |
|
|
|
|
|
|
|
<Grid container spacing={1}> |
|
|
|
<Grid item lg={4} > |
|
|
@@ -164,12 +261,33 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { |
|
|
|
</Grid> |
|
|
|
|
|
|
|
<Grid item xs={7} s={7} md={7} lg={6}> |
|
|
|
<TextField |
|
|
|
fullWidth |
|
|
|
{...register("enName")} |
|
|
|
id='enName' |
|
|
|
disabled={!editMode} |
|
|
|
/> |
|
|
|
<Stack> |
|
|
|
<OutlinedInput |
|
|
|
id="enName" |
|
|
|
type="enName" |
|
|
|
{...register("enName")} |
|
|
|
value={formik.values.enName} |
|
|
|
disabled={!editMode} |
|
|
|
name="enName" |
|
|
|
onChange={formik.handleChange} |
|
|
|
placeholder="與身份證明文件相同" |
|
|
|
fullWidth |
|
|
|
error={Boolean(formik.touched.enName && formik.errors.enName)} |
|
|
|
onBlur={formik.handleBlur} |
|
|
|
inputProps={{ |
|
|
|
onKeyDown: (e) => { |
|
|
|
if (e.key === 'Enter') { |
|
|
|
e.preventDefault(); |
|
|
|
} |
|
|
|
}, |
|
|
|
}} |
|
|
|
/> |
|
|
|
{formik.touched.enName && formik.errors.enName && ( |
|
|
|
<FormHelperText error id="helper-text-enName-signup"> |
|
|
|
{formik.errors.enName} |
|
|
|
</FormHelperText> |
|
|
|
)} |
|
|
|
</Stack> |
|
|
|
</Grid> |
|
|
|
</Grid> |
|
|
|
</Grid> |
|
|
@@ -218,12 +336,30 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { |
|
|
|
</Grid> |
|
|
|
|
|
|
|
<Grid item xs={7} s={7} md={7} lg={6}> |
|
|
|
<TextField |
|
|
|
fullWidth |
|
|
|
{...register("chName")} |
|
|
|
id='chName' |
|
|
|
disabled={!editMode} |
|
|
|
/> |
|
|
|
<OutlinedInput |
|
|
|
fullWidth |
|
|
|
disabled={!editMode} |
|
|
|
{...register("chName")} |
|
|
|
error={Boolean(formik.touched.chName && formik.errors.chName)} |
|
|
|
id="chName" |
|
|
|
type="text" |
|
|
|
value={formik.values.chName} |
|
|
|
name="chName" |
|
|
|
onChange={formik.handleChange} |
|
|
|
placeholder="與身份證明文件相同" |
|
|
|
inputProps={{ |
|
|
|
onKeyDown: (e) => { |
|
|
|
if (e.key === 'Enter') { |
|
|
|
e.preventDefault(); |
|
|
|
} |
|
|
|
}, |
|
|
|
}} |
|
|
|
/> |
|
|
|
{formik.touched.chName && formik.errors.chName && ( |
|
|
|
<FormHelperText error id="helper-text-chName-signup"> |
|
|
|
{formik.errors.chName} |
|
|
|
</FormHelperText> |
|
|
|
)} |
|
|
|
</Grid> |
|
|
|
</Grid> |
|
|
|
</Grid> |
|
|
@@ -255,12 +391,32 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { |
|
|
|
</Grid> |
|
|
|
|
|
|
|
<Grid item xs={7} s={7} md={7} lg={6}> |
|
|
|
<TextField |
|
|
|
fullWidth |
|
|
|
{...register("idDocType")} |
|
|
|
id='idDocType' |
|
|
|
disabled={!editMode} |
|
|
|
/> |
|
|
|
|
|
|
|
<Stack spacing={1} sx={{mr:{md:1},mb:{xs:0.5}}}> |
|
|
|
<Autocomplete |
|
|
|
fullWidth |
|
|
|
disablePortal |
|
|
|
id="idDocType" |
|
|
|
{...register("idDocType")} |
|
|
|
disabled={!editMode} |
|
|
|
value={formik.values.idDocType} |
|
|
|
options={ComboData.idDocType} |
|
|
|
onBlur={formik.handleBlur} |
|
|
|
onChange={(event, newValue) => { |
|
|
|
setIdDocType(newValue); |
|
|
|
}} |
|
|
|
sx={{"& .MuiInputBase-root": { height: "41px" },"#idDocType":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} |
|
|
|
renderInput={(params) => <TextField {...params} placeholder="證件類別"/>} |
|
|
|
/> |
|
|
|
{formik.touched.idDocType && ( |
|
|
|
idDocType===null? |
|
|
|
<FormHelperText error id="helper-text-idDocType-signup"> |
|
|
|
請輸入證件類別 |
|
|
|
</FormHelperText>:'' |
|
|
|
)} |
|
|
|
</Stack> |
|
|
|
|
|
|
|
|
|
|
|
</Grid> |
|
|
|
</Grid> |
|
|
|
</Grid> |
|
|
@@ -300,7 +456,7 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { |
|
|
|
|
|
|
|
|
|
|
|
{ |
|
|
|
currentUserData.verified || editMode? |
|
|
|
currentUserData.verifiedBy || editMode? |
|
|
|
<Grid item xs={6}> |
|
|
|
<TextField |
|
|
|
fullWidth |
|
|
@@ -329,7 +485,7 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { |
|
|
|
}} |
|
|
|
onClick={onVerifiedClick} |
|
|
|
> |
|
|
|
Verified |
|
|
|
Verify |
|
|
|
</Button> |
|
|
|
</Grid> |
|
|
|
</> |
|
|
@@ -346,17 +502,109 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { |
|
|
|
ID No.: |
|
|
|
</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 item lg={4}> |
|
|
|
<Grid container> |
|
|
|
{idDocType =="HKID"? |
|
|
|
<> |
|
|
|
<Grid item lg={8}> |
|
|
|
<Stack fullWidth> |
|
|
|
<OutlinedInput |
|
|
|
disabled={!editMode} |
|
|
|
{...register("identification")} |
|
|
|
id="identification" |
|
|
|
type="text" |
|
|
|
value={formik.values.identification} |
|
|
|
name="identification" |
|
|
|
onChange={formik.handleChange} |
|
|
|
placeholder="證件號碼" |
|
|
|
//sx={{mr:1}} |
|
|
|
error={Boolean(formik.touched.idNo && formik.errors.idNo)} |
|
|
|
onBlur={formik.handleBlur} |
|
|
|
inputProps={{ |
|
|
|
maxLength: idDocType =='HKID'?7:18, |
|
|
|
onKeyDown: (e) => { |
|
|
|
if (e.key === 'Enter') { |
|
|
|
e.preventDefault(); |
|
|
|
} |
|
|
|
}, |
|
|
|
}} |
|
|
|
/> |
|
|
|
{formik.touched.identification && formik.errors.identification && ( |
|
|
|
<FormHelperText error id="helper-text-idNo-signup"> |
|
|
|
{formik.errors.identification} |
|
|
|
</FormHelperText> |
|
|
|
)} |
|
|
|
{formik.touched.checkDigit && formik.errors.checkDigit && ( |
|
|
|
<FormHelperText error id="helper-text-checkDigit-signup"> |
|
|
|
{formik.errors.checkDigit} |
|
|
|
</FormHelperText> |
|
|
|
)} |
|
|
|
</Stack> |
|
|
|
</Grid> |
|
|
|
<Grid item lg={4}> |
|
|
|
<Stack fullWidth > |
|
|
|
<OutlinedInput |
|
|
|
disabled={!editMode} |
|
|
|
{...register("checkDigit")} |
|
|
|
id="checkDigit" |
|
|
|
type="text" |
|
|
|
value={formik.values.checkDigit} |
|
|
|
name="checkDigit" |
|
|
|
onChange={formik.handleChange} |
|
|
|
placeholder="( )" |
|
|
|
// sx={{height:"53px"}} |
|
|
|
inputProps={{ |
|
|
|
maxLength: 1, |
|
|
|
onKeyDown: (e) => { |
|
|
|
if (e.key === 'Enter') { |
|
|
|
e.preventDefault(); |
|
|
|
} |
|
|
|
}, |
|
|
|
}} |
|
|
|
fullWidth |
|
|
|
error={Boolean(formik.touched.checkDigit && formik.errors.checkDigit)} |
|
|
|
onBlur={formik.handleBlur} |
|
|
|
/> |
|
|
|
</Stack> |
|
|
|
</Grid> |
|
|
|
</>: |
|
|
|
<Grid item lg={4}> |
|
|
|
<Stack fullWidth> |
|
|
|
<OutlinedInput |
|
|
|
{...register("identification")} |
|
|
|
disabled={!editMode} |
|
|
|
id="identification" |
|
|
|
type="text" |
|
|
|
value={formik.values.identification} |
|
|
|
name="identification" |
|
|
|
onChange={formik.handleChange} |
|
|
|
placeholder="證件號碼" |
|
|
|
fullWidth |
|
|
|
sx={{mr:1}} |
|
|
|
error={Boolean(formik.touched.identification && formik.errors.identification)} |
|
|
|
onBlur={formik.handleBlur} |
|
|
|
inputProps={{ |
|
|
|
onKeyDown: (e) => { |
|
|
|
if (e.key === 'Enter') { |
|
|
|
e.preventDefault(); |
|
|
|
} |
|
|
|
}, |
|
|
|
}} |
|
|
|
/> |
|
|
|
{formik.touched.identification && formik.errors.identification && ( |
|
|
|
<FormHelperText error id="helper-text-idNo-signup"> |
|
|
|
{formik.errors.identification} |
|
|
|
</FormHelperText> |
|
|
|
)} |
|
|
|
</Stack> |
|
|
|
</Grid> |
|
|
|
} |
|
|
|
|
|
|
|
</Grid> |
|
|
|
</Grid> |
|
|
|
<Button lg={2} variant="contained" onClick={downloadFile} >View File</Button> |
|
|
|
|
|
|
|
|
|
|
|
</Grid> |
|
|
|
</Grid> |
|
|
|
|
|
|
@@ -417,13 +665,24 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { |
|
|
|
</Grid> |
|
|
|
|
|
|
|
<Grid item xs={7} s={7} md={7} lg={6}> |
|
|
|
<TextField |
|
|
|
fullWidth |
|
|
|
{...register("country")} |
|
|
|
id='country' |
|
|
|
<Autocomplete |
|
|
|
fullWidth |
|
|
|
disablePortal |
|
|
|
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> |
|
|
|
|
|
|
@@ -452,20 +711,68 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { |
|
|
|
Status: |
|
|
|
</Grid> |
|
|
|
|
|
|
|
<Grid item xs={7} s={7} md={7} lg={6}> |
|
|
|
<TextField |
|
|
|
fullWidth |
|
|
|
{...register("status")} |
|
|
|
id='status' |
|
|
|
disabled |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
{ |
|
|
|
editMode? |
|
|
|
<Grid item lg={7}> |
|
|
|
<TextField |
|
|
|
fullWidth |
|
|
|
{...register("status")} |
|
|
|
id='status' |
|
|
|
disabled |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
: |
|
|
|
<> |
|
|
|
<Grid item lg={4}> |
|
|
|
<TextField |
|
|
|
fullWidth |
|
|
|
{...register("status")} |
|
|
|
id='status' |
|
|
|
disabled |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
{locked? |
|
|
|
<Grid item lg={1}> |
|
|
|
<Button |
|
|
|
size="large" |
|
|
|
variant="contained" |
|
|
|
color="success" |
|
|
|
sx={{ |
|
|
|
textTransform: 'capitalize', |
|
|
|
alignItems: 'end' |
|
|
|
}} |
|
|
|
onClick={doUnlock} |
|
|
|
> |
|
|
|
Active |
|
|
|
</Button> |
|
|
|
</Grid> |
|
|
|
: |
|
|
|
<Grid item lg={1}> |
|
|
|
<Button |
|
|
|
size="large" |
|
|
|
variant="contained" |
|
|
|
color="error" |
|
|
|
sx={{ |
|
|
|
textTransform: 'capitalize', |
|
|
|
alignItems: 'end' |
|
|
|
}} |
|
|
|
onClick={doLock} |
|
|
|
> |
|
|
|
Lock |
|
|
|
</Button> |
|
|
|
</Grid> |
|
|
|
} |
|
|
|
</> |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Grid> |
|
|
|
</Grid> |
|
|
|
|
|
|
|
|
|
|
|
<Grid item lg={4}> |
|
|
|
<Grid container alignItems={"center"}> |
|
|
|
<Grid container alignItems={"top"}> |
|
|
|
<Grid item xs={4} s={4} md={4} lg={4} |
|
|
|
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center top'}}> |
|
|
|
Address: |
|
|
@@ -502,97 +809,39 @@ const UserInformationCard_Individual = ({userData,userFile, loadDataFun}) => { |
|
|
|
</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> |
|
|
|
|
|
|
|
{/*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 item xs={7} s={7} md={7} lg={6}> |
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</form> |
|
|
|
</FormikProvider> |
|
|
|
</MainCard> |
|
|
|
); |
|
|
|
}; |
|
|
|