@@ -9,13 +9,17 @@ import MainCard from "components/MainCard"; | |||
import { useForm } from "react-hook-form"; | |||
import * as React from "react"; | |||
import * as ComboData from "utils/ComboData"; | |||
import * as DateUtils from "utils/DateUtils"; | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const SearchPublicNoticeForm = ({ applySearch }) => { | |||
const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||
const [type, setType] = React.useState([]); | |||
const [status, setStatus] = React.useState(); | |||
const [status, setStatus] = React.useState({ key: 0, label: '全部', type: 'all' }); | |||
const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom); | |||
const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo); | |||
const { reset, register, handleSubmit } = useForm() | |||
const onSubmit = (data) => { | |||
@@ -31,14 +35,14 @@ const SearchPublicNoticeForm = ({ applySearch }) => { | |||
dateFrom: data.dateFrom, | |||
dateTo: data.dateTo, | |||
contact: data.contact, | |||
status: status?.type, | |||
status: (status?.type&&status?.type!= 'all')?status?.type:"", | |||
}; | |||
applySearch(temp); | |||
}; | |||
function resetForm() { | |||
setType([]); | |||
setStatus(); | |||
setStatus({ key: 0, label: '全部', type: 'all' }); | |||
reset(); | |||
} | |||
@@ -63,6 +67,10 @@ const SearchPublicNoticeForm = ({ applySearch }) => { | |||
{...register("appNo")} | |||
id='appNo' | |||
label="申請編號" | |||
defaultValue={searchCriteria.appNo} | |||
InputLabelProps={{ | |||
shrink: true | |||
}} | |||
/> | |||
</Grid> | |||
@@ -73,6 +81,11 @@ const SearchPublicNoticeForm = ({ applySearch }) => { | |||
id="dateFrom" | |||
type="date" | |||
label="提交日期(從)" | |||
defaultValue={searchCriteria.dateFrom} | |||
InputProps={{inputProps: { max: maxDate} }} | |||
onChange={(newValue)=>{ | |||
setMinDate(DateUtils.dateStr(newValue)); | |||
}} | |||
InputLabelProps={{ | |||
shrink: true | |||
}} | |||
@@ -89,6 +102,11 @@ const SearchPublicNoticeForm = ({ applySearch }) => { | |||
id="dateTo" | |||
type="date" | |||
label="提交日期(到)" | |||
defaultValue={searchCriteria.dateTo} | |||
InputProps={{inputProps: { min: minDate} }} | |||
onChange={(newValue)=>{ | |||
setMaxDate(DateUtils.dateStr(newValue)); | |||
}} | |||
/> | |||
</Grid> | |||
@@ -98,6 +116,10 @@ const SearchPublicNoticeForm = ({ applySearch }) => { | |||
{...register("contact")} | |||
id="contact" | |||
label="聯絡人" | |||
defaultValue={searchCriteria.contact} | |||
InputLabelProps={{ | |||
shrink: true | |||
}} | |||
/> | |||
</Grid> | |||
@@ -106,8 +128,10 @@ const SearchPublicNoticeForm = ({ applySearch }) => { | |||
{...register("status")} | |||
disablePortal | |||
id="status" | |||
filterOptions={(options)=>options} | |||
options={ComboData.publicNoticeStatic} | |||
value={status} | |||
values={status} | |||
inputValue={status?.label} | |||
onChange={(event, newValue) => { | |||
if (newValue !== null) { | |||
setStatus(newValue); | |||
@@ -118,6 +142,9 @@ const SearchPublicNoticeForm = ({ applySearch }) => { | |||
label="狀態" | |||
/> | |||
)} | |||
InputLabelProps={{ | |||
shrink: true | |||
}} | |||
/> | |||
</Grid> | |||
{/*<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>*/} | |||
@@ -6,6 +6,7 @@ import MainCard from "components/MainCard"; | |||
import {GET_PUBLIC_NOTICE_LIST} from "utils/ApiPathConst"; | |||
import * as React from "react"; | |||
import * as HttpUtils from "utils/HttpUtils"; | |||
import * as DateUtils from "utils/DateUtils"; | |||
import Loadable from 'components/Loadable'; | |||
const SearchForm = Loadable(React.lazy(() => import('./SearchPublicNoticeForm'))); | |||
@@ -16,7 +17,10 @@ const EventTable = Loadable(React.lazy(() => import('./SearchPublicNoticeTable') | |||
const UserSearchPage_Individual = () => { | |||
const [record,setRecord] = React.useState([]); | |||
const [searchCriteria, setSearchCriteria] = React.useState({}); | |||
const [searchCriteria, setSearchCriteria] = React.useState({ | |||
dateTo: DateUtils.dateStr(new Date()), | |||
dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)), | |||
}); | |||
React.useEffect(() => { | |||
getUserList(); | |||
@@ -44,7 +48,10 @@ const UserSearchPage_Individual = () => { | |||
<Grid container rowSpacing={4.5} columnSpacing={2.75}> | |||
{/*row 1*/} | |||
<Grid item xs={12} md={12} lg={12}> | |||
<SearchForm applySearch={applySearch}/> | |||
<SearchForm | |||
applySearch={applySearch} | |||
searchCriteria={searchCriteria} | |||
/> | |||
</Grid> | |||
{/*row 2*/} | |||
<Grid item xs={12} md={12} lg={12}> | |||
@@ -80,7 +80,7 @@ export default function SearchPublicNoticeTable({ recordList }) { | |||
id: 'status', | |||
field: 'status', | |||
headerName: 'Status', | |||
width: 100, | |||
width: 150, | |||
renderCell: (params) => { | |||
return [StatusUtils.getStatusEng(params)] | |||
}, | |||
@@ -113,6 +113,8 @@ export default function SearchPublicNoticeTable({ recordList }) { | |||
pageSizeOptions={[5, 10]} | |||
autoHeight | |||
sx={{ | |||
paddingLeft: 4, | |||
paddingRight: 4, | |||
boxShadow: 1, | |||
border: 1, | |||
borderColor: '#DDD', | |||
@@ -9,17 +9,20 @@ import MainCard from "components/MainCard"; | |||
import { useForm } from "react-hook-form"; | |||
import * as React from "react"; | |||
import * as ComboData from "utils/ComboData"; | |||
import * as DateUtils from "utils/DateUtils"; | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => { | |||
const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria }) => { | |||
const [type, setType] = React.useState([]); | |||
const [status, setStatus] = React.useState(); | |||
const [orgLabel, setOrgLabel] = React.useState(); | |||
const [orgId, setOrgId] = React.useState(); | |||
const [status, setStatus] = React.useState({ key: 0, label: 'All', type: 'all' }); | |||
const [orgSelected, setOrgSelected] = React.useState({}); | |||
const [orgCombo, setOrgCombo] = React.useState(); | |||
const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom); | |||
const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo); | |||
const { reset, register, handleSubmit } = useForm() | |||
const onSubmit = (data) => { | |||
@@ -35,8 +38,8 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => { | |||
dateFrom: data.dateFrom, | |||
dateTo: data.dateTo, | |||
contact: data.contact, | |||
status: status?.type, | |||
orgId: orgId?.key, | |||
status: (status?.type&&status?.type!= 'all')?status?.type:"", | |||
orgId: (orgSelected?.key&&orgSelected?.key>0)?orgSelected?.key:"", | |||
}; | |||
applySearch(temp); | |||
}; | |||
@@ -49,10 +52,8 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => { | |||
function resetForm() { | |||
setType([]); | |||
setStatus(); | |||
setOrgId(); | |||
setOrgLabel(""); | |||
//orgComboRef.current.clearValue(); | |||
setStatus({ key: 0, label: 'All', type: 'all' }); | |||
setOrgSelected({}); | |||
reset(); | |||
} | |||
@@ -77,6 +78,10 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => { | |||
{...register("appNo")} | |||
id='appNo' | |||
label="App No." | |||
defaultValue={searchCriteria.appNo} | |||
InputLabelProps={{ | |||
shrink: true | |||
}} | |||
/> | |||
</Grid> | |||
@@ -87,6 +92,11 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => { | |||
id="dateFrom" | |||
type="date" | |||
label="Submit Date(From)" | |||
defaultValue={searchCriteria.dateFrom} | |||
InputProps={{inputProps: { max: maxDate} }} | |||
onChange={(newValue)=>{ | |||
setMinDate(DateUtils.dateStr(newValue)); | |||
}} | |||
InputLabelProps={{ | |||
shrink: true | |||
}} | |||
@@ -100,9 +110,14 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => { | |||
shrink: true | |||
}} | |||
{...register("dateTo")} | |||
InputProps={{inputProps: { min: minDate} }} | |||
onChange={(newValue)=>{ | |||
setMaxDate(DateUtils.dateStr(newValue)); | |||
}} | |||
id="dateTo" | |||
type="date" | |||
label="Submit Date(To)" | |||
defaultValue={searchCriteria.dateTo} | |||
/> | |||
</Grid> | |||
@@ -112,7 +127,12 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => { | |||
{...register("contact")} | |||
id="contact" | |||
label="Conact Person" | |||
defaultValue={searchCriteria.contact} | |||
InputLabelProps={{ | |||
shrink: true | |||
}} | |||
/> | |||
</Grid> | |||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}> | |||
@@ -120,8 +140,10 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => { | |||
{...register("status")} | |||
disablePortal | |||
id="status" | |||
filterOptions={(options)=>options} | |||
options={ComboData.publicNoticeStaticEng} | |||
value={status} | |||
inputValue={status?.label} | |||
onChange={(event, newValue) => { | |||
if (newValue !== null) { | |||
setStatus(newValue); | |||
@@ -132,6 +154,9 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => { | |||
label="Status" | |||
/> | |||
)} | |||
InputLabelProps={{ | |||
shrink: true | |||
}} | |||
/> | |||
</Grid> | |||
@@ -143,20 +168,22 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => { | |||
disablePortal | |||
id="orgId" | |||
options={orgCombo} | |||
inputValue={orgLabel} | |||
value={orgSelected} | |||
inputValue={(orgSelected?.label)?orgSelected?.label: ""} | |||
onChange={(event, newValue) => { | |||
if (newValue !== null) { | |||
setOrgId(newValue); | |||
setOrgLabel(newValue.label); | |||
} else { | |||
setOrgLabel(""); | |||
setOrgSelected(newValue); | |||
} | |||
}} | |||
renderInput={(params) => ( | |||
<TextField {...params} | |||
label="Organization" | |||
InputLabelProps={{ | |||
shrink: true | |||
}} | |||
/> | |||
)} | |||
/> | |||
</Grid> | |||
: <></> | |||
@@ -6,6 +6,7 @@ import MainCard from "components/MainCard"; | |||
import * as UrlUtils from "utils/ApiPathConst"; | |||
import * as React from "react"; | |||
import * as HttpUtils from "utils/HttpUtils"; | |||
import * as DateUtils from "utils/DateUtils"; | |||
import Loadable from 'components/Loadable'; | |||
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); | |||
@@ -18,7 +19,10 @@ const UserSearchPage_Individual = () => { | |||
const [record,setRecord] = React.useState([]); | |||
const [orgCombo,setOrgCombo] = React.useState([]); | |||
const [searchCriteria, setSearchCriteria] = React.useState({}); | |||
const [searchCriteria, setSearchCriteria] = React.useState({ | |||
dateTo: DateUtils.dateStr(new Date()), | |||
dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)), | |||
}); | |||
const [onReady, setOnReady] = React.useState(false); | |||
React.useEffect(() => { | |||
@@ -68,6 +72,7 @@ const UserSearchPage_Individual = () => { | |||
<SearchForm | |||
applySearch={applySearch} | |||
orgComboData={orgCombo} | |||
searchCriteria={searchCriteria} | |||
/> | |||
</Grid> | |||
{/*row 2*/} | |||
@@ -12,6 +12,7 @@ export const country = ["香港","內地","澳門"]; | |||
export const accountFilter = [{ id: 1, key: 1, label: 'Active', type: 'active' }, { id: 2, key: 2, label: 'Locked', type: 'locked' }, { id: 3, key: 3, label: 'Not verified', type: 'notVerified' }]; | |||
export const publicNoticeStatic = [ | |||
{ key: 0, label: '全部', type: 'all' }, | |||
{ key: 1, label: '已提交', type: 'submitted' }, | |||
{ key: 2, label: '已拒絕', type: 'rejected' }, | |||
{ key: 3, label: '已取消', type: 'cancelled' }, | |||
@@ -23,6 +24,7 @@ export const publicNoticeStatic = [ | |||
]; | |||
export const publicNoticeStaticEng = [ | |||
{ key: 0, label: 'All', type: 'all' }, | |||
{ key: 1, label: 'Submitted', type: 'submitted' }, | |||
{ key: 2, label: 'Rejected', type: 'rejected' }, | |||
{ key: 3, label: 'Cancelled', type: 'cancelled' }, | |||