From ebf4b375c8a2e0f0e6d36c5fbfcd7e191a2cf719 Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Thu, 7 Sep 2023 05:03:26 +0800 Subject: [PATCH] fix file upload and add alert window for password error --- src/pages/authentication/BusRegister.js | 2 +- src/pages/authentication/Register.js | 2 +- .../auth-forms/AuthLoginCustom.js | 34 +++--- .../auth-forms/BusCustomFormWizard.js | 110 +++++++++++++----- .../auth-forms/CustomFormWizard.js | 54 ++++++--- .../auth-forms/PasswordAlertDialog.js | 48 ++++++++ .../auth-forms/PreviewUploadFileTable.js | 107 +++++++++++++++++ .../auth-forms/UploadFileTable.js | 9 +- 8 files changed, 298 insertions(+), 68 deletions(-) create mode 100644 src/pages/authentication/auth-forms/PasswordAlertDialog.js create mode 100644 src/pages/authentication/auth-forms/PreviewUploadFileTable.js diff --git a/src/pages/authentication/BusRegister.js b/src/pages/authentication/BusRegister.js index 3c003b2..96ff6d1 100644 --- a/src/pages/authentication/BusRegister.js +++ b/src/pages/authentication/BusRegister.js @@ -125,7 +125,7 @@ All steps completed - you're finished - + diff --git a/src/pages/authentication/Register.js b/src/pages/authentication/Register.js index 2f59a6d..c0ef694 100644 --- a/src/pages/authentication/Register.js +++ b/src/pages/authentication/Register.js @@ -141,7 +141,7 @@ const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom'))); {/* */} - + { activeStep === 2|| activeStep === 0? ( @@ -1221,7 +1259,17 @@ const BusCustomFormWizard = (props) => { - + + + + + 身份證明文件 + {fileList !=null? + :null} + + + + diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js index 776e272..e44c7f4 100644 --- a/src/pages/authentication/auth-forms/CustomFormWizard.js +++ b/src/pages/authentication/auth-forms/CustomFormWizard.js @@ -36,6 +36,7 @@ import * as ComboData from "../../../utils/ComboData"; import Loadable from 'components/Loadable'; import { lazy } from 'react'; const UploadFileTable = Loadable(lazy(() => import('./UploadFileTable'))); +const PreviewUploadFileTable = Loadable(lazy(() => import('./PreviewUploadFileTable'))); const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); // import UploadFileTable from './UploadFileTable'; // import LoadingComponent from "../../extra-pages/LoadingComponent"; @@ -58,6 +59,7 @@ const CustomFormWizard = (props) => { const [fileList, setFileList] = useState([]); const [fileListData, setFileListData] = useState([]); const [checkUpload, setCheckUpload] = useState(false); + const [isLoading, setLoding] = useState(true); const [updateRows, setUpdateRows] = useState([]); const handleClickShowPassword = () => { @@ -83,7 +85,6 @@ const CustomFormWizard = (props) => { const [termsAndConAccept, setTermsAndConAccept] = useState(false); const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false); const [isValid, setisValid] = useState(false); - const [isLoading, setLoding] = useState(true); const idDocTypeComboList = ComboData.idDocType; const address4ComboList = ComboData.district; @@ -191,7 +192,7 @@ const CustomFormWizard = (props) => { break; } } - if (!isDuplicate) { + if (!isDuplicate && i+currentIndex<5) { file.id = currentIndex+i saveFileList.push(file) updateList.items.add(file); @@ -287,9 +288,6 @@ const CustomFormWizard = (props) => { // formData.append("refCode", refCode); // } - console.log("formData:") - console.log(formData) - if (isValid){ axios.post(POST_PUBLIC_USER_REGISTER, formData,{ headers: { @@ -399,9 +397,9 @@ const CustomFormWizard = (props) => { checkDigit:yup.string().max(1).required('請輸入括號內的數字或字母'), idDocType: yup.string().max(255).required('請輸入證件類別'), phoneCountryCode: yup.string().min(3,'請輸入3位數字').required('請輸入國際區號'), - faxCountryCode: yup.string().min(3,'請輸入3位數字'), + // faxCountryCode: yup.string().min(3,'請輸入3位數字'), phone: yup.string().min(8,'請輸入8位數字').required('請輸入聯絡電話'), - fax: yup.string().min(8,'請輸入8位數字'), + // fax: yup.string().min(8,'請輸入8位數字'), }), }); @@ -959,7 +957,14 @@ const CustomFormWizard = (props) => { value={formik.values.phoneCountryCode} name="phoneCountryCode" // onBlur={formik.handleBlur} - onChange={formik.handleChange} + // onChange={formik.handleChange} + onChange={(event) => { + const value = event.target.value; + if (value.match(/[^0-9]/)) { + return event.preventDefault(); + } + formik.setFieldValue("phoneCountryCode",value); + }} placeholder="國際區號" error={Boolean(formik.touched.phone && formik.errors.phone)} onBlur={formik.handleBlur} @@ -979,7 +984,14 @@ const CustomFormWizard = (props) => { value={formik.values.phone} name="phone" // onBlur={formik.handleBlur} - onChange={formik.handleChange} + // onChange={formik.handleChange} + onChange={(event) => { + const value = event.target.value; + if (value.match(/[^0-9]/)) { + return event.preventDefault(); + } + formik.setFieldValue("phone",value); + }} placeholder="聯絡電話" error={Boolean(formik.touched.phone && formik.errors.phone)} onBlur={formik.handleBlur} @@ -1015,7 +1027,14 @@ const CustomFormWizard = (props) => { type="faxCountryCode" value={formik.values.faxCountryCode} name="faxCountryCode" - onChange={formik.handleChange} + // onChange={formik.handleChange} + onChange={(event) => { + const value = event.target.value; + if (value.match(/[^0-9]/)) { + return event.preventDefault(); + } + formik.setFieldValue("faxCountryCode",value); + }} placeholder="國際區號" onBlur={formik.handleBlur} inputProps={{ @@ -1034,7 +1053,14 @@ const CustomFormWizard = (props) => { value={formik.values.fax} name="fax" onBlur={formik.handleBlur} - onChange={formik.handleChange} + // onChange={formik.handleChange} + onChange={(event) => { + const value = event.target.value; + if (value.match(/[^0-9]/)) { + return event.preventDefault(); + } + formik.setFieldValue("fax",value); + }} placeholder="傳真號碼" inputProps={{ maxLength: 8, @@ -1075,7 +1101,7 @@ const CustomFormWizard = (props) => { 如: 香港身份證; 護照; 中國內地身份證等 {fileList !=null? - :null} + :null} {/* @@ -1296,13 +1322,11 @@ const CustomFormWizard = (props) => { 身份證明文件 {fileList !=null? - :null} + :null} - - diff --git a/src/pages/authentication/auth-forms/PasswordAlertDialog.js b/src/pages/authentication/auth-forms/PasswordAlertDialog.js new file mode 100644 index 0000000..e5d68c7 --- /dev/null +++ b/src/pages/authentication/auth-forms/PasswordAlertDialog.js @@ -0,0 +1,48 @@ +import React, { + // useEffect, + // useState +} from 'react'; + +// material-ui +import { + Button, + // Link, + Stack, + Typography, + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle +} from '@mui/material'; +import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined'; + +const PasswordAlertDialog = (props) => { + return ( + + + + + 用戶名或密碼錯誤 + + + + + {""} + + + + + + + ); +}; + +export default PasswordAlertDialog; diff --git a/src/pages/authentication/auth-forms/PreviewUploadFileTable.js b/src/pages/authentication/auth-forms/PreviewUploadFileTable.js new file mode 100644 index 0000000..7c70087 --- /dev/null +++ b/src/pages/authentication/auth-forms/PreviewUploadFileTable.js @@ -0,0 +1,107 @@ +// material-ui +import * as React from 'react'; +import { + DataGrid, + // GridActionsCellItem, + // GridRowModes +} from "@mui/x-data-grid"; +// import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline'; +import {useEffect} from "react"; +// import {useNavigate} from "react-router-dom"; +// import { useTheme } from '@mui/material/styles'; +import { + Box, + Stack +} from '@mui/material'; +// ==============================|| EVENT TABLE ||============================== // + +export default function PreviewUploadFileTable({recordList,}) { + + const [rows, setRows] = React.useState(recordList); + const [rowModesModel] = React.useState({}); + // const theme = useTheme(); + + // const navigate = useNavigate() + + useEffect(() => { + setRows(recordList); + }, [recordList]); + + function NoRowsOverlay() { + return ( + + 沒有上傳檔案 + {/* 
(rows={[]})
*/} + + ); + } + + // const handleCancelClick = (id) => () => { + // setRowModesModel({ + // ...rowModesModel, + // [id]: { mode: GridRowModes.View, ignoreModifications: true }, + // }); + // console.log("Starting Delete") + // const editedRow = rows.find((row) => row.id === id); + // console.log(editedRow) + // console.log(editedRow.isNew) + // setUpdateRows(rows.filter((row) => row.id !== id)); + // setRows(rows.filter((row) => row.id !== id)); + // } + + const columns = [ + // { + // field: 'actions', + // type: 'actions', + // headerName: '', + // width: 30, + // cellClassName: 'actions', + // getActions: ({id}) => { + // return [ + // } + // label="delete" + // className="textPrimary" + // onClick={handleCancelClick(id)} + // color="error" + // />] + // }, + // }, + { + id: 'name', + field: 'name', + headerName: '檔案名稱', + flex: 1, + }, + { + id: 'size', + field: 'size', + headerName: '檔案大小', + valueGetter: (params) => { + // console.log(params) + return Math.ceil(params.value/1024)+" KB"; + }, + flex: 1, + }, + ]; + + return ( + + + + ); +} diff --git a/src/pages/authentication/auth-forms/UploadFileTable.js b/src/pages/authentication/auth-forms/UploadFileTable.js index e73ff3e..3755f2e 100644 --- a/src/pages/authentication/auth-forms/UploadFileTable.js +++ b/src/pages/authentication/auth-forms/UploadFileTable.js @@ -15,7 +15,7 @@ import { } from '@mui/material'; // ==============================|| EVENT TABLE ||============================== // -export default function UploadFileTable({recordList, setUpdateRows, disableDelete}) { +export default function UploadFileTable({recordList, setUpdateRows,}) { const [rows, setRows] = React.useState(recordList); const [rowModesModel,setRowModesModel] = React.useState({}); @@ -25,12 +25,9 @@ export default function UploadFileTable({recordList, setUpdateRows, disableDelet useEffect(() => { setRows(recordList); + // console.log(disableDelete); }, [recordList]); - // useEffect(() => { - // console.log(updateRows); - // }, [updateRows]); - function NoRowsOverlay() { return ( @@ -60,7 +57,7 @@ export default function UploadFileTable({recordList, setUpdateRows, disableDelet headerName: '', width: 30, cellClassName: 'actions', - hide:{disableDelete}, + // hide:true, getActions: ({id}) => { return [