CR023 - online payment search

src/pages/Payment/Search_GLD/SearchForm.js

@@ -18,6 +18,21 @@ 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";
+
+const getDefaultDateFrom = () => DateUtils.dateValue(new Date().setDate(new Date().getDate() - 14));
+const getDefaultDateTo = () => DateUtils.dateValue(new Date());
+
+const isSubmitDateEmpty = (value) =>
+    value == null || value === "" || value === "dd / mm / yyyy";
+
+const isBlank = (value) => value == null || String(value).trim() === "";
+
+const toDayjsOrNull = (value) => {
+    if (isSubmitDateEmpty(value)) return null;
+    const d = dayjs(value);
+    return d.isValid() ? d : null;
+};
+
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) => {
 
@@ -25,12 +40,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
     const [status, setStatus] = React.useState(ComboData.paymentStatus[0]);
     const [payMethod, setPayMethod] = React.useState(ComboData.payMethod[0]);
-
-    const { reset, register, handleSubmit } = useForm()
     const marginBottom = 2.5;
 
     const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
     const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy");
+    const prevHasOtherRef = React.useRef(null);
 
     React.useEffect(() => {
         if(searchCriteria.status!=undefined){
@@ -72,20 +86,77 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
         setToDateValue(maxDate);
     }, [maxDate]);
 
+    const { reset, register, handleSubmit, watch } = useForm({
+        defaultValues: {
+            code: searchCriteria.code || "",
+            transNo: searchCriteria.transNo || ""
+        }
+    });
+    const code = watch("code");
+    const transNo = watch("transNo");
+
     // add near the top inside the component (after useState for payMethod)
     const toPayMethodArray = (opt) => {
     if (!opt || opt.type === 'all') return [];
     return Array.isArray(opt.type) ? opt.type : [opt.type];
     };
 
+    const clearSubmitDates = () => {
+        setMinDate(null);
+        setMaxDate(null);
+    };
+
+    const restoreDefaultSubmitDates = () => {
+        setMinDate(getDefaultDateFrom());
+        setMaxDate(getDefaultDateTo());
+    };
+
+    const hasOtherCriteria = (textFields = {}) => {
+        if (!isBlank(textFields.code)) return true;
+        if (!isBlank(textFields.transNo)) return true;
+        if (status?.type && status.type !== "all" && status.type !== "") return true;
+        if (payMethod?.type && payMethod.type !== "all") return true;
+        return false;
+    };
+
+    React.useEffect(() => {
+        const hasOther = hasOtherCriteria({ code, transNo });
+        if (prevHasOtherRef.current === null) {
+            prevHasOtherRef.current = hasOther;
+            return;
+        }
+        if (hasOther && !prevHasOtherRef.current) {
+            clearSubmitDates();
+        } else if (!hasOther && prevHasOtherRef.current) {
+            // Only refill defaults when From or To is empty; keep user-entered dates otherwise
+            if (isSubmitDateEmpty(minDate) || isSubmitDateEmpty(maxDate)) {
+                restoreDefaultSubmitDates();
+            }
+        }
+        prevHasOtherRef.current = hasOther;
+    }, [code, transNo, status, payMethod]);
 
     const onSubmit = (data) => {
         let sentDateFrom = "";
         let sentDateTo = "";
 
-        if (fromDateValue != "dd / mm / yyyy" && toDateValue != "dd / mm / yyyy") {
-            sentDateFrom = DateUtils.dateValue(fromDateValue)
-            sentDateTo = DateUtils.dateValue(toDateValue)
+        const hasOther = hasOtherCriteria({
+            code: data.code,
+            transNo: data.transNo
+        });
+        const datesEmpty = isSubmitDateEmpty(fromDateValue) || isSubmitDateEmpty(toDateValue)
+            || minDate == null || maxDate == null;
+
+        if (!hasOther && datesEmpty) {
+            const dateFrom = getDefaultDateFrom();
+            const dateTo = getDefaultDateTo();
+            setMinDate(dateFrom);
+            setMaxDate(dateTo);
+            sentDateFrom = dateFrom;
+            sentDateTo = dateTo;
+        } else if (!datesEmpty) {
+            sentDateFrom = DateUtils.dateValue(fromDateValue);
+            sentDateTo = DateUtils.dateValue(toDateValue);
         }
 
         const temp = {
@@ -98,18 +169,36 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
             start:0,
             limit:10
         };
+        if (searchCriteria?.sort && searchCriteria?.direction) {
+            temp.sort = searchCriteria.sort;
+            temp.direction = searchCriteria.direction;
+        }
         applySearch(temp);
     };
 
     function resetForm() {
         setStatus(ComboData.paymentStatus[0]);
-        setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
-        setMaxDate(DateUtils.dateValue(new Date()))
+        setPayMethod(ComboData.payMethod[0]);
+        const dateFrom = getDefaultDateFrom();
+        const dateTo = getDefaultDateTo();
+        setMinDate(dateFrom);
+        setMaxDate(dateTo);
         reset({
             code:"",
             transNo:""
         });
-        localStorage.setItem('searchCriteria',"")
+        prevHasOtherRef.current = false;
+        localStorage.setItem('searchCriteria',"");
+        applySearch({
+            code: "",
+            transNo: "",
+            dateFrom,
+            dateTo,
+            status: "",
+            payMethod: [],
+            start: 0,
+            limit: 10
+        });
     }
 
 
@@ -150,22 +239,21 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
                                         <DemoItem  components={['DatePicker']}>
                                             <DatePicker
                                                 id="dateFrom"
-                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                onError={() => {}}
                                                 slotProps={{
-                                                    field: { readOnly: true, },
-                                                    // textField: {
-                                                    //     helperText: receiptFromErrorMessage,
-                                                    // },
+                                                    field: { readOnly: true, clearable: true },
+                                                    textField: {
+                                                        InputLabelProps: { shrink: true },
+                                                        error: false,
+                                                        helperText: null
+                                                    },
                                                 }}
                                                 format="DD/MM/YYYY"
                                                 label="Payment Date (From)"
-                                                value={minDate === null ? null : dayjs(minDate)}
-                                                maxDate={maxDate === null ? null : dayjs(maxDate)}
+                                                value={toDayjsOrNull(minDate)}
+                                                maxDate={toDayjsOrNull(maxDate)}
                                                 onChange={(newValue) => {
-                                                    // console.log(newValue)
-                                                    if(newValue!=null){
-                                                        setMinDate(newValue);
-                                                    }
+                                                    setMinDate(newValue && newValue.isValid?.() ? newValue : null);
                                                 }}
                                             />
                                         </DemoItem >
@@ -176,22 +264,21 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
                                         <DemoItem  components={['DatePicker']}>
                                             <DatePicker
                                                 id="dateTo"
-                                                // onError={(newError) => setReceiptFromError(newError)}
+                                                onError={() => {}}
                                                 slotProps={{
-                                                    field: { readOnly: true, },
-                                                    // textField: {
-                                                    //     helperText: receiptFromErrorMessage,
-                                                    // },
+                                                    field: { readOnly: true, clearable: true },
+                                                    textField: {
+                                                        InputLabelProps: { shrink: true },
+                                                        error: false,
+                                                        helperText: null
+                                                    },
                                                 }}
                                                 format="DD/MM/YYYY"
                                                 label="Payment Date (To)"
-                                                value={maxDate === null ? null : dayjs(maxDate)}
-                                                minDate={minDate === null ? null : dayjs(minDate)}
+                                                value={toDayjsOrNull(maxDate)}
+                                                minDate={toDayjsOrNull(minDate)}
                                                 onChange={(newValue) => {
-                                                    // console.log(newValue)
-                                                    if(newValue!=null){
-                                                        setMaxDate(newValue);
-                                                    }
+                                                    setMaxDate(newValue && newValue.isValid?.() ? newValue : null);
                                                 }}
                                             />
                                         </DemoItem >

src/pages/Payment/Search_Public/SearchForm.js

@@ -20,6 +20,21 @@ 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";
+
+const getDefaultDateFrom = () => DateUtils.dateValue(new Date().setDate(new Date().getDate() - 14));
+const getDefaultDateTo = () => DateUtils.dateValue(new Date());
+
+const isSubmitDateEmpty = (value) =>
+    value == null || value === "" || value === "dd / mm / yyyy";
+
+const isBlank = (value) => value == null || String(value).trim() === "";
+
+const toDayjsOrNull = (value) => {
+    if (isSubmitDateEmpty(value)) return null;
+    const d = dayjs(value);
+    return d.isValid() ? d : null;
+};
+
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) => {
     const intl = useIntl();
@@ -29,9 +44,9 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
 
     const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
     const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy");
+    const prevHasOtherRef = React.useRef(null);
 
     React.useEffect(() => {
-        // console.log(minDate)
         setFromDateValue(minDate);
     }, [minDate]);
     
@@ -55,15 +70,72 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
         }
     }
 
-    const { reset, register, handleSubmit } = useForm()
+    const { reset, register, handleSubmit, watch } = useForm({
+        defaultValues: {
+            code: searchCriteria.code || "",
+            transNo: searchCriteria.transNo || ""
+        }
+    });
+    const code = watch("code");
+    const transNo = watch("transNo");
+
+    const clearSubmitDates = () => {
+        setMinDate(null);
+        setMaxDate(null);
+    };
+
+    const restoreDefaultSubmitDates = () => {
+        setMinDate(getDefaultDateFrom());
+        setMaxDate(getDefaultDateTo());
+    };
+
+    const hasOtherCriteria = (textFields = {}) => {
+        if (!isBlank(textFields.code)) return true;
+        if (!isBlank(textFields.transNo)) return true;
+        if (status?.type && status.type !== "all" && status.type !== "") return true;
+        return false;
+    };
+
+    React.useEffect(() => {
+        const hasOther = hasOtherCriteria({ code, transNo });
+        if (prevHasOtherRef.current === null) {
+            prevHasOtherRef.current = hasOther;
+            return;
+        }
+        if (hasOther && !prevHasOtherRef.current) {
+            clearSubmitDates();
+        } else if (!hasOther && prevHasOtherRef.current) {
+            // Only refill defaults when From or To is empty; keep user-entered dates otherwise
+            if (isSubmitDateEmpty(minDate) || isSubmitDateEmpty(maxDate)) {
+                restoreDefaultSubmitDates();
+            }
+        }
+        prevHasOtherRef.current = hasOther;
+    }, [code, transNo, status]);
 
     const onSubmit = (data) => {
         let sentDateFrom = "";
         let sentDateTo = "";
-        if( fromDateValue!="dd / mm / yyyy"&&toDateValue!="dd / mm / yyyy"){
-            sentDateFrom = DateUtils.dateValue(fromDateValue)
-            sentDateTo = DateUtils.dateValue(toDateValue)
+
+        const hasOther = hasOtherCriteria({
+            code: data.code,
+            transNo: data.transNo
+        });
+        const datesEmpty = isSubmitDateEmpty(fromDateValue) || isSubmitDateEmpty(toDateValue)
+            || minDate == null || maxDate == null;
+
+        if (!hasOther && datesEmpty) {
+            const dateFrom = getDefaultDateFrom();
+            const dateTo = getDefaultDateTo();
+            setMinDate(dateFrom);
+            setMaxDate(dateTo);
+            sentDateFrom = dateFrom;
+            sentDateTo = dateTo;
+        } else if (!datesEmpty) {
+            sentDateFrom = DateUtils.dateValue(fromDateValue);
+            sentDateTo = DateUtils.dateValue(toDateValue);
         }
+
         const temp = {
             code: data.code,
             transNo: data.transNo,
@@ -73,18 +145,34 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
             start:0,
             limit:10
         };
+        if (searchCriteria?.sort && searchCriteria?.direction) {
+            temp.sort = searchCriteria.sort;
+            temp.direction = searchCriteria.direction;
+        }
         applySearch(temp);
     };
 
     function resetForm() {
         setStatus(ComboData.paymentStatus[0]);
-        setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
-        setMaxDate(DateUtils.dateValue(new Date()))
+        const dateFrom = getDefaultDateFrom();
+        const dateTo = getDefaultDateTo();
+        setMinDate(dateFrom);
+        setMaxDate(dateTo);
         reset({
             code:"",
             transNo:""
         });
-        localStorage.setItem('searchCriteria',"")
+        prevHasOtherRef.current = false;
+        localStorage.setItem('searchCriteria',"");
+        applySearch({
+            code: "",
+            transNo: "",
+            dateFrom,
+            dateTo,
+            status: "",
+            start: 0,
+            limit: 10
+        });
     }
 
 
@@ -128,23 +216,21 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
                                     <DemoItem  components={['DatePicker']}>
                                         <DatePicker
                                             id="dateFrom"
-                                            // onError={(newError) => setReceiptFromError(newError)}
+                                            onError={() => {}}
                                             slotProps={{
-                                                field: { readOnly: true, },
-                                                // textField: {
-                                                //     helperText: receiptFromErrorMessage,
-                                                // },
+                                                field: { readOnly: true, clearable: true },
+                                                textField: {
+                                                    InputLabelProps: { shrink: true },
+                                                    error: false,
+                                                    helperText: null
+                                                },
                                             }}
                                             format="DD/MM/YYYY"
                                             label={intl.formatMessage({id: 'payDateFrom'})}
-                                            // defaultValue={searchCriteria.dateFrom}
-                                            value={minDate === null ? null : dayjs(minDate)}
-                                            maxDate={maxDate === null ? null : dayjs(maxDate)}
+                                            value={toDayjsOrNull(minDate)}
+                                            maxDate={toDayjsOrNull(maxDate)}
                                             onChange={(newValue) => {
-                                                // console.log(newValue)
-                                                if(newValue!=null){
-                                                    setMinDate(newValue);
-                                                }
+                                                setMinDate(newValue && newValue.isValid?.() ? newValue : null);
                                             }}
                                         />
                                     </DemoItem >
@@ -156,23 +242,21 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
                                     <DemoItem  components={['DatePicker']}>
                                         <DatePicker
                                             id="dateTo"
-                                            // onError={(newError) => setReceiptFromError(newError)}
+                                            onError={() => {}}
                                             slotProps={{
-                                                field: { readOnly: true, },
-                                                // textField: {
-                                                //     helperText: receiptFromErrorMessage,
-                                                // },
+                                                field: { readOnly: true, clearable: true },
+                                                textField: {
+                                                    InputLabelProps: { shrink: true },
+                                                    error: false,
+                                                    helperText: null
+                                                },
                                             }}
                                             format="DD/MM/YYYY"
                                             label={intl.formatMessage({id: 'payDateTo'})}
-                                            // defaultValue={searchCriteria.dateTo}
-                                            value={maxDate === null ? null : dayjs(maxDate)}
-                                            minDate={minDate === null ? null : dayjs(minDate)}
+                                            value={toDayjsOrNull(maxDate)}
+                                            minDate={toDayjsOrNull(minDate)}
                                             onChange={(newValue) => {
-                                                // console.log(newValue)
-                                                if(newValue!=null){
-                                                    setMaxDate(newValue);
-                                                }
+                                                setMaxDate(newValue && newValue.isValid?.() ? newValue : null);
                                             }}
                                         />
                                     </DemoItem >