From da5845fcb9a0d3b9f0c477f0a1234ae1780f3b87 Mon Sep 17 00:00:00 2001
From: "jason.lam" <jason.lam@2fi-solutions.com.hk>
Date: Tue, 9 Jan 2024 17:49:04 +0800
Subject: [PATCH] update card

---
 src/pages/Proof/Reply_Public/ProofForm.js     | 38 ++++++++++---------
 .../Proof/Reply_Public/UploadFileTable.js     | 19 ++++++----
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/pages/Proof/Reply_Public/ProofForm.js b/src/pages/Proof/Reply_Public/ProofForm.js
index 8352580..f9ede05 100644
--- a/src/pages/Proof/Reply_Public/ProofForm.js
+++ b/src/pages/Proof/Reply_Public/ProofForm.js
@@ -22,6 +22,8 @@ import { useNavigate } from "react-router-dom";
 import * as DateUtils from "utils/DateUtils"
 import Loadable from 'components/Loadable';
 import { notifyActionSuccess } from 'utils/CommonFunction';
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 const UploadFileTable = Loadable(React.lazy(() => import('./UploadFileTable')));
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -147,8 +149,8 @@ const FormPanel = ({ formData }) => {
 
                 {
                     formik.values.replyDate ?
-                        <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
-                            <Grid item xs={12} md={12} textAlign="left">
+                        <Grid container direction="column" sx={{ paddingLeft: 0, paddingRight: 0 }}>
+                            <Grid item xs={12} sm={12} md={12} lg={8} textAlign="left">
                                 <Typography variant="h5">校對回覆日期: {DateUtils.datetimeStr_Cht(formik.values.replyDate)}</Typography>
                             </Grid>
                             <Grid item xs={12} md={12} textAlign="left">
@@ -158,7 +160,7 @@ const FormPanel = ({ formData }) => {
                                 formik.values.action ?
                                     null
                                     :
-                                    <Grid item xs={12} md={12} textAlign="left">
+                                    <Grid item xs={12} md={12} textAlign="left" sx={{ width:'95%', maxWidth: {xs:'70vw', sm:'72vw', md:'75vw',lg:'80vw'}}}>
                                         <FileList
                                             lang="ch"
                                             refId={params.id}
@@ -177,13 +179,13 @@ const FormPanel = ({ formData }) => {
                         :
                         (
                             isOverTime() ?
-                                <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
+                                <Grid container direction="column" sx={{ paddingLeft: 0, paddingRight: 0 }} spacing={1}>
                                     <Grid item xs={12} md={12} textAlign="left">
                                         <Typography variant="h5">回覆逾時，請重新申請。</Typography>
                                     </Grid>
                                 </Grid>
                                 :
-                                <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
+                                <Grid container direction="column" sx={{ paddingLeft: 0, paddingRight: 0 }} spacing={1}>
 
                                     <Grid item xs={12} md={12}>
                                         <RadioGroup
@@ -217,31 +219,33 @@ const FormPanel = ({ formData }) => {
                                                         type="file"
                                                         accept=".pdf"
                                                         style={{ display: 'none' }}
-                                                        disabled={attachments.length >= (formik.values.groupType == "Private Bill" ? 2 : 1)}
+                                                        disabled={attachments.length >= (formik.values.groupType === "Private Bill" ? 2 : 1)}
                                                         onChange={(event) => {
                                                             readFile(event)
                                                         }}
                                                     />
                                                     <label htmlFor="uploadFileBtn">
+                                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                         <Button
+                                                            color="save"
                                                             component="span"
                                                             variant="contained"
-                                                            size="large"
-                                                            disabled={attachments.length >= (formik.values.groupType == "Private Bill" ? 2 : 1)}
+                                                            disabled={attachments.length >= (formik.values.groupType === "Private Bill" ? 2 : 1)}
                                                         >
-                                                            <Typography variant="h5">上載</Typography>
+                                                            上載
                                                         </Button>
+                                                        </ThemeProvider>
                                                     </label>
                                                 </Grid>
 
 
-                                                <Grid item xs={12} md={12} textAlign="left">
+                                                <Grid item xs={12} md={12} textAlign="left" sx={{ width:'95%', maxWidth: {xs:'70vw', sm:'72vw', md:'75vw',lg:'80vw'}}} >
                                                     <UploadFileTable key="uploadTable" recordList={attachments} setRecordList={setAttachments} />
                                                 </Grid>
                                             </>
                                     }
 
-                                    <Grid item xs={12} md={12} lg={12}>
+                                    <Grid item xs={12} sm={12} md={12} lg={12}>
                                         <Stack direction="row" alignItems="center">
                                             <FormLabel sx={{ paddingRight: 2, paddingBottom: 3, textAlign: "center" }}>
                                                 <Typography variant="h5">簽署：</Typography>
@@ -261,7 +265,7 @@ const FormPanel = ({ formData }) => {
                                                             WebkitTextFillColor: "#000000",
                                                             background: "#f8f8f8",
                                                         },
-                                                        width: '50%'
+                                                        width: '70%'
                                                     }
                                                 }
                                             />
@@ -271,17 +275,15 @@ const FormPanel = ({ formData }) => {
 
 
                                     <Grid item xs={12} md={12} textAlign="left">
+                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                         <Button
-                                            size="large"
                                             variant="contained"
                                             color="success"
                                             type="submit"
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}>
-                                            <Typography variant="h5">提交回覆</Typography>
+                                        >
+                                            提交回覆
                                         </Button>
+                                        </ThemeProvider>
                                     </Grid>
 
                                 </Grid>
diff --git a/src/pages/Proof/Reply_Public/UploadFileTable.js b/src/pages/Proof/Reply_Public/UploadFileTable.js
index 9090721..ca2b6e1 100644
--- a/src/pages/Proof/Reply_Public/UploadFileTable.js
+++ b/src/pages/Proof/Reply_Public/UploadFileTable.js
@@ -10,15 +10,18 @@ import {useEffect} from "react";
 // import {useNavigate} from "react-router-dom";
 // import { useTheme } from '@mui/material/styles';
 import {
-    Box,
-    Stack
+    Stack, useMediaQuery
 } from '@mui/material';
+import {useTheme} from "@emotion/react";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function UploadFileTable({recordList, setRecordList,}) {
     
     const [rows, setRows] = React.useState(recordList);
     const [rowModesModel,setRowModesModel] = React.useState({});
+    const theme = useTheme();
+    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
+
     // const theme = useTheme();
 
     // const navigate = useNavigate()
@@ -74,7 +77,8 @@ export default function UploadFileTable({recordList, setRecordList,}) {
             id: 'name',
             field: 'name',
             headerName: '檔案名稱',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
         },
         {
             id: 'size',
@@ -84,13 +88,14 @@ export default function UploadFileTable({recordList, setRecordList,}) {
                 // console.log(params)
                 return Math.ceil(params.value/1024)+" KB";
               },
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
         },
     ];
 
     return (
-        <Box
-         style={{ height: '200px', width: '75%' }}
+        <div
+         style={{ height: '200px', width: '95%',overflowX: 'auto', }}
          >
             <DataGrid
                 rows={rows}
@@ -106,6 +111,6 @@ export default function UploadFileTable({recordList, setRecordList,}) {
                 disableColumnSelector
                 hideFooter
             />
-        </Box>
+        </div>
     );
 }