PNSPS-frontend-MaterialUI/src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js

// material-ui
import {
    FormControl, 
    Button,
    Grid, 
    Stack, 
    Typography, FormLabel,
    OutlinedInput,
    Dialog, DialogTitle, DialogContent, DialogActions,
} from '@mui/material';
import MainCard from "../../../components/MainCard";
import * as React from "react";
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 DateUtils from "utils/DateUtils";
import EditNoteIcon from '@mui/icons-material/EditNote';

// ==============================|| DASHBOARD - DEFAULT ||============================== //
const GazetteDetailCard = (
    {   applicationDetailData,
        setStatus
        // isCollectData,
        // updateUserObject,
        // isNewRecord
    }
    ) => {
    // const params = useParams();
    // const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
    const [onReady,setOnReady] = useState(false);
    const [issueNum,setIssueNum] = useState("");
    const [issueDate,setIssueDate] = useState("");
    const [gazetteCode,setGazetteCode] = useState("");
    const [groupTitle,setGroupTitle] = useState("");
    const [verified, setVerified] = useState(null);
    const [currentStatus, setCurrentStatus] = useState({});

    const [isWarningPopUp, setIsWarningPopUp] = useState(false);
    const [warningText, setWarningText] = useState("");

    const {register, 
        // getValues
    } = useForm()

    useEffect(() => {
        //if user data from parent are not null
        // console.log(applicationDetailData)
        if (Object.keys(applicationDetailData).length > 0) {
            setCurrentStatus(applicationDetailData.data.status);
            setVerified(applicationDetailData.userData.verifiedBy ? true : false);
            setIssueNum(applicationDetailData.gazetteIssueDetail.volume+"/"+applicationDetailData.gazetteIssueDetail.year
            +" No. "+applicationDetailData.gazetteIssueDetail.issueNo);
            setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));
            setGazetteCode(applicationDetailData.data.groupNo)
            console.log(gazetteCode)
            setGroupTitle(applicationDetailData.data.groupTitle)
        }
    }, [applicationDetailData]);

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

    const groupDetailClick = () => () => {
        if(gazetteCode==null){
            setStatus("genGazetteCode");
            return;
        }
        setWarningText("Gazette Code is already generated, are you sure to re-generate?");
        setIsWarningPopUp(true);
    };

    const callback =()=>{
        setIsWarningPopUp(false);
        setStatus("genGazetteCode");
    }

    // useEffect(() => {
    //     //upload latest data to parent
    //     const values = getValues();
    //     const objectData ={
    //         ...values,
    //         locked: locked,
    //     }
    //     updateUserObject(objectData);
    // }, [isCollectData]);


    return (
        !onReady ?
            <LoadingComponent/>
            :
            <MainCard elevation={0}
                      border={false}
                      content={false}
            >
                {verified && currentStatus != "notAccepted" ?
                    <Grid container spacing={4} direction="row">
                        <Grid item xs={12} md={4} >
                            <Stack
                                direction="row"
                                justifyContent="space-between"
                                alignItems="center"
                                spacing={2}
                                mb={2}
                            >
                                <Button
                                    // size="large"
                                    variant="contained"
                                    onClick={groupDetailClick()}
                                    sx={{
                                        textTransform: 'capitalize',
                                        alignItems: 'end'
                                    }}>
                                    <EditNoteIcon />
                                    <Typography variant="h5" ml={1}> Gen Gazette Code</Typography>
                                </Button>
                            </Stack>
                        </Grid>
                    </Grid>
                :null}
                <Typography variant="h5" sx={{mb: 2, borderBottom: "1px solid black"}}>
                        Gazette Details
                </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={4} lg={4}
                                            sx={{display: 'flex', alignItems: 'center'}}>
                                            <FormLabel><Typography variant="h5">Issue Number:</Typography></FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={8} lg={8}>
                                            <FormControl variant="outlined" fullWidth disabled >
                                                <OutlinedInput
                                                    fullWidth
                                                    size="small"
                                                    {...register("issueNum",
                                                        {
                                                            value: issueNum,
                                                        })}
                                                    value={issueNum}
                                                    id='issueNum'
                                                    sx={{
                                                        "& .MuiInputBase-input.Mui-disabled": {
                                                            WebkitTextFillColor: "#000000",
                                                            background: "#f8f8f8",
                                                        },
                                                    }}
                                                />
                                            </FormControl>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={5.5} lg={5.5} sx={{mb: 1, ml:1}}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={4} lg={4}
                                            sx={{display: 'flex', alignItems: 'center'}}>
                                            <FormLabel><Typography variant="h5">Gazette Code:</Typography></FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={8} lg={8}>
                                            <FormControl variant="outlined" fullWidth disabled >
                                                <OutlinedInput
                                                    fullWidth
                                                    size="small"
                                                    {...register("gazetteCode",
                                                        {
                                                            value: gazetteCode,
                                                        })}
                                                    value={gazetteCode}
                                                    id='gazetteCode'
                                                    sx={{
                                                        "& .MuiInputBase-input.Mui-disabled": {
                                                            WebkitTextFillColor: "#000000",
                                                            background: "#f8f8f8",
                                                        },
                                                    }}
                                                />
                                            </FormControl>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid container direction="row" justifyContent="space-between"
                                alignItems="center" sx={{mb:{lg:-3}}}>
                                <Grid item xs={12} md={6} lg={6} sx={{mb: 1}}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={4} lg={4}
                                            sx={{display: 'flex', alignItems: 'center'}}>
                                            <FormLabel><Typography variant="h5">Issue Date:</Typography></FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={8} lg={8}>
                                            <FormControl variant="outlined" fullWidth disabled >
                                                <OutlinedInput
                                                    fullWidth
                                                    size="small"
                                                    {...register("issueDate",
                                                        {
                                                            value: issueDate,
                                                        })}
                                                    value={issueDate}
                                                    id='issueDate'
                                                    sx={{
                                                        "& .MuiInputBase-input.Mui-disabled": {
                                                            WebkitTextFillColor: "#000000",
                                                            background: "#f8f8f8",
                                                        },
                                                    }}
                                                />
                                            </FormControl>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={5.5} lg={5.5} sx={{mb: 1, ml:1}}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={4} lg={4}
                                            sx={{display: 'flex', alignItems: 'center'}}>
                                            <FormLabel><Typography variant="h5">Group Title:</Typography></FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={8} lg={8}>
                                            <FormControl variant="outlined" fullWidth disabled >
                                                <OutlinedInput
                                                    fullWidth
                                                    size="small"
                                                    {...register("groupTitle",
                                                        {
                                                            value: groupTitle,
                                                        })}
                                                    value={groupTitle}
                                                    id='groupTitle'
                                                    sx={{
                                                        "& .MuiInputBase-input.Mui-disabled": {
                                                            WebkitTextFillColor: "#000000",
                                                            background: "#f8f8f8",
                                                        },
                                                    }}
                                                />
                                            </FormControl>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </form>
                <div>
                <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
                    <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
                    <DialogContent style={{ display: 'flex', }}>
                        <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">No</Typography></Button>
                        <Button color="success" onClick={()=>callback()}><Typography variant="h5">Yes</Typography></Button>
                    </DialogActions>
                </Dialog>
            </div>
            </MainCard>
    );
};

export default GazetteDetailCard;