Merge branch 'master' of https://git.2fi-solutions.com/alex/PNSPS-frontend-MaterialUI

src/layout/MainLayout/Header/index.js

@@ -95,10 +95,10 @@ function Header(props) {
               <Link className="indUser" to='/indUser'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Users (Individual)</Typography></Link>
             </li>
             <li>
-              <Link className="orgUser" to='/orgUser'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Users (Organization)</Typography></Link>
+              <Link className="orgUser" to='/orgUser'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Users (Organisation)</Typography></Link>
             </li>
             <li>
-              <Link className="org" to='/org'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Organization</Typography></Link>
+              <Link className="org" to='/org'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Organisation</Typography></Link>
             </li>
             <li>
               <Link className="usergroupSearchview" to='/usergroupSearchview'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>User Group</Typography></Link>

src/pages/OrganizationDetailPage/OrganizationCard.js

@@ -201,7 +201,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                     <Grid container spacing={1}>
                         <Grid item xs={12}>
                             <Typography variant="h4" sx={{mb: 2, mr: 3, borderBottom: "1px solid black" }}>
-                                Organization Details
+                                Organisation Details
                             </Typography>
                         </Grid>
                         <Grid item lg={4} >

src/pages/OrganizationDetailPage/index.js

@@ -77,7 +77,7 @@ const OrganizationDetailPage = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">Maintain Organization</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4">Maintain Organisation</Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/OrganizationDetailPage_FromUser/index.js

@@ -66,7 +66,7 @@ const OrganizationDetailPage_FromUser = () => {
             :
             <Grid container rowSpacing={4.5} columnSpacing={2.75}>
                 <Grid item xs={12} sx={{mb: -2.25}}>
-                    <Typography variant="h5">Organization (Create From User)</Typography>
+                    <Typography variant="h5">Organisation (Create From User)</Typography>
                 </Grid>
                 {/*col 1*/}
                 <Grid item xs={12} >

src/pages/OrganizationSearchPage/index.js

@@ -70,7 +70,7 @@ const OrganizationSearchPage = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">View Organization</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4">View Organisation</Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/Proof/Payment/Pay.js

@@ -77,15 +77,15 @@ const Index = () => {
                             <center>
                                 <Grid item xs={12} md={8} >
                                     <Typography variant="h2" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}>
-                                        公共啟事：交對完成及付款
+                                        公共啟事：校對完成及付款
                                     </Typography>
 
                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
-                                        我們已收到申請編號: {record?.appNo} 的稿件交對確定及可付印的指示。
+                                        我們已收到申請編號: {record?.appNo} 的稿件校對確定及可付印的指示。
                                         <br /><br />
                                         請於  <span style={{ color: "red" }}>{DateUtils.dateStr_Cht(record?.returnBeforeDate)} 下午 2:00 前</span>  完成繳費，我們將於收到繳費確認後處理刊出事宜。
                                         <br /><br />
-                                        如你在憲報期數 {record?.issueYear} 年 {record?.issueVolume} 卷, 第 {record?.issueNo} 期內有多於一個公共啟事的申請，你可選擇完成所有此期所有稿件交對確定後，於繳費期限前在「我的公共啟事」內合併付款。
+                                        如你在憲報期數 {record?.issueYear} 年 {record?.issueVolume} 卷, 第 {record?.issueNo} 期內有多於一個公共啟事的申請，你可選擇完成所有此期所有稿件校對確定後，於繳費期限前在「我的公共啟事」內合併付款。
                                     </Typography>
 
                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>

src/pages/Proof/Reply_Public/ApplicationDetails.js

@@ -166,7 +166,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems="left">
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">我的備注:</Typography></FormLabel>
+                                        <FormLabel><Typography variant="h5">我的備註:</Typography></FormLabel>
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>

src/pages/Proof/Search_GLD/SearchForm.js

@@ -264,7 +264,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         }}
                                         renderInput={(params) => (
                                             <TextField {...params}
-                                                label="Organization"
+                                                label="Organisation"
                                                 InputLabelProps={{
                                                     shrink: true
                                                 }}

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -14,7 +14,7 @@ import * as HttpUtils from "utils/HttpUtils";
 import * as UrlUtils from "utils/ApiPathConst";
 import * as FieldUtils from "utils/FieldUtils";
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
-
+import ForwardIcon from '@mui/icons-material/Forward';
 
 import { useNavigate } from "react-router-dom";
 import { notifyActionSuccess } from 'utils/CommonFunction';
@@ -72,7 +72,6 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                 setIsWarningPopUp(true);
                 return;
             }
-            // console.log(values);
             HttpUtils.postWithFiles({
                 url: UrlUtils.POST_PUBLIC_NOTICE_APPLY,
                 params: {
@@ -120,7 +119,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
 
 
     return (
-        <Grid container sx={{ minHeight: '95vh', backgroundColor: '#ffffff' }} direction="column" alignItems="center">
+        <Grid container sx={{ minHeight: '95vh', backgroundColor: '#ffffff', mb: 3 }} direction="column" alignItems="center">
             <Grid item xs={12} md={12} width="100%" >
                 <div style={BackgroundHead}>
                     <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -128,6 +127,11 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                     </Stack>
                 </div>
             </Grid>
+            <Grid item xs={12} width="60%">
+                <Button title="返回" sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/publicNotice") }}>
+                    <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
+                </Button>
+            </Grid>
             {/* <Grid item xs={12}>
                     <Typography variant="h5">申請公共啟事</Typography>
                 </Grid> */}
@@ -169,7 +173,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        目標期數:
+                                        <Typography variant="h5">目標期數:</Typography>
                                     </Grid>
                                     <Grid item xs={12} md={6} lg={6}>
                                         <RadioGroup
@@ -177,7 +181,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                             id="issueId"
                                             name="issueId"
                                             defaultValue={issueId}
-                                            onChange={(event)=>{
+                                            onChange={(event) => {
                                                 setIssueId(event.target.value);
                                             }}
                                         >
@@ -188,11 +192,12 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                     </Grid>
                                 </Grid>
                             </Grid>
+
                             <Grid item xs={12} md={12} lg={12}>
                                 <Grid container direction="row" justifyContent="flex-start" alignItems="center">
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        稿件檔案 ({"檔案大小應<10MB"}):
+                                        <Typography variant="h5">稿件檔案 ({"檔案大小應<10MB"}):</Typography>
                                     </Grid>
                                     <Grid item xs={12} md={3} lg={3}>
                                         <input
@@ -215,10 +220,10 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                                 size="large"
                                             >{attachment ? "上傳檔案" : "重新上傳"}</Button>
                                         </label>
-
                                     </Grid>
                                 </Grid>
                             </Grid>
+
                             <Grid item xs={12} md={12} lg={12}>
                                 {FieldUtils.getTextArea({
                                     label: "備註:",

src/pages/PublicNotice/ApplyForm/index.js

@@ -7,7 +7,7 @@ import * as FormatUtils from "utils/FormatUtils";
 
 import {
     Radio,
-    FormControlLabel 
+    FormControlLabel
 } from '@mui/material';
 
 import Loadable from 'components/Loadable';
@@ -19,24 +19,25 @@ const PublicNoticeApplyForm = Loadable(lazy(() => import('./PublicNoticeApplyFor
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const ApplyForm = () => {
-    const [userData, setUserData]  = React.useState([]);
-    const [selections, setSelection]  = React.useState([]);
+    const [userData, setUserData] = React.useState(null);
+    const [selections, setSelection] = React.useState([]);
     const [isLoading, setLoding] = React.useState(true);
 
-    React.useEffect(()=>{
+    React.useEffect(() => {
         loadUserData();
-    },[]);
+    }, []);
 
-    const loadUserData = ()=>{
+    const loadUserData = () => {
         setLoding(true);
         HttpUtils.get({
             url: `${UrlUtils.GET_PUBLIC_NOTICE_getApplyUser}`,
-            onSuccess: function(response){
+            onSuccess: function (response) {
                 response["tel_countryCode"] = response?.contactTelNo?.countryCode;
                 response["phoneNumber"] = response?.contactTelNo?.phoneNumber;
                 response["fax_countryCode"] = response?.contactFaxNo?.countryCode;
                 response["faxNumber"] = response?.contactFaxNo?.faxNumber;
                 response["issueId"] = response?.gazetteIssueList[0].id;
+                response["remarks"] = "";
 
                 var selection = [];
                 for (var i = 0; i < response?.gazetteIssueList?.length; i++) {
@@ -45,26 +46,25 @@ const ApplyForm = () => {
                     selection.push(<FormControlLabel value={data.id} control={<Radio />} label={label} />);
                 }
                 setSelection(selection);
-                
                 setUserData(response);
             }
         });
     };
 
-    function getIssueLabel(data){
-        return  data.year
-        +" Vol. "+FormatUtils.zeroPad(data.volume,3)
-        +", No. "+FormatUtils.zeroPad(data.issueNo,2)
-        +", "+DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
+    function getIssueLabel(data) {
+        return data.year
+            + " Vol. " + FormatUtils.zeroPad(data.volume, 3)
+            + ", No. " + FormatUtils.zeroPad(data.issueNo, 2)
+            + ", " + DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
     }
 
     React.useEffect(() => {
-       setLoding(false);
+        if (userData !== null) setLoding(false);
     }, [userData]);
 
     return (
         isLoading ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
             <PublicNoticeApplyForm
                 loadedData={userData}

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -96,7 +96,7 @@ const ApplicationDetailCard = (
 
     function doPayment() {
         setIsPopUp(false);
-        navigate('/paymentPage', { state: { amount: fee, appIdList: [currentApplicationDetailData.id]} });
+        navigate('/paymentPage', { state: { amount: fee, appIdList: [currentApplicationDetailData.id] } });
     }
 
     return (
@@ -121,7 +121,7 @@ const ApplicationDetailCard = (
                                     <Button
                                         // size="large"
                                         variant="contained"
-                                        onClick={()=>{setIsPopUp(true)}}
+                                        onClick={() => { setIsPopUp(true) }}
                                         disabled={currentApplicationDetailData.status == "rejected" || currentApplicationDetailData.status == "cancelled" || currentApplicationDetailData.status == "paid"}
                                         sx={{
                                             textTransform: 'capitalize',
@@ -191,20 +191,31 @@ const ApplicationDetailCard = (
                                             <FormLabel><Typography variant="h5">申請狀態:</Typography></FormLabel>
                                         </Grid>
 
-                                        <Grid item xs={12} md={2} lg={2}>
+                                        <Grid item xs={12} md={4} lg={4}>
                                             <FormControl variant="outlined">
                                                 {StatusUtils.getStatusByText(currentApplicationDetailData.status)}
                                             </FormControl>
                                         </Grid>
-                                        <Grid item xs={12} md={7} lg={7}>
-                                            <Stack direction="row" justifyContent="flex-start" alignItems="center">
-                                                <FormControl variant="outlined" fullWidth disabled>
-                                                    <Typography id='reason' variant="h5">
-                                                        {currentApplicationDetailData.reason}
-                                                    </Typography>
-                                                </FormControl>
-                                            </Stack>
-                                        </Grid>
+                                        {
+                                            currentApplicationDetailData.reason ?
+                                                <Grid item xs={12} md={5} lg={5}>
+                                                    <Grid container alignItems={"center"}>
+                                                        <Stack direction="row" justifyContent="flex-start" alignItems="center">
+                                                            <Grid item xs={12} md={7} lg={7}>
+                                                                <FormLabel><Typography variant="h5">原因:</Typography></FormLabel>
+                                                            </Grid>
+                                                            <Grid item xs={12} md={5} lg={5}>
+                                                                <FormControl variant="outlined" fullWidth disabled>
+                                                                    <Typography id='reason' variant="h5">
+                                                                        {currentApplicationDetailData.reason}
+                                                                    </Typography>
+                                                                </FormControl>
+                                                            </Grid>
+                                                        </Stack>
+                                                    </Grid>
+                                                </Grid>
+                                                : ""
+                                        }
                                     </Grid>
                                 </Grid>
                             </Grid>
@@ -506,29 +517,29 @@ const ApplicationDetailCard = (
                                         <FormLabel><Typography variant="h5">備註:</Typography></FormLabel>
                                     </Grid>
                                     <Grid item xs={12} md={9} lg={9}>
-                                        <FormLabel><Typography variant="h5">{currentApplicationDetailData.remarks}</Typography></FormLabel>
+                                        <Typography variant="h5">{currentApplicationDetailData.remarks}</Typography>
                                     </Grid>
                                 </Grid>
                             </Grid>
                         </Grid>
                     </Grid>
                     <div>
-                    <Dialog open={isPopUp} onClose={() => setIsPopUp(false)}  >
-                        <DialogTitle></DialogTitle>
-                        <Typography variant="h3" style={{ padding: '16px' }}>確認付款</Typography>
-                        <DialogContent style={{ display: 'flex', }}>
-                            <Stack direction="column" justifyContent="space-between">
-                            <Typography variant="h4">總計金額: {FormatUtils.currencyFormat(fee)}</Typography>
-                            </Stack>
-                        </DialogContent>
-                        <DialogActions>
-                            <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">Close</Typography></Button>
-                            <Button onClick={() => doPayment()}><Typography variant="h5">確認</Typography></Button>
-                        </DialogActions>
-                    </Dialog>
-                </div>
+                        <Dialog open={isPopUp} onClose={() => setIsPopUp(false)}  >
+                            <DialogTitle></DialogTitle>
+                            <Typography variant="h3" style={{ padding: '16px' }}>確認付款</Typography>
+                            <DialogContent style={{ display: 'flex', }}>
+                                <Stack direction="column" justifyContent="space-between">
+                                    <Typography variant="h4">總計金額: {FormatUtils.currencyFormat(fee)}</Typography>
+                                </Stack>
+                            </DialogContent>
+                            <DialogActions>
+                                <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">Close</Typography></Button>
+                                <Button onClick={() => doPayment()}><Typography variant="h5">確認</Typography></Button>
+                            </DialogActions>
+                        </Dialog>
+                    </div>
                 </form>
-            </MainCard>
+            </MainCard >
     );
 };
 

src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js

@@ -44,7 +44,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
 
     function resetForm() {
         setType([]);
-        setStatus({ key: 0, label: 'All', labelCht: "全部", type: 'all' });
+        setStatus([{ key: 0, label: 'All', labelCht: "全部", type: 'all' }]);
         reset();
     }
 

src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js

@@ -73,7 +73,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             id: 'status',
             field: 'status',
             headerName: '狀態',
-            width: 100,
+            width: 160,
             renderCell: (params) => {
                 return [StatusUtils.getStatus(params)]
             },
@@ -82,7 +82,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'actions',
             type: 'actions',
             headerName: '',
-            width: 100,
+            width: 150,
             cellClassName: 'actions',
             renderCell: (params) => {
                 return <Button onClick={handleDetailClick(params)}>查看詳細</Button>;
@@ -95,8 +95,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
     }
 
     return (
-        <div style={{ height: 400, width: '100%' }}>
-
+        <div style={{ minHeight: 400, width: '100%' }}>
             <FiDataGrid
                 rows={rows}
                 columns={columns}
@@ -106,6 +105,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
                     },
                 }}
                 onRowDoubleClick={handleRowDoubleClick}
+                getRowHeight={() => 'auto'}
             />
         </div>
     );

src/pages/PublicNotice/Search_GLD/SearchForm.js

@@ -236,7 +236,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         }}
                                         renderInput={(params) => (
                                             <TextField {...params}
-                                                label="Organization"
+                                                label="Organisation"
                                                 InputLabelProps={{
                                                     shrink: true
                                                 }}

src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js

@@ -126,7 +126,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                 }
             });
         } else {
-            setWarningText("Please select Organization before active this account.")
+            setWarningText("Please select Organisation before active this account.")
             setIsWarningPopUp(true);
         }
 
@@ -235,7 +235,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                     {/*end top button*/}
                     <div style={{ paddingLeft: 24, paddingRight: 24 }}>
                         <Typography variant="h4" sx={{ mt: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
-                            Organization User Details
+                            Organisation User Details
                         </Typography>
                         <Grid container spacing={1}>
                             <Grid item lg={4}>
@@ -297,7 +297,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
 
                             <Grid item lg={4}>
                                 {FieldUtils.getComboField({
-                                    label: "Organization:",
+                                    label: "Organisation:",
                                     valueName: "orgId",
                                     disabled: (!editMode),
                                     dataList: orgData,
@@ -466,7 +466,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                             <Button variant="contained"
                                                 onClick={createOrgClick}
                                             >
-                                                <Typography variant="h5">Create Organization</Typography>
+                                                <Typography variant="h5">Create Organisation</Typography>
                                             </Button>
                                         </Grid>
                                         : null
@@ -475,7 +475,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                             </Grid>
                             <Grid item lg={12} >
                                 <Typography variant="h4" sx={{ mt: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
-                                    Organization
+                                    Organisation
                                 </Typography>
                             </Grid>
                             <Grid item lg={4}>

src/pages/User/DetailsPage_Organization/index.js

@@ -133,7 +133,7 @@ const UserMaintainPage_Organization = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">Maintain Organization User</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4">Maintain Organisation User</Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/User/SearchPage_Organization/index.js

@@ -72,7 +72,7 @@ const UserSearchPage_Organization = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">View Organization User</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4">View Organisation User</Typography>
                         </Stack>
                     </div>
                 </Grid>

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

@@ -1685,7 +1685,7 @@ const CustomFormWizard = (props) => {
                                     <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                         <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
                                         <Typography display="inline" variant="h4">帳戶申請已成功提交。</Typography>
-                                        <Typography display="inline" variant="h4">驗證電郵將發送到你的電郵地址，請要指示完成驗證及登入系統。</Typography>
+                                        <Typography display="inline" variant="h4">驗證電郵將發送到你的電郵地址，請依指示完成驗證及登入系統。</Typography>
                                         <Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="h5">返回登入頁面</Typography></Button>
                                     </Stack>
                                     :

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

@@ -104,6 +104,7 @@ export default function PreviewUploadFileTable({ recordList, }) {
                 disableColumnMenu
                 disableColumnSelector
                 hideFooter
+                getRowHeight={()=>"auto"}
             />
         </Box>
     );

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

@@ -106,6 +106,7 @@ export default function UploadFileTable({ recordList, setUpdateRows, }) {
                 disableColumnMenu
                 disableColumnSelector
                 hideFooter
+                getRowHeight={()=>"auto"}
             />
         </Box>
     );

src/utils/CommonFunction.js

@@ -3,27 +3,27 @@ import DialogTitle from "@mui/material/DialogTitle";
 import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogActions from "@mui/material/DialogActions";
-import {Button} from "@mui/material";
+import { Button } from "@mui/material";
 import Dialog from "@mui/material/Dialog";
 import * as React from "react";
 import { toast } from "react-toastify";
 
-export function getDeletedRecordWithRefList(referenceList, updatedList){
-    return referenceList.filter(x => !updatedList.includes(x)) ;
+export function getDeletedRecordWithRefList(referenceList, updatedList) {
+    return referenceList.filter(x => !updatedList.includes(x));
 }
 
-export function getIdList(input){
+export function getIdList(input) {
     const output = input.map(function (obj) {
         return obj.id;
     });
     return output;
 }
 
-export function getObjectById(list, id){
+export function getObjectById(list, id) {
     const obj = list.find((element) => {
         return element.id === id;
     });
-    return obj === undefined || Object.keys(obj).length <= 0? null : obj
+    return obj === undefined || Object.keys(obj).length <= 0 ? null : obj
 }
 
 export function removeObjectWithId(arr, id) {
@@ -34,7 +34,7 @@ export function removeObjectWithId(arr, id) {
 }
 
 export function getDateString(queryDateArray) {
-    return(
+    return (
         queryDateArray[0]
         + "-" +
         queryDateArray[1]
@@ -60,7 +60,8 @@ export const notifySaveSuccess = () => {
         draggable: true,
         progress: undefined,
         theme: "light",
-})};
+    })
+};
 
 export const notifyCreateSuccess = () => {
     const userType = JSON.parse(localStorage.getItem("userData")).type
@@ -73,108 +74,130 @@ export const notifyCreateSuccess = () => {
         draggable: true,
         progress: undefined,
         theme: "light",
-})};
+    })
+};
 
 export const notifyVerifySuccess = () => {
     const userType = JSON.parse(localStorage.getItem("userData")).type
     toast.success(userType === "GLD" ? 'Verify success!' : "驗證成功!", {
-    position: "bottom-right",
-    autoClose: 5000,
-    hideProgressBar: false,
-    closeOnClick: true,
-    pauseOnHover: true,
-    draggable: true,
-    progress: undefined,
-    theme: "light",
-})};
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+    })
+};
 
 export const notifyDeleteSuccess = () => {
     const userType = JSON.parse(localStorage.getItem("userData")).type
     toast.success(userType === "GLD" ? 'Delete success!' : "刪除成功!", {
-    position: "bottom-right",
-    autoClose: 5000,
-    hideProgressBar: false,
-    closeOnClick: true,
-    pauseOnHover: true,
-    draggable: true,
-    progress: undefined,
-    theme: "light",
-})};
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+    })
+};
 
 export const notifyLockSuccess = () => {
     toast.success('Lock success!', {
-    position: "bottom-right",
-    autoClose: 5000,
-    hideProgressBar: false,
-    closeOnClick: true,
-    pauseOnHover: true,
-    draggable: true,
-    progress: undefined,
-    theme: "light",
-})};
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+    })
+};
 
 export const notifyUnlockSuccess = () => {
     toast.success('Unlock success!', {
-    position: "bottom-right",
-    autoClose: 5000,
-    hideProgressBar: false,
-    closeOnClick: true,
-    pauseOnHover: true,
-    draggable: true,
-    progress: undefined,
-    theme: "light",
-})};
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+    })
+};
 
 export const notifyActiveSuccess = () => {
     toast.success('Active success!', {
-    position: "bottom-right",
-    autoClose: 5000,
-    hideProgressBar: false,
-    closeOnClick: true,
-    pauseOnHover: true,
-    draggable: true,
-    progress: undefined,
-    theme: "light",
-})};
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+    })
+};
 
 export const notifyDownloadSuccess = () => {
     const userType = JSON.parse(localStorage.getItem("userData")).type
     toast.success(userType === "GLD" ? 'Download success!' : "下載成功!", {
-    position: "bottom-right",
-    autoClose: 5000,
-    hideProgressBar: false,
-    closeOnClick: true,
-    pauseOnHover: true,
-    draggable: true,
-    progress: undefined,
-    theme: "light",
-})};
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+    })
+};
 
 export const notifyActionSuccess = (actionMsg) => {
     toast.success(`${actionMsg}`, {
-    position: "bottom-right",
-    autoClose: 5000,
-    hideProgressBar: false,
-    closeOnClick: true,
-    pauseOnHover: true,
-    draggable: true,
-    progress: undefined,
-    theme: "light",
-})};
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+    })
+};
 
 export const notifyActionError = (actionMsg) => {
     toast.error(`${actionMsg}`, {
-    position: "bottom-right",
-    autoClose: 5000,
-    hideProgressBar: false,
-    closeOnClick: true,
-    pauseOnHover: true,
-    draggable: true,
-    progress: undefined,
-    theme: "light",
-})};
-
-export function prettyJson(json){
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+    })
+};
+
+export const notifyActionWarning = (actionMsg) => {
+    toast.warn(`${actionMsg}`, {
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+    })
+}
+
+export function prettyJson(json) {
     console.log(json);
     console.log(JSON.stringify(json, null, 2));
     return (
@@ -183,11 +206,11 @@ export function prettyJson(json){
 }
 
 export function GeneralConfirmWindow({
-                                         isWindowOpen,
-                                         title,
-                                         content,
-                                         onNormalClose,
-                                         onConfirmClose}){
+    isWindowOpen,
+    title,
+    content,
+    onNormalClose,
+    onConfirmClose }) {
     return (
         <Dialog
             open={isWindowOpen}

src/utils/FieldUtils.js

@@ -67,15 +67,7 @@ export const getTextArea = ({ label, valueName, form, disabled, inputProps, ...p
 }
 
 export const getPhoneField = ({ label, valueName, form, disabled }) => {
-    form.handleChange = (event) => {
-        const value = event.target.value;
-        const name = event.target.name;
-        if (value.match(/[^0-9]/)) {
-            return event.preventDefault();
-        }
-        if (valueName.code === name) form.setFieldValue(valueName.code, value)
-        if (valueName.num === name) form.setFieldValue(valueName.num, value)
-    }
+
     return <Grid container alignItems={"center"}>
         <Grid item xs={12} md={3} lg={3}
             sx={{ display: 'flex', alignItems: 'center' }}>
@@ -88,13 +80,31 @@ export const getPhoneField = ({ label, valueName, form, disabled }) => {
                     valueName: valueName.code,
                     form: form,
                     disabled: disabled,
-                    width: '35%'
+                    width: '35%',
+                    handleChange: (event) => {
+                        const value = event.target.value;
+                        const name = event.target.name;
+                        if (value.match(/[^0-9]/)) {
+                            return event.preventDefault();
+                        }
+                        if (valueName.code === name) form.setFieldValue(valueName.code, value)
+                        if (valueName.num === name) form.setFieldValue(valueName.num, value)
+                    }
                 })}
                 {initField({
                     type: "tel",
                     valueName: valueName.num,
                     form: form,
-                    disabled: disabled
+                    disabled: disabled,
+                    handleChange: (event) => {
+                        const value = event.target.value;
+                        const name = event.target.name;
+                        if (value.match(/[^0-9]/)) {
+                            return event.preventDefault();
+                        }
+                        if (valueName.code === name) form.setFieldValue(valueName.code, value)
+                        if (valueName.num === name) form.setFieldValue(valueName.num, value)
+                    }
                 })}
             </Stack>
         </Grid>
@@ -160,7 +170,7 @@ export const getComboField = ({ label, dataList, valueName, form, disabled, getO
     </Grid>;
 }
 
-export const initField = ({ type, valueName, form, disabled, multiline, placeholder, inputProps, width, ...props }) => {
+export const initField = ({ type, valueName, form, disabled, multiline, handleChange, placeholder, inputProps, width, ...props }) => {
     let err = Boolean(form.errors[valueName]);
 
     return <TextField
@@ -173,7 +183,7 @@ export const initField = ({ type, valueName, form, disabled, multiline, placehol
         inputProps={inputProps}
         error={err}
         helperText={form.errors[valueName] ? form.errors[valueName] : ''}
-        onChange={form.handleChange}
+        onChange={handleChange ? handleChange : form.handleChange}
         value={form.values[valueName]}
         disabled={disabled}
         sx={{