PNSPS-frontend-MaterialUI/src/pages/DemandNote/Details/DnDetailCard.js

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

import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import * as DateUtils from "utils/DateUtils";
import * as StatusUtils from "utils/statusUtils/DnStatus";
import Loadable from 'components/Loadable';
const MainCard = Loadable(React.lazy(() => import('components/MainCard')));

import DownloadIcon from '@mui/icons-material/Download';
import { notifyDownloadSuccess } from 'utils/CommonFunction';


// ==============================|| DASHBOARD - DEFAULT ||============================== //
const DnDetailCard = ({ data }) => {

    const [dnData, setDnData] = React.useState({});

    React.useEffect(() => {
        if (Object.keys(data).length > 0) {
            setDnData(data)
        }
    }, [data]);

    const onDownloadClick = () => () => {
        HttpUtils.fileDownload({
            fileId: dnData.fileId,
            skey: dnData.skey,
            filename: dnData.filename,
            onResponse: function () {
                notifyDownloadSuccess();
            }
        });
    };

    const getDisplayField = (label, value) => {
        return <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">{label}:</Typography></FormLabel>
                </Grid>

                <Grid item xs={12} md={9} lg={9}>
                    <Typography variant="h5">
                        {value}
                    </Typography>
                </Grid>
            </Grid>
        </Grid>
    }

    return (

        <MainCard elevation={0}
            border={false}
            content={false}
        >
            <Typography variant="h4" xs={12} md={12} sx={{ mb: 2, borderBottom: "1px solid black" }}>
                Demand Note
            </Typography>
            <Grid container direction="column">
                <Grid item xs={12} md={12}>
                    <Grid container direction="row" justifyContent="space-between" alignItems="center">

                        {getDisplayField("DN No.", dnData.dnNo)}

                        <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">Status:</Typography></FormLabel>
                                </Grid>

                                <Grid item xs={12} md={9} lg={9}>
                                    <FormControl variant="outlined">
                                        {StatusUtils.getStatus_Eng(dnData.status)}
                                    </FormControl>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                    <Grid container direction="row" justifyContent="space-between" alignItems="center">

                        {getDisplayField("Issue Date", dnData.issueDate)}

                        {getDisplayField("DN Sent", dnData?.sentDate ? dnData.sentDate + " - " + (dnData.sentBy == null ? "System" : dnData.sentBy) : "--")}

                    </Grid>
                    <Grid container direction="row" justifyContent="space-between" alignItems="center">
                        <Grid item xs={12} md={6} lg={6} mt={1}>
                            <Grid container direction="row" justifyContent="flex-start">
                                <Grid item xs={12} md={3} lg={3}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">File:</Typography></FormLabel>
                                </Grid>
                                <Grid item xs={12} md={5} lg={5} sx={{ display: 'flex', alignItems: 'center' }}>
                                    <Typography variant="h5">{dnData.filename} </Typography>
                                </Grid>
                                <Grid item md={4} lg={4}>
                                    {dnData.filename ?
                                        <Button
                                            size="small"
                                            variant="contained"
                                            onClick={onDownloadClick()}
                                            sx={{
                                                textTransform: 'capitalize',
                                                alignItems: 'end',
                                            }}>
                                            <DownloadIcon />
                                        </Button>
                                        : <></>
                                    }
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>

                    <Grid container direction="row" justifyContent="space-between" alignItems="center">
                        {getDisplayField("Reminder Schedule", "")}
                        {getDisplayField("Sent on", "")}
                    </Grid>
                    <Grid container direction="row" justifyContent="space-between" alignItems="center">
                        {getDisplayField("Reminder 1", dnData?.expectReminder1 ? DateUtils.dateStr(dnData.expectReminder1):"--")}
                        {getDisplayField("Reminder 1", dnData?.reminder1 ? DateUtils.datetimeStr(dnData.reminder1) : "--")}
                    </Grid>

                    <Grid container direction="row" justifyContent="space-between" alignItems="center">
                        {getDisplayField("Reminder 2", dnData?.expectReminder2 ? DateUtils.dateStr(dnData.expectReminder2):"--")}
                        {getDisplayField("Reminder 2", dnData?.reminder2 ? DateUtils.datetimeStr(dnData.reminder2) : "--")}
                    </Grid>
                    <Grid container direction="row" justifyContent="space-between" alignItems="center">
                        {getDisplayField("Reminder 3", dnData?.expectReminder3 ? DateUtils.dateStr(dnData.expectReminder3):"--")}
                        {getDisplayField("Reminder 3", dnData?.reminder3 ? DateUtils.datetimeStr(dnData.reminder3) : "--")}
                    </Grid>
                    <Grid container direction="row" justifyContent="space-between" alignItems="center">
                        {getDisplayField("Reminder 4", dnData?.expectReminder4 ? DateUtils.dateStr(dnData.expectReminder4):"--")}
                        {getDisplayField("Reminder 4", dnData?.reminder4 ? DateUtils.datetimeStr(dnData.reminder4) : "--")}
                    </Grid>
                    <Grid container direction="row" justifyContent="space-between" alignItems="center">
                        {getDisplayField("Reminder Final", dnData?.expectReminderFinal ? DateUtils.dateStr(dnData.expectReminderFinal):"--")}
                        {getDisplayField("Reminder Final", dnData?.reminderFinal ? DateUtils.datetimeStr(dnData.reminderFinal) : "--")}
                    </Grid>

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

export default DnDetailCard;