@@ -149,7 +149,7 @@ export default function FileList({refType, refId, allowDelete, sx}) { | |||||
}, | }, | ||||
}} | }} | ||||
pageSizeOptions={[5, 10]} | pageSizeOptions={[5, 10]} | ||||
autoHeight | |||||
autoHeight = {true} | |||||
/> | /> | ||||
</div> | </div> | ||||
); | ); | ||||
@@ -86,7 +86,7 @@ export default function OrganizationTable({recordList}) { | |||||
}, | }, | ||||
}} | }} | ||||
pageSizeOptions={[5, 10]} | pageSizeOptions={[5, 10]} | ||||
autoHeight | |||||
autoHeight = {true} | |||||
/> | /> | ||||
</div> | </div> | ||||
); | ); | ||||
@@ -14,7 +14,7 @@ import AuthBackground from 'assets/images/auth/AuthBackground'; | |||||
// ==============================|| AUTHENTICATION - WRAPPER ||============================== // | // ==============================|| AUTHENTICATION - WRAPPER ||============================== // | ||||
const AuthWrapperCustom = ({ children }) => ( | const AuthWrapperCustom = ({ children }) => ( | ||||
<Box sx={{ minHeight: '80vh' }}> | |||||
<Box sx={{ minHeight: '60vh' }}> | |||||
<AuthBackground /> | <AuthBackground /> | ||||
<Grid | <Grid | ||||
container | container | ||||
@@ -22,7 +22,7 @@ const AuthWrapperCustom = ({ children }) => ( | |||||
justifyContent="center" | justifyContent="center" | ||||
alignItems="flex-start" | alignItems="flex-start" | ||||
sx={{ | sx={{ | ||||
minHeight: '80vh' | |||||
minHeight: '60vh' | |||||
}} | }} | ||||
> | > | ||||
{/* <Grid item xs={12} sx={{ ml: 3, mt: 3 }}> | {/* <Grid item xs={12} sx={{ ml: 3, mt: 3 }}> | ||||
@@ -35,7 +35,7 @@ const AuthWrapperCustom = ({ children }) => ( | |||||
container | container | ||||
justifyContent="center" | justifyContent="center" | ||||
alignItems="flex-start" | alignItems="flex-start" | ||||
sx={{ minHeight: { xs: 'calc(80vh - 134px)', md: 'calc(80vh - 112px)' }}} | |||||
sx={{ minHeight: { xs: 'calc(60vh - 134px)', md: 'calc(60vh - 112px)' }}} | |||||
> | > | ||||
<Grid item> | <Grid item> | ||||
<AuthCard>{children}</AuthCard> | <AuthCard>{children}</AuthCard> | ||||
@@ -74,23 +74,17 @@ | |||||
steps.findIndex((step, i) => !(i in completed)) | steps.findIndex((step, i) => !(i in completed)) | ||||
: activeStep + 1; | : activeStep + 1; | ||||
setActiveStep(newActiveStep); | setActiveStep(newActiveStep); | ||||
console.log(newActiveStep) | |||||
scrollToTop(); | |||||
}; | }; | ||||
const handleBack = () => { | const handleBack = () => { | ||||
scrollToTop(); | |||||
setActiveStep((prevActiveStep) => prevActiveStep - 1); | setActiveStep((prevActiveStep) => prevActiveStep - 1); | ||||
}; | }; | ||||
// const handleStep = (step) => () => { | |||||
// setActiveStep(step); | |||||
// }; | |||||
// const handleComplete = () => { | |||||
// const newCompleted = completed; | |||||
// newCompleted[activeStep] = true; | |||||
// setCompleted(newCompleted); | |||||
// handleNext(); | |||||
// }; | |||||
const scrollToTop = () => { | |||||
window.scrollTo(0,0); | |||||
}; | |||||
const handleReset = () => { | const handleReset = () => { | ||||
setActiveStep(0); | setActiveStep(0); | ||||
@@ -173,6 +167,7 @@ | |||||
</Button> | </Button> | ||||
): | ): | ||||
( | ( | ||||
// <Button disabled={updateValid} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}> | |||||
<Button disabled={!updateValid} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}> | <Button disabled={!updateValid} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}> | ||||
繼續 | 繼續 | ||||
</Button> | </Button> | ||||
@@ -75,7 +75,6 @@ | |||||
}; | }; | ||||
const handleNext = () => { | const handleNext = () => { | ||||
scrollToTop() | |||||
const newActiveStep = | const newActiveStep = | ||||
isLastStep() && !allStepsCompleted() | isLastStep() && !allStepsCompleted() | ||||
? // It's the last step, but not all steps have been completed, | ? // It's the last step, but not all steps have been completed, | ||||
@@ -83,16 +82,16 @@ | |||||
steps.findIndex((step, i) => !(i in completed)) | steps.findIndex((step, i) => !(i in completed)) | ||||
: activeStep + 1; | : activeStep + 1; | ||||
setActiveStep(newActiveStep); | setActiveStep(newActiveStep); | ||||
// console.log(newActiveStep) | |||||
scrollToTop(); | |||||
}; | }; | ||||
const handleBack = () => { | const handleBack = () => { | ||||
scrollToTop() | |||||
scrollToTop(); | |||||
setActiveStep((prevActiveStep) => prevActiveStep - 1); | setActiveStep((prevActiveStep) => prevActiveStep - 1); | ||||
}; | }; | ||||
const scrollToTop = () => { | const scrollToTop = () => { | ||||
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); | |||||
window.scrollTo(0,0); | |||||
}; | }; | ||||
const handleReset = () => { | const handleReset = () => { | ||||
@@ -176,6 +175,7 @@ | |||||
</Button> | </Button> | ||||
): | ): | ||||
( | ( | ||||
// <Button disabled={updateValid} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}> | |||||
<Button disabled={!updateValid} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}> | <Button disabled={!updateValid} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}> | ||||
繼續 | 繼續 | ||||
</Button> | </Button> | ||||
@@ -722,7 +722,7 @@ const BusCustomFormWizard = (props) => { | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={12}> | <Grid item xs={12} md={12}> | ||||
<Stack spacing={1}> | <Stack spacing={1}> | ||||
<InputLabel htmlFor="enName-signup">英文姓名 | |||||
<InputLabel htmlFor="enName-signup">姓名 | |||||
<span style={{color: '#f10000'}}>*</span> | <span style={{color: '#f10000'}}>*</span> | ||||
</InputLabel> | </InputLabel> | ||||
<OutlinedInput | <OutlinedInput | ||||
@@ -731,7 +731,7 @@ const BusCustomFormWizard = (props) => { | |||||
value={formik.values.enName} | value={formik.values.enName} | ||||
name="enName" | name="enName" | ||||
onChange={formik.handleChange} | onChange={formik.handleChange} | ||||
placeholder="與你的身份證明文件相同" | |||||
placeholder="" | |||||
fullWidth | fullWidth | ||||
error={Boolean(formik.touched.enName && formik.errors.enName)} | error={Boolean(formik.touched.enName && formik.errors.enName)} | ||||
onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
@@ -76,7 +76,7 @@ const CustomFormWizard = (props) => { | |||||
const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false); | const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false); | ||||
const [isValid, setisValid] = useState(false); | const [isValid, setisValid] = useState(false); | ||||
const [isLoading, setLoding] = useState(true); | const [isLoading, setLoding] = useState(true); | ||||
const idDocTypeComboList = ComboData.idDocType; | const idDocTypeComboList = ComboData.idDocType; | ||||
const address4ComboList = ComboData.district; | const address4ComboList = ComboData.district; | ||||
const address5ComboList = ComboData.country; | const address5ComboList = ComboData.country; | ||||
@@ -135,22 +135,43 @@ const CustomFormWizard = (props) => { | |||||
}; | }; | ||||
const handleFileUpload = (event)=>{ | const handleFileUpload = (event)=>{ | ||||
let list = new DataTransfer(); | |||||
let currentFileList = fileListData; | |||||
const uploadFileList = event.target.files; | const uploadFileList = event.target.files; | ||||
const saveFileList = []; | const saveFileList = []; | ||||
var currentIndex = 0; | var currentIndex = 0; | ||||
if (!fileList.length==null){ | |||||
currentIndex = fileList.length; | |||||
if (currentFileList.length!=null){ | |||||
currentIndex = currentFileList.length; | |||||
for (let i = 0; i < currentIndex; i++){ | |||||
const file = currentFileList[i] | |||||
list.items.add(file); | |||||
saveFileList.push(file); | |||||
} | |||||
} | } | ||||
for (let i = 0; i < uploadFileList.length; i++){ | for (let i = 0; i < uploadFileList.length; i++){ | ||||
const file = event.target.files[i] | const file = event.target.files[i] | ||||
file.id = currentIndex+i+1 | |||||
saveFileList.push(file) | |||||
let isDuplicate = false; | |||||
// Check if the file name already exists in saveFileList | |||||
for (let j = 0; j < saveFileList.length; j++) { | |||||
if (saveFileList[j].name === file.name) { | |||||
isDuplicate = true; | |||||
break; | |||||
} | |||||
} | |||||
if (!isDuplicate) { | |||||
file.id = currentIndex+i | |||||
saveFileList.push(file) | |||||
list.items.add(file); | |||||
} | |||||
} | } | ||||
let myFileList = list.files; | |||||
setFileListData(saveFileList) | setFileListData(saveFileList) | ||||
setFileList(uploadFileList); | |||||
setFileList(myFileList); | |||||
}; | }; | ||||
useEffect(() => { | useEffect(() => { | ||||
@@ -311,7 +332,7 @@ const CustomFormWizard = (props) => { | |||||
submit: null, | submit: null, | ||||
fax:'', | fax:'', | ||||
faxCountryCode:'852', | faxCountryCode:'852', | ||||
idDocType:selectedIdDocType | |||||
idDocType:'' | |||||
}), | }), | ||||
validationSchema:yup.object().shape({ | validationSchema:yup.object().shape({ | ||||
username: yup.string().min(6,'用戶名稱最少6位').required('請輸入用戶名稱'), | username: yup.string().min(6,'用戶名稱最少6位').required('請輸入用戶名稱'), | ||||
@@ -536,13 +557,18 @@ const CustomFormWizard = (props) => { | |||||
<Autocomplete | <Autocomplete | ||||
disablePortal | disablePortal | ||||
id="idDocType" | id="idDocType" | ||||
value={selectedIdDocType} | |||||
// value={selectedIdDocType} | |||||
options={idDocTypeComboList} | options={idDocTypeComboList} | ||||
getOptionLabel={(idDocTypeComboList) => idDocTypeComboList.label} | |||||
onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
onChange={(event, newValue) => { | onChange={(event, newValue) => { | ||||
setSelectedIdDocType(newValue); | |||||
if (newValue!="HKID"){ | |||||
formik.setFieldValue("checkDigit","") | |||||
// console.log(newValue) | |||||
if (newValue!=null){ | |||||
setSelectedIdDocType(newValue.type); | |||||
if (newValue.type!="HKID"){ | |||||
formik.setFieldValue("checkDigit","") | |||||
} | |||||
} | } | ||||
}} | }} | ||||
sx={{"& .MuiInputBase-root": { height: "41px" },"#idDocType":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} | sx={{"& .MuiInputBase-root": { height: "41px" },"#idDocType":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} | ||||
@@ -1068,8 +1094,8 @@ const CustomFormWizard = (props) => { | |||||
</FormGroup> | </FormGroup> | ||||
{/* Preview Form */} | {/* Preview Form */} | ||||
<FormGroup id={"previewForm"} sx={{ display: props.step === 1 ? "" : "none"}}> | <FormGroup id={"previewForm"} sx={{ display: props.step === 1 ? "" : "none"}}> | ||||
<Grid container spacing={2}> | |||||
<Grid item xs={12}> | |||||
<Grid container spacing={3}> | |||||
<Grid item xs={12} md={12}> | |||||
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}> | <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}> | ||||
<div style={{borderBottom: "3px solid #1A4399", width:"100%", margin_right: "15px"}}> | <div style={{borderBottom: "3px solid #1A4399", width:"100%", margin_right: "15px"}}> | ||||
<Typography display="inline" variant="h3" sx={{ color: '#1A4399'}}>成為新的個人用戶</Typography> | <Typography display="inline" variant="h3" sx={{ color: '#1A4399'}}>成為新的個人用戶</Typography> | ||||
@@ -1081,10 +1107,10 @@ const CustomFormWizard = (props) => { | |||||
</Typography> */} | </Typography> */} | ||||
</Stack> | </Stack> | ||||
</Grid> | </Grid> | ||||
<Grid item xs={12}> | |||||
<Grid container spacing={1}> | |||||
<Grid item xs={12} md={12}> | |||||
<Grid container spacing={2}> | |||||
<Grid item xs={12} > | <Grid item xs={12} > | ||||
<Stack spacing={1} direction="row"> | |||||
<Stack spacing={2} direction="row"> | |||||
<Typography> | <Typography> | ||||
用戶登入名稱: | 用戶登入名稱: | ||||
</Typography> | </Typography> | ||||
@@ -1217,19 +1243,7 @@ const CustomFormWizard = (props) => { | |||||
</Stack> | </Stack> | ||||
</Grid> | </Grid> | ||||
:null} | :null} | ||||
{/* <Grid item xs={12} mt={1} mb={1}> | |||||
<Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}> | |||||
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>身份證明文件</Typography> | |||||
<Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>請上傳你的 有效身份證明文件 的數碼檔案,以驗證你的身份。</Typography> | |||||
<Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography> | |||||
<Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}> | |||||
<Button variant="contained" component="label" sx={{ fontSize: 12,height:'25px'}}>上傳身份證明文件 | |||||
<input type="file" accept=".csv" hidden /> | |||||
</Button> | |||||
<Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography> | |||||
</Stack> | |||||
</Stack> | |||||
</Grid> */} | |||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
@@ -78,7 +78,7 @@ export default function UploadFileTable({recordList}) { | |||||
// }, | // }, | ||||
// }} | // }} | ||||
// pageSizeOptions={[5, 10]} | // pageSizeOptions={[5, 10]} | ||||
autoHeight | |||||
autoHeight = {true} | |||||
/> | /> | ||||
</Box> | </Box> | ||||
); | ); | ||||
@@ -7,7 +7,7 @@ const LoadingComponent = () => { | |||||
display="flex" | display="flex" | ||||
justifyContent="center" | justifyContent="center" | ||||
alignItems="center" | alignItems="center" | ||||
autoHeight="true" | |||||
autoHeight={true} | |||||
> | > | ||||
<CircularProgress /> | <CircularProgress /> | ||||
</Box> | </Box> | ||||
@@ -73,7 +73,7 @@ export default function UserAuthTable({setSelectedRow, userAuth}) { | |||||
setSelectedRow(ids); | setSelectedRow(ids); | ||||
setCurrentSelectedRow(ids); | setCurrentSelectedRow(ids); | ||||
}} | }} | ||||
autoHeight | |||||
autoHeight = {true} | |||||
/> | /> | ||||
</div> | </div> | ||||
); | ); | ||||
@@ -69,7 +69,7 @@ export default function UserGroupTable({setSelectedRow, userGroup}) { | |||||
setSelectedRow(ids); | setSelectedRow(ids); | ||||
setCurrentSelectedRow(ids); | setCurrentSelectedRow(ids); | ||||
}} | }} | ||||
autoHeight | |||||
autoHeight = {true} | |||||
/> | /> | ||||
</div> | </div> | ||||
); | ); | ||||
@@ -73,7 +73,7 @@ export default function GroupAuthTable({setSelectedRow, userAuth}) { | |||||
setSelectedRow(ids); | setSelectedRow(ids); | ||||
setCurrentSelectedRow(ids); | setCurrentSelectedRow(ids); | ||||
}} | }} | ||||
autoHeight | |||||
autoHeight = {true} | |||||
/> | /> | ||||
</div> | </div> | ||||
); | ); | ||||
@@ -100,6 +100,7 @@ const UserAddCard = ({isCollectData, updateGroupMember,userGroupData}) => { | |||||
value={selectedUser === null ? null : selectedUser} | value={selectedUser === null ? null : selectedUser} | ||||
options={userComboList} | options={userComboList} | ||||
onChange={(event, newValue) => { | onChange={(event, newValue) => { | ||||
console.log(newValue) | |||||
setSelectedUser(newValue); | setSelectedUser(newValue); | ||||
}} | }} | ||||
renderInput={(params) => <TextField {...params} />} | renderInput={(params) => <TextField {...params} />} | ||||
@@ -68,7 +68,7 @@ export default function UserGroupTable({recordList}) { | |||||
}, | }, | ||||
}} | }} | ||||
pageSizeOptions={[10, 15, 20]} | pageSizeOptions={[10, 15, 20]} | ||||
autoHeight | |||||
autoHeight = {true} | |||||
/> | /> | ||||
</div> | </div> | ||||
); | ); | ||||
@@ -140,7 +140,7 @@ export default function UserTable({recordList}) { | |||||
}, | }, | ||||
}} | }} | ||||
pageSizeOptions={[5, 10]} | pageSizeOptions={[5, 10]} | ||||
autoHeight | |||||
autoHeight = {true} | |||||
/> | /> | ||||
</div> | </div> | ||||
); | ); | ||||
@@ -145,7 +145,7 @@ export default function UserTable_Individual({recordList}) { | |||||
}, | }, | ||||
}} | }} | ||||
pageSizeOptions={[5, 10]} | pageSizeOptions={[5, 10]} | ||||
autoHeight | |||||
autoHeight = {true} | |||||
/> | /> | ||||
</div> | </div> | ||||
); | ); | ||||
@@ -145,7 +145,7 @@ export default function UserTable_Organization({recordList}) { | |||||
}, | }, | ||||
}} | }} | ||||
pageSizeOptions={[5, 10]} | pageSizeOptions={[5, 10]} | ||||
autoHeight | |||||
autoHeight = {true} | |||||
/> | /> | ||||
</div> | </div> | ||||
); | ); | ||||
@@ -1,7 +1,12 @@ | |||||
export const idDocType = ["passport","HKID","CNID","BR","otherCert"]; | |||||
export const idDocType = [ | |||||
{label:"護照", type:"passport"}, | |||||
{label:"香港身份證", type:"HKID"}, | |||||
{label:"內地身份證", type:"CNID"}, | |||||
{label:"專業執業證書", type:"otherCert"} | |||||
]; | |||||
export const district = ["北區","長洲區","大埔區","大嶼山區","東區","觀塘區","黃大仙區","九龍城區","葵青區","南區","南丫島區", | export const district = ["北區","長洲區","大埔區","大嶼山區","東區","觀塘區","黃大仙區","九龍城區","葵青區","南區","南丫島區", | ||||
"坪洲區","荃灣區","沙田區","深水埗區","屯門區","灣仔區","西貢區","油尖旺區","元朗區","中西區"]; | "坪洲區","荃灣區","沙田區","深水埗區","屯門區","灣仔區","西貢區","油尖旺區","元朗區","中西區"]; | ||||
export const country = ["中國香港","中國","中國澳門"]; | export const country = ["中國香港","中國","中國澳門"]; | ||||
export const accountFilter = [{display:"Active", value:"active"},{display:"Locked", value:"locked"},{display:"Not verified", value:"notVerified"}]; | |||||
export const accountFilter = [{id:1,label:"Active", key:"active"},{id:2,label:"Locked", key:"locked"},{id:3,label:"Not verified", key:"notVerified"}]; |