PNSPS-frontend-MaterialUI/src/pages/PublicNoticeDetail/ApplicationDetailCard.js

// material-ui
import {
    FormControl, 
    Button,
    Grid, 
    // InputAdornment, 
    Typography, FormLabel,
    OutlinedInput,
    Stack
} from '@mui/material';
// import MainCard from "../../components/MainCard";
const MainCard = Loadable(lazy(() => import('components/MainCard')));
import {useForm} from "react-hook-form";
import {
    useEffect,
    useState
    } from "react";
// import Checkbox from "@mui/material/Checkbox";
import Loadable from 'components/Loadable';

import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
// import {useParams} from "react-router-dom";
import * as HttpUtils from "utils/HttpUtils"
import * as StatusUtils from "../PublicNotice/ListPanel/PublicNoteStatusUtils";
import * as DateUtils from "utils/DateUtils";

// import BorderColorOutlinedIcon from '@mui/icons-material/BorderColorOutlined';
// import DoneIcon from '@mui/icons-material/Done';
import CloseIcon from '@mui/icons-material/Close';
import EditNoteIcon from '@mui/icons-material/EditNote';
import DownloadIcon from '@mui/icons-material/Download';
// ==============================|| DASHBOARD - DEFAULT ||============================== //
const ApplicationDetailCard = (
    {   applicationDetailData,
        setStatus,
        // updateUserObject,
        // isNewRecord
    }
    ) => {
    // const params = useParams();
    const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
    const [companyName, setCompanyName] = useState({});
    const [fileDetail, setfileDetail] = useState({});
    const [onReady,setOnReady] = useState(false);
    const [issueNum,setIssueNum] = useState("");
    const [issueDate,setIssueDate] = useState("");
    const {register, 
        // getValues
    } = useForm()

    useEffect(() => {
        //if user data from parent are not null
        // console.log(applicationDetailData)
        if (Object.keys(applicationDetailData).length > 0 &&applicationDetailData.data!==null) {
            setCurrentApplicationDetailData(applicationDetailData.data);
            setCompanyName(applicationDetailData.companyName);
            setfileDetail(applicationDetailData.fileDetail);
            setIssueNum(applicationDetailData.gazetteIssueDetail.volume+"/"+applicationDetailData.gazetteIssueDetail.year
            +" No. "+applicationDetailData.gazetteIssueDetail.issueNo);
            setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));
            
        }
    }, [applicationDetailData]);

    useEffect(() => {
        //if state data are ready and assign to different field
        // console.log(currentApplicationDetailData)
        if (Object.keys(currentApplicationDetailData).length > 0) {
            setOnReady(true);
        }
    }, [currentApplicationDetailData]);

    const onDownloadClick = () => () => {
        HttpUtils.fileDownload({
            fileId:fileDetail.id,
            skey:fileDetail.skey,
            filename:fileDetail.filename,
        });
    };

    const cancelledClick = () => () =>{
        setStatus("cancel")
    };

    return (
        !onReady ?
            <LoadingComponent/>
            :
            <MainCard elevation={0}
                      border={false}
                      content={false}
            >
                <Grid container spacing={1} direction="row">
                    <Grid item xs={12}>
                        <Stack 
                            direction="row"
                            justifyContent="space-between"
                            alignItems="center"
                            spacing={2}
                            mb={2}
                        >
                            <Button
                                // size="large"
                                variant="contained"
                                // onClick={handleNewUserClick}
                                disabled= {currentApplicationDetailData.status =="rejected"||currentApplicationDetailData.status =="cancelled"||currentApplicationDetailData.status =="paid"}
                                sx={{
                                    textTransform: 'capitalize',
                                    alignItems: 'end'
                                }}>
                                <EditNoteIcon/>
                                <Typography ml={1}> 支付</Typography>
                            </Button>
                            <Button
                                    // size="large"
                                    variant="contained"
                                    onClick={cancelledClick()}
                                    disabled= {currentApplicationDetailData.status !=="submitted"}
                                    sx={{
                                        textTransform: 'capitalize',
                                        alignItems: 'end',
                                        backgroundColor:'#ffa733'
                                    }}>
                                    <CloseIcon/>
                                    <Typography ml={1}> 取消</Typography>
                                </Button>
                        </Stack>
                    </Grid>
                </Grid>
                <Typography variant="h5" sx={{mb: 2, borderBottom: "1px solid black"}}>
                        公共啟事申請資料
                </Typography>
                <form>
                    <Grid container direction="column">
                        <Grid item xs={12} md={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>申請編號:</FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={9} lg={9}>
                                            <FormControl variant="outlined" fullWidth  disabled>
                                                <OutlinedInput
                                                    fullWidth
                                                    size="small"
                                                    {...register("appNo",
                                                        {
                                                            value: currentApplicationDetailData.appNo,
                                                        })}
                                                    id='appNo'
                                                />
                                            </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>申請狀態:</FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={9} lg={9}>
                                            <FormControl variant="outlined" fullWidth  >
                                                {StatusUtils.getStatusByText(currentApplicationDetailData.status)}
                                            </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>申請人:</FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={9} lg={9}>
                                            <FormControl variant="outlined" fullWidth disabled >
                                                { currentApplicationDetailData.orgId===null?
                                                <OutlinedInput
                                                    fullWidth
                                                    size="small"
                                                    {...register("contactPerson",
                                                        {
                                                            value: currentApplicationDetailData.contactPerson,
                                                        })}
                                                    id='contactPerson'
                                                />:
                                                <OutlinedInput
                                                    fullWidth
                                                    size="small"
                                                    {...register("companyName",
                                                        {
                                                            value: companyName.enCompanyName,
                                                        })}
                                                    id='companyName'
                                                />
                                                }
                                            </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>憲報期數:</FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={9} lg={9}>
                                            <Stack direction="row">
                                                <FormControl variant="outlined" fullWidth disabled>
                                                    <OutlinedInput
                                                        size="small"
                                                        {...register("issueNum",
                                                            {
                                                                value: issueNum,
                                                            })}
                                                        id='issueNum'
                                                    />
                                                </FormControl>
                                            </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={3} lg={3}
                                            sx={{display: 'flex', alignItems: 'center'}}>
                                            <FormLabel>聯絡人:</FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={9} lg={9}>
                                            <FormControl variant="outlined" fullWidth  disabled>
                                                <OutlinedInput
                                                    fullWidth
                                                    size="small"
                                                    {...register("contactPerson",
                                                        {
                                                            value: currentApplicationDetailData.contactPerson,
                                                        })}
                                                    id='contactPerson'
                                                />
                                            </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>發布日期:</FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={9} lg={9}>
                                            <Stack direction="row">
                                                <FormControl variant="outlined" fullWidth disabled>
                                                    <OutlinedInput
                                                        size="small"
                                                        {...register("issueDate",
                                                            {
                                                                value: issueDate,
                                                            })}
                                                        id='issueDate'
                                                    />
                                                </FormControl>
                                            </Stack>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                            <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>聯絡電話:</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <Stack direction="row">
                                            <FormControl variant="outlined" sx={{width:'25%'}} disabled>
                                                <OutlinedInput
                                                    size="small"
                                                    {...register("countryCode",
                                                        {
                                                            value: currentApplicationDetailData.contactTelNo.countryCode,
                                                        })}
                                                    id='countryCode'
                                                />
                                            </FormControl>
                                            <FormControl variant="outlined" sx={{width:'100%'}} disabled>
                                                <OutlinedInput
                                                    size="small"
                                                    {...register("phoneNumber",
                                                        {
                                                            value: currentApplicationDetailData.contactTelNo.phoneNumber,
                                                        })}
                                                    id='phoneNumber'
                                                />
                                            </FormControl>
                                        </Stack>
                                    </Grid>
                                </Grid>
                            </Grid>
                            <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>傳真號碼:</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <Stack direction="row">
                                            <FormControl variant="outlined" sx={{width:'25%'}} disabled>
                                                <OutlinedInput
                                                    size="small"
                                                    {...register("countryCode",
                                                        {
                                                            value: currentApplicationDetailData.contactFaxNo.countryCode,
                                                        })}
                                                    id='countryCode'
                                                />
                                            </FormControl>
                                            <FormControl variant="outlined" sx={{width:'100%'}} disabled>
                                                <OutlinedInput
                                                    size="small"
                                                    {...register("faxNumber",
                                                        {
                                                            value: currentApplicationDetailData.contactFaxNo.faxNumber,
                                                        })}
                                                    id='faxNumber'
                                                />
                                            </FormControl>
                                        </Stack>
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid container direction="row" justifyContent="space-between"
                                alignItems="center">
                                <Grid item xs={12} md={12} lg={12} mt={1}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={6} lg={6}>
                                            <Grid container direction="row">
                                                <Grid item xs={12} md={3} lg={3}
                                                    sx={{display: 'flex', alignItems: 'center'}}>
                                                    <FormLabel>犒件檔案:</FormLabel>
                                                </Grid>
                                                <Grid item xs={12} md={9} lg={9} sx={{display: 'flex', alignItems: 'center'}}>
                                                    <Grid container direction="row" justifyContent="flex-start">
                                                        <Grid item xs={12} md={5} lg={5} sx={{display: 'flex', alignItems: 'center'}}>
                                                            <FormControl variant="outlined" fullWidth  >
                                                                <Typography
                                                                    fullWidth
                                                                    id='fileName'
                                                                >
                                                                {fileDetail.filename}
                                                                </Typography>
                                                            </FormControl>
                                                        </Grid>
                                                        <Grid item  md={2} lg={2}>
                                                            <Button
                                                                    size="small"
                                                                    variant="contained"
                                                                    onClick={onDownloadClick()}
                                                                    sx={{
                                                                        textTransform: 'capitalize',
                                                                        alignItems: 'end',
                                                                    }}>
                                                                    <DownloadIcon/>
                                                            </Button>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid> 
                        </Grid>
                    </Grid>
                </form>
            </MainCard>
    );
};

export default ApplicationDetailCard;