update search form

src/pages/Payment/Details_Public/DataGrid.js

@@ -1,6 +1,6 @@
 // material-ui
 import {
-    Typography,
+    Typography, useMediaQuery,
 } from '@mui/material';
 import {
     isORGLoggedIn,
@@ -9,12 +9,15 @@ import * as React from 'react';
 import * as FormatUtils from "utils/FormatUtils"
 import { FiDataGrid } from "components/FiDataGrid";
 import * as DateUtils from "utils/DateUtils"
+import {useTheme} from "@emotion/react";
 // import * as Utils from "utils/Utils"
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
     const [rows, setRows] = React.useState(recordList);
     const [total, setTotal] = React.useState(0);
+    const theme = useTheme();
+    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
     React.useEffect(() => {
         const indexedData = recordList.map((obj, index) => ({ index_number: index + 1, ...obj }));
@@ -41,7 +44,8 @@ export default function SearchPublicNoticeTable({ recordList }) {
             id: 'appNo',
             field: 'appNo',
             headerName:'項目',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 300,
+            flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
                 let appNo = params.row.appNo;
                 // console.log(params)
@@ -76,8 +80,12 @@ export default function SearchPublicNoticeTable({ recordList }) {
                     },
                 }}
             />
-
-            <Typography align="right" variant= "h3">付款總額: <span style={{ color: "blue", fontWeight: "bold", }}> (HK$) {FormatUtils.currencyFormat(total)}</span></Typography>
+            <Typography align="right" variant="h4" sx={{mr:2}}>
+                付款總額:
+                <span style={{ color: "blue", fontWeight: "bold", }}>
+                    (HK$) {FormatUtils.currencyFormat(total)}
+                </span>
+            </Typography>
         </div>
     );
 }

src/pages/Payment/Search_Public/DataGrid.js

@@ -1,18 +1,21 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button
+    Button, useMediaQuery
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils"
 import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
 import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
+import {useTheme} from "@emotion/react";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
     const [rows, setRows] = React.useState(recordList);
     const navigate = useNavigate()
+    const theme = useTheme();
+    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
     const _sx = {
         padding: "4 2 4 2",
@@ -42,7 +45,8 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             field: 'actions',
             headerName: '付款編號',
-            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>;
@@ -52,7 +56,8 @@ export default function SearchPublicNoticeTable({ recordList }) {
             id: 'appNos',
             field: 'appNos',
             headerName: '申請編號',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
                 let appNo = params.row.appNos;
                 return <div style={{ margin: 4 }}>{appNo}</div>
@@ -62,7 +67,8 @@ export default function SearchPublicNoticeTable({ recordList }) {
             id: 'transDateTime',
             field: 'transDateTime',
             headerName: '付款日期',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params?.value);
             }

src/pages/Payment/Search_Public/SearchForm.js

@@ -11,6 +11,8 @@ import { useForm } from "react-hook-form";
 import * as React from "react";
 import * as DateUtils from "utils/DateUtils";
 import * as ComboData from "utils/ComboData";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -72,7 +74,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                 {/*row 2*/}
                 <Grid container alignItems={"center"}>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                    <Grid item xs={12} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("code")}
@@ -85,43 +87,51 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                         />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        <TextField
-                            fullWidth
-                            {...register("dateFrom")}
-                            id="dateFrom"
-                            type="date"
-                            label="付款日期(從)"
-                            defaultValue={searchCriteria.dateFrom}
-                            InputProps={{ inputProps: { max: maxDate } }}
-                            onChange={(newValue) => {
-                                setMinDate(DateUtils.dateStr(newValue));
-                            }}
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                        />
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        <TextField
-                            fullWidth
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                            {...register("dateTo")}
-                            InputProps={{ inputProps: { min: minDate } }}
-                            onChange={(newValue) => {
-                                setMaxDate(DateUtils.dateStr(newValue));
-                            }}
-                            id="dateTo"
-                            type="date"
-                            label="付款日期(到)"
-                            defaultValue={searchCriteria.dateTo}
-                        />
+                    <Grid item xs={12} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <Grid container>
+                            <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
+                                <TextField
+                                    fullWidth
+                                    {...register("dateFrom")}
+                                    id="dateFrom"
+                                    type="date"
+                                    label="付款日期(從)"
+                                    defaultValue={searchCriteria.dateFrom}
+                                    InputProps={{ inputProps: { max: maxDate } }}
+                                    onChange={(newValue) => {
+                                        setMinDate(DateUtils.dateStr(newValue));
+                                    }}
+                                    InputLabelProps={{
+                                        shrink: true
+                                    }}
+                                />
+                            </Grid>
+
+                            <Grid item xs={1.5} s={1.5} md={1.5} lg={1} sx={{mt:1.3, display: 'flex', justifyContent:"center", alignItems: 'flex-start'}}>
+                                到
+                            </Grid>
+
+                            <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
+                                <TextField
+                                    fullWidth
+                                    InputLabelProps={{
+                                        shrink: true
+                                    }}
+                                    {...register("dateTo")}
+                                    InputProps={{ inputProps: { min: minDate } }}
+                                    onChange={(newValue) => {
+                                        setMaxDate(DateUtils.dateStr(newValue));
+                                    }}
+                                    id="dateTo"
+                                    type="date"
+                                    //label="付款日期(到)"
+                                    defaultValue={searchCriteria.dateTo}
+                                />
+                            </Grid>
+                        </Grid>
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                    <Grid item xs={12} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("tarnsNo")}
@@ -134,11 +144,12 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                         />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                    <Grid item xs={12} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <Autocomplete
                             {...register("status")}
                             disablePortal={false}
                             id="status"
+                            size="small"
                             filterOptions={(options) => options}
                             options={ComboData.paymentStatus}
                             value={status}
@@ -165,32 +176,25 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
 
                 {/*last row*/}
                 <Grid container maxWidth justifyContent="flex-end">
-
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                    <Grid item sx={{mr: 3, mb: 3 }}>
                         <Button
-                            size="large"
                             variant="contained"
                             onClick={resetForm}
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">重置</Typography>
+                        >
+                            重置
                         </Button>
                     </Grid>
 
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                    <Grid item sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <Button
-                            size="large"
                             variant="contained"
                             type="submit"
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">提交</Typography>
+                        >
+                            提交
                         </Button>
                     </Grid>
+                    </ThemeProvider>
                 </Grid>
             </form>
         </MainCard>