From a58a7e3797b6dc358fbdffa9bca4421684ea9b1c Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Mon, 25 Mar 2024 11:45:22 +0800 Subject: [PATCH] update ui request --- src/pages/DemandNote/Search/DataGrid.js | 6 +- src/pages/DemandNote/Search/SearchForm.js | 166 ++++++++++++++++-- .../PublicNotice/Search_GLD/SearchForm.js | 5 +- .../UserTable_Individual.js | 2 +- .../UserSearchForm_Organization.js | 2 +- .../UserTable_Organization.js | 4 +- 6 files changed, 163 insertions(+), 22 deletions(-) diff --git a/src/pages/DemandNote/Search/DataGrid.js b/src/pages/DemandNote/Search/DataGrid.js index a8ea296..898632b 100644 --- a/src/pages/DemandNote/Search/DataGrid.js +++ b/src/pages/DemandNote/Search/DataGrid.js @@ -170,7 +170,7 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch }) { id: 'contactPerson', field: 'contactPerson', - headerName: 'Client', + headerName: 'Organisation', minWidth: 300, flex:1, renderCell: (params) => { @@ -233,8 +233,8 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch }) width: 300, renderCell: (params) => { return ( - - + +
Issue:{DateUtils.dateValue(params?.row.issueDate)}
Due:{params?.value? DateUtils.dateValue(params?.value):"--"}
Issue:{DateUtils.dateStr(params?.row.issueDate)}
Due:{params?.value? DateUtils.dateStr(params?.value):"--"}
Sent:{params.row.sentDate ? <> {DateUtils.datetimeStr(params.row.sentDate)} - {params.row.sentBy} : <> To be sent}
); } diff --git a/src/pages/DemandNote/Search/SearchForm.js b/src/pages/DemandNote/Search/SearchForm.js index e3e29cb..052cf73 100644 --- a/src/pages/DemandNote/Search/SearchForm.js +++ b/src/pages/DemandNote/Search/SearchForm.js @@ -14,8 +14,25 @@ import * as FormatUtils from "utils/FormatUtils"; import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst"; import {ThemeProvider} from "@emotion/react"; import { 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 SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issueComboData }) => { @@ -29,12 +46,120 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue 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 [minDueDate, setMinDueDate] = React.useState(searchCriteria.dueDateFrom); const [maxDueDate, setMaxDueDate] = React.useState(searchCriteria.dueDateTo); + const [fromDueDateValue, setFromDueDateValue] = React.useState("dd / mm / yyyy"); + const [toDueDateValue, setToDueDateValue] = React.useState("dd / mm / yyyy"); const intl = useIntl(); const { locale } = intl; + + React.useEffect(() => { + setFromDateValue(minDate); + }, [minDate]); + + React.useEffect(() => { + setToDateValue(maxDate); + }, [maxDate]); + + React.useEffect(() => { + setFromDueDateValue(minDueDate); + }, [minDueDate]); + + React.useEffect(() => { + setToDueDateValue(maxDueDate); + }, [maxDueDate]); + + 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)} +
+ + + ); + } + + function FormDueDateInputComponent({ inputRef, ...props }) { + const classes = useStyles(); + return ( + <> +
+ {DateUtils.dateStr(fromDueDateValue) == "Invalid Date" ? + fromDueDateValue + : + DateUtils.dateStr(fromDueDateValue)} +
+ + + ); + } + + function ToDueDateInputComponent({ inputRef, ...props }) { + const classes = useStyles(); + return ( + <> +
+ {DateUtils.dateStr(toDueDateValue) == "Invalid Date" ? + toDueDateValue + : + DateUtils.dateStr(toDueDateValue)} +
+ + + ); + } const { reset, register, handleSubmit } = useForm() @@ -167,16 +292,21 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue {...register("orgId")} disablePortal id="orgId" - size="small" options={orgCombo} + size="small" value={orgSelected} - inputValue={(orgSelected?.label) ? orgSelected?.label : ""} + getOptionLabel={(option) => option.name? option.name : ""} + inputValue={orgSelected ? orgSelected.name : ""} onChange={(event, newValue) => { + if (newValue !== null) { setOrgSelected(newValue); + }else{ + setOrgSelected({}); + } }} renderInput={(params) => ( { - setMinDate(DateUtils.dateValue(newValue)); + setMinDate(newValue.target.value); }} InputLabelProps={{ shrink: true @@ -228,9 +360,11 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue 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" @@ -251,9 +385,11 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue type="date" label={"Due Date (From)"} defaultValue={searchCriteria.dueDateFrom} - InputProps={{ inputProps: { max: maxDueDate } }} + InputProps={{ + inputComponent: FormDueDateInputComponent, + }} onChange={(newValue) => { - setMinDueDate(DateUtils.dateValue(newValue)); + setMinDueDate(newValue.target.value); }} InputLabelProps={{ shrink: true @@ -269,9 +405,11 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue shrink: true }} {...register("dueDateTo")} - InputProps={{ inputProps: { min: minDueDate } }} + InputProps={{ + inputComponent: ToDueDateInputComponent, + }} onChange={(newValue) => { - setMaxDueDate(DateUtils.dateValue(newValue)); + setMaxDueDate(newValue.target.value); }} id="dueDateTo" type="date" diff --git a/src/pages/PublicNotice/Search_GLD/SearchForm.js b/src/pages/PublicNotice/Search_GLD/SearchForm.js index 6cbe943..d8c5f4f 100644 --- a/src/pages/PublicNotice/Search_GLD/SearchForm.js +++ b/src/pages/PublicNotice/Search_GLD/SearchForm.js @@ -30,7 +30,10 @@ const useStyles = makeStyles(() => ({ pointerEvents: "none", right: 50, display: "flex", - alignItems: "center" + alignItems: "center", + md:{ + width: "130px" + } }, })); diff --git a/src/pages/User/SearchPage_Individual/UserTable_Individual.js b/src/pages/User/SearchPage_Individual/UserTable_Individual.js index 26a6c63..ddf0442 100644 --- a/src/pages/User/SearchPage_Individual/UserTable_Individual.js +++ b/src/pages/User/SearchPage_Individual/UserTable_Individual.js @@ -45,7 +45,7 @@ export default function UserTable_Individual({ recordList }) { { id: 'username', field: 'username', - headerName: 'User Name', + headerName: 'Username', flex: 1, minWidth: 150, }, diff --git a/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js b/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js index 7105e97..4f58fea 100644 --- a/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js +++ b/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js @@ -69,7 +69,7 @@ const UserSearchForm_Organization = ({applySearch}) => { fullWidth {...register("orgName")} id="orgName" - label="Organisation Name" + label="Organisation" InputLabelProps={{ shrink: true }} diff --git a/src/pages/User/SearchPage_Organization/UserTable_Organization.js b/src/pages/User/SearchPage_Organization/UserTable_Organization.js index 518902d..8172344 100644 --- a/src/pages/User/SearchPage_Organization/UserTable_Organization.js +++ b/src/pages/User/SearchPage_Organization/UserTable_Organization.js @@ -63,14 +63,14 @@ export default function UserTable_Organization({recordList}) { { id: 'enCompanyName', field: 'enCompanyName', - headerName: 'Company (Eng)', + headerName: 'Organisation (Eng)', flex: 1, minWidth: 200, }, { id: 'chCompanyName', field: 'chCompanyName', - headerName: 'Company (Ch)', + headerName: 'Organisation (Ch)', flex: 1, minWidth: 150, },