PNSPS-frontend-MaterialUI/src/pages/GFMIS/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 {DatePicker} from "@mui/x-date-pickers/DatePicker";
import dayjs from "dayjs";
import {DemoItem} from "@mui/x-date-pickers/internals/demo";
import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
// ==============================|| DASHBOARD - DEFAULT ||============================== //
const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria, onGridReady }) => {

    // const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
    const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
    const [maxDate] = React.useState(searchCriteria.dateFrom);
    // const [status, setStatus] = React.useState(ComboData.paymentStatus[0]);
    const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");

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

    React.useEffect(() => {
        setFromDateValue(minDate);
    }, [minDate]);

    const onSubmit = () => {
        let sentDateFrom = "";

        if (fromDateValue != "dd / mm / yyyy") {
            sentDateFrom = DateUtils.dateValue(fromDateValue)
        }
        
        const temp = {
            // code: data.code,
            // transNo: data.transNo,
            dateFrom: sentDateFrom,
            // dateTo: data.dateTo,
            // status : (status?.type && status?.type != 'all') ? status?.type : "",
        };
        applySearch(temp);
    };

    const generateHandler = () => {
        let sentDateFrom = "";

        if (fromDateValue != "dd / mm / yyyy") {
            sentDateFrom = DateUtils.dateValue(fromDateValue)
        }
        // const dateTo = getValues("dateTo")
        const temp = {
            // code: data.code,
            // transNo: data.transNo,
            dateFrom: sentDateFrom,
            dateTo: "",
            // status : (status?.type && status?.type != 'all') ? status?.type : "",
        };
        generateXML(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" >
                            Credit Date
                        </Typography>
                    </Grid>
                    {/*row 2*/}

                    <Grid container display="flex" alignItems={"center"}>
                        <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
                                                    
                            <LocalizationProvider dateAdapter={AdapterDayjs}>
                                <DemoItem  components={['DatePicker']}>
                                    <DatePicker
                                        id="dateFrom"
                                        // onError={(newError) => setReceiptFromError(newError)}
                                        slotProps={{
                                            field: { readOnly: true, },
                                            // textField: {
                                            //     helperText: receiptFromErrorMessage,
                                            // },
                                        }}
                                        format="DD/MM/YYYY"
                                        label="Credit Date"
                                        value={minDate === null ? null : dayjs(minDate)}
                                        maxDate={maxDate === null ? null : dayjs(maxDate)}
                                        onChange={(newValue) => {
                                            // console.log(newValue)
                                            if(newValue!=null){
                                                setMinDate(newValue);
                                            }
                                        }}
                                    />
                                </DemoItem >
                            </LocalizationProvider>
                        </Grid>

                        <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
                            {/* <TextField
                                fullWidth
                                InputLabelProps={{
                                    shrink: true
                                }}
                                {...register("dateTo")}
                                InputProps={{ inputProps: { min: minDate } }}
                                onChange={(newValue) => {
                                    setMaxDate(DateUtils.dateValue(newValue));
                                }}
                                id="dateTo"
                                type="date"
                                label="To"
                                defaultValue={searchCriteria.dateTo}
                            /> */}
                        </Grid>

                        {/* <Grid item xs={9} s={6} md={4} lg={3}>
                        </Grid> */}
                    </Grid>

                    <Grid container justifyContent="flex-end" direction="row"  alignItems="center" spacing={3} sx={{ ml: 3, mr: 3, mb: 3, }}>
                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                        <Grid item  >
                            <Button
                                variant="contained"
                                type="submit"
                                disabled={onGridReady}
                            >
                                Preview
                            </Button>
                        </Grid>

                        <Grid item  >
                            <Button
                                variant="contained"
                                onClick={generateHandler}
                            >
                                Generate
                            </Button>
                        </Grid>
                        </ThemeProvider>
                    </Grid>
                </Grid>
            </form>
        </MainCard>
    );
};

export default SearchPublicNoticeForm;