PNSPS-frontend-MaterialUI/src/pages/Recon/SearchForm.js

// material-ui
import {
    Button,
    Grid, TextField,
    Autocomplete,
    Typography
} from '@mui/material';
import MainCard from "components/MainCard";
import { useForm } from "react-hook-form";
import * as React from "react";
// import * as DateUtils from "utils/DateUtils";
import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst";
import {ThemeProvider} from "@emotion/react";
import * as ComboData from "utils/ComboData";
import * as DateUtils from "utils/DateUtils";
import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
import { makeStyles } from '@mui/styles';

// ==============================|| DASHBOARD - DEFAULT ||============================== //
const useStyles = makeStyles(() => ({
    root: {
        position: "relative"
    },
    display: {
        position: "absolute",
        top: 2,
        left: 12,
        bottom: 2,
        background: "white",
        pointerEvents: "none",
        right: 50,
        display: "flex",
        alignItems: "center",
        width:"70%"
    },
}));

const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, onLoad }) => {

    const [sysTxnMinDate, setSysTxnMinDate] = React.useState(searchCriteria.dateFrom);
    const [sysTxnMaxDate, setsysTxnMaxDate] = React.useState(searchCriteria.dateTo);
    const [txnMinDate, setTxnMinDate] = React.useState(searchCriteria.dateFrom);
    const [txnMaxDate, setTxnMaxDate] = React.useState(searchCriteria.dateTo);
    const [collMinDate, setCollMinDate] = React.useState(searchCriteria.dateFrom);
    const [collMaxDate, setCollMaxDate] = React.useState(searchCriteria.dateTo);

    const [sysTxnFromDateValue, setSysTxnFromDateValue] = React.useState("dd / mm / yyyy");
    const [sysTxnToDateValue, setSysTxnToDateValue] = React.useState("dd / mm / yyyy");
    const [txnFromDateValue, setTxnFromDateValue] = React.useState("dd / mm / yyyy");
    const [txnToDateValue, setTxnToDateValue] = React.useState("dd / mm / yyyy");
    const [collFromDateValue, setCollFromDateValue] = React.useState("dd / mm / yyyy");
    const [collToDateValue, setCollToDateValue] = React.useState("dd / mm / yyyy");
    
    const [status, setStatus] = React.useState(ComboData.paymentStatus[0]);
    const [method, setMethod] = React.useState(ComboData.paymentMethod[0]);
    const marginBottom = 2.5;

    const { register, handleSubmit } = useForm()

    React.useEffect(() => {
        setSysTxnFromDateValue(sysTxnMinDate);
    }, [sysTxnMinDate]);

    React.useEffect(() => {
        setSysTxnToDateValue(sysTxnMaxDate);
    }, [sysTxnMaxDate]);

    React.useEffect(() => {
        setTxnFromDateValue(txnMinDate);
    }, [txnMinDate]);

    React.useEffect(() => {
        setTxnToDateValue(txnMaxDate);
    }, [txnMaxDate]);

    React.useEffect(() => {
        setCollFromDateValue(collMinDate);
    }, [collMinDate]);

    React.useEffect(() => {
        setCollToDateValue(collMaxDate);
    }, [collMaxDate]);

    function SysTxnFormDateInputComponent({ inputRef, ...props }) {
        const classes = useStyles();
        return (
            <>
                <div className={classes.display}>
                    {DateUtils.dateStr(sysTxnFromDateValue) == "Invalid Date" ?
                        sysTxnFromDateValue
                        :
                        DateUtils.dateStr(sysTxnFromDateValue)}
                </div>
                <input 
                    className={classes.input}
                    ref={inputRef}
                    {...props}
                    // onChange={handleChange}
                    value={sysTxnFromDateValue}
                    max={sysTxnMaxDate}
                />
            </>
        );
    }

    function SysTxnToDateInputComponent({ inputRef, ...props }) {
        const classes = useStyles();
        return (
            <>
                <div className={classes.display}>
                    {DateUtils.dateStr(sysTxnToDateValue) == "Invalid Date" ?
                        sysTxnToDateValue
                        :
                        DateUtils.dateStr(sysTxnToDateValue)}
                </div>
                <input
                    // className={classes.input}
                    ref={inputRef}
                    {...props}
                    // onChange={handleChange}
                    value={sysTxnToDateValue}
                    min={sysTxnMinDate}
                />
            </>
        );
    }

    function TxnFormDateInputComponent({ inputRef, ...props }) {
        const classes = useStyles();
        return (
            <>
                <div className={classes.display}>
                    {DateUtils.dateStr(txnFromDateValue) == "Invalid Date" ?
                        txnFromDateValue
                        :
                        DateUtils.dateStr(txnFromDateValue)}
                </div>
                <input 
                    className={classes.input}
                    ref={inputRef}
                    {...props}
                    // onChange={handleChange}
                    value={txnFromDateValue}
                    max={txnMaxDate}
                />
            </>
        );
    }

    function TxnToDateInputComponent({ inputRef, ...props }) {
        const classes = useStyles();
        return (
            <>
                <div className={classes.display}>
                    {DateUtils.dateStr(txnToDateValue) == "Invalid Date" ?
                        txnToDateValue
                        :
                        DateUtils.dateStr(txnToDateValue)}
                </div>
                <input
                    // className={classes.input}
                    ref={inputRef}
                    {...props}
                    // onChange={handleChange}
                    value={txnToDateValue}
                    min={txnMinDate}
                />
            </>
        );
    }

    function CollFormDateInputComponent({ inputRef, ...props }) {
        const classes = useStyles();
        return (
            <>
                <div className={classes.display}>
                    {DateUtils.dateStr(collFromDateValue) == "Invalid Date" ?
                        collFromDateValue
                        :
                        DateUtils.dateStr(collFromDateValue)}
                </div>
                <input 
                    className={classes.input}
                    ref={inputRef}
                    {...props}
                    // onChange={handleChange}
                    value={collFromDateValue}
                    max={collMaxDate}
                />
            </>
        );
    }

    function CollToDateInputComponent({ inputRef, ...props }) {
        const classes = useStyles();
        return (
            <>
                <div className={classes.display}>
                    {DateUtils.dateStr(collToDateValue) == "Invalid Date" ?
                        collToDateValue
                        :
                        DateUtils.dateStr(collToDateValue)}
                </div>
                <input
                    // className={classes.input}
                    ref={inputRef}
                    {...props}
                    // onChange={handleChange}
                    value={collToDateValue}
                    min={collMinDate}
                />
            </>
        );
    }

    const onSubmit = () => {

        let sentSysTxnDateFrom = "";
        let sentSysTxnDateTo = "";
        let sentTxnDateFrom = "";
        let sentTxnDateTo = "";
        let sentCollDateFrom = "";
        let sentCollDateTo = "";
        // Invalid Date
        if (sysTxnFromDateValue != "dd / mm / yyyy" && sysTxnToDateValue != "dd / mm / yyyy" ) {
            sentSysTxnDateFrom = DateUtils.dateValue(sysTxnFromDateValue)!="Invalid Date"?DateUtils.dateValue(sysTxnFromDateValue):""
            sentSysTxnDateTo = DateUtils.dateValue(sysTxnToDateValue)!="Invalid Date"?DateUtils.dateValue(sysTxnToDateValue):""
        }
        if (txnFromDateValue != "dd / mm / yyyy" && txnToDateValue != "dd / mm / yyyy") {
            sentTxnDateFrom = DateUtils.dateValue(txnFromDateValue)!="Invalid Date"?DateUtils.dateValue(txnFromDateValue):""
            sentTxnDateTo = DateUtils.dateValue(txnToDateValue)!="Invalid Date"?DateUtils.dateValue(txnToDateValue):""
        }
        if (collFromDateValue != "dd / mm / yyyy" && collToDateValue != "dd / mm / yyyy") {
            sentCollDateFrom = DateUtils.dateValue(collFromDateValue)!="Invalid Date"?DateUtils.dateValue(collFromDateValue):""
            sentCollDateTo = DateUtils.dateValue(collToDateValue)!="Invalid Date"?DateUtils.dateValue(collToDateValue):""
        }

        const temp = {
            PaymentMethod:(method?.type && method?.type != 'Please Select') ? method?.type : "",
            PaymentStatus : (status?.type && status?.type != 'all') ? status?.type : "",
            SysTxnDateFrom: sentSysTxnDateFrom,
            SysTxnDateTo: sentSysTxnDateTo,
            TxnDateFrom: sentTxnDateFrom,
            TxnDateTo: sentTxnDateTo,
            CollDateFrom: sentCollDateFrom,
            CollDateTo: sentCollDateTo,
        };

        console.log(temp)
        applySearch(temp);
    };

    const generateFileHandler = (fileFormart) => () => {
        let sentSysTxnDateFrom = "";
        let sentSysTxnDateTo = "";
        let sentTxnDateFrom = "";
        let sentTxnDateTo = "";
        let sentCollDateFrom = "";
        let sentCollDateTo = "";

        if (sysTxnFromDateValue != "dd / mm / yyyy" && sysTxnToDateValue != "dd / mm / yyyy" ) {
            sentSysTxnDateFrom = DateUtils.dateValue(sysTxnFromDateValue)!="Invalid Date"?DateUtils.dateValue(sysTxnFromDateValue):""
            sentSysTxnDateTo = DateUtils.dateValue(sysTxnToDateValue)!="Invalid Date"?DateUtils.dateValue(sysTxnToDateValue):""
        }
        if (txnFromDateValue != "dd / mm / yyyy" && txnToDateValue != "dd / mm / yyyy") {
            sentTxnDateFrom = DateUtils.dateValue(txnFromDateValue)!="Invalid Date"?DateUtils.dateValue(txnFromDateValue):""
            sentTxnDateTo = DateUtils.dateValue(txnToDateValue)!="Invalid Date"?DateUtils.dateValue(txnToDateValue):""
        }
        if (collFromDateValue != "dd / mm / yyyy" && collToDateValue != "dd / mm / yyyy") {
            sentCollDateFrom = DateUtils.dateValue(collFromDateValue)!="Invalid Date"?DateUtils.dateValue(collFromDateValue):""
            sentCollDateTo = DateUtils.dateValue(collToDateValue)!="Invalid Date"?DateUtils.dateValue(collToDateValue):""
        }

        const temp = {
            PaymentMethod:(method?.type && method?.type != 'Please Select') ? method?.type : "",
            PaymentStatus : (status?.type && status?.type != 'all') ? status?.type : "",
            SysTxnDateFrom: sentSysTxnDateFrom,
            SysTxnDateTo: sentSysTxnDateTo,
            TxnDateFrom: sentTxnDateFrom,
            TxnDateTo: sentTxnDateTo,
            CollDateFrom: sentCollDateFrom,
            CollDateTo: sentCollDateTo,
            ReportFormat:fileFormart
        };
        generateReport(temp);
    }

    return (
        <MainCard xs={12} md={12} lg={12}
            border={false}
            content={false}
            >

            <form onSubmit={handleSubmit(onSubmit)} >
                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
                    {/*row 1*/}
                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
                        <Typography variant="h5" >
                          Submit Form
                        </Typography>
                    </Grid>

                    {/*row 2*/}

                    <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
                       <Grid container spacing={3}>
                        <Grid item xs={9} s={9} md={3} lg={3} >
                            <Autocomplete
                                {...register("paymentMethod")}
                                disablePortal={false}
                                size="small"
                                id="paymentMethod"
                                filterOptions={(options) => options}
                                options={ComboData.paymentMethod}
                                value={method}
                                getOptionLabel={(option) => option.label}
                                inputValue={method?.label ? method?.label : ""}
                                onChange={(event, newValue) => {
                                    if (newValue !== null) {
                                        setMethod(newValue);
                                    }
                                }}
                                renderInput={(params) => (
                                    <TextField {...params}
                                        label="Payment Method"
                                    />
                                )}
                                InputLabelProps={{
                                    shrink: true
                                }}
                            />
                        </Grid>

                        <Grid item xs={9} s={9} md={3} lg={3} >
                            <Autocomplete
                                {...register("status")}
                                disablePortal={false}
                                size="small"
                                id="status"
                                filterOptions={(options) => options}
                                options={ComboData.paymentStatus}
                                value={status}
                                getOptionLabel={(option) => option.label}
                                inputValue={status?.label ? status?.label : ""}
                                onChange={(event, newValue) => {
                                    if (newValue !== null) {
                                        setStatus(newValue);
                                    }
                                }}
                                renderInput={(params) => (
                                    <TextField {...params}
                                        label="Payment Status"
                                    />
                                )}
                                InputLabelProps={{
                                    shrink: true
                                }}
                            />
                        </Grid>
                       
                       </Grid>
                    </Grid>

                    <Grid container display="flex" alignItems={"center"}>
                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml:3, mr:3, mb:marginBottom}}>
                            <Grid container spacing={1}>
                                <Grid item xs={4}>
                                    <TextField
                                        fullWidth
                                        {...register("sysTxnDateFrom")}
                                        id="sysTxnDateFrom"
                                        type="date"
                                        label="PNSPS Transaction Date (From)"
                                        ////defaultValue={searchCriteria.dateFrom}
                                        InputProps={{
                                            inputComponent: SysTxnFormDateInputComponent,
                                        }}
                                        onChange={(newValue) => {
                                            setSysTxnMinDate(newValue.target.value);
                                        }}
                                        InputLabelProps={{
                                            shrink: true
                                        }}
                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                    />
                                </Grid>
                                <Grid item xs={4}>
                                    <TextField
                                        fullWidth
                                        InputLabelProps={{
                                            shrink: true
                                        }}
                                        {...register("sysTxnDateTo")}
                                        InputProps={{
                                            inputComponent: SysTxnToDateInputComponent,
                                        }}
                                        onChange={(newValue) => {
                                            setsysTxnMaxDate(newValue.target.value);
                                        }}
                                        id="sysTxnDateTo"
                                        type="date"
                                        label="PNSPS Transaction Date (To)"
                                        ////defaultValue={searchCriteria.dateTo}
                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>

                    {/*row 3*/}
                    <Grid container display="flex" alignItems={"center"}>
                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml:3, mr:3, mb:marginBottom}}>
                            <Grid container spacing={1}>
                                <Grid item xs={4}>
                                    <TextField
                                        fullWidth
                                        {...register("txnDateFrom")}
                                        id="txnDateFrom"
                                        type="date"
                                        label="FI Transaction Date (From)"
                                        //defaultValue={searchCriteria.dateFrom}
                                        InputProps={{
                                            inputComponent: TxnFormDateInputComponent,
                                        }}
                                        onChange={(newValue) => {
                                            setTxnMinDate(newValue.target.value);
                                        }}
                                        InputLabelProps={{
                                            shrink: true
                                        }}
                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                    />
                                </Grid>
                                <Grid item xs={4}>
                                    <TextField
                                        fullWidth
                                        InputLabelProps={{
                                            shrink: true
                                        }}
                                        {...register("txnDateTo")}
                                        InputProps={{
                                            inputComponent: TxnToDateInputComponent,
                                        }}
                                        onChange={(newValue) => {
                                            setTxnMaxDate(newValue.target.value);
                                        }}
                                        id="txnDateTo"
                                        type="date"
                                        label="FI Transaction Date (To)"
                                        //defaultValue={searchCriteria.dateTo}
                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>

                    {/*row 5*/}
                    <Grid container display="flex" alignItems={"center"}>
                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml:3, mr:3, mb:marginBottom}}>
                            <Grid container spacing={1}>
                                <Grid item xs={4}>
                                    <TextField
                                        fullWidth
                                        {...register("collDateFrom")}
                                        id="collDateFrom"
                                        type="date"
                                        label="Bank Credit Date (From)"
                                        //defaultValue={searchCriteria.dateFrom}
                                        InputProps={{
                                            inputComponent: CollFormDateInputComponent,
                                        }}
                                        onChange={(newValue) => {
                                            setCollMinDate(newValue.target.value);
                                        }}
                                        InputLabelProps={{
                                            shrink: true
                                        }}
                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                    />
                                </Grid>
                                <Grid item xs={4}>
                                    <TextField
                                        fullWidth
                                        InputLabelProps={{
                                            shrink: true
                                        }}
                                        {...register("collDateTo")}
                                        InputProps={{
                                            inputComponent: CollToDateInputComponent,
                                        }}
                                        onChange={(newValue) => {
                                            setCollMaxDate(newValue.target.value);
                                        }}
                                        id="collDateTo"
                                        type="date"
                                        label="Bank Credit Date (To)"
                                        //defaultValue={searchCriteria.dateTo}
                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>

                    <Grid container justifyContent="flex-end" direction="row"  alignItems="center" spacing={3}>
                        {onLoad?
                            <Grid item sx={{ ml: 3, mb: 3, mr:6 }} >
                                <LoadingComponent disableText={true} alignItems="flex-start"/>
                            </Grid>
                            :
                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                <Grid item sx={{ ml: 3, mb: 3, }} >
                                        <Button
                                            variant="contained"
                                            type="submit"
                                        >
                                            View
                                        </Button>
                                </Grid>

                                <Grid item sx={{ ml: 3, mb: 3, }} >
                                    <Grid container spacing={3}>
                                        <Grid item sx={{ ml: 3, mr:3 }} >
                                            <Button
                                                variant="contained"
                                                onClick={generateFileHandler("csv")}
                                            >
                                                Generate CSV
                                            </Button>
                                        </Grid>
                                        
                                        <Grid item sx={{ ml: 3, }} >
                                            <Button
                                                variant="contained"
                                                onClick={generateFileHandler("pdf")}
                                            >
                                                Generate PDF
                                            </Button>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                
                                {/* <Grid item sx={{ ml: 3, mr: 3, mb: 3, }} >
                                    {onDownload?
                                        <LoadingComponent disableText={true} alignItems="flex-start"/>
                                    :
                                        <Button
                                            variant="contained"
                                            onClick={generatePDFHandler}
                                        >
                                            Generate PDF
                                        </Button>
                                    }
                                </Grid> */}
                            </ThemeProvider>
                        }
                    </Grid>
                </Grid>
            </form>
        </MainCard>
    );
};

export default SearchPublicNoticeForm;