From 2592e26ab0465a5892604b5bc73747f515718a00 Mon Sep 17 00:00:00 2001 From: anna Date: Wed, 27 Sep 2023 15:39:57 +0800 Subject: [PATCH] add proof search --- src/layout/MainLayout/Header/index.js | 2 +- src/pages/ProofSearch/DataGrid.js | 136 +++++++++++ src/pages/ProofSearch/SearchForm.js | 322 ++++++++++++++++++++++++++ src/pages/ProofSearch/index.js | 127 ++++++++++ src/routes/GLDUserRoutes.js | 5 + 5 files changed, 591 insertions(+), 1 deletion(-) create mode 100644 src/pages/ProofSearch/DataGrid.js create mode 100644 src/pages/ProofSearch/SearchForm.js create mode 100644 src/pages/ProofSearch/index.js diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js index 77bc603..f97636d 100644 --- a/src/layout/MainLayout/Header/index.js +++ b/src/layout/MainLayout/Header/index.js @@ -80,7 +80,7 @@ function Header(props) { Application
  • - Proof + Proof
  • Payment diff --git a/src/pages/ProofSearch/DataGrid.js b/src/pages/ProofSearch/DataGrid.js new file mode 100644 index 0000000..7f0fc11 --- /dev/null +++ b/src/pages/ProofSearch/DataGrid.js @@ -0,0 +1,136 @@ +// material-ui +import * as React from 'react'; +import { + Button +} from '@mui/material'; +import * as DateUtils from "utils/DateUtils"; +import {useNavigate} from "react-router-dom"; +import {FiDataGrid} from "components/FiDataGrid"; +// ==============================|| EVENT TABLE ||============================== // + +export default function SearchPublicNoticeTable({ recordList }) { + const [rows, setRows] = React.useState(recordList); + const navigate = useNavigate() + + React.useEffect(() => { + setRows(recordList); + }, [recordList]); + + const handleEditClick = (params) => () => { + navigate('/application/'+ params.id); + }; + + + const columns = [ + { + field: 'actions', + headerName: 'Proof No.', + width: 150, + cellClassName: 'actions', + renderCell: (params) => { + return ; + }, + }, + { + id: 'appId', + field: 'appId', + headerName: 'Application No./ Gazette Code/ Gazette Issue', + flex: 1, + renderCell: (params) => { + let appNo = ""; + let code = ""; + let isssue = params.row.issueYear + +" Vol. "+zeroPad(params.row.issueVolume,3) + +", No. "+zeroPad(params.row.issueNo,2) + +", "+DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)"); + + return [appNo+" ("+code+")"+isssue] + }, + }, + { + id: 'created', + field: 'created', + headerName: 'Proof Date', + flex: 1, + valueGetter: (params) => { + return DateUtils.datetimeStr(params?.value); + } + }, + { + id: 'created', + field: 'created', + headerName: 'Confirmed/Return Date', + flex: 1, + valueGetter: (params) => { + return DateUtils.datetimeStr(params?.value); + } + }, + { + id: 'contactPerson', + field: 'contactPerson', + headerName: 'Contact Person', + flex: 1, + renderCell: (params) => { + let company = params.row.enCompanyName!= null ?" ("+(params.row.enCompanyName)+")":""; + + 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 && faxNo?.faxNumber) { + if (contact != "") + contact = contact + ", " + contact = contact + "Fax No.:" + faxNo?.countryCode + " " + faxNo?.faxNumber + } + + return (<> + {params?.value + company}
    + {contact} + ); + } + }, + { + id: 'groupNo', + field: 'groupNo', + headerName: 'Gazette Group', + flex: 1, + valueGetter: (params) => { + return (params?.value)?(params?.value):""; + } + }, + { + id: 'fee', + field: 'fee', + headerName: 'Fee', + flex: 1, + valueGetter: (params) => { + return (params?.value)?(params?.value):""; + } + }, + ]; + + function zeroPad(num, places) { + num=num?num:0; + var zero = places - num.toString().length + 1; + return Array(+(zero > 0 && zero)).join("0") + num; + } + + return ( +
    + + +
    + ); +} diff --git a/src/pages/ProofSearch/SearchForm.js b/src/pages/ProofSearch/SearchForm.js new file mode 100644 index 0000000..dd28775 --- /dev/null +++ b/src/pages/ProofSearch/SearchForm.js @@ -0,0 +1,322 @@ +// 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"; +import * as DateUtils from "utils/DateUtils"; +// ==============================|| DASHBOARD - DEFAULT ||============================== // + + +const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria,issueComboData + }) => { + + const [type, setType] = React.useState([]); + const [status, setStatus] = React.useState({ key: 0, label: 'All', type: 'all' }); + const [orgSelected, setOrgSelected] = React.useState({}); + const [orgCombo, setOrgCombo] = React.useState(); + const [issueSelected, setIssueSelected] = React.useState({}); + const [issueCombo, setIssueCombo] = React.useState([]); + const [groupSelected, setGroupSelected] = React.useState({}); + + const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom); + const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo); + + + 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 = { + refNo: data.refNo, + code: data.code, + issueId: issueSelected?.id, + gazettGroup: groupSelected?.type, + dateFrom: data.dateFrom, + dateTo: data.dateTo, + contact: data.contact, + status: (status?.type && status?.type != 'all') ? status?.type : "", + orgId: (orgSelected?.key && orgSelected?.key > 0) ? orgSelected?.key : "", + + }; + applySearch(temp); + }; + + React.useEffect(() => { + if (orgComboData && orgComboData.length > 0) { + setOrgCombo(orgComboData); + } + }, [orgComboData]); + + React.useEffect(() => { + if (issueComboData && issueComboData.length > 0) { + setIssueCombo(issueComboData); + } + }, [issueComboData]); + + function resetForm() { + setType([]); + setStatus({ key: 0, label: 'All', type: 'all' }); + setOrgSelected({}); + setIssueSelected({}); + setGroupSelected({}); + reset(); + } + + function getIssueLabel(data){ + if(data=={}) return ""; + return data.year + +" Vol. "+zeroPad(data.volume,3) + +", No. "+zeroPad(data.issueNo,2) + +", "+DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)"); + } + + function zeroPad(num, places) { + num=num?num:0; + var zero = places - num.toString().length + 1; + return Array(+(zero > 0 && zero)).join("0") + num; + } + + return ( + + +
    + {/*row 1*/} + + + Search Form + + + + {/*row 2*/} + + + + + + + + + + + getIssueLabel(option)} + onChange={(event, newValue) => { + if (newValue !== null) { + setIssueSelected(newValue); + } + }} + renderInput={(params) => ( + + )} + /> + + + + option.label} + onChange={(event, newValue) => { + if (newValue !== null) { + setGroupSelected(newValue); + } + }} + renderInput={(params) => ( + + )} + /> + + + + { + setMinDate(DateUtils.dateStr(newValue)); + }} + InputLabelProps={{ + shrink: true + }} + /> + + + + { + setMaxDate(DateUtils.dateStr(newValue)); + }} + id="dateTo" + type="date" + label="Proof Date(To)" + defaultValue={searchCriteria.dateTo} + /> + + + + + + + + + options} + options={ComboData.publicNoticeStaticEng} + value={status} + inputValue={status?.label} + onChange={(event, newValue) => { + if (newValue !== null) { + setStatus(newValue); + } + }} + renderInput={(params) => ( + + )} + InputLabelProps={{ + shrink: true + }} + /> + + + { + orgCombo ? + + { + if (newValue !== null) { + setOrgSelected(newValue); + } + }} + renderInput={(params) => ( + + )} + /> + + : <> + } + + + + + + {/*last row*/} + + + + + + + + + + +
    +     + ); +}; + +export default SearchPublicNoticeForm; diff --git a/src/pages/ProofSearch/index.js b/src/pages/ProofSearch/index.js new file mode 100644 index 0000000..883e0e5 --- /dev/null +++ b/src/pages/ProofSearch/index.js @@ -0,0 +1,127 @@ +// material-ui +import { + Grid, + Typography, + Stack +} 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 * as DateUtils from "utils/DateUtils"; + +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'))); +import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' + +const BackgroundHead = { + backgroundImage: `url(${titleBackgroundImg})`, + width: '100%', + height: '100%', + backgroundSize:'contain', + backgroundRepeat: 'no-repeat', + backgroundColor: '#0C489E', + backgroundPosition: 'right' +} + +// ==============================|| DASHBOARD - DEFAULT ||============================== // + +const UserSearchPage_Individual = () => { + + const [record,setRecord] = React.useState([]); + const [orgCombo,setOrgCombo] = React.useState([]); + const [issueCombo,setIssueCombo] = 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(() => { + getUserList(); + getOrgCombo(); + getIssueCombo(); + }, []); + + React.useEffect(() => { + setOnReady(true); + }, [record]); + + 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 getIssueCombo(){ + HttpUtils.get({ + url: UrlUtils.GET_ISSUE_COMBO, + onSuccess: function(responseData){ + let combo = responseData; + setIssueCombo(combo); + } + }); + } + + + function applySearch(input) { + setSearchCriteria(input); + } + + return ( + !onReady ? + + : + + +
    + + Proof + +
    +     + {/*row 1*/} + + + + {/*row 2*/} + + + + + +     + ); +}; + +export default UserSearchPage_Individual; diff --git a/src/routes/GLDUserRoutes.js b/src/routes/GLDUserRoutes.js index 3a19c2d..aa47135 100644 --- a/src/routes/GLDUserRoutes.js +++ b/src/routes/GLDUserRoutes.js @@ -9,6 +9,7 @@ const MainLayout = Loadable(lazy(() => import('layout/MainLayout'))); const DashboardDefault = Loadable(lazy(() => import('pages/gldDashboard'))); const ApplicationDetail = Loadable(lazy(() => import('pages/PublicNoticeDetail_GLD'))); const ApplicationSearch = Loadable(lazy(() => import('pages/PublicNoticeSearch_GLD'))); +const ProofSearch = Loadable(lazy(() => import('pages/ProofSearch'))); // ==============================|| MAIN ROUTING ||============================== // const GLDUserRoutes = { @@ -33,6 +34,10 @@ const GLDUserRoutes = { { path: '/application/search', element: + }, + { + path: '/proof/search', + element: } ] },