From 2c19676e22514611221e49a3c5317528a0d60f53 Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Fri, 22 Mar 2024 15:04:05 +0800 Subject: [PATCH] update public date picker and add autofocus on input form --- .../DemandNote/Search_Public/SearchForm.js | 14 +-- src/pages/Payment/Search_GLD/DataGrid.js | 2 +- src/pages/Payment/Search_Public/DataGrid.js | 2 +- src/pages/Payment/Search_Public/SearchForm.js | 12 +-- src/pages/Proof/Search_Public/SearchForm.js | 98 +++++++++++++++++-- .../ListPanel/SearchPublicNoticeForm.js | 98 +++++++++++++++++-- .../ForgotPassword/AuthCallback/index.js | 1 + .../ForgotPassword/ForgotPasswordApplyForm.js | 1 + .../ForgotUsername/AuthCallback/index.js | 1 + .../ForgotUsername/ForgotUsernameApplyForm.js | 1 + .../auth-forms/AuthLoginCustom.js | 1 + .../auth-forms/BusCustomFormWizard.js | 1 + .../auth-forms/CustomFormWizard.js | 1 + .../auth-forms/IAmSmartFormWizard.js | 1 + src/utils/FieldUtils.js | 8 +- 15 files changed, 202 insertions(+), 40 deletions(-) diff --git a/src/pages/DemandNote/Search_Public/SearchForm.js b/src/pages/DemandNote/Search_Public/SearchForm.js index 677c257..ba3530e 100644 --- a/src/pages/DemandNote/Search_Public/SearchForm.js +++ b/src/pages/DemandNote/Search_Public/SearchForm.js @@ -52,17 +52,11 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy"); React.useEffect(() => { - console.log(minDate) - if (minDate != searchCriteria.dateFrom) { - setFromDateValue(minDate); - } + setFromDateValue(minDate); }, [minDate]); React.useEffect(() => { - console.log(maxDate) - if (maxDate != searchCriteria.dateTo) { - setToDateValue(maxDate); - } + setToDateValue(maxDate); }, [maxDate]); function FormDateInputComponent({ inputRef, ...props }) { @@ -145,7 +139,9 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData function resetForm() { setType([]); // setStatus({ key: 0, label: 'All', type: 'all' }); - setOrgSelected({}); + // setOrgSelected({}); + setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14))) + setMaxDate(DateUtils.dateValue(new Date())) setIssueSelected({}); reset(); } diff --git a/src/pages/Payment/Search_GLD/DataGrid.js b/src/pages/Payment/Search_GLD/DataGrid.js index 988f28a..da41674 100644 --- a/src/pages/Payment/Search_GLD/DataGrid.js +++ b/src/pages/Payment/Search_GLD/DataGrid.js @@ -62,7 +62,7 @@ export default function SearchPublicNoticeTable({ recordList }) { headerName: 'Transaction Date', flex: 1, valueGetter: (params) => { - return DateUtils.dateValue(params?.value); + return DateUtils.dateStr(params?.value); } }, { diff --git a/src/pages/Payment/Search_Public/DataGrid.js b/src/pages/Payment/Search_Public/DataGrid.js index 253fba1..d27e8a7 100644 --- a/src/pages/Payment/Search_Public/DataGrid.js +++ b/src/pages/Payment/Search_Public/DataGrid.js @@ -74,7 +74,7 @@ export default function SearchPublicNoticeTable({ recordList }) { width: isMdOrLg ? 'auto' : 160, flex: isMdOrLg ? 1 : undefined, valueGetter: (params) => { - return DateUtils.dateValue(params?.value); + return DateUtils.dateStr(params?.value); } }, { diff --git a/src/pages/Payment/Search_Public/SearchForm.js b/src/pages/Payment/Search_Public/SearchForm.js index 67b2c1e..8043960 100644 --- a/src/pages/Payment/Search_Public/SearchForm.js +++ b/src/pages/Payment/Search_Public/SearchForm.js @@ -44,17 +44,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { React.useEffect(() => { // console.log(minDate) - const dateFrom = DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)) - if (minDate != dateFrom){ - setFromDateValue(minDate); - } + setFromDateValue(minDate); }, [minDate]); React.useEffect(() => { - const dateTo = DateUtils.dateValue(new Date()) - if (maxDate != dateTo){ - setToDateValue(maxDate); - } + setToDateValue(maxDate); }, [maxDate]); function FormDateInputComponent({inputRef, ...props }) { @@ -139,8 +133,6 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { function resetForm() { setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14))) setMaxDate(DateUtils.dateValue(new Date())) - setFromDateValue("dd / mm / yyyy") - setToDateValue("dd / mm / yyyy") reset(); } diff --git a/src/pages/Proof/Search_Public/SearchForm.js b/src/pages/Proof/Search_Public/SearchForm.js index cfb697d..932ca0e 100644 --- a/src/pages/Proof/Search_Public/SearchForm.js +++ b/src/pages/Proof/Search_Public/SearchForm.js @@ -15,8 +15,24 @@ import * as FormatUtils from "utils/FormatUtils"; import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst"; import {ThemeProvider} from "@emotion/react"; import {FormattedMessage, useIntl} from "react-intl"; +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" + }, +})); const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData }) => { @@ -31,6 +47,60 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom); const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo); + const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy"); + const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy"); + + React.useEffect(() => { + setFromDateValue(minDate); + }, [minDate]); + + React.useEffect(() => { + setToDateValue(maxDate); + }, [maxDate]); + + function FormDateInputComponent({ inputRef, ...props }) { + const classes = useStyles(); + return ( + <> +
+ {DateUtils.dateStr(fromDateValue) == "Invalid Date" ? + fromDateValue + : + DateUtils.dateStr(fromDateValue)} +
+ + + ); + } + + function ToDateInputComponent({ inputRef, ...props }) { + const classes = useStyles(); + return ( + <> +
+ {DateUtils.dateStr(toDateValue) == "Invalid Date" ? + toDateValue + : + DateUtils.dateStr(toDateValue)} +
+ + + ); + } const _sx = { padding: "4 2 4 2", @@ -50,20 +120,26 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData const { reset, register, handleSubmit } = useForm() const onSubmit = (data) => { - let typeArray = []; + let sentDateFrom = ""; + let sentDateTo = ""; for (let i = 0; i < type.length; i++) { typeArray.push(type[i].label); } + if (fromDateValue != "dd / mm / yyyy" && toDateValue != "dd / mm / yyyy") { + sentDateFrom = DateUtils.dateValue(fromDateValue) + sentDateTo = DateUtils.dateValue(toDateValue) + } + const temp = { refNo: data.refNo, code: data.code, issueId: issueSelected?.id, gazettGroup: groupSelected?.type, - dateFrom: data.dateFrom, - dateTo: data.dateTo, + dateFrom: sentDateFrom, + dateTo: sentDateTo, //contact: data.contact, replyed: (status?.type && status?.type != 'all') ? status?.type : "", }; @@ -82,6 +158,8 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData setStatus(ComboData.proofStatus[0]); setIssueSelected({}); setGroupSelected({}); + setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14))) + setMaxDate(DateUtils.dateValue(new Date())) reset(); } @@ -210,9 +288,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData type="date" label={intl.formatMessage({id: 'proofDateFrom'})} defaultValue={searchCriteria.dateFrom} - InputProps={{ inputProps: { max: maxDate } }} + InputProps={{ + inputComponent: FormDateInputComponent, + }} onChange={(newValue) => { - setMinDate(DateUtils.dateValue(newValue)); + setMinDate(newValue.target.value); }} InputLabelProps={{ shrink: true @@ -227,9 +307,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData shrink: true }} {...register("dateTo")} - InputProps={{ inputProps: { min: minDate } }} + InputProps={{ + inputComponent: ToDateInputComponent, + }} onChange={(newValue) => { - setMaxDate(DateUtils.dateValue(newValue)); + setMaxDate(newValue.target.value); }} id="dateTo" type="date" diff --git a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js index fd4a983..0ccf38a 100644 --- a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js +++ b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js @@ -16,8 +16,25 @@ import { import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst"; import {ThemeProvider} from "@emotion/react"; import {FormattedMessage, useIntl} from "react-intl"; -// ==============================|| DASHBOARD - DEFAULT ||============================== // +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" + }, +})); const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { const intl = useIntl(); @@ -26,23 +43,84 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom); const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo); + const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy"); + const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy"); // const [selectedLabelsString, setSelectedLabelsString] = React.useState(''); const { reset, register, handleSubmit } = useForm() const marginBottom = 2.5; + React.useEffect(() => { + setFromDateValue(minDate); + }, [minDate]); + + React.useEffect(() => { + setToDateValue(maxDate); + }, [maxDate]); + + function FormDateInputComponent({ inputRef, ...props }) { + const classes = useStyles(); + return ( + <> +
+ {DateUtils.dateStr(fromDateValue) == "Invalid Date" ? + fromDateValue + : + DateUtils.dateStr(fromDateValue)} +
+ + + ); + } + + function ToDateInputComponent({ inputRef, ...props }) { + const classes = useStyles(); + return ( + <> +
+ {DateUtils.dateStr(toDateValue) == "Invalid Date" ? + toDateValue + : + DateUtils.dateStr(toDateValue)} +
+ + + ); + } + const onSubmit = (data) => { data.status = status.type; let typeArray = []; + let sentDateFrom = ""; + let sentDateTo = ""; for (let i = 0; i < type.length; i++) { typeArray.push(type[i].label); } + if (fromDateValue != "dd / mm / yyyy" && toDateValue != "dd / mm / yyyy") { + sentDateFrom = DateUtils.dateValue(fromDateValue) + sentDateTo = DateUtils.dateValue(toDateValue) + } + const temp = { appNo: data.appNo, - dateFrom: data.dateFrom, - dateTo: data.dateTo, + dateFrom: sentDateFrom, + dateTo: sentDateTo, contact: data.contact, careOf: data.careOf?data.careOf:"", status: (data.status === "" || data.status.includes('all')) ? "" : data.status, @@ -53,6 +131,8 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { function resetForm() { setType([]); setStatus(localStorage.getItem('userData').creditor?ComboData.publicNoticeStatic_Creditor[0]:ComboData.publicNoticeStatic[0]); + setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14))) + setMaxDate(DateUtils.dateValue(new Date())) reset(); } @@ -94,9 +174,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { aria-label={intl.formatMessage({id: 'submitDateFrom'})} label={intl.formatMessage({id: 'submitDateFrom'})} defaultValue={searchCriteria.dateFrom} - InputProps={{ inputProps: { max: maxDate } }} + InputProps={{ + inputComponent: FormDateInputComponent, + }} onChange={(newValue) => { - setMinDate(DateUtils.dateValue(newValue)); + setMinDate(newValue.target.value); }} InputLabelProps={{ shrink: true @@ -117,9 +199,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { aria-label={intl.formatMessage({id: 'submitDateTo'})} label={intl.formatMessage({id: 'submitDateTo'})} defaultValue={searchCriteria.dateTo} - InputProps={{ inputProps: { min: minDate } }} + InputProps={{ + inputComponent: ToDateInputComponent, + }} onChange={(newValue) => { - setMaxDate(DateUtils.dateValue(newValue)); + setMaxDate(newValue.target.value); }} /> diff --git a/src/pages/authentication/ForgotPassword/AuthCallback/index.js b/src/pages/authentication/ForgotPassword/AuthCallback/index.js index 018ab46..354abd5 100644 --- a/src/pages/authentication/ForgotPassword/AuthCallback/index.js +++ b/src/pages/authentication/ForgotPassword/AuthCallback/index.js @@ -302,6 +302,7 @@ const Index = () => { { formik.handleChange(e); changePassword(e.target.value); diff --git a/src/pages/authentication/ForgotPassword/ForgotPasswordApplyForm.js b/src/pages/authentication/ForgotPassword/ForgotPasswordApplyForm.js index fced818..94248ef 100644 --- a/src/pages/authentication/ForgotPassword/ForgotPasswordApplyForm.js +++ b/src/pages/authentication/ForgotPassword/ForgotPasswordApplyForm.js @@ -148,6 +148,7 @@ const ForgotPasswordApplyForm = () => { value={formik.values.username} error={Boolean(formik.touched.username && formik.errors.username)} onBlur={formik.handleBlur} + autoFocus inputProps={{ maxLength: 50, onKeyDown: (e) => { diff --git a/src/pages/authentication/ForgotUsername/AuthCallback/index.js b/src/pages/authentication/ForgotUsername/AuthCallback/index.js index 7c6d145..b56a1bc 100644 --- a/src/pages/authentication/ForgotUsername/AuthCallback/index.js +++ b/src/pages/authentication/ForgotUsername/AuthCallback/index.js @@ -309,6 +309,7 @@ const Index = () => { { formik.handleChange(e); changePassword(e.target.value); diff --git a/src/pages/authentication/ForgotUsername/ForgotUsernameApplyForm.js b/src/pages/authentication/ForgotUsername/ForgotUsernameApplyForm.js index 30d3f2d..f71418f 100644 --- a/src/pages/authentication/ForgotUsername/ForgotUsernameApplyForm.js +++ b/src/pages/authentication/ForgotUsername/ForgotUsernameApplyForm.js @@ -141,6 +141,7 @@ const ForgotUsernameApplyForm = () => { { onChange={formik.handleChange} placeholder="" fullWidth + autoFocus value={formik.values.username} error={Boolean(formik.touched.username && formik.errors.username)} onBlur={formik.handleBlur} diff --git a/src/pages/authentication/auth-forms/BusCustomFormWizard.js b/src/pages/authentication/auth-forms/BusCustomFormWizard.js index 7159d3c..5446f46 100644 --- a/src/pages/authentication/auth-forms/BusCustomFormWizard.js +++ b/src/pages/authentication/auth-forms/BusCustomFormWizard.js @@ -624,6 +624,7 @@ const BusCustomFormWizard = (props) => { }} placeholder={intl.formatMessage({id: 'userLoginName'})} fullWidth + autoFocus error={Boolean((formik.touched.username && formik.errors.username) || checkUsername)} onBlur={formik.handleBlur} inputProps={{ diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js index 9827325..e68212b 100644 --- a/src/pages/authentication/auth-forms/CustomFormWizard.js +++ b/src/pages/authentication/auth-forms/CustomFormWizard.js @@ -722,6 +722,7 @@ const CustomFormWizard = (props) => { }} placeholder={intl.formatMessage({ id: 'userLoginName' })} fullWidth + autoFocus error={Boolean((formik.touched.username && formik.errors.username) || checkUsername)} onBlur={formik.handleBlur} inputProps={{ diff --git a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js index e9234b6..ff87672 100644 --- a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js +++ b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js @@ -463,6 +463,7 @@ const CustomFormWizard = (props) => { { + sx={{ display: 'flex', alignItems: 'center' }} > {label} @@ -49,7 +49,7 @@ export const getTextField = ({ label, valueName, form, disabled }) => { export const getTextArea = ({ label, valueName, form, disabled, inputProps, ...props }) => { return - {label} @@ -77,7 +77,7 @@ export const getTextArea = ({ label, valueName, form, disabled, inputProps, ...p export const getPhoneField = ({ label, valueName, form, disabled }) => { return - {label} @@ -122,7 +122,7 @@ export const getPhoneField = ({ label, valueName, form, disabled }) => { export const getAddressField = ({ label, valueName, form, disabled }) => { return - + {label}