| @@ -125,7 +125,7 @@ | |||
| <Typography sx={{ mt: 2, mb: 1 }}> | |||
| All steps completed - you're finished | |||
| </Typography> | |||
| <Stack direction="row" sx={{ pt: 2 }}> | |||
| <Stack direction="row" sx={{ pb: 2 }}> | |||
| <Stack sx={{ flex: '1 1 auto' }} /> | |||
| <Button onClick={handleReset}>Reset</Button> | |||
| </Stack> | |||
| @@ -141,7 +141,7 @@ const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom'))); | |||
| <CustomFormWizard setUpdateValid={setUpdateValid} step={activeStep} /> | |||
| {/* <CustomFormWizard step={activeStep} /> */} | |||
| </AuthWrapper> | |||
| <Stack direction="row" sx={{ pt: 2 }}> | |||
| <Stack direction="row" sx={{ pb: 2 }}> | |||
| { activeStep === 2|| activeStep === 0? ( | |||
| <Button | |||
| color="inherit" | |||
| @@ -1,6 +1,8 @@ | |||
| import React, { | |||
| useEffect, | |||
| useState} from 'react'; | |||
| useState, | |||
| lazy | |||
| } from 'react'; | |||
| import { Link as RouterLink } from 'react-router-dom'; | |||
| import {useNavigate} from 'react-router-dom'; | |||
| import {useForm,} from 'react-hook-form' | |||
| @@ -29,6 +31,8 @@ import { useFormik,FormikProvider } from 'formik'; | |||
| // project import | |||
| //import FirebaseSocial from './FirebaseSocial'; | |||
| import AnimateButton from 'components/@extended/AnimateButton'; | |||
| import Loadable from 'components/Loadable'; | |||
| const PasswordAlertDialog = Loadable(lazy(() => import('./PasswordAlertDialog'))); | |||
| // assets | |||
| import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons'; | |||
| @@ -51,9 +55,9 @@ const AuthLoginCustom = () => { | |||
| // let [posts, setPosts] = useState([]); | |||
| const [isValid, setisValid] = useState(false); | |||
| const [isSuccess, setSuccess] = useState(); | |||
| const [isSumitting, setSumitting] = useState(); | |||
| // const [isSuccess, setSuccess] = useState(); | |||
| // const [isSumitting, setSumitting] = useState(); | |||
| const [open, setOpen] = React.useState(false); | |||
| // useEffect(() => { | |||
| // // console.log("POST: " + posts.accessToken); | |||
| // },[posts]); | |||
| @@ -64,7 +68,7 @@ const AuthLoginCustom = () => { | |||
| const tryLogin = () => { | |||
| if(isValid){ | |||
| setSumitting(true) | |||
| // setSumitting(true) | |||
| useJwt | |||
| .login({username: values.username, password: values.password}) | |||
| .then((response) => { | |||
| @@ -77,16 +81,18 @@ const AuthLoginCustom = () => { | |||
| //avatar: require('src/assets/images/users/avatar-3.png').default, | |||
| } | |||
| const data = {...userData, accessToken: response.data.accessToken, refreshToken: response.data.refreshToken} | |||
| setSuccess(true) | |||
| // setSuccess(true) | |||
| dispatch(handleLogin(data)) | |||
| navigate('/dashboard'); | |||
| setSumitting(false) | |||
| console.log(isSuccess) | |||
| // setSumitting(false) | |||
| }) | |||
| .catch((error) => { | |||
| setSuccess(false) | |||
| // setSuccess(false) | |||
| setOpen(true) | |||
| console.error(error) | |||
| }); | |||
| }else{ | |||
| setOpen(true) | |||
| } | |||
| } | |||
| @@ -149,6 +155,10 @@ const AuthLoginCustom = () => { | |||
| // } | |||
| // } | |||
| const handleClose = () => { | |||
| setOpen(false); | |||
| }; | |||
| const { values } = formik | |||
| useEffect(() => { | |||
| checkDataField(values) | |||
| @@ -162,11 +172,6 @@ const AuthLoginCustom = () => { | |||
| <Grid container spacing={3}> | |||
| <Grid item xs={12}> | |||
| <Stack spacing={1}> | |||
| {!isSuccess && isSumitting && ( | |||
| <FormHelperText error id="standard-weight-helper-text-username-login"> | |||
| 用戶登入名稱或密碼錯誤 | |||
| </FormHelperText> | |||
| )} | |||
| <InputLabel htmlFor="email-login">用戶登入名稱</InputLabel> | |||
| <OutlinedInput | |||
| id="username" | |||
| @@ -269,6 +274,7 @@ const AuthLoginCustom = () => { | |||
| {/* <FirebaseSocial />*/} | |||
| {/*</Grid> */} | |||
| </Grid> | |||
| <PasswordAlertDialog open={open} handleClose={handleClose}/> | |||
| </form> | |||
| </FormikProvider> | |||
| ); | |||
| @@ -28,15 +28,16 @@ import * as yup from 'yup'; | |||
| // import AnimateButton from 'components/@extended/AnimateButton'; | |||
| import { strengthColorChi, strengthIndicator } from 'utils/password-strength'; | |||
| import {apiPath} from "auth/utils"; | |||
| // import {apiPath} from "auth/utils"; | |||
| import axios from "axios"; | |||
| import {POST_PUBLIC_USER_REGISTER} from "utils/ApiPathConst"; | |||
| import * as HttpUtils from 'utils/HttpUtils'; | |||
| // import * as HttpUtils from 'utils/HttpUtils'; | |||
| import Loadable from 'components/Loadable'; | |||
| import { lazy } from 'react'; | |||
| const UploadFileTable = Loadable(lazy(() => import('./UploadFileTable'))); | |||
| const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); | |||
| const PreviewUploadFileTable = Loadable(lazy(() => import('./PreviewUploadFileTable'))); | |||
| // import UploadFileTable from './UploadFileTable'; | |||
| // import LoadingComponent from "../../extra-pages/LoadingComponent"; | |||
| @@ -57,6 +58,7 @@ const BusCustomFormWizard = (props) => { | |||
| const [fileListData, setFileListData] = useState([]); | |||
| const [checkUpload, setCheckUpload] = useState(false); | |||
| const [isLoading, setLoding] = useState(true); | |||
| const [updateRows, setUpdateRows] = useState([]); | |||
| const handleClickShowPassword = () => { | |||
| setShowPassword(!showPassword); | |||
| @@ -92,7 +94,7 @@ const BusCustomFormWizard = (props) => { | |||
| + "於所有文本、平面圖像、圖畫、圖片、照片以及數據或其他資料的匯編,均受版權保障。\n香" | |||
| + "港特別行政區政府是本網頁內所有版權作品的擁有人,除非預先得到政府物流服務署的書面" | |||
| + "授權,否則嚴禁複製、改編、分發、發布或向公眾提供該等版權作品。" | |||
| // const refType = "identification"; | |||
| const refType = "identification"; | |||
| useEffect(() => { | |||
| changePassword(''); | |||
| @@ -186,12 +188,13 @@ const BusCustomFormWizard = (props) => { | |||
| break; | |||
| } | |||
| } | |||
| if (!isDuplicate) { | |||
| if (!isDuplicate && i+currentIndex<5) { | |||
| file.id = currentIndex+i | |||
| saveFileList.push(file) | |||
| updateList.items.add(file); | |||
| } | |||
| console.log("currentIndex") | |||
| console.log(currentIndex) | |||
| } | |||
| let updatedFileList = updateList.files; | |||
| @@ -247,9 +250,8 @@ const BusCustomFormWizard = (props) => { | |||
| tncFlag = false | |||
| } | |||
| if (isValid){ | |||
| axios.post(`${apiPath}${POST_PUBLIC_USER_REGISTER}`, { | |||
| username: values.username, | |||
| const user = { | |||
| username: values.username, | |||
| password: values.password, | |||
| name: values.username, | |||
| enCompanyName: values.enCompanyName, | |||
| @@ -257,27 +259,36 @@ const BusCustomFormWizard = (props) => { | |||
| emailBus: values.email, | |||
| brNo:values.brNo, | |||
| brExpiryDate:values.brExpiryDate, | |||
| userFaxNo:userFaxNo, | |||
| busUserContactTel:busUserContactTel, | |||
| busUserAddress:busUserAddress, | |||
| contactPerson: values.enName, | |||
| tncFlag:tncFlag, | |||
| type:"ORG" | |||
| }; | |||
| var formData = new FormData(); | |||
| for (let i = 0; i < fileListData.length; i++){ | |||
| const file = fileListData[i] | |||
| formData.append("multipartFileList", file); | |||
| } | |||
| formData.append("refType", refType); | |||
| for (const [key, value] of Object.entries(user)) { | |||
| formData.append(key, value); | |||
| } | |||
| formData.append("userFaxNo", JSON.stringify(userFaxNo)); | |||
| formData.append("busUserContactTel", JSON.stringify(busUserContactTel)); | |||
| formData.append("busUserAddress", JSON.stringify(busUserAddress)); | |||
| if (isValid){ | |||
| axios.post(POST_PUBLIC_USER_REGISTER, formData,{ | |||
| headers: { | |||
| "Content-Type":"multipart/form-data" | |||
| } | |||
| }) | |||
| .then((response) => { | |||
| console.log(response) | |||
| setCheckUpload(true) | |||
| HttpUtils.fileUpload( | |||
| { | |||
| refType:"brFile", | |||
| refId: response.data.id, | |||
| file: fileList[0], | |||
| onSuccess: (response)=>{ | |||
| console.log(response); | |||
| setLoding(false); | |||
| // setOpen(true); | |||
| } | |||
| } | |||
| ); | |||
| setLoding(false); | |||
| }) | |||
| .catch(error => { | |||
| console.error(error); | |||
| @@ -319,7 +330,6 @@ const BusCustomFormWizard = (props) => { | |||
| var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; | |||
| // var result = reg.test(email); | |||
| var result = email.match(validRegex); | |||
| console.log("test1: "+result) | |||
| if (result == false) { | |||
| return false; | |||
| } | |||
| @@ -879,7 +889,14 @@ const BusCustomFormWizard = (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} | |||
| @@ -899,7 +916,14 @@ const BusCustomFormWizard = (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)} | |||
| inputProps={{ | |||
| @@ -935,7 +959,14 @@ const BusCustomFormWizard = (props) => { | |||
| value={formik.values.faxCountryCode} | |||
| name="faxCountryCode" | |||
| // 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("faxCountryCode",value); | |||
| }} | |||
| placeholder="國際區號" | |||
| inputProps={{ | |||
| maxLength: 3, | |||
| @@ -953,7 +984,14 @@ const BusCustomFormWizard = (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, | |||
| @@ -980,7 +1018,7 @@ const BusCustomFormWizard = (props) => { | |||
| <span style={{color: '#f10000'}}>*</span> | |||
| </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> | |||
| {/* <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:'40px'}}>上傳商業登記證及其他文件 | |||
| <input | |||
| @@ -996,7 +1034,7 @@ const BusCustomFormWizard = (props) => { | |||
| {/* <Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}></Typography> */} | |||
| </Stack> | |||
| {fileList !=null? | |||
| <UploadFileTable recordList={fileListData} />:null} | |||
| <UploadFileTable key="uploadTable" recordList={fileListData} setUpdateRows={setUpdateRows}/>:null} | |||
| {/* <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}> | |||
| <Button variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> | |||
| <Button disabled={!formik.isValid} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> | |||
| @@ -1221,7 +1259,17 @@ const BusCustomFormWizard = (props) => { | |||
| </Typography> | |||
| </Stack> | |||
| </Grid> | |||
| <Grid item xs={12} md={12} mt={1} mb={1}> | |||
| <Grid container> | |||
| <Grid item xs={12} md={12}> | |||
| <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> | |||
| {fileList !=null? | |||
| <PreviewUploadFileTable key="previewTable" recordList={fileListData} />:null} | |||
| </Stack> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| @@ -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) => { | |||
| <Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography> | |||
| </Stack> | |||
| {fileList !=null? | |||
| <UploadFileTable recordList={fileListData} setUpdateRows={setUpdateRows} disableDelete={false}/>:null} | |||
| <UploadFileTable key="uploadTable" recordList={fileListData} setUpdateRows={setUpdateRows}/>:null} | |||
| {/* <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}> | |||
| <Button variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> | |||
| <Button disabled={!formik.isValid} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> | |||
| @@ -1296,13 +1322,11 @@ const CustomFormWizard = (props) => { | |||
| <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> | |||
| {fileList !=null? | |||
| <UploadFileTable recordList={fileListData} updateRows={updateRows} disableDelete={true}/>:null} | |||
| <PreviewUploadFileTable key="previewTable" recordList={fileListData} />:null} | |||
| </Stack> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| @@ -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 ( | |||
| <Dialog | |||
| open={props.open} | |||
| onClose={props.handleClose} | |||
| aria-labelledby="alert-dialog-title" | |||
| aria-describedby="alert-dialog-description" | |||
| > | |||
| <DialogTitle id="alert-dialog-title"> | |||
| <Stack mt={1} mr={4} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}> | |||
| <CancelOutlinedIcon color="error" sx={{width:"35px",height:"40px"}}/> | |||
| <Typography display="inline" variant="h4">用戶名或密碼錯誤</Typography> | |||
| </Stack> | |||
| </DialogTitle> | |||
| <DialogContent> | |||
| <DialogContentText id="alert-dialog-description"> | |||
| {""} | |||
| </DialogContentText> | |||
| </DialogContent> | |||
| <DialogActions> | |||
| <Button variant="contained" color="error" onClick={props.handleClose} autoFocus> | |||
| 關閉 | |||
| </Button> | |||
| </DialogActions> | |||
| </Dialog> | |||
| ); | |||
| }; | |||
| export default PasswordAlertDialog; | |||
| @@ -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 ( | |||
| <Stack height="100%" alignItems="center" justifyContent="center"> | |||
| 沒有上傳檔案 | |||
| {/* <pre>(rows={[]})</pre> */} | |||
| </Stack> | |||
| ); | |||
| } | |||
| // 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 [ | |||
| // <GridActionsCellItem | |||
| // key="OutSave" | |||
| // icon={<RemoveCircleOutlineIcon/>} | |||
| // 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 ( | |||
| <Box style={{ height: '200px', width: '100%' }}> | |||
| <DataGrid | |||
| rows={rows} | |||
| columns={columns} | |||
| editMode="row" | |||
| sx={{border:1}} | |||
| rowModesModel={rowModesModel} | |||
| disablePagination | |||
| components={{ NoRowsOverlay, }} | |||
| // hideFooterPagination={true} | |||
| disableSelectionOnClick | |||
| disableColumnMenu | |||
| disableColumnSelector | |||
| hideFooter | |||
| /> | |||
| </Box> | |||
| ); | |||
| } | |||
| @@ -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 ( | |||
| <Stack height="100%" alignItems="center" justifyContent="center"> | |||
| @@ -60,7 +57,7 @@ export default function UploadFileTable({recordList, setUpdateRows, disableDelet | |||
| headerName: '', | |||
| width: 30, | |||
| cellClassName: 'actions', | |||
| hide:{disableDelete}, | |||
| // hide:true, | |||
| getActions: ({id}) => { | |||
| return [ | |||
| <GridActionsCellItem | |||