update UI

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -76,7 +76,6 @@ const PublicNoticeApplyForm = ({loadedData}) => {
         var selection = [];
         for (var i = 0; i < formData?.gazetteIssueList?.length; i++) {
             let data = formData.gazetteIssueList[i];
-            "2023 Vol 027, No. 36, 8 Sep 2023 (Fri)"
             let label = data.year
             +" Vol. "+zeroPad(data.volume,3)
             +", No. "+zeroPad(data.issueNo,2)
@@ -92,7 +91,7 @@ const PublicNoticeApplyForm = ({loadedData}) => {
     }
 
     return (
-            <Grid container style={{ padding: 24}} rowSpacing={4.5} columnSpacing={2.75}>
+            <Grid container style={{ padding: 24}} rowSpacing={16} columnSpacing={2.75}>
                 <Grid item xs={12}>
                     <Typography variant="h5">申請公共啟事</Typography>
                 </Grid>
@@ -129,11 +128,11 @@ const PublicNoticeApplyForm = ({loadedData}) => {
                 <Grid item lg={4}></Grid>
                 <Grid item lg={4}>
                     <Grid container alignItems={"center"}>
-                        <Grid item xs={4} s={4} md={4} lg={4}
+                        <Grid item lg={4}
                                 sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                             目標期數:
                         </Grid>
-                        <Grid item xs={7} s={7} md={7} lg={6}>
+                        <Grid item lg={6}>
                             <RadioGroup
                                 aria-labelledby="demo-radio-buttons-group-label"
                                 id="issueId"
@@ -188,7 +187,7 @@ const PublicNoticeApplyForm = ({loadedData}) => {
                     })}
                 <Grid item lg={4}></Grid>
                 
-                <Grid item lg={12}>
+                <Grid item xs={12}>
                     <center>
                         <Button 
                             variant="contained" 

src/pages/PublicNotice/ListPanel/InProgressTab.js

@@ -3,13 +3,13 @@ import * as React from 'react';
 import {
     DataGrid,
 } from "@mui/x-data-grid";
-import { 
+import {
     Button
 } from '@mui/material';
 import * as DateUtils from "../../../utils/DateUtils"
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function SubmittedTab({rows}) {
+export default function SubmittedTab({ rows }) {
     const [rowModesModel] = React.useState({});
 
     const columns = [
@@ -24,7 +24,7 @@ export default function SubmittedTab({rows}) {
             field: 'created',
             headerName: '提交日期',
             flex: 1,
-            valueGetter:(params)=>{
+            valueGetter: (params) => {
                 return DateUtils.datetimeStr(params.value);
             }
         },
@@ -33,18 +33,12 @@ export default function SubmittedTab({rows}) {
             field: 'remarks',
             headerName: '我的備註',
             flex: 1,
-            valueGetter:(params)=>{
-                return DateUtils.datetimeStr(params.value);
-            }
         },
         {
             id: 'status',
             field: 'status',
             headerName: '狀態',
             flex: 1,
-            valueGetter:(params)=>{
-                return DateUtils.datetimeStr(params.value);
-            }
         },
         {
             field: 'actions',
@@ -53,13 +47,13 @@ export default function SubmittedTab({rows}) {
             width: 50,
             cellClassName: 'actions',
             renderCell: () => {
-                return <Button onClick={()=>{}}>查看詳細</Button>;
+                return <Button onClick={() => { }}>查看詳細</Button>;
             },
         }
     ];
 
     return (
-        <div style={{height: 400, width: '100%'}}>
+        <div style={{ height: 400, width: '100%' }}>
             <DataGrid
                 rows={rows}
                 columns={columns}
@@ -67,11 +61,11 @@ export default function SubmittedTab({rows}) {
                 rowModesModel={rowModesModel}
                 initialState={{
                     pagination: {
-                        paginationModel: {page: 0, pageSize: 5},
+                        paginationModel: { page: 0, pageSize: 5 },
                     },
                 }}
                 pageSizeOptions={[5, 10]}
-                autoHeight = {true}
+                autoHeight={true}
             />
         </div>
     );

src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

@@ -3,14 +3,20 @@ import * as React from 'react';
 import {
     DataGrid,
 } from "@mui/x-data-grid";
-import { 
-    Button
+import {
+    Stack,
+    Typography,
+    Button,
+    Dialog, DialogTitle, DialogContent, DialogActions
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils"
+
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function SubmittedTab({rows}) {
-    const [rowModesModel] = React.useState({});
+export default function SubmittedTab({ rows }) {
+    const [selectedRowItems, setSelectedRowItems] = React.useState([]);
+    const [isPopUp, setIsPopUp] = React.useState(false);
+
 
     const columns = [
         {
@@ -24,7 +30,7 @@ export default function SubmittedTab({rows}) {
             field: 'created',
             headerName: '提交日期',
             flex: 1,
-            valueGetter:(params)=>{
+            valueGetter: (params) => {
                 return DateUtils.datetimeStr(params.value);
             }
         },
@@ -33,18 +39,13 @@ export default function SubmittedTab({rows}) {
             field: 'remarks',
             headerName: '我的備註',
             flex: 1,
-            valueGetter:(params)=>{
-                return DateUtils.datetimeStr(params.value);
-            }
+
         },
         {
             id: 'status',
             field: 'status',
             headerName: '狀態',
             flex: 1,
-            valueGetter:(params)=>{
-                return DateUtils.datetimeStr(params.value);
-            }
         },
         {
             field: 'actions',
@@ -53,31 +54,68 @@ export default function SubmittedTab({rows}) {
             width: 50,
             cellClassName: 'actions',
             renderCell: () => {
-                return <Button onClick={()=>{}}>查看詳細</Button>;
+                return <Button onClick={() => { }}>查看詳細</Button>;
             },
         }
     ];
 
-    const onPaymentClick=()=>{
-        
+    const getWindowContent = () => {
+        var content = [];
+        const datas = rows?.filter((row) =>
+            selectedRowItems.includes(row.id)
+        );
+        for (var i = 0; i < datas?.length; i++) {
+            content.push(<>
+                <Stack direction="row" justifyContent="space-between"><Typography variant="h5">申請編號: {datas[i].appNo}</Typography>({DateUtils.datetimeStr(datas[i].created)})</Stack>
+                備註: {datas[i].remarks}
+                <br /><br />
+            </>);
+        }
+        return content;
     }
 
     return (
-        <div style={{height: 400, width: '100%'}}>
-            <DataGrid
-                rows={rows}
-                columns={columns}
-                editMode="row"
-                rowModesModel={rowModesModel}
-                initialState={{
-                    pagination: {
-                        paginationModel: {page: 0, pageSize: 5},
-                    },
-                }}
-                pageSizeOptions={[5, 10]}
-                autoHeight = {true}
-            />
-            <Button variant="contained" onClick={()=>{onPaymentClick()}}>付款</Button>
-        </div>
+        <>
+            <div style={{ height: 400, width: '100%' }}>
+                <DataGrid
+                    checkboxSelection
+                    disableRowSelectionOnClick
+                    rows={rows}
+                    columns={columns}
+                    editMode="row"
+                    rowSelectionModel={selectedRowItems}
+                    initialState={{
+                        pagination: {
+                            paginationModel: { page: 0, pageSize: 5 },
+                        },
+                    }}
+                    pageSizeOptions={[5, 10]}
+                    autoHeight={true}
+                    onRowSelectionModelChange={(newSelection) => {
+                        setSelectedRowItems(newSelection);
+                    }}
+                />
+                <Button variant="contained" onClick={() => { setIsPopUp(true) }}>付款</Button>
+            </div>
+
+            <div>
+                <Dialog open={isPopUp} onClose={() => setIsPopUp(false)}  >
+                    <DialogTitle></DialogTitle>
+                    <Typography variant="h2" style={{ padding: '16px' }}>確認付款</Typography>
+                    <DialogContent style={{ display: 'flex', }}>
+                        <Stack direction="column" justifyContent="space-between">
+                            {getWindowContent()}
+                        </Stack>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={() => setIsPopUp(false)}>Close</Button>
+                         <Button onClick={() => setIsPopUp(false)}>確認</Button>
+                    </DialogActions>
+                </Dialog>
+            </div>
+        </>
     );
+
+
+
 }

src/utils/FieldUtils.js

@@ -5,152 +5,152 @@ import {
 
 import Combo from "./Combo";
 
-export const getDateField=({label, valueName, form, disabled})=>{
+export const getDateField = ({ label, valueName, form, disabled }) => {
     return <Grid item lg={4} >
         <Grid container alignItems={"center"}>
-            <Grid item xs={4} s={4} md={4} lg={4}
-                    sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+            <Grid item lg={4}
+                sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
                 {label}
             </Grid>
-            <Grid item xs={7} s={7} md={7} lg={6}>
-            {initField({
-                    type:"date", 
-                    valueName:valueName, 
-                    form:form, 
-                    disabled:disabled
-                    })}
+            <Grid item lg={6}>
+                {initField({
+                    type: "date",
+                    valueName: valueName,
+                    form: form,
+                    disabled: disabled
+                })}
             </Grid>
         </Grid>
     </Grid>;
 }
 
-export const getTextField=({label, valueName, form, disabled})=>{
-    return <Grid item lg={4} >
+export const getTextField = ({ label, valueName, form, disabled }) => {
+    return <Grid item xs={12} lg={4} >
         <Grid container alignItems={"center"}>
-            <Grid item xs={4} s={4} md={4} lg={4}
-                    sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+            <Grid item lg={4}
+                sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
                 {label}
             </Grid>
-            <Grid item xs={7} s={7} md={7} lg={6}>
-            {initField({
-                    type:"text", 
-                    valueName:valueName, 
-                    form:form, 
-                    disabled:disabled
-                    })}
+            <Grid item lg={6}>
+                {initField({
+                    type: "text",
+                    valueName: valueName,
+                    form: form,
+                    disabled: disabled
+                })}
             </Grid>
         </Grid>
     </Grid>;
 }
 
-export const getTextArea=({label, valueName, form, disabled, ...props})=>{
-    return <Grid item lg={4} >
+export const getTextArea = ({ label, valueName, form, disabled, ...props }) => {
+    return <Grid item xs={12} lg={4} >
         <Grid container alignItems={"center"}>
-            <Grid item xs={4} s={4} md={4} lg={4}
-                    sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+            <Grid item lg={4}
+                sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
                 {label}
             </Grid>
-            <Grid item xs={7} s={7} md={7} lg={6}>
-            {initField({
-                    type:"text", 
-                    valueName:valueName, 
-                    form:form, 
-                    disabled:disabled,
+            <Grid item lg={6}>
+                {initField({
+                    type: "text",
+                    valueName: valueName,
+                    form: form,
+                    disabled: disabled,
                     multiline: true,
-                    row:10,
+                    row: 10,
                     minRows: 4,
                     maxRows: 4,
                     props
-                    })}
+                })}
             </Grid>
         </Grid>
     </Grid>;
 }
 
-export const getPhoneField=({label, valueName, form, disabled})=>{
+export const getPhoneField = ({ label, valueName, form, disabled }) => {
     return <Grid item lg={4}>
-    <Grid container alignItems={"center"}>
-        <Grid item xs={4} s={4} md={4} lg={4}
-              sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-            {label}
-        </Grid>
-        <Grid item xs={2}>
-        {initField({
-                    type:"tel", 
-                    valueName:valueName.code, 
-                    form:form, 
-                    disabled:disabled
-                    })}
-        </Grid>
-        <Grid item xs={4}>
-        {initField({
-                    type:"tel", 
-                    valueName:valueName.num, 
-                    form:form, 
-                    disabled:disabled
-                    })}
+        <Grid container alignItems={"center"}>
+            <Grid item lg={4}
+                sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
+                {label}
+            </Grid>
+            <Grid item xs={2}>
+                {initField({
+                    type: "tel",
+                    valueName: valueName.code,
+                    form: form,
+                    disabled: disabled
+                })}
+            </Grid>
+            <Grid item xs={4}>
+                {initField({
+                    type: "tel",
+                    valueName: valueName.num,
+                    form: form,
+                    disabled: disabled
+                })}
+            </Grid>
         </Grid>
-    </Grid>
-</Grid>;
+    </Grid>;
 }
 
 
-export const getAddressField=({label, valueName, form, disabled})=>{
+export const getAddressField = ({ label, valueName, form, disabled }) => {
     return <Grid item lg={4} >
-    <Grid container alignItems={"top"}>
-        <Grid item xs={4} s={4} md={4} lg={4}
-              sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'top'}}>
-                <Grid item lg={12}  sx={{alignItems: 'center'}}>{label}</Grid>
-        </Grid> 
-        <Grid item lg={6}>
-            <Grid item lg={12}>
-                {initField({
-                    type:"text", 
-                    valueName:valueName[0], 
-                    form:form, 
-                    disabled:disabled
-                    })}
+        <Grid container alignItems={"top"}>
+            <Grid item xs={4} s={4} md={4} lg={4}
+                sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'top' }}>
+                <Grid item lg={12} sx={{ alignItems: 'center' }}>{label}</Grid>
             </Grid>
-            <Grid item lg={12}>
-            {initField({
-                    type:"text", 
-                    valueName:valueName[1], 
-                    form:form, 
-                    disabled:disabled
+            <Grid item lg={6}>
+                <Grid item lg={12}>
+                    {initField({
+                        type: "text",
+                        valueName: valueName[0],
+                        form: form,
+                        disabled: disabled
                     })}
-            </Grid>
-            <Grid item lg={12}>
-            {initField({
-                    type:"text", 
-                    valueName:valueName[2], 
-                    form:form, 
-                    disabled:disabled
+                </Grid>
+                <Grid item lg={12}>
+                    {initField({
+                        type: "text",
+                        valueName: valueName[1],
+                        form: form,
+                        disabled: disabled
+                    })}
+                </Grid>
+                <Grid item lg={12}>
+                    {initField({
+                        type: "text",
+                        valueName: valueName[2],
+                        form: form,
+                        disabled: disabled
                     })}
+                </Grid>
             </Grid>
         </Grid>
-    </Grid>
-</Grid>;
+    </Grid>;
 }
 
-export const getComboField=({label,dataList, valueName, form, disabled, getOptionLabel, onInputChange, onChange, filterOptions, ...props})=>{
+export const getComboField = ({ label, dataList, valueName, form, disabled, getOptionLabel, onInputChange, onChange, filterOptions, ...props }) => {
     return <Grid item lg={4} >
-            <Grid container alignItems={"center"}>
-                <Grid item xs={4} s={4} md={4} lg={4}
-                        sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                    {label}
-                </Grid>
-                <Grid item xs={7} s={7} md={7} lg={6}>
-                    <Combo 
-                        valueName={valueName}
-                        disabled={disabled}
-                        dataList={dataList}
-                        form={form}
-                        filterOptions={filterOptions}
-                        getOptionLabel={getOptionLabel}
-                        onInputChange={onInputChange}
-                        onChange={onChange}
-                        {...props}
-                    />
+        <Grid container alignItems={"center"}>
+            <Grid item lg={4}
+                sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
+                {label}
+            </Grid>
+            <Grid item lg={6}>
+                <Combo
+                    valueName={valueName}
+                    disabled={disabled}
+                    dataList={dataList}
+                    form={form}
+                    filterOptions={filterOptions}
+                    getOptionLabel={getOptionLabel}
+                    onInputChange={onInputChange}
+                    onChange={onChange}
+                    {...props}
+                />
                 {/* <Autocomplete
                         id={key}
                         name={key}
@@ -174,12 +174,12 @@ export const getComboField=({label,dataList, valueName, form, disabled, getOptio
                             />
                         )}
                     /> */}
-                </Grid>
             </Grid>
-        </Grid>;
+        </Grid>
+    </Grid>;
 }
 
-export const initField=({type, valueName, form, disabled, multiline, placeholder, inputProps, ...props})=>{
+export const initField = ({ type, valueName, form, disabled, multiline, placeholder, inputProps, ...props }) => {
     let err = Boolean(form.errors[valueName]);
 
     return <TextField
@@ -191,16 +191,16 @@ export const initField=({type, valueName, form, disabled, multiline, placeholder
         placeholder={placeholder}
         inputProps={inputProps}
         error={err}
-        helperText={form.errors[valueName]?form.errors[valueName]:''}
+        helperText={form.errors[valueName] ? form.errors[valueName] : ''}
         onChange={form.handleChange}
         value={form.values[valueName]}
         disabled={disabled}
         sx={{
             "& .MuiInputBase-input.Mui-disabled": {
-              WebkitTextFillColor: "#000000",
-              background: "#f8f8f8",
+                WebkitTextFillColor: "#000000",
+                background: "#f8f8f8",
             },
-          }}
+        }}
         {...props}
     />
 }