add FormatUtils.js

src/pages/Proof/Reply_GLD/ApplicationDetails.js

@@ -10,6 +10,7 @@ import {
 import { useFormik } from 'formik';
 import * as React from "react";
 import * as DateUtils from "utils/DateUtils"
+import * as FormatUtils from "utils/FormatUtils"
 import { useParams } from "react-router-dom";
 import Loadable from 'components/Loadable';
 const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
@@ -60,13 +61,6 @@ const ApplicationDetailCard = ({
         />;
     }
 
-    function currencyFormat(num) {
-        let val = num ? num : 0;
-        return val.toLocaleString('en-US', {
-            minimumFractionDigits: 2
-        });
-    }
-    
     // React.useEffect(()=>{
         // if (document.getElementById("applicationDetailsMainCard")) setBackButtonPos(`${document.getElementById("applicationDetailsMainCard")?.getBoundingClientRect().left / 3}px`)
     // },[document.getElementById("applicationDetailsMainCard")])
@@ -226,7 +220,7 @@ const ApplicationDetailCard = ({
                                         <Typography variant="h5">Fee:</Typography>
                                     </Grid>
                                     <Grid item xs={12} md={9} lg={9} sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
-                                        <Typography variant="h5" style={{ color: "blue", fontWeight: "bold", }}>{currencyFormat(data.fee)}</Typography>
+                                        <Typography variant="h5" style={{ color: "blue", fontWeight: "bold", }}>{FormatUtils.currencyFormat(data.fee)}</Typography>
                                     </Grid>
                                     <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
                                         {

src/pages/Proof/Reply_GLD/index.js

@@ -10,6 +10,7 @@ import * as UrlUtils from "utils/ApiPathConst";
 import * as React from "react";
 import * as HttpUtils from "utils/HttpUtils";
 import * as DateUtils from "utils/DateUtils";
+import * as FormatUtils from "utils/FormatUtils"
 import { useParams } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
@@ -63,8 +64,8 @@ const Index = () => {
                     responseData.data["fax_countryCode"] = JSON.parse(responseData.data.contactFaxNo).countryCode;
 
                     responseData.data["issueNoStr"] = responseData.data.issueYear
-                        + " Vol. " + zeroPad(responseData.data.issueVolume, 3)
-                        + ", No. " + zeroPad(responseData.data.issueNo, 2);
+                        + " Vol. " + FormatUtils.zeroPad(responseData.data.issueVolume, 3)
+                        + ", No. " + FormatUtils.zeroPad(responseData.data.issueNo, 2);
 
                     responseData.data["issueDateStr"] = DateUtils.dateFormat(responseData.data.issueDate, "D MMM YYYY (ddd)");
 
@@ -76,12 +77,6 @@ const Index = () => {
         }
     }
 
-    function zeroPad(num, places) {
-        num = num ? num : 0;
-        var zero = places - num.toString().length + 1;
-        return Array(+(zero > 0 && zero)).join("0") + num;
-    }
-
     // calculate back button position
 
     // const applicationDetailsRef = React.useCallback(node => {

src/pages/Proof/Reply_Public/ApplicationDetails.js

@@ -11,6 +11,7 @@ import {
 import { useFormik } from 'formik';
 import * as React from "react";
 import * as DateUtils from "utils/DateUtils"
+import * as FormatUtils from "utils/FormatUtils"
 import { useParams } from "react-router-dom";
 import Loadable from 'components/Loadable';
 const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
@@ -58,14 +59,6 @@ const ApplicationDetailCard = ({ formData, }) => {
         />;
     }
 
-    function currencyFormat(num) {
-        let val = num ? num : 0;
-        return val.toLocaleString('en-US', {
-            minimumFractionDigits: 2
-        });
-    }
-
-
     return (
         <MainCard elevation={0}
             border={false}
@@ -221,7 +214,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                         <Typography>應繳費用:</Typography>
                                     </Grid>
                                     <Grid item xs={12} md={9} lg={9} sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
-                                        <Typography style={{ color: "blue", fontWeight: "bold", }}>{currencyFormat(data.fee)}</Typography>
+                                        <Typography style={{ color: "blue", fontWeight: "bold", }}>{FormatUtils.currencyFormat(data.fee)}</Typography>
                                     </Grid>
                                     <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
                                         {

src/pages/Proof/Reply_Public/index.js

@@ -9,6 +9,7 @@ import * as UrlUtils from "utils/ApiPathConst";
 import * as React from "react";
 import * as HttpUtils from "utils/HttpUtils";
 import * as DateUtils from "utils/DateUtils";
+import * as FormatUtils from "utils/FormatUtils";
 import { useParams } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 
@@ -61,8 +62,8 @@ const Index = () => {
                     responseData.data["fax_countryCode"] = JSON.parse(responseData.data.contactFaxNo).countryCode;
 
                     responseData.data["issueNoStr"] = responseData.data.issueYear
-                        + " Vol. " + zeroPad(responseData.data.issueVolume, 3)
-                        + ", No. " + zeroPad(responseData.data.issueNo, 2);
+                        + " Vol. " + FormatUtils.zeroPad(responseData.data.issueVolume, 3)
+                        + ", No. " + FormatUtils.zeroPad(responseData.data.issueNo, 2);
 
                     responseData.data["issueDateStr"] = DateUtils.dateFormat(responseData.data.issueDate, "D MMM YYYY (ddd)");
 
@@ -74,13 +75,6 @@ const Index = () => {
         }
     }
 
-    function zeroPad(num, places) {
-        num = num ? num : 0;
-        var zero = places - num.toString().length + 1;
-        return Array(+(zero > 0 && zero)).join("0") + num;
-    }
-
-
     return (
         !onReady ?
             <LoadingComponent />

src/pages/Proof/Search_GLD/DataGrid.js

@@ -5,6 +5,7 @@ import {
     Box
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
+import * as FormatUtils from "utils/FormatUtils"
 import * as ProofStatus from "utils/statusUtils/ProofStatus";
 import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
@@ -41,8 +42,8 @@ export default function SearchPublicNoticeTable({ recordList }) {
                 let appNo = params.row.appNo;
                 let code = params.row.groupNo;
                 let isssue = params.row.issueYear
-                    + " Vol. " + zeroPad(params.row.issueVolume, 3)
-                    + ", No. " + zeroPad(params.row.issueNo, 2)
+                    + " Vol. " + FormatUtils.zeroPad(params.row.issueVolume, 3)
+                    + ", No. " + FormatUtils.zeroPad(params.row.issueNo, 2)
                     + ", " + DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)");
 
                 return <div style={{ margin: 4 }}>App No: {appNo}<br />Gazette Code: {code}<br />Issue: {isssue}</div>
@@ -117,24 +118,11 @@ export default function SearchPublicNoticeTable({ recordList }) {
             headerName: 'Fee',
             flex: 1,
             valueGetter: (params) => {
-                return (params?.value) ? "$ " + currencyFormat(params?.value) : "";
+                return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
             }
         },
     ];
 
-    function currencyFormat(num) {
-        return num.toLocaleString('en-US', {
-            minimumFractionDigits: 2
-        });
-    }
-
-
-    function zeroPad(num, places) {
-        num = num ? num : 0;
-        var zero = places - num.toString().length + 1;
-        return Array(+(zero > 0 && zero)).join("0") + num;
-    }
-
     function handleRowDoubleClick(params) {
         navigate('/proof/reply/' + params.row.id);
     }

src/pages/Proof/Search_GLD/SearchForm.js

@@ -10,6 +10,7 @@ import { useForm } from "react-hook-form";
 import * as React from "react";
 import * as ComboData from "utils/ComboData";
 import * as DateUtils from "utils/DateUtils";
+import * as FormatUtils from "utils/FormatUtils";
 import { Typography } from '../../../../node_modules/@mui/material/index';
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -77,17 +78,11 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
     function getIssueLabel(data) {
         if (data == {}) return "";
         return data.year
-            + " Vol. " + zeroPad(data.volume, 3)
-            + ", No. " + zeroPad(data.issueNo, 2)
+            + " Vol. " + FormatUtils.zeroPad(data.volume, 3)
+            + ", No. " + FormatUtils.zeroPad(data.issueNo, 2)
             + ", " + DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
     }
 
-    function zeroPad(num, places) {
-        num = num ? num : 0;
-        var zero = places - num.toString().length + 1;
-        return Array(+(zero > 0 && zero)).join("0") + num;
-    }
-
     return (
         <MainCard xs={12} md={12} lg={12}
             border={false}

src/pages/Proof/Search_Public/DataGrid.js

@@ -4,6 +4,7 @@ import {
     Button
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
+import * as FormatUtils from "utils/FormatUtils"
 import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
 // ==============================|| EVENT TABLE ||============================== //
@@ -57,8 +58,8 @@ export default function SearchPublicNoticeTable({ recordList }) {
                 let appNo = params.row.appNo;
                 let code = params.row.groupNo;
                 let isssue = params.row.issueYear
-                    + " Vol. " + zeroPad(params.row.issueVolume, 3)
-                    + ", No. " + zeroPad(params.row.issueNo, 2)
+                    + " Vol. " + FormatUtils.zeroPad(params.row.issueVolume, 3)
+                    + ", No. " + FormatUtils.zeroPad(params.row.issueNo, 2)
                     + ", " + DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)");
 
                 return <div style={{ margin: 4 }}>{appNo}<br />{code}<br />{isssue}</div>
@@ -108,24 +109,11 @@ export default function SearchPublicNoticeTable({ recordList }) {
             headerName: '費用',
             flex: 1,
             valueGetter: (params) => {
-                return (params?.value) ? "$ " + currencyFormat(params?.value) : "";
+                return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
             }
         },
     ];
 
-    function currencyFormat(num) {
-        return num.toLocaleString('en-US', {
-            minimumFractionDigits: 2
-        });
-    }
-
-
-    function zeroPad(num, places) {
-        num = num ? num : 0;
-        var zero = places - num.toString().length + 1;
-        return Array(+(zero > 0 && zero)).join("0") + num;
-    }
-
     function handleRowDoubleClick(params) {
         navigate('/proof/reply/' + params.row.id);
     }

src/pages/Proof/Search_Public/SearchForm.js

@@ -10,6 +10,7 @@ import { useForm } from "react-hook-form";
 import * as React from "react";
 import * as ComboData from "utils/ComboData";
 import * as DateUtils from "utils/DateUtils";
+import * as FormatUtils from "utils/FormatUtils";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -66,17 +67,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria,issueComboData
     function getIssueLabel(data){
         if(data=={}) return "";
         return  data.year
-        +" Vol. "+zeroPad(data.volume,3)
-        +", No. "+zeroPad(data.issueNo,2)
+        +" Vol. "+FormatUtils.zeroPad(data.volume,3)
+        +", No. "+FormatUtils.zeroPad(data.issueNo,2)
         +", "+DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
     }
 
-    function zeroPad(num, places) {
-        num=num?num:0;
-        var zero = places - num.toString().length + 1;
-        return Array(+(zero > 0 && zero)).join("0") + num;
-    }
-
     return (
         <MainCard xs={12} md={12} lg={12}
             border={false}

src/pages/PublicNotice/ApplyForm/index.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import * as HttpUtils from "utils/HttpUtils";
 import * as UrlUtils from "utils/ApiPathConst";
 import * as DateUtils from "utils/DateUtils";
+import * as FormatUtils from "utils/FormatUtils";
 
 import {
     Radio,
@@ -52,18 +53,11 @@ const ApplyForm = () => {
 
     function getIssueLabel(data){
         return  data.year
-        +" Vol. "+zeroPad(data.volume,3)
-        +", No. "+zeroPad(data.issueNo,2)
+        +" Vol. "+FormatUtils.zeroPad(data.volume,3)
+        +", No. "+FormatUtils.zeroPad(data.issueNo,2)
         +", "+DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
     }
 
-    function zeroPad(num, places) {
-        num=num?num:0;
-        var zero = places - num.toString().length + 1;
-        return Array(+(zero > 0 && zero)).join("0") + num;
-    }
-
-
     React.useEffect(() => {
        setLoding(false);
     }, [userData]);

src/pages/PublicNotice/Details_GLD/tabTableDetail/ProofTab.js

@@ -2,15 +2,11 @@
 import * as React from 'react';
 import * as DateUtils from "utils/DateUtils";
 import {FiDataGrid} from "components/FiDataGrid";
+import * as FormatUtils from "utils/FormatUtils"
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function ProofTab({rows}) {
 
-    function currencyFormat(num) {
-        return num.toLocaleString('en-US', {
-            minimumFractionDigits: 2 
-          });
-    }
 
 
     const columns = [
@@ -45,7 +41,7 @@ export default function ProofTab({rows}) {
             headerName: 'Fee',
             flex: 1,
             valueGetter: (params) => {
-                return (params?.value)?"$ "+currencyFormat(params?.value):"";
+                return (params?.value)?"$ "+FormatUtils.currencyFormat(params?.value):"";
             }
         },
     ];

src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

@@ -8,6 +8,7 @@ import {
 } from '@mui/material';
 import { FiDataGrid } from "components/FiDataGrid";
 import * as DateUtils from "utils/DateUtils"
+import * as FormatUtils from "utils/FormatUtils"
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
 import { useNavigate } from "react-router-dom";
 // ==============================|| EVENT TABLE ||============================== //
@@ -71,6 +72,15 @@ export default function SubmittedTab({ rows }) {
             flex: 3,
 
         },
+        {
+            id: 'fee',
+            field: 'fee',
+            headerName: '價錢',
+            flex: 1,
+            renderCell: (params) => {
+                return FormatUtils.currencyFormat(params.row.fee)
+            },
+        },
         {
             id: 'status',
             field: 'status',

src/pages/PublicNotice/Search_GLD/DataGrid.js

@@ -5,6 +5,7 @@ import {
     Box
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
+import * as FormatUtils from "utils/FormatUtils";
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
 import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
@@ -95,19 +96,13 @@ export default function SearchPublicNoticeTable({ recordList }) {
             flex: 1,
             valueGetter: (params) => {
                 return params.row.issueYear
-                    + " Vol. " + zeroPad(params.row.issueVolume, 3)
-                    + ", No. " + zeroPad(params.row.issueNo, 2)
+                    + " Vol. " + FormatUtils.zeroPad(params.row.issueVolume, 3)
+                    + ", No. " + FormatUtils.zeroPad(params.row.issueNo, 2)
                     + ", " + DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)");
             }
         },
     ];
 
-    function zeroPad(num, places) {
-        num = num ? num : 0;
-        var zero = places - num.toString().length + 1;
-        return Array(+(zero > 0 && zero)).join("0") + num;
-    }
-
     function handleRowDoubleClick(params) {
         // handleEditClick(params)
         navigate('/application/' + params.id);

src/pages/PublicNotice/Search_GLD/SearchForm.js

@@ -11,6 +11,7 @@ import { useForm } from "react-hook-form";
 import * as React from "react";
 import * as ComboData from "utils/ComboData";
 import * as DateUtils from "utils/DateUtils";
+import * as FormatUtils from "utils/FormatUtils";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -74,17 +75,11 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
     function getIssueLabel(data) {
         if (data == {}) return "";
         return data.year
-            + " Vol. " + zeroPad(data.volume, 3)
-            + ", No. " + zeroPad(data.issueNo, 2)
+            + " Vol. " + FormatUtils.zeroPad(data.volume, 3)
+            + ", No. " + FormatUtils.zeroPad(data.issueNo, 2)
             + ", " + DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
     }
 
-    function zeroPad(num, places) {
-        num = num ? num : 0;
-        var zero = places - num.toString().length + 1;
-        return Array(+(zero > 0 && zero)).join("0") + num;
-    }
-
     return (
         <MainCard xs={12} md={12} lg={12}
             border={false}

src/utils/FormatUtils.js

@@ -0,0 +1,17 @@
+
+export function currencyFormat(num) {
+    let val = num ? num : 0;
+    return val.toLocaleString('en-US', {
+        minimumFractionDigits: 2
+    });
+}
+
+export function zeroPad(num, places) {
+    num = num ? num : 0;
+    var zero = places - num.toString().length + 1;
+    return Array(+(zero > 0 && zero)).join("0") + num;
+}
+
+
+
+