From b8b6a3ac0548cdff1783a538df2de6dcc52402c8 Mon Sep 17 00:00:00 2001 From: anna Date: Mon, 18 Sep 2023 16:21:25 +0800 Subject: [PATCH 1/3] add application gld search --- src/layout/MainLayout/Header/index.js | 420 +++++++++--------- .../ListPanel/PublicNoteStatusUtils.js | 23 +- src/pages/PublicNoticeSearch_GLD/DataGrid.js | 117 +++++ .../PublicNoticeSearch_GLD/SearchForm.js | 193 ++++++++ src/pages/PublicNoticeSearch_GLD/index.js | 90 ++++ src/routes/GLDUserRoutes.js | 5 + src/utils/ApiPathConst.js | 2 + src/utils/ComboData.js | 11 + 8 files changed, 653 insertions(+), 208 deletions(-) create mode 100644 src/pages/PublicNoticeSearch_GLD/DataGrid.js create mode 100644 src/pages/PublicNoticeSearch_GLD/SearchForm.js create mode 100644 src/pages/PublicNoticeSearch_GLD/index.js diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js index 7a62b2e..99a2024 100644 --- a/src/layout/MainLayout/Header/index.js +++ b/src/layout/MainLayout/Header/index.js @@ -1,13 +1,13 @@ import PropTypes from 'prop-types'; import React -,{useState} - from 'react'; -import {useDispatch} from "react-redux"; -import {useNavigate} from "react-router-dom"; +, { useState } + from 'react'; +import { useDispatch } from "react-redux"; +import { useNavigate } from "react-router-dom"; // material-ui // import { useTheme } from '@mui/material/styles'; -import { +import { AppBar, // Container, Typography, @@ -29,7 +29,7 @@ import { IconButton, Drawer, // useMediaQuery - } from '@mui/material'; +} from '@mui/material'; import MenuIcon from '@mui/icons-material/Menu'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; @@ -41,7 +41,7 @@ import AdminLogo from 'components/AdminLogo'; import MobileLogo from 'components/MobileLogo'; import Profile from './HeaderContent/Profile'; import "assets/style/navbarStyles.css"; -import {isUserLoggedIn,isGLDLoggedIn, isPrimaryLoggedIn} from "utils/Utils"; +import { isUserLoggedIn, isGLDLoggedIn, isPrimaryLoggedIn } from "utils/Utils"; import { handleLogoutFunction } from 'auth/index'; // assets @@ -69,77 +69,83 @@ function Header(props) { //await handleLogoutFunction(); navigate('/login'); }; - + const loginContent = ( isGLDLoggedIn() ? -
-
  • - Dashboard -
    • -
  • - Application -
    • -
  • - Proof -
    • -
  • - Payment -
    • -
  • - Client -
      -
    • - Users (GLD) -
      • -
    • - Users (Individual) -
      • -
    • - Users (Organization) -
      • -
    • - Organization -
      • -
    • - User Group -
      • -
    -
    • -
  • - Logout -
    • -
    - : -
    -
  • - 主頁 -
    • -
  • - 我的公共啟事 -
    • -
  • - 校對記錄 -
    • -
  • - 付款記錄 -
    • -
  • - 設定 -
      - { isPrimaryLoggedIn()? -
    • - 公司/機構用戶記錄 -
      • - : - <> - } - -
    -
    • -
  • - 登出 -
    • -
    +
    +
  • + Dashboard +
    • +
  • + Application +
      +
    • + Search Application +
      • + +
    +
    • +
  • + Proof +
    • +
  • + Payment +
    • +
  • + Client +
      +
    • + Users (GLD) +
      • +
    • + Users (Individual) +
      • +
    • + Users (Organization) +
      • +
    • + Organization +
      • +
    • + User Group +
      • +
    +
    • +
  • + Logout +
    • +
    + : +
    +
  • + 主頁 +
    • +
  • + 我的公共啟事 +
    • +
  • + 校對記錄 +
    • +
  • + 付款記錄 +
    • +
  • + 設定 +
      + {isPrimaryLoggedIn() ? +
    • + 公司/機構用戶記錄 +
      • + : + <> + } + +
    +
    • +
  • + 登出 +
    • +
    ); const logoutContent = ( @@ -154,7 +160,7 @@ function Header(props) { ); const drawer = ( - isUserLoggedIn()? + isUserLoggedIn() ? PNSPS @@ -170,7 +176,7 @@ function Header(props) { - : + : PNSPS @@ -185,165 +191,165 @@ function Header(props) { const container = window !== undefined ? () => window().document.body : undefined; return ( - isUserLoggedIn() ? - // User Login success - - - - {isGLDLoggedIn() - ? - - - - + + + {isGLDLoggedIn() + ? + + + + - - - - - PNSPS - - : - - - - - - 公共啟事提交 - 及繳費系統 + + + + + PNSPS + + : + + + + + + 公共啟事提交 + 及繳費系統 + - - - + - - - - - - 公共啟事提交及繳費系統 - - - - } - - + + + + + + 公共啟事提交及繳費系統 + + + + } + + + + + + + + + + + + {drawer} + + + : + + + - - - - - - - - - {drawer} - - - : - - - - - + - - + + 公共啟事提交及繳費系統 - - - - - - 公共啟事提交及繳費系統 - - - - - - {/* */} + + + + + 公共啟事提交及繳費系統 + - - - - - - {drawer} - + + + + {/* */} + + + + + + + {drawer} + + - ); } Header.propTypes = { diff --git a/src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js b/src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js index 6111c8d..134e37d 100644 --- a/src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js +++ b/src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js @@ -21,8 +21,29 @@ export function getStatus(params) { default: return getStatusTag({ text: params.row.status }) } +} - +export function getStatusEng(params) { + switch (params.row.status) { + case "submitted": + return getStatusTag({ color: "#f5a83d", text: "Submitted" }) + case "rejected": + return getStatusTag({ color: "#d9372b", text: "Rejected" }) + case "cancelled": + return getStatusTag({ color: "#757373", text: "Cancelled" }) + case "accepted": + return getStatusTag({ color: "#22a13f", text: "Accepted" }) + case "confirmed": + return getStatusTag({ color: "#22a13f", text: "Confirmed" }) + case "paid": + return getStatusTag({ color: "#22a13f", text: "Paid" }) + case "published": + return getStatusTag({ color: "#f5a83d", text: "Published" }) + case "withdrawn": + return getStatusTag({ color: "#8a8784", text: "Withdrawn" }) + default: + return getStatusTag({ text: params.row.status }) + } } export function getStatusTag({ color = "#000", textColor = "#FFF", text = "" }) { diff --git a/src/pages/PublicNoticeSearch_GLD/DataGrid.js b/src/pages/PublicNoticeSearch_GLD/DataGrid.js new file mode 100644 index 0000000..b1ccdd3 --- /dev/null +++ b/src/pages/PublicNoticeSearch_GLD/DataGrid.js @@ -0,0 +1,117 @@ +// material-ui +import * as React from 'react'; +import { + DataGrid, +} from "@mui/x-data-grid"; +import { + Button +} from '@mui/material'; +import * as DateUtils from "utils/DateUtils"; +import * as StatusUtils from "pages/PublicNotice/ListPanel/PublicNoteStatusUtils"; +// ==============================|| EVENT TABLE ||============================== // + +export default function SearchPublicNoticeTable({ recordList }) { + const [rows, setRows] = React.useState(recordList); + const [rowModesModel] = React.useState({}); + + React.useEffect(() => { + setRows(recordList); + }, [recordList]); + + const columns = [ + { + id: 'appNo', + field: 'appNo', + headerName: 'App No.', + flex: 1, + }, + { + id: 'created', + field: 'created', + headerName: 'Submit Date', + flex: 1, + valueGetter: (params) => { + return DateUtils.datetimeStr(params?.value); + } + }, + { + id: 'contactPerson', + field: 'contactPerson', + headerName: 'Contact Person', + flex: 2, + renderCell: (params) => { + let phone = JSON.parse(params.row.contactTelNo); + let faxNo = JSON.parse(params.row.contactFaxNo); + + let contact = ""; + if (phone) { + contact = "Phone No.: " + phone?.countryCode + " " + phone?.phoneNumber + } + + if (faxNo) { + if (contact != "") + contact = contact + ", " + contact = contact + "Fax No.:" + faxNo?.countryCode + " " + faxNo?.faxNumber + } + + return (<> + {params?.value}
    + {contact} + ); + } + }, + { + id: 'remarks', + field: 'remarks', + headerName: 'Remarks', + flex: 3, + }, + { + id: 'status', + field: 'status', + headerName: 'Status', + width: 100, + renderCell: (params) => { + return [StatusUtils.getStatusEng(params)] + }, + }, + { + field: 'actions', + type: 'actions', + headerName: '', + width: 100, + cellClassName: 'actions', + renderCell: () => { + return ; + }, + } + ]; + + + return ( +
    + + +
    + ); +} diff --git a/src/pages/PublicNoticeSearch_GLD/SearchForm.js b/src/pages/PublicNoticeSearch_GLD/SearchForm.js new file mode 100644 index 0000000..0986703 --- /dev/null +++ b/src/pages/PublicNoticeSearch_GLD/SearchForm.js @@ -0,0 +1,193 @@ +// material-ui +import { + Button, + CardContent, + Grid, TextField, + Autocomplete +} from '@mui/material'; +import MainCard from "components/MainCard"; +import { useForm } from "react-hook-form"; +import * as React from "react"; +import * as ComboData from "utils/ComboData"; +// ==============================|| DASHBOARD - DEFAULT ||============================== // + + +const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => { + + const [type, setType] = React.useState([]); + const [status, setStatus] = React.useState(); + const [orgId, setOrgId] = React.useState(); + const [orgCombo, setOrgCombo] = React.useState(); + + + const { reset, register, handleSubmit } = useForm() + const onSubmit = (data) => { + + let typeArray = []; + + for (let i = 0; i < type.length; i++) { + typeArray.push(type[i].label); + } + + const temp = { + appNo: data.appNo, + dateFrom: data.dateFrom, + dateTo: data.dateTo, + contact: data.contact, + status: status?.type, + orgId:orgId?.key, + }; + applySearch(temp); + }; + + React.useEffect(()=>{ + if(orgComboData && orgComboData.length>0){ + setOrgCombo(orgComboData); + } + },[orgComboData]); + + function resetForm() { + setType([]); + setStatus(); + setOrgId(); + reset(); + } + + return ( + + +
    + {/*row 1*/} + + + Search Form + + + + {/*row 2*/} + + + + + + + + + + + + + + + + + + + { + if (newValue !== null) { + setStatus(newValue); + } + }} + renderInput={(params) => ( + + )} + /> + + + + option.label || ""} + onChange={(event, newValue) => { + if (newValue !== null) { + setOrgId(newValue); + } + }} + renderInput={(params) => ( + + )} + /> + + + + + + {/*last row*/} + + + + + + + + + + +
    +     + ); +}; + +export default SearchPublicNoticeForm; diff --git a/src/pages/PublicNoticeSearch_GLD/index.js b/src/pages/PublicNoticeSearch_GLD/index.js new file mode 100644 index 0000000..cc7673b --- /dev/null +++ b/src/pages/PublicNoticeSearch_GLD/index.js @@ -0,0 +1,90 @@ +// material-ui +import { + Grid +} from '@mui/material'; +import MainCard from "components/MainCard"; +import * as UrlUtils from "utils/ApiPathConst"; +import * as React from "react"; +import * as HttpUtils from "utils/HttpUtils"; + +import Loadable from 'components/Loadable'; +const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); +const SearchForm = Loadable(React.lazy(() => import('./SearchForm'))); +const EventTable = Loadable(React.lazy(() => import('./DataGrid'))); + +// ==============================|| DASHBOARD - DEFAULT ||============================== // + +const UserSearchPage_Individual = () => { + + const [record,setRecord] = React.useState([]); + const [orgCombo,setOrgCombo] = React.useState([]); + const [searchCriteria, setSearchCriteria] = React.useState({}); + const [onReady, setOnReady] = React.useState(false); + + React.useEffect(() => { + getUserList(); + getOrgCombo(); + }, []); + + React.useEffect(() => { + setOnReady(true); + }, [orgCombo]); + + React.useEffect(() => { + getUserList(); + }, [searchCriteria]); + + function getUserList(){ + HttpUtils.get({ + url: UrlUtils.GET_PUBLIC_NOTICE_LIST, + params: searchCriteria, + onSuccess: function(responseData){ + setRecord(responseData); + } + }); + } + + function getOrgCombo(){ + HttpUtils.get({ + url: UrlUtils.GET_ORG_COMBO, + onSuccess: function(responseData){ + let combo = responseData; + setOrgCombo(combo); + } + }); + } + + function applySearch(input) { + setSearchCriteria(input); + } + + return ( + !onReady ? + + : + + {/*row 1*/} + + + + {/*row 2*/} + + + + + + + + + ); +}; + +export default UserSearchPage_Individual; diff --git a/src/routes/GLDUserRoutes.js b/src/routes/GLDUserRoutes.js index cf9392b..91d3bb9 100644 --- a/src/routes/GLDUserRoutes.js +++ b/src/routes/GLDUserRoutes.js @@ -8,6 +8,7 @@ const MainLayout = Loadable(lazy(() => import('layout/MainLayout'))); // render - dashboard const DashboardDefault = Loadable(lazy(() => import('pages/gldDashboard'))); const ApplicationDetail = Loadable(lazy(() => import('pages/gldApplicationDetailPage'))); +const ApplicationSearch = Loadable(lazy(() => import('pages/PublicNoticeSearch_GLD'))); // ==============================|| MAIN ROUTING ||============================== // const GLDUserRoutes = { @@ -28,6 +29,10 @@ const GLDUserRoutes = { { path: '/application/:id', element: + }, + { + path: '/application/search', + element: } ] }, diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js index 0b5ce85..bdeadd5 100644 --- a/src/utils/ApiPathConst.js +++ b/src/utils/ApiPathConst.js @@ -24,6 +24,8 @@ export const GET_ORG_USER_PATH = apiPath+'/user/org'; export const GET_ORG_PATH = apiPath+'/org'; export const GET_ORG_FROM_USER_PATH = apiPath+'/org/from-user'; export const POST_ORG_SAVE_PATH = apiPath+'/org/save'; +export const GET_ORG_COMBO = apiPath+'/org/combo'; + //File Up/Download diff --git a/src/utils/ComboData.js b/src/utils/ComboData.js index 4956a71..9794148 100644 --- a/src/utils/ComboData.js +++ b/src/utils/ComboData.js @@ -22,6 +22,17 @@ export const publicNoticeStatic = [ { key: 8, label: '已撤銷', type: 'withdrawn' }, ]; +export const publicNoticeStaticEng = [ + { key: 1, label: 'Submitted', type: 'submitted' }, + { key: 2, label: 'Rejected', type: 'rejected' }, + { key: 3, label: 'Cancelled', type: 'cancelled' }, + { key: 4, label: 'Accepted', type: 'accepted' }, + { key: 5, label: 'Confirmed', type: 'confirmed' }, + { key: 6, label: 'Paid', type: 'paid' }, + { key: 7, label: 'Published', type: 'published' }, + { key: 8, label: 'Withdrawn', type: 'withdrawn' }, +]; + export const groupTitle = [ { key: 1, label: 'Private Bill', type: 'A' }, { key: 2, label: 'Companies Ordinance', type: 'B' }, From d3f863f856df540c26f48726b332c7870da8e34f Mon Sep 17 00:00:00 2001 From: anna Date: Mon, 18 Sep 2023 17:32:15 +0800 Subject: [PATCH 2/3] fix bug --- src/layout/MainLayout/Header/index.js | 420 +++++++++--------- src/pages/ManageOrgUserPage/index.js | 2 +- src/pages/PublicNotice/ListPanel/BaseGrid.js | 14 +- .../ListPanel/PendingPaymentTab.js | 13 +- .../ListPanel/PublicNoteStatusUtils.js | 2 +- src/pages/PublicNoticeSearch_GLD/DataGrid.js | 1 - .../PublicNoticeSearch_GLD/SearchForm.js | 56 ++- 7 files changed, 264 insertions(+), 244 deletions(-) diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js index 99a2024..7a62b2e 100644 --- a/src/layout/MainLayout/Header/index.js +++ b/src/layout/MainLayout/Header/index.js @@ -1,13 +1,13 @@ import PropTypes from 'prop-types'; import React -, { useState } - from 'react'; -import { useDispatch } from "react-redux"; -import { useNavigate } from "react-router-dom"; +,{useState} + from 'react'; +import {useDispatch} from "react-redux"; +import {useNavigate} from "react-router-dom"; // material-ui // import { useTheme } from '@mui/material/styles'; -import { +import { AppBar, // Container, Typography, @@ -29,7 +29,7 @@ import { IconButton, Drawer, // useMediaQuery -} from '@mui/material'; + } from '@mui/material'; import MenuIcon from '@mui/icons-material/Menu'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; @@ -41,7 +41,7 @@ import AdminLogo from 'components/AdminLogo'; import MobileLogo from 'components/MobileLogo'; import Profile from './HeaderContent/Profile'; import "assets/style/navbarStyles.css"; -import { isUserLoggedIn, isGLDLoggedIn, isPrimaryLoggedIn } from "utils/Utils"; +import {isUserLoggedIn,isGLDLoggedIn, isPrimaryLoggedIn} from "utils/Utils"; import { handleLogoutFunction } from 'auth/index'; // assets @@ -69,83 +69,77 @@ function Header(props) { //await handleLogoutFunction(); navigate('/login'); }; - + const loginContent = ( isGLDLoggedIn() ? -
    -
  • - Dashboard -
    • -
  • - Application -
      -
    • - Search Application -
      • - -
    -
    • -
  • - Proof -
    • -
  • - Payment -
    • -
  • - Client -
      -
    • - Users (GLD) -
      • -
    • - Users (Individual) -
      • -
    • - Users (Organization) -
      • -
    • - Organization -
      • -
    • - User Group -
      • -
    -
    • -
  • - Logout -
    • -
    - : -
    -
  • - 主頁 -
    • -
  • - 我的公共啟事 -
    • -
  • - 校對記錄 -
    • -
  • - 付款記錄 -
    • -
  • - 設定 -
      - {isPrimaryLoggedIn() ? -
    • - 公司/機構用戶記錄 -
      • - : - <> - } - -
    -
    • -
  • - 登出 -
    • -
    +
    +
  • + Dashboard +
    • +
  • + Application +
    • +
  • + Proof +
    • +
  • + Payment +
    • +
  • + Client +
      +
    • + Users (GLD) +
      • +
    • + Users (Individual) +
      • +
    • + Users (Organization) +
      • +
    • + Organization +
      • +
    • + User Group +
      • +
    +
    • +
  • + Logout +
    • +
    + : +
    +
  • + 主頁 +
    • +
  • + 我的公共啟事 +
    • +
  • + 校對記錄 +
    • +
  • + 付款記錄 +
    • +
  • + 設定 +
      + { isPrimaryLoggedIn()? +
    • + 公司/機構用戶記錄 +
      • + : + <> + } + +
    +
    • +
  • + 登出 +
    • +
    ); const logoutContent = ( @@ -160,7 +154,7 @@ function Header(props) { ); const drawer = ( - isUserLoggedIn() ? + isUserLoggedIn()? PNSPS @@ -176,7 +170,7 @@ function Header(props) { - : + : PNSPS @@ -191,165 +185,165 @@ function Header(props) { const container = window !== undefined ? () => window().document.body : undefined; return ( - isUserLoggedIn() ? - // User Login success - - - - {isGLDLoggedIn() - ? - - - - + + + {isGLDLoggedIn() + ? + + + + - - - - - PNSPS - - : - - - - - - 公共啟事提交 - 及繳費系統 - + + + + + PNSPS + + : + + + + + + 公共啟事提交 + 及繳費系統 - - + + - - - - - - 公共啟事提交及繳費系統 - - - - } - - - - - - - - - - - - {drawer} - - - : - - - + + + + + + 公共啟事提交及繳費系統 + + + + } + + - + + + + + + + + + {drawer} + + + : + + + + + - - + + 公共啟事提交及繳費系統 - - - - - - 公共啟事提交及繳費系統 - + + + + + 公共啟事提交及繳費系統 + + + + + + {/* */} - - - - {/* */} - - - - - - - {drawer} - - + + + + + + {drawer} + + ); } Header.propTypes = { diff --git a/src/pages/ManageOrgUserPage/index.js b/src/pages/ManageOrgUserPage/index.js index f7f8198..4a47da4 100644 --- a/src/pages/ManageOrgUserPage/index.js +++ b/src/pages/ManageOrgUserPage/index.js @@ -73,7 +73,7 @@ const ManageOrgUserPage = () => { function getStatusTag({color="#000", textColor="#FFF",text=""}){ return ( -
    {text}
    +
    {text}
    ) } diff --git a/src/pages/PublicNotice/ListPanel/BaseGrid.js b/src/pages/PublicNotice/ListPanel/BaseGrid.js index f1c7d2a..85001ff 100644 --- a/src/pages/PublicNotice/ListPanel/BaseGrid.js +++ b/src/pages/PublicNotice/ListPanel/BaseGrid.js @@ -72,9 +72,8 @@ export default function BaseGrid({rows}) { }, { field: 'actions', - type: 'actions', headerName: '', - width: 50, + width: 80, cellClassName: 'actions', renderCell: () => { return ; @@ -83,7 +82,7 @@ export default function BaseGrid({rows}) { ]; return ( -
    +
    ); diff --git a/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js b/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js index 91ffc46..1c6b97f 100644 --- a/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js +++ b/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js @@ -80,7 +80,7 @@ export default function SubmittedTab({ rows }) { field: 'actions', type: 'actions', headerName: '', - width: 50, + width: 100, cellClassName: 'actions', renderCell: () => { return ; @@ -105,7 +105,7 @@ export default function SubmittedTab({ rows }) { return ( <> -
    +
    { setSelectedRowItems(newSelection); }} + sx={{ + margin: "4 2 4 2", + boxShadow: 1, + border: 1, + borderColor: '#DDD', + '& .super-app-theme--header': { + backgroundColor: '#EEE', + }, + }} />
    diff --git a/src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js b/src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js index 134e37d..2886144 100644 --- a/src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js +++ b/src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js @@ -48,6 +48,6 @@ export function getStatusEng(params) { export function getStatusTag({ color = "#000", textColor = "#FFF", text = "" }) { return ( -
    {text}
    +
    {text}
    ) } \ No newline at end of file diff --git a/src/pages/PublicNoticeSearch_GLD/DataGrid.js b/src/pages/PublicNoticeSearch_GLD/DataGrid.js index b1ccdd3..fd380b1 100644 --- a/src/pages/PublicNoticeSearch_GLD/DataGrid.js +++ b/src/pages/PublicNoticeSearch_GLD/DataGrid.js @@ -77,7 +77,6 @@ export default function SearchPublicNoticeTable({ recordList }) { }, { field: 'actions', - type: 'actions', headerName: '', width: 100, cellClassName: 'actions', diff --git a/src/pages/PublicNoticeSearch_GLD/SearchForm.js b/src/pages/PublicNoticeSearch_GLD/SearchForm.js index 0986703..bb5d577 100644 --- a/src/pages/PublicNoticeSearch_GLD/SearchForm.js +++ b/src/pages/PublicNoticeSearch_GLD/SearchForm.js @@ -16,6 +16,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => { const [type, setType] = React.useState([]); const [status, setStatus] = React.useState(); + const [orgLabel, setOrgLabel] = React.useState(); const [orgId, setOrgId] = React.useState(); const [orgCombo, setOrgCombo] = React.useState(); @@ -35,21 +36,23 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => { dateTo: data.dateTo, contact: data.contact, status: status?.type, - orgId:orgId?.key, + orgId: orgId?.key, }; applySearch(temp); }; - React.useEffect(()=>{ - if(orgComboData && orgComboData.length>0){ + React.useEffect(() => { + if (orgComboData && orgComboData.length > 0) { setOrgCombo(orgComboData); } - },[orgComboData]); + }, [orgComboData]); function resetForm() { setType([]); setStatus(); setOrgId(); + setOrgLabel(""); + //orgComboRef.current.clearValue(); reset(); } @@ -132,26 +135,33 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => { /> - - option.label || ""} - onChange={(event, newValue) => { - if (newValue !== null) { - setOrgId(newValue); - } - }} - renderInput={(params) => ( - + { + if (newValue !== null) { + setOrgId(newValue); + setOrgLabel(newValue.label); + } else { + setOrgLabel(""); + } + }} + renderInput={(params) => ( + + )} /> - )} - /> - + + : <> + } + From 688f0e36d31fee0058ca1f3add4e183c9fed46af Mon Sep 17 00:00:00 2001 From: anna Date: Mon, 18 Sep 2023 17:36:53 +0800 Subject: [PATCH 3/3] update ui --- src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js index 620579a..f58db4e 100644 --- a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js +++ b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js @@ -51,7 +51,7 @@ const SearchPublicNoticeForm = ({ applySearch }) => { {/*row 1*/} - Search Form + 搜尋 @@ -144,7 +144,7 @@ const SearchPublicNoticeForm = ({ applySearch }) => { textTransform: 'capitalize', alignItems: 'end' }}> - Clear + 重置 @@ -157,7 +157,7 @@ const SearchPublicNoticeForm = ({ applySearch }) => { textTransform: 'capitalize', alignItems: 'end' }}> - Submit + 搜尋