From ad113beeaed0bd873ef56be3ed57832dee80864e Mon Sep 17 00:00:00 2001
From: "jason.lam" <jason.lam@2fi-solutions.com.hk>
Date: Fri, 5 Jan 2024 16:59:19 +0800
Subject: [PATCH] update table

---
 .../Details/ApplicationDetailCard.js          |  1 +
 src/pages/Proof/Reply_GLD/ProofForm.js        |  2 +-
 .../ApplyForm/PublicNoticeApplyForm.js        | 11 ++++++----
 .../Details_GLD/ApplicationDetailCard.js      |  3 ++-
 src/pages/PublicNotice/Details_GLD/index.js   | 22 +++++++++----------
 .../Details_GLD/tabTableDetail/PaymentTab.js  | 14 ++++++++----
 .../Details_GLD/tabTableDetail/ProofTab.js    | 22 ++++++++++++++-----
 .../tabTableDetail/StatusHistoryTab.js        | 14 +++++++++---
 .../Details_GLD/tabTableDetail/TabTable.js    |  2 +-
 src/utils/FieldUtils.js                       |  6 ++++-
 10 files changed, 65 insertions(+), 32 deletions(-)

diff --git a/src/pages/DemandNote/Details/ApplicationDetailCard.js b/src/pages/DemandNote/Details/ApplicationDetailCard.js
index 27ada79..8845d44 100644
--- a/src/pages/DemandNote/Details/ApplicationDetailCard.js
+++ b/src/pages/DemandNote/Details/ApplicationDetailCard.js
@@ -159,6 +159,7 @@ const ApplicationDetailCard = ({ data }) => {
                                                             // fullWidth
                                                             id='fileName'
                                                             variant="h5"
+                                                            sx={{ wordBreak: 'break-word' }}
                                                         >
                                                             {appDetail.appFilename}
                                                         </Typography>
diff --git a/src/pages/Proof/Reply_GLD/ProofForm.js b/src/pages/Proof/Reply_GLD/ProofForm.js
index 1121019..56f5b3f 100644
--- a/src/pages/Proof/Reply_GLD/ProofForm.js
+++ b/src/pages/Proof/Reply_GLD/ProofForm.js
@@ -50,7 +50,7 @@ const FormPanel = ({ formData, isOverTime }) => {
                                 <Typography variant="h5">Reply Date: {DateUtils.datetimeStr(formik.values.replyDate)}</Typography>
                             </Grid>
                             <Grid item xs={12} md={12} textAlign="left">
-                                <Typography variant="h5">Reply: {formik.values.action ? (<span style={{ color: 'green' }}>Ready for printing (correct manuscript).</span>) : (<span style={{ color: 'red' }}>Not ready for printing (requires modification).</span>)}</Typography>
+                                <Typography variant="h5" >Reply: {formik.values.action ? (<span style={{ color: 'green' }}>Ready for printing (correct manuscript).</span>) : (<span style={{ color: 'red' }}>Not ready for printing (requires modification).</span>)}</Typography>
                             </Grid>
                             {
                                 formik.values.action ?
diff --git a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
index f6f5441..4ec3444 100644
--- a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
+++ b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
@@ -21,6 +21,8 @@ import {
 
 import { useNavigate } from "react-router-dom";
 import { notifyActionSuccess } from 'utils/CommonFunction';
+import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -132,7 +134,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                     </Stack>
                 </div>
             </Grid>
-            <Grid item xs={12} width="60%">
+            <Grid item xs={12} width={{xs:"90%", sm:"90%", md:"60%", lg:"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>
@@ -180,7 +182,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="h5">目標期數:</Typography>
                                     </Grid>
-                                    <Grid item xs={12} md={6} lg={6}>
+                                    <Grid item xs={12} md={9} lg={6}>
                                         <RadioGroup
                                             aria-labelledby="demo-radio-buttons-group-label"
                                             id="issueId"
@@ -204,7 +206,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="h5">稿件檔案 ({"檔案大小應<10MB"}):</Typography>
                                     </Grid>
-                                    <Grid item xs={12} md={3} lg={3}>
+                                    <Grid item xs={12} md={6} lg={6} sx={{ wordBreak: 'break-word' }}>
                                         <input
                                             id="uploadFileBtn"
                                             name="file"
@@ -248,11 +250,12 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                             </Grid>
                             <Grid item xs={12}>
                                 <center>
+                                    <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                                     <Button
                                         variant="contained"
                                         type="submit"
-                                        size="large"
                                     >申請公共啟事</Button>
+                                    </ThemeProvider>
                                 </center>
                             </Grid>
                         </Grid>
diff --git a/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js b/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js
index 608f344..96eb5b5 100644
--- a/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js
+++ b/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js
@@ -475,7 +475,7 @@ const ApplicationDetailCard = (
                                             <Grid container direction="row">
                                                 <Grid item xs={12} md={3} lg={3}
                                                     sx={{ display: 'flex', alignItems: 'center' }}>
-                                                    <FormLabel><Typography variant="h5">Manuscript File:</Typography></FormLabel>
+                                                    <FormLabel><Typography variant="h5" >Manuscript File:</Typography></FormLabel>
                                                 </Grid>
                                                 <Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}>
                                                     <Grid container direction="row" justifyContent="flex-start">
@@ -485,6 +485,7 @@ const ApplicationDetailCard = (
                                                                     // fullWidth
                                                                     id='fileName'
                                                                     variant="h5"
+                                                                    sx={{ wordBreak: 'break-word' }}
                                                                 >
                                                                     {fileDetail.filename}
                                                                 </Typography>
diff --git a/src/pages/PublicNotice/Details_GLD/index.js b/src/pages/PublicNotice/Details_GLD/index.js
index c812e32..ddf39df 100644
--- a/src/pages/PublicNotice/Details_GLD/index.js
+++ b/src/pages/PublicNotice/Details_GLD/index.js
@@ -301,7 +301,7 @@ const PublicNoticeDetail_GLD = () => {
   }, [getUploadStatus]);
 
   return (
-    <Grid container sx={{ maxHeight: '500vh', backgroundColor: 'backgroundColor.default' }} direction="column">
+    <Grid container sx={{ maxHeight: '500vh',width:"100%", backgroundColor: 'backgroundColor.default' }} direction="column">
       <StatusChangeDialog open={open}
         handleClose={handleClose}
         setReason={setReason}
@@ -316,7 +316,7 @@ const PublicNoticeDetail_GLD = () => {
         selectedGazetteGroupInputType={selectedGazetteGroupInputType}
         setSelectedGazetteGroupInputType={setSelectedGazetteGroupInputType}
       />
-      <Grid item xs={12}>
+      <Grid item xs={12} >
         <div style={BackgroundHead}>
           <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
             <Typography ml={15} color='#FFF' variant="h4">Application</Typography>
@@ -338,10 +338,10 @@ const PublicNoticeDetail_GLD = () => {
       </Grid> */}
       <Grid item xs={12} >
         <Grid container direction="row">
-          <Grid item xs={12} md={10} lg={10} xl={10}>
+          <Grid item xs={12} md={12} lg={9} xl={9}>
             <Grid container direction="column">
-              <Grid item xs={12} md={10} lg={10} xl={10}>
-                <Box xs={12} ml={4} mt={3} sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
+              <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
+                <Box xs={12}  sx={{ ml:2 , mt:3, mr:{xs:2, sm:2}, p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                   {isLoading && editMode ?
                     <LoadingComponent /> :
                     <ApplicationDetailCard
@@ -357,8 +357,8 @@ const PublicNoticeDetail_GLD = () => {
                   }
                 </Box>
               </Grid>
-              <Grid item xs={12} md={10} lg={10} xl={10}>
-                <Box xs={12} ml={4} mt={3} sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
+              <Grid item xs={12} md={12} lg={12} xl={12}>
+                <Box xs={12} sx={{ml:2, mt:3, mr:{xs:2, sm:2}, p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                   <GazetteDetailCard
                     // updateUserObject={updateUserObject}
                     applicationDetailData={applicationDetailData}
@@ -368,8 +368,8 @@ const PublicNoticeDetail_GLD = () => {
                   />
                 </Box>
               </Grid>
-              <Grid item xs={12} md={10} lg={10} xl={10}>
-                <Box xs={12} ml={4} mt={3} sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
+              <Grid item xs={12} md={12} lg={12} xl={12}>
+                <Box xs={12} sx={{ml:2, mt:3, mr:{sm:2}, p: 0, borderRadius: '10px',width: {xs:'92vw', sm:'96.5vw', md:"auto"}, backgroundColor: '#ffffff' }}>
                   <TabTableDetail
                     applicationDetailData={applicationDetailData}
                     proofList={proofList}
@@ -380,10 +380,10 @@ const PublicNoticeDetail_GLD = () => {
               </Grid>
             </Grid>
           </Grid>
-          <Grid item xs={12} md={2} lg={2} xl={2}>
+          <Grid item xs={12} md={12} lg={3} xl={3}>
             <Grid container>
               <Grid item xs={12} md={12}>
-                <Box xs={12} md={12} ml={3} mt={3} mr={1} height='800px' sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
+                <Box xs={12} md={12} height='800px' sx={{ ml:2, mt:3, mr:{xs:2, sm:2}, p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                   <ClientDetailCard
                     // updateUserObject={updateUserObject}
                     applicationDetailData={applicationDetailData}
diff --git a/src/pages/PublicNotice/Details_GLD/tabTableDetail/PaymentTab.js b/src/pages/PublicNotice/Details_GLD/tabTableDetail/PaymentTab.js
index 7a71083..c1b0539 100644
--- a/src/pages/PublicNotice/Details_GLD/tabTableDetail/PaymentTab.js
+++ b/src/pages/PublicNotice/Details_GLD/tabTableDetail/PaymentTab.js
@@ -1,19 +1,22 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button
+    Button, useMediaQuery
 } from '@mui/material';
 import { useNavigate } from "react-router-dom";
 import {FiDataGrid} from "components/FiDataGrid";
 import * as FormatUtils from "utils/FormatUtils"
 import * as DateUtils from "utils/DateUtils"
 import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
+import {useTheme} from "@emotion/react";
 // import * as StatusUtils from "./PublicNoteStatusUtils";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SubmittedTab({ rows }) {
 
     const navigate = useNavigate()
+    const theme = useTheme();
+    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
     const handleEditClick = (params) => () => {
         navigate('/paymentPage/details/' + params.row.id);
@@ -23,7 +26,8 @@ export default function SubmittedTab({ rows }) {
         {
             field: 'actions',
             headerName: 'Trans. No.',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
             renderCell: (params) => {
                 return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
@@ -33,7 +37,8 @@ export default function SubmittedTab({ rows }) {
             id: 'transDateTime',
             field: 'transDateTime',
             headerName: 'Trans. Date',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params.value);
             }
@@ -42,7 +47,8 @@ export default function SubmittedTab({ rows }) {
             id: 'status',
             field: 'status',
             headerName: 'Status',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
                 return PaymentStatus.getStatus_Eng(params);
             }
diff --git a/src/pages/PublicNotice/Details_GLD/tabTableDetail/ProofTab.js b/src/pages/PublicNotice/Details_GLD/tabTableDetail/ProofTab.js
index 4679084..3567d96 100644
--- a/src/pages/PublicNotice/Details_GLD/tabTableDetail/ProofTab.js
+++ b/src/pages/PublicNotice/Details_GLD/tabTableDetail/ProofTab.js
@@ -1,7 +1,7 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button,
+    Button, useMediaQuery,
 } from '@mui/material';
 import {
     GridActionsCellItem,
@@ -14,11 +14,14 @@ import {FiDataGrid} from "components/FiDataGrid";
 import * as FormatUtils from "utils/FormatUtils"
 import * as HttpUtils from "utils/HttpUtils"
 import * as UrlUtils from "utils/ApiPathConst"
+import {useTheme} from "@emotion/react";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function ProofTab({rows}) {
 
     const navigate = useNavigate()
+    const theme = useTheme();
+    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
     const handleEditClick = (params) => () => {
         navigate('/proof/reply/' + params.row.id);
@@ -35,7 +38,8 @@ export default function ProofTab({rows}) {
            
             field: 'refNo',
             headerName: 'Proof No.',
-            width: 200,
+            width: isMdOrLg ? 'auto' : 200,
+            flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
             renderCell: (params) => {
                 return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
@@ -44,7 +48,8 @@ export default function ProofTab({rows}) {
         {
             field: 'status',
             headerName: 'Status',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
                 return ProofStatus.getStatus_Eng(params);
             },
@@ -52,7 +57,9 @@ export default function ProofTab({rows}) {
         {
             field: 'created',
             headerName: 'Proof Date',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
+
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params?.value);
             }
@@ -60,7 +67,8 @@ export default function ProofTab({rows}) {
         {
             field: 'replyDate',
             headerName: 'Confirmed/Return Date',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
                 return params?.value?DateUtils.datetimeStr(params?.value):"";
             }
@@ -68,7 +76,9 @@ export default function ProofTab({rows}) {
         {
             field: 'fee',
             headerName: 'Fee',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
+
             valueGetter: (params) => {
                 return (params?.value)?"$ "+FormatUtils.currencyFormat(params?.value):"";
             }
diff --git a/src/pages/PublicNotice/Details_GLD/tabTableDetail/StatusHistoryTab.js b/src/pages/PublicNotice/Details_GLD/tabTableDetail/StatusHistoryTab.js
index 43ed2cc..2f9322f 100644
--- a/src/pages/PublicNotice/Details_GLD/tabTableDetail/StatusHistoryTab.js
+++ b/src/pages/PublicNotice/Details_GLD/tabTableDetail/StatusHistoryTab.js
@@ -7,16 +7,22 @@ import {FiDataGrid} from "components/FiDataGrid";
 // } from '@mui/material';
 import * as DateUtils from "utils/DateUtils"
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
+import {useTheme} from "@emotion/react";
+import {useMediaQuery} from "@mui/material";
 
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function StatusHistoryTab({rows}) {
+    const theme = useTheme();
+    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
+
     const columns = [
         {
             id: 'created',
             field: 'created',
             headerName: 'Date',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params?.value);
             }
@@ -26,13 +32,15 @@ export default function StatusHistoryTab({rows}) {
             id: 'createdBy',
             field: 'createdBy',
             headerName: 'Changed By',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
         },
         {
             id: 'status',
             field: 'status',
             headerName: 'Status',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
                 return [StatusUtils.getStatusEng(params)]
             },
diff --git a/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js b/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js
index 82b4e40..6e241be 100644
--- a/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js
+++ b/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js
@@ -74,7 +74,7 @@ const PublicNotice = ({ applicationDetailData, proofList, paymentList }) => {
                 {/*col 2*/}
                 <Grid item xs={12}>
                     <TabContext value={selectedTab}>
-                        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                        <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto'  }}>
                             <TabList onChange={handleChange} aria-label="lab API tabs example">
                                 <Tab label={"Proof(" + _proofList?.length + ") "} value="1" />
                                 <Tab label={"Payment(" + _paymentList.length + ") "} value="2" />
diff --git a/src/utils/FieldUtils.js b/src/utils/FieldUtils.js
index a8440b3..1577fc5 100644
--- a/src/utils/FieldUtils.js
+++ b/src/utils/FieldUtils.js
@@ -60,6 +60,9 @@ export const getTextArea = ({ label, valueName, form, disabled, inputProps, ...p
                 minRows: 4,
                 maxRows: 4,
                 inputProps: inputProps,
+                InputProps: {
+                    style: { minHeight:'42.5px', maxHeight: '50vh',height: 'auto'  },
+                },
                 props
             })}
         </Grid>
@@ -170,7 +173,7 @@ export const getComboField = ({ label, dataList, valueName, form, disabled, getO
     </Grid>;
 }
 
-export const initField = ({ type, valueName, form, disabled, multiline, handleChange, placeholder, inputProps, width, ...props }) => {
+export const initField = ({ type, valueName, form, disabled, multiline, handleChange, placeholder, inputProps, InputProps, width, ...props }) => {
     let err = Boolean(form.errors[valueName]);
 
     return <TextField
@@ -181,6 +184,7 @@ export const initField = ({ type, valueName, form, disabled, multiline, handleCh
         type={type}
         placeholder={placeholder}
         inputProps={inputProps}
+        InputProps={InputProps}
         error={err}
         helperText={form.errors[valueName] ? form.errors[valueName] : ''}
         onChange={handleChange ? handleChange : form.handleChange}