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 { useForm } from "react-hook-form";
import {
    useEffect,
    useState,
    lazy
} from "react";
import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
import * as DateUtils from "utils/DateUtils";
import EditNoteIcon from '@mui/icons-material/EditNote';
import { isGrantedAny } from "auth/utils";
// ==============================|| DASHBOARD - DEFAULT ||============================== //
const GazetteDetailCard = (
    { applicationDetailData,
        setStatus
    }
) => {
    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 [sysType, setSysType] = useState(null);
    const [careOf, setCareOf] = useState("");
    const [mode, setMode] = useState("");

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

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

    useEffect(() => {
        if (Object.keys(applicationDetailData).length > 0) {
            setCurrentStatus(applicationDetailData.data.status);
            setVerified(applicationDetailData.userData.verifiedBy ? true : false);
            setIssueNum(applicationDetailData.gazetteIssueDetail.volume + "/" + applicationDetailData.gazetteIssueDetail.issueYear
                + " No. " + applicationDetailData.gazetteIssueDetail.issueNo);
            setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));
            setGazetteCode(applicationDetailData.data.groupNo)
            // console.log(applicationDetailData)
            setSysType(applicationDetailData.userData.sysType)
            setCareOf(applicationDetailData.data.careOf)
            setGroupTitle(applicationDetailData.data.groupTitle)
            if (applicationDetailData.data.mode != null){
                setMode(applicationDetailData.data.mode);
            }
        }
    }, [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");
    }

    return (
        !onReady ?
            <LoadingComponent />
            :
            <MainCard elevation={0}
                border={false}
                content={false}
            >
                {verified && currentStatus != "notAccepted" ?
                    isGrantedAny("MAINTAIN_APPLICATION") ?
                        <Grid container spacing={4} direction="row">
                            <Grid item xs={12} md={4} >
                                <Stack
                                    direction="row"
                                    justifyContent="space-between"
                                    alignItems="center"
                                    spacing={2}
                                    mb={2}
                                >
                                {mode != "offline"?
                                    <Button
                                        // size="large"
                                        variant="contained"
                                        onClick={groupDetailClick()}
                                        disabled={applicationDetailData.data.status != "submitted" && applicationDetailData.data.status != "reviewed"}
                                        sx={{
                                            textTransform: 'capitalize',
                                            alignItems: 'end'
                                        }}>
                                        <EditNoteIcon />
                                        <Typography variant="h5" ml={1}> Gen Gazette Code</Typography>
                                    </Button>
                                    :null
                                }
                                </Stack>
                            </Grid>
                        </Grid>
                    : null
                    : 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" >
                                <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>
                            {
                                sysType != null && sysType == "dummy"?
                                    <Grid container direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: { lg: -3 } }}>
                                        <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                            <Grid container alignItems={"center"}>
                                                <Grid item xs={12} md={2} lg={2}
                                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                                    <FormLabel>
                                                        <Typography variant="h5">Customer&apos;s Client/ Case No:</Typography>
                                                    </FormLabel>
                                                </Grid>
        
                                                <Grid item xs={12} md={10} lg={10}>
                                                    <FormControl variant="outlined" fullWidth disabled >
                                                        <OutlinedInput
                                                            fullWidth
                                                            size="small"
                                                            {...register("careOf",
                                                                {
                                                                    value: careOf,
                                                                })}
                                                            value={careOf}
                                                            id='careOf'
                                                            sx={{
                                                                "& .MuiInputBase-input.Mui-disabled": {
                                                                    WebkitTextFillColor: "#000000",
                                                                    background: "#f8f8f8",
                                                                },
                                                            }}
                                                        />
                                                    </FormControl>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                : null
                            }
                        </Grid>
                    </Grid>
                </form>
                <div>
                    <Dialog
                        open={isWarningPopUp}
                        onClose={() => setIsWarningPopUp(false)}
                        PaperProps={{
                            sx: {
                                minWidth: '40vw',
                                maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
                                maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
                            }
                        }}>
                        <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;