diff --git a/src/pages/Payment/Search_GLD/SearchForm.js b/src/pages/Payment/Search_GLD/SearchForm.js index 44ad2036..13607221 100644 --- a/src/pages/Payment/Search_GLD/SearchForm.js +++ b/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 }) => 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); }} /> @@ -176,22 +264,21 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) => 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); }} /> diff --git a/src/pages/Payment/Search_Public/SearchForm.js b/src/pages/Payment/Search_Public/SearchForm.js index cce567f8..677685a1 100644 --- a/src/pages/Payment/Search_Public/SearchForm.js +++ b/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 }) => 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); }} /> @@ -156,23 +242,21 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) => 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); }} />