PNSPS-frontend-MaterialUI/src/pages/Proof/Reply_Public/ApplicationDetails.js

// material-ui
import {
    FormControl,
    Grid,
    Typography,
    FormLabel,
    TextField,
    Stack
} from '@mui/material';

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')));
import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
import FileList from "components/FileList"
// ==============================|| DASHBOARD - DEFAULT ||============================== //
const ApplicationDetailCard = ({ formData, }) => {

    const params = useParams();

    const [data, setData] = React.useState({});
    //const [proofId, setProofId] = React.useState();

    React.useEffect(() => {
        if (formData) {
            setData(formData);
            //setProofId(formData.id);
        }
    }, [formData]);

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: data,
    });

    const DisplayField = ({ name, width }) => {
        return <TextField
            fullWidth
            disabled
            size="small"
            onChange={formik.handleChange}
            id={name}
            name={name}
            value={formik.values[name]}
            variant="outlined"
            sx={
                {
                    "& .MuiInputBase-input.Mui-disabled": {
                        WebkitTextFillColor: "#000000",
                        background: "#f8f8f8",
                    },
                    width: width ? width : '100%'
                }
            }
        />;
    }

    return (
        <MainCard elevation={0}
            border={false}
            content={false}
        >
            <Typography variant="h4" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
                公共啟事：校對資料
            </Typography>
            <form>
                <Grid container direction="column">
                    <Grid item xs={12} md={12} lg={12}>
                        <Grid container direction="row" justifyContent="space-between"
                            alignItems="center">
                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel><Typography variant="h5">申請編號:</Typography></FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <DisplayField name="appNo" />
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
                                <Grid container alignItems={"left"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel><Typography variant="h5">申請狀態:</Typography></FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormControl variant="outlined">
                                            {StatusUtils.getStatusByText(data.appStatus)}
                                        </FormControl>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid container direction="row" justifyContent="space-between"
                            alignItems="center">
                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel><Typography variant="h5">申請人:</Typography></FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <FormControl variant="outlined" fullWidth disabled >
                                            {data.orgId === null ?
                                                <DisplayField name="contactPerson" />
                                                :
                                                <DisplayField name="applicant" />
                                            }
                                        </FormControl>
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel><Typography variant="h5">憲報期數:</Typography></FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <DisplayField name="issueNoStr" />
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid container direction="row" justifyContent="space-between"
                            alignItems="center">
                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel><Typography variant="h5">聯絡人:</Typography></FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <DisplayField name="contactPerson" />

                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel><Typography variant="h5">刊出日期:</Typography></FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <DisplayField name="issueDateStr" />
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid container direction="row" justifyContent="space-between"
                            alignItems="center">
                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
                                <Grid container alignItems="left">
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel><Typography variant="h5">我的備注:</Typography></FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <Stack direction="row">
                                            <DisplayField name="appRemarks" />
                                        </Stack>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid container direction="row" justifyContent="space-between"
                            alignItems="center">

                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={12} lg={12} sx={{ display: 'flex', alignItems: 'center' }}>
                                        <Typography><Typography variant="h5">請下載下列印刷稿檔案，並仔細校對：</Typography></Typography>
                                    </Grid>
                                </Grid>
                                <FileList
                                    lang="ch"
                                    refId={params.id}
                                    refType={"proof"}
                                    dateHideable={true}
                                    disablePagination
                                    disableSelectionOnClick
                                    disableColumnMenu
                                    disableColumnSelector
                                    hideFooter
                                />
                            </Grid>

                            <Grid item xs={12} md={4} lg={4} sx={{ mb: 1, }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={12} lg={12}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <Typography variant="h5">繳費及返稿最後限期：</Typography>
                                    </Grid>
                                    <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
                                        <Typography variant="h5">{DateUtils.dateStr_Cht(data.returnBeforeDate)} 下午 2:00前</Typography>
                                    </Grid>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
                                        <Typography variant="h5">應繳費用:</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", }}>{FormatUtils.currencyFormat(data.fee)}</Typography>
                                    </Grid>
                                    <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
                                        {
                                            formik.values.groupType == "A"
                                                ?
                                                <Typography variant="h5">( {data.noOfPages} 頁 x $6,552 )</Typography>
                                                :
                                                <Typography variant="h5">( {data.length} cm x {data.colCount == 2 ? "$364 二格位" : "$182 一格位"} )</Typography>
                                        }
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>

                    </Grid>
                </Grid>
            </form>
        </MainCard>
    );
};

export default ApplicationDetailCard;