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, onDownload, onView }) => {
@@ -27,29 +44,203 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
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, getValues } = 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 (
+ <>
+
+ {DateUtils.dateStr(sysTxnFromDateValue) == "Invalid Date" ?
+ sysTxnFromDateValue
+ :
+ DateUtils.dateStr(sysTxnFromDateValue)}
+
+
+
+ );
+ }
+
+ function SysTxnToDateInputComponent({ inputRef, ...props }) {
+ const classes = useStyles();
+ return (
+ <>
+
+ {DateUtils.dateStr(sysTxnToDateValue) == "Invalid Date" ?
+ sysTxnToDateValue
+ :
+ DateUtils.dateStr(sysTxnToDateValue)}
+
+
+
+ );
+ }
+
+ function TxnFormDateInputComponent({ inputRef, ...props }) {
+ const classes = useStyles();
+ return (
+ <>
+
+ {DateUtils.dateStr(txnFromDateValue) == "Invalid Date" ?
+ txnFromDateValue
+ :
+ DateUtils.dateStr(txnFromDateValue)}
+
+
+
+ );
+ }
+
+ function TxnToDateInputComponent({ inputRef, ...props }) {
+ const classes = useStyles();
+ return (
+ <>
+
+ {DateUtils.dateStr(txnToDateValue) == "Invalid Date" ?
+ txnToDateValue
+ :
+ DateUtils.dateStr(txnToDateValue)}
+
+
+
+ );
+ }
+
+ function CollFormDateInputComponent({ inputRef, ...props }) {
+ const classes = useStyles();
+ return (
+ <>
+
+ {DateUtils.dateStr(collFromDateValue) == "Invalid Date" ?
+ collFromDateValue
+ :
+ DateUtils.dateStr(collFromDateValue)}
+
+
+
+ );
+ }
+
+ function CollToDateInputComponent({ inputRef, ...props }) {
+ const classes = useStyles();
+ return (
+ <>
+
+ {DateUtils.dateStr(collToDateValue) == "Invalid Date" ?
+ collToDateValue
+ :
+ DateUtils.dateStr(collToDateValue)}
+
+
+
+ );
+ }
+
const onSubmit = () => {
- const sysTxnDateFrom = getValues("sysTxnDateFrom")
- const sysTxnDateTo = getValues("sysTxnDateTo")
- const txnDateFrom = getValues("txnDateFrom")
- const txnDateTo = getValues("txnDateTo")
- const collDateFrom = getValues("collDateFrom")
- const collDateTo = getValues("collDateTo")
+
+ let sentSysTxnDateFrom = "";
+ let sentSysTxnDateTo = "";
+ let sentTxnDateFrom = "";
+ let sentTxnDateTo = "";
+ let sentCollDateFrom = "";
+ let sentCollDateTo = "";
+
+ if (fromDateValue != "dd / mm / yyyy" && toDateValue != "dd / mm / yyyy") {
+ sentSysTxnDateFrom = DateUtils.dateValue(sysTxnFromDateValue)
+ sentSysTxnDateTo = DateUtils.dateValue(sysTxnToDateValue)
+ sentTxnDateFrom = DateUtils.dateValue(txnFromDateValue)
+ sentTxnDateTo = DateUtils.dateValue(txnToDateValue)
+ sentCollDateFrom = DateUtils.dateValue(collFromDateValue)
+ sentCollDateTo = DateUtils.dateValue(collToDateValue)
+ }
const temp = {
PaymentMethod:(method?.type && method?.type != 'Please Select') ? method?.type : "",
PaymentStatus : (status?.type && status?.type != 'all') ? status?.type : "",
- SysTxnDateFrom:sysTxnDateFrom,
- SysTxnDateTo:sysTxnDateTo,
- TxnDateFrom:txnDateFrom,
- TxnDateTo:txnDateTo,
- CollDateFrom:collDateFrom,
- CollDateTo:collDateTo,
+ SysTxnDateFrom: sentSysTxnDateFrom,
+ SysTxnDateTo: sentSysTxnDateTo,
+ TxnDateFrom: sentTxnDateFrom,
+ TxnDateTo: sentTxnDateTo,
+ CollDateFrom: sentCollDateFrom,
+ CollDateTo: sentCollDateTo,
};
applySearch(temp);
};
@@ -186,13 +377,16 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
type="date"
label="PNSPS Transaction Date (From)"
////defaultValue={searchCriteria.dateFrom}
- InputProps={{ inputProps: { max: sysTxnMaxDate } }}
+ InputProps={{
+ inputComponent: SysTxnFormDateInputComponent,
+ }}
onChange={(newValue) => {
- setSysTxnMinDate(DateUtils.dateValue(newValue));
+ setSysTxnMinDate(newValue.target.value);
}}
InputLabelProps={{
shrink: true
}}
+ sx={{ "& .MuiInputBase-input": {display:"block"} }}
/>
@@ -202,14 +396,17 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
shrink: true
}}
{...register("sysTxnDateTo")}
- InputProps={{ inputProps: { min: sysTxnMinDate } }}
+ InputProps={{
+ inputComponent: SysTxnToDateInputComponent,
+ }}
onChange={(newValue) => {
- setsysTxnMaxDate(DateUtils.dateValue(newValue));
+ setsysTxnMaxDate(newValue.target.value);
}}
id="sysTxnDateTo"
type="date"
label="PNSPS Transaction Date (To)"
////defaultValue={searchCriteria.dateTo}
+ sx={{ "& .MuiInputBase-input": {display:"block"} }}
/>
@@ -228,13 +425,16 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
type="date"
label="FI Transaction Date (From)"
//defaultValue={searchCriteria.dateFrom}
- InputProps={{ inputProps: { max: txnMaxDate } }}
+ InputProps={{
+ inputComponent: TxnFormDateInputComponent,
+ }}
onChange={(newValue) => {
- setTxnMaxDate(DateUtils.dateValue(newValue));
+ setTxnMinDate(newValue.target.value);
}}
InputLabelProps={{
shrink: true
}}
+ sx={{ "& .MuiInputBase-input": {display:"block"} }}
/>
@@ -244,14 +444,17 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
shrink: true
}}
{...register("txnDateTo")}
- InputProps={{ inputProps: { min: txnMinDate } }}
+ InputProps={{
+ inputComponent: TxnToDateInputComponent,
+ }}
onChange={(newValue) => {
- setTxnMinDate(DateUtils.dateValue(newValue));
+ setTxnMaxDate(newValue.target.value);
}}
id="txnDateTo"
type="date"
label="FI Transaction Date (To)"
//defaultValue={searchCriteria.dateTo}
+ sx={{ "& .MuiInputBase-input": {display:"block"} }}
/>
@@ -270,13 +473,16 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
type="date"
label="Bank Credit Date (From)"
//defaultValue={searchCriteria.dateFrom}
- InputProps={{ inputProps: { max: collMaxDate } }}
+ InputProps={{
+ inputComponent: CollFormDateInputComponent,
+ }}
onChange={(newValue) => {
- setCollMinDate(DateUtils.dateValue(newValue));
+ setCollMinDate(newValue.target.value);
}}
InputLabelProps={{
shrink: true
}}
+ sx={{ "& .MuiInputBase-input": {display:"block"} }}
/>
@@ -286,14 +492,17 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
shrink: true
}}
{...register("collDateTo")}
- InputProps={{ inputProps: { min: collMinDate } }}
+ InputProps={{
+ inputComponent: CollToDateInputComponent,
+ }}
onChange={(newValue) => {
- setCollMaxDate(DateUtils.dateValue(newValue));
+ setCollMaxDate(newValue.target.value);
}}
id="collDateTo"
type="date"
label="Bank Credit Date (To)"
//defaultValue={searchCriteria.dateTo}
+ sx={{ "& .MuiInputBase-input": {display:"block"} }}
/>