combo fix

src/pages/authentication/auth-forms/CustomFormWizard.js

@@ -75,7 +75,8 @@ const CustomFormWizard = (props) => {
         setLevel(strengthColorChi(temp));
     };
 
-    const [selectedIdDocType, setSelectedIdDocType] = useState(null);
+    const [selectedIdDocType, setSelectedIdDocType] = useState({});
+    // const [selectedIdDocLabel, setSelectedIdDocLabel] = useState(null);
     const [selectedAddress4, setSelectedAddress4] = useState(null);
     const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country[0]);
     const [termsAndConAccept, setTermsAndConAccept] = useState(false);
@@ -104,7 +105,7 @@ const CustomFormWizard = (props) => {
             data.password !==""&&
             data.confirmPassword !==""&&
             data.password == data.confirmPassword&&
-            selectedIdDocType !==""&&
+            selectedIdDocType.type !==""&&
             data.idNo !==""&&
             data.enName !==""&&
             data.address1 !==""&&
@@ -116,7 +117,7 @@ const CustomFormWizard = (props) => {
             fileList.length!==0&&
             handlePassword(data.password)&&
             handleEmail(data.email)&&
-            handleIdNo(data.idNo,selectedIdDocType)&&
+            handleIdNo(data.idNo,selectedIdDocType.type)&&
             handle8Digi(data.phone)&&
             handle8Digi(data.username)
         )
@@ -141,7 +142,7 @@ const CustomFormWizard = (props) => {
     };
 
     const handleFileUpload = (event)=>{
-        let list = new DataTransfer();
+        let updateList = new DataTransfer();
         let currentFileList = fileListData;
         const uploadFileList = event.target.files;
         const saveFileList = [];
@@ -151,12 +152,12 @@ const CustomFormWizard = (props) => {
             currentIndex = currentFileList.length;
             for (let i = 0; i < currentIndex; i++){
                 const file = currentFileList[i]
-                list.items.add(file);
+                updateList.items.add(file);
                 saveFileList.push(file);
             }
         }
         
-        for (let i = 0; i < uploadFileList.length; i++){
+        for (let i = 0; i < uploadFileList.length && currentIndex>5; i++){
             const file = event.target.files[i]
             let isDuplicate = false;
             // Check if the file name already exists in saveFileList
@@ -166,18 +167,17 @@ const CustomFormWizard = (props) => {
                     break;
                 }
             }
-
             if (!isDuplicate) {
                 file.id = currentIndex+i
                 saveFileList.push(file)
-                list.items.add(file);
+                updateList.items.add(file);
             }
   
         }
-        let myFileList = list.files;
+        let updatedFileList = updateList.files;
 
         setFileListData(saveFileList)
-        setFileList(myFileList);
+        setFileList(updatedFileList);
     };
 
     useEffect(() => {
@@ -186,7 +186,9 @@ const CustomFormWizard = (props) => {
 
     useEffect(() => {
         checkDataField(values)
-    }, [selectedIdDocType,selectedAddress4,selectedAddress5,
+    }, [
+        selectedIdDocType,
+        selectedAddress4,selectedAddress5,
         termsAndConAccept,termsAndConNotAccept,fileList])
 
     useEffect(() => {
@@ -196,7 +198,7 @@ const CustomFormWizard = (props) => {
     const {handleSubmit} = useForm({})
     const _onSubmit = () => {
         setLoding(true);
-        values.idDocType = selectedIdDocType
+        values.idDocType = selectedIdDocType.type
         values.address4 = selectedAddress4
         values.address5 = selectedAddress5
         const userAddress  = {
@@ -369,6 +371,7 @@ const CustomFormWizard = (props) => {
         resetForm();
         setSelectedAddress4("")
         setSelectedIdDocType("")
+        // setSelectedIdDocLabel("")
     };
 
     const { values } = formik
@@ -565,12 +568,14 @@ const CustomFormWizard = (props) => {
                                                     id="idDocType"
                                                     // value={selectedIdDocType}
                                                     options={idDocTypeComboList}
-                                                    getOptionLabel={(idDocTypeComboList) => idDocTypeComboList.label}
+                                                    // getOptionLabel={(idDocTypeComboList) => idDocTypeComboList.label}
                                                     onBlur={formik.handleBlur}
                                                     onChange={(event, newValue) => {
                                                         // console.log(newValue)
                                                         if (newValue!=null){
-                                                            setSelectedIdDocType(newValue.type);
+                                                            console.log(newValue)
+                                                            setSelectedIdDocType(newValue);
+                                                            // setSelectedIdDocLabel(newValue.label);
                                                             if (newValue.type!="HKID"){
                                                                 formik.setFieldValue("checkDigit","")
                                                             }
@@ -588,7 +593,7 @@ const CustomFormWizard = (props) => {
                                                 )}
                                             </Stack>
                                         </Grid>
-                                        {selectedIdDocType =="HKID"?
+                                        {selectedIdDocType.type=="HKID"?
                                             <>
                                                 <Grid item xs={10} md={5}>
                                                     <Stack spacing={1}>
@@ -604,7 +609,7 @@ const CustomFormWizard = (props) => {
                                                             error={Boolean(formik.touched.idNo && formik.errors.idNo)}
                                                             onBlur={formik.handleBlur}
                                                             inputProps={{
-                                                                maxLength: selectedIdDocType =='HKID'?7:18,
+                                                                maxLength: selectedIdDocType.type =='HKID'?7:18,
                                                                 onKeyDown: (e) => {
                                                                     if (e.key === 'Enter') {
                                                                         e.preventDefault();
@@ -1147,7 +1152,7 @@ const CustomFormWizard = (props) => {
                                             證件類別:
                                         </Typography>
                                         <Typography name = "preview-idDocType">
-                                            {selectedIdDocType}
+                                            {selectedIdDocType.label}
                                         </Typography>
                                     </Stack>
                                 </Grid>
@@ -1254,7 +1259,7 @@ const CustomFormWizard = (props) => {
                         </Grid>
                     </Grid>
                 </FormGroup>
-                {/* Submit page */}
+            {/* Submit page */}
                 <FormGroup id={"submitForm"} sx={{ display: props.step === 2 ? "" : "none"}}>
                     <Grid container spacing={3}>
                     {isLoading ?

src/pages/authentication/auth-forms/UploadFileTable.js

@@ -72,12 +72,12 @@ export default function UploadFileTable({recordList}) {
                 sx={{border:1}}
                 rowModesModel={rowModesModel}
                 disablePagination
-                // initialState={{
-                //     pagination: {
-                //         paginationModel: {page: 0, pageSize: 5},
-                //     },
-                // }}
-                // pageSizeOptions={[5, 10]}
+                initialState={{
+                    pagination: {
+                        paginationModel: {},
+                    },
+                }}
+                hideFooterPagination={true}
                 autoHeight = {true}
             />
         </Box>

src/pages/extra-pages/LoadingComponent.js

@@ -7,7 +7,7 @@ const LoadingComponent = () => {
                 display="flex"
                 justifyContent="center"
                 alignItems="center"
-                autoHeight={true}
+                // autoHeight={true}
             >
                 <CircularProgress />
             </Box>

src/utils/ComboData.js

@@ -1,12 +1,12 @@
 export const idDocType = [
-    {label:"護照", type:"passport"},
-    {label:"香港身份證", type:"HKID"},
-    {label:"內地身份證", type:"CNID"},
-    {label:"專業執業證書", type:"otherCert"}
+    { key: 1, label: '護照',  type: 'passport' }, 
+    { key: 2, label: '香港身份證',  type: 'HKID' }, 
+    { key: 3, label: '內地身份證',  type: 'CNID' }, 
+    { key: 4, label: '專業執業證書',  type: 'otherCert' }
 ];
                 
-export const district =  ["北區","長洲區","大埔區","大嶼山區","東區","觀塘區","黃大仙區","九龍城區","葵青區","南區","南丫島區",
-"坪洲區","荃灣區","沙田區","深水埗區","屯門區","灣仔區","西貢區","油尖旺區","元朗區","中西區"];
-export const country = ["中國香港","中國","中國澳門"]; 
+export const district =  ['北區', '長洲區', '大埔區', '大嶼山區', '東區', '觀塘區', '黃大仙區', '九龍城區', '葵青區', '南區', '南丫島區', 
+'坪洲區', '荃灣區', '沙田區', '深水埗區', '屯門區', '灣仔區', '西貢區', '油尖旺區', '元朗區', '中西區'];
+export const country = ['中國香港', '中國', '中國澳門']; 
 
-export const accountFilter = [{id:1,label:"Active", key:"active"},{id:2,label:"Locked", key:"locked"},{id:3,label:"Not verified", key:"notVerified"}]; 
+export const accountFilter = [{ id: 1, key: 1, label: 'Active',  type: 'active' }, { id: 2, key: 2, label: 'Locked',  type: 'locked' }, { id: 3, key: 3, label: 'Not verified',  type: 'notVerified' }];