| @@ -107,24 +107,39 @@ function Header(props) { | |||||
| <li> | <li> | ||||
| <Link className="paymentTop" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Payment</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1vw' }} /></Link> | <Link className="paymentTop" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Payment</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1vw' }} /></Link> | ||||
| <ul className='dropdown'> | <ul className='dropdown'> | ||||
| { | |||||
| isGranted("MAINTAIN_DEMANDNOTE") ? | |||||
| <li> | |||||
| <Link className="exportDemandNote" to='/paymentPage/exportGDN' ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Export for GDN</Typography></Link> | |||||
| </li> | |||||
| : | |||||
| <></> | |||||
| } | |||||
| { | { | ||||
| isGranted("MAINTAIN_PAYMENT") ? | isGranted("MAINTAIN_PAYMENT") ? | ||||
| <li> | <li> | ||||
| <Link className="payment" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Online Payment Record</Typography></Link> | |||||
| <Link className="application" to='/application/markAsPaid/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Mark Payment</Typography></Link> | |||||
| </li> | </li> | ||||
| : | : | ||||
| <></> | <></> | ||||
| } | } | ||||
| { | |||||
| isGranted("MAINTAIN_PAYMENT") ? | |||||
| <li> | |||||
| <Link className="payment" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Online Payment Record</Typography></Link> | |||||
| </li> | |||||
| : | |||||
| <></> | |||||
| } | |||||
| { | { | ||||
| isGranted("MAINTAIN_RECON") ? | isGranted("MAINTAIN_RECON") ? | ||||
| <> | <> | ||||
| <li> | <li> | ||||
| <Link className="downloadXML" to='/gfmis/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>GFMIS Generate XML</Typography></Link> | <Link className="downloadXML" to='/gfmis/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>GFMIS Generate XML</Typography></Link> | ||||
| </li> | </li> | ||||
| <li> | |||||
| <Link className="reconReport" to='/paymentPage/reconReport'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Recon Report</Typography></Link> | |||||
| </li> | |||||
| </> | </> | ||||
| : | : | ||||
| @@ -148,15 +163,18 @@ function Header(props) { | |||||
| : | : | ||||
| <></> | <></> | ||||
| } | } | ||||
| { | |||||
| isGranted("MAINTAIN_RECON") ? | |||||
| <> | |||||
| <li> | |||||
| <Link className="reconReport" to='/paymentPage/reconReport'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Recon Report</Typography></Link> | |||||
| </li> | |||||
| </> | |||||
| { | |||||
| isGranted("MAINTAIN_DEMANDNOTE") ? | |||||
| <li> | |||||
| <Link className="exportDemandNote" to='/paymentPage/exportGDN' ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Export for GDN</Typography></Link> | |||||
| </li> | |||||
| : | : | ||||
| <></> | <></> | ||||
| } | } | ||||
| </ul> | </ul> | ||||
| </li> | </li> | ||||
| @@ -117,6 +117,10 @@ const ApplicationDetailCard = ( | |||||
| setStatus("publish") | setStatus("publish") | ||||
| } | } | ||||
| const revokeClick = () => () => { | |||||
| setStatus("revoke") | |||||
| }; | |||||
| const onProofClick = () => { | const onProofClick = () => { | ||||
| if (applicationDetailData.data.groupNo) { | if (applicationDetailData.data.groupNo) { | ||||
| HttpUtils.get({ | HttpUtils.get({ | ||||
| @@ -264,6 +268,18 @@ const ApplicationDetailCard = ( | |||||
| ( | ( | ||||
| (currentApplicationDetailData.status == "paid" && currentApplicationDetailData.creditor == 0) ? | (currentApplicationDetailData.status == "paid" && currentApplicationDetailData.creditor == 0) ? | ||||
| <> | <> | ||||
| <Button | |||||
| // size="large" | |||||
| variant="contained" | |||||
| onClick={revokeClick()} | |||||
| sx={{ | |||||
| textTransform: 'capitalize', | |||||
| alignItems: 'end', | |||||
| backgroundColor: '#ffa733' | |||||
| }}> | |||||
| <ReplayIcon /> | |||||
| <Typography ml={1} variant="h5">Revoke Payment</Typography> | |||||
| </Button> | |||||
| <Button | <Button | ||||
| // size="large" | // size="large" | ||||
| variant="contained" | variant="contained" | ||||
| @@ -33,7 +33,8 @@ import { | |||||
| SET_PUBLIC_NOTICE_STATUS_WITHDRAW, | SET_PUBLIC_NOTICE_STATUS_WITHDRAW, | ||||
| SET_PUBLIC_NOTICE_STATUS_RESUBMIT, | SET_PUBLIC_NOTICE_STATUS_RESUBMIT, | ||||
| SET_PUBLIC_NOTICE_STATUS_REVIEWED, | SET_PUBLIC_NOTICE_STATUS_REVIEWED, | ||||
| SET_PUBLIC_NOTICE_STATUS_PUBLISH | |||||
| SET_PUBLIC_NOTICE_STATUS_PUBLISH, | |||||
| SET_PUBLIC_NOTICE_STATUS_REVOKE | |||||
| } from "utils/ApiPathConst"; | } from "utils/ApiPathConst"; | ||||
| const StatusChangeDialog = Loadable(lazy(() => import('./StatusChangeDialog'))); | const StatusChangeDialog = Loadable(lazy(() => import('./StatusChangeDialog'))); | ||||
| import * as DateUtils from "utils/DateUtils"; | import * as DateUtils from "utils/DateUtils"; | ||||
| @@ -187,6 +188,8 @@ const PublicNoticeDetail_GLD = () => { | |||||
| onReSubmitClick(getReason); | onReSubmitClick(getReason); | ||||
| } else if (getStatus == "publish") { | } else if (getStatus == "publish") { | ||||
| onPublishClick(); | onPublishClick(); | ||||
| } else if (getStatus == "revoke") { | |||||
| onRevokeClick(); | |||||
| } | } | ||||
| } | } | ||||
| }, [statusWindowAccepted]); | }, [statusWindowAccepted]); | ||||
| @@ -310,6 +313,19 @@ const PublicNoticeDetail_GLD = () => { | |||||
| } | } | ||||
| }; | }; | ||||
| const onRevokeClick = () => { | |||||
| if (params.id <= 0) return; | |||||
| HttpUtils.get({ | |||||
| url: `${SET_PUBLIC_NOTICE_STATUS_REVOKE}/${params.id}`, | |||||
| onSuccess: function () { | |||||
| setOpen(false); | |||||
| handleClose(); | |||||
| loadApplicationDetail() | |||||
| notifySaveSuccess() | |||||
| } | |||||
| }); | |||||
| } | |||||
| useEffect(() => { | useEffect(() => { | ||||
| const status = applicationDetailData.data != undefined ? applicationDetailData.data.status : "" | const status = applicationDetailData.data != undefined ? applicationDetailData.data.status : "" | ||||
| if (status === "submitted" && params.id > 0 && getUploadStatus) { | if (status === "submitted" && params.id > 0 && getUploadStatus) { | ||||
| @@ -354,7 +370,7 @@ const PublicNoticeDetail_GLD = () => { | |||||
| </Grid> | </Grid> | ||||
| <Grid item xs={12} sm={12} md={12} lg={12}> | <Grid item xs={12} sm={12} md={12} lg={12}> | ||||
| <Stack direction="row"> | <Stack direction="row"> | ||||
| <Button title="Back" sx={{ ml: 3.5, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/application/search") }}> | |||||
| <Button title="Back" sx={{ ml: 3.5, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }}> | |||||
| <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} /> | <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} /> | ||||
| </Button> | </Button> | ||||
| <Typography ml={4} mt={3} variant="h4">{title}</Typography> | <Typography ml={4} mt={3} variant="h4">{title}</Typography> | ||||
| @@ -0,0 +1,251 @@ | |||||
| // material-ui | |||||
| import * as React from 'react'; | |||||
| import { | |||||
| //Link, | |||||
| Button, | |||||
| Grid, | |||||
| Typography, | |||||
| Stack, | |||||
| Dialog, DialogTitle, DialogContent, DialogActions, | |||||
| } from '@mui/material'; | |||||
| import { | |||||
| // GET_PUBLIC_NOTICE_LIST, | |||||
| SET_PUBLIC_NOTICE_STATUS_MARK_AS_PAID, | |||||
| GET_PUBLIC_NOTICE_OFFLINE_PAYMENT_LIST } from "utils/ApiPathConst"; | |||||
| import * as HttpUtils from "utils/HttpUtils"; | |||||
| import * as DateUtils from "utils/DateUtils"; | |||||
| import * as FormatUtils from "utils/FormatUtils"; | |||||
| // import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils"; | |||||
| import { useNavigate } from "react-router-dom"; | |||||
| import { FiDataGrid } from "components/FiDataGrid"; | |||||
| import { notifyActionSuccess, clickableLink } from 'utils/CommonFunction'; | |||||
| import { FormattedMessage, useIntl } from "react-intl"; | |||||
| import * as utils from "auth/utils" | |||||
| // ==============================|| EVENT TABLE ||============================== // | |||||
| export default function SearchPublicNoticeTable({ searchCriteria }) { | |||||
| const [rows, setRows] = React.useState([]); | |||||
| const navigate = useNavigate() | |||||
| const [selectedRowItems, setSelectedRowItems] = React.useState([]); | |||||
| const [isConfirmPopUp, setIsConfirmPopUp] = React.useState(false); | |||||
| const [isWarningPopUp, setIsWarningPopUp] = React.useState(false); | |||||
| const intl = useIntl(); | |||||
| const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria); | |||||
| React.useEffect(() => { | |||||
| set_searchCriteria(searchCriteria); | |||||
| }, [searchCriteria]); | |||||
| function genIssueNo(params) { | |||||
| const issueNo = params.row.issueYear + " Vol. " + FormatUtils.zeroPad(params.row.issueVolume, 3) + ", No. " + FormatUtils.zeroPad(params.row.issueNo, 2) + ", " + DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)") | |||||
| return issueNo | |||||
| } | |||||
| function genGroupNo(params) { | |||||
| let groupNo = params.row.groupNo | |||||
| if (groupNo != null) { | |||||
| groupNo = <><br /><div>{groupNo}</div></> | |||||
| } | |||||
| return groupNo | |||||
| } | |||||
| const columns = [ | |||||
| { | |||||
| field: 'actions', | |||||
| headerName: 'Application No.', | |||||
| sortable: false, | |||||
| width: 150, | |||||
| cellClassName: 'actions', | |||||
| renderCell: (params) => { | |||||
| return clickableLink('/application/' + params.id, params.row.appNo); | |||||
| }, | |||||
| }, | |||||
| { | |||||
| id: 'contactPerson', | |||||
| field: 'contactPerson', | |||||
| headerName: 'Customer Name', | |||||
| flex: 1, | |||||
| minWidth: 50, | |||||
| renderCell: (params) => { | |||||
| let company = params.row.enCompanyName != null ? params.row.enCompanyName : params.row.chCompanyName; | |||||
| company = company != null ? company : ""; | |||||
| if (params.row.sysType != null && params.row.sysType == "dummy"){ | |||||
| company = params.row.contactPerson | |||||
| } | |||||
| return <div> | |||||
| {company} | |||||
| </div>; | |||||
| } | |||||
| }, | |||||
| { | |||||
| id: 'issueNoAndCode', | |||||
| field: 'issueNoAndCode', | |||||
| headerName: 'Gazette Issue No. / Gazette Code', | |||||
| sortable: false, | |||||
| flex: 1.5, | |||||
| minWidth: 350, | |||||
| renderCell: (params) => ( | |||||
| <div> | |||||
| {genIssueNo(params)} | |||||
| {genGroupNo(params)} | |||||
| </div> | |||||
| ) | |||||
| }, | |||||
| { | |||||
| id: 'paymentMethod', | |||||
| field: 'paymentMethod', | |||||
| headerName: 'Payment Method', | |||||
| sortable: false, | |||||
| minWidth: 250, | |||||
| flex: 2, | |||||
| renderCell: (params) => { | |||||
| let paymentMethod = params.row.paymentMethod!=null?intl.formatMessage({ id: utils.getPaymentMethod(params.row.paymentMethod)}):"" | |||||
| return (<> | |||||
| {paymentMethod} | |||||
| </>); | |||||
| } | |||||
| }, | |||||
| { | |||||
| id: 'fee', | |||||
| field: 'fee', | |||||
| headerName: 'Amount(HK$)', | |||||
| flex: 1, | |||||
| minWidth: 100, | |||||
| valueGetter: (params) => { | |||||
| return FormatUtils.currencyFormat(params?.value); | |||||
| } | |||||
| }, | |||||
| ]; | |||||
| function handleRowDoubleClick(params) { | |||||
| // handleEditClick(params) | |||||
| navigate('/application/' + params.id); | |||||
| } | |||||
| const doPublish = () => { | |||||
| setIsConfirmPopUp(false); | |||||
| let appIdList = []; | |||||
| const datas = rows?.filter((row) => | |||||
| selectedRowItems.includes(row.id) | |||||
| ); | |||||
| // console.log(datas) | |||||
| for (var i = 0; i < datas?.length; i++) { | |||||
| appIdList.push(datas[i].id); | |||||
| } | |||||
| if (appIdList.length < 1) { | |||||
| setIsWarningPopUp(true); | |||||
| } else { | |||||
| HttpUtils.post({ | |||||
| url: SET_PUBLIC_NOTICE_STATUS_MARK_AS_PAID, | |||||
| params: { | |||||
| ids: appIdList | |||||
| }, | |||||
| onSuccess: () => { | |||||
| searchCriteria.reload = new Date(); | |||||
| notifyActionSuccess("Action Success!") | |||||
| location.reload() | |||||
| } | |||||
| }); | |||||
| } | |||||
| } | |||||
| return (<> | |||||
| <div style={{ width: '100%' }}> | |||||
| <Grid container direction="row" justifyContent="flex-start" alignItems="center" sx={{ p: 1 }} > | |||||
| <Button | |||||
| variant="contained" | |||||
| onClick={() => setIsConfirmPopUp(true)} | |||||
| > | |||||
| Mark as Paid | |||||
| </Button> | |||||
| </Grid> | |||||
| <FiDataGrid | |||||
| checkboxSelection | |||||
| disableRowSelectionOnClick | |||||
| onRowSelectionModelChange={(newSelection) => { | |||||
| setSelectedRowItems(newSelection); | |||||
| }} | |||||
| isRowSelectable={(params) => { | |||||
| return (params.row.paymentMethod != "online" && params.row.status == "confirmed") | |||||
| }} | |||||
| columns={columns} | |||||
| customPageSize={10} | |||||
| getRowHeight={() => 'auto'} | |||||
| onRowDoubleClick={handleRowDoubleClick} | |||||
| doLoad={React.useMemo(() => ({ | |||||
| url: GET_PUBLIC_NOTICE_OFFLINE_PAYMENT_LIST, | |||||
| params: _searchCriteria, | |||||
| callback: function (responseData) { | |||||
| setRows(responseData?.records); | |||||
| } | |||||
| }), [_searchCriteria])} | |||||
| /> | |||||
| </div> | |||||
| <div> | |||||
| <Dialog | |||||
| open={isConfirmPopUp} | |||||
| onClose={() => setIsConfirmPopUp(false)} | |||||
| PaperProps={{ | |||||
| sx: { | |||||
| minWidth: '40vw', | |||||
| maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '30vw' }, | |||||
| maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '50vh' } | |||||
| } | |||||
| }} | |||||
| > | |||||
| <DialogTitle> | |||||
| <Typography variant="h3" > | |||||
| <FormattedMessage id="confirm" /> | |||||
| </Typography> | |||||
| </DialogTitle> | |||||
| <DialogContent style={{ display: 'flex', }}> | |||||
| <Stack direction="column" justifyContent="space-between"> | |||||
| <Typography variant="h4" style={{ padding: '16px' }}>Please Confirm to mark selected application as Paid.</Typography> | |||||
| </Stack> | |||||
| </DialogContent> | |||||
| <DialogActions> | |||||
| <Button onClick={() => setIsConfirmPopUp(false)} aria-label={intl.formatMessage({ id: 'close' })}> | |||||
| <Typography variant="h5"> | |||||
| <FormattedMessage id="close" /> | |||||
| </Typography></Button> | |||||
| <Button onClick={() => doPublish()} aria-label={intl.formatMessage({ id: 'confirm' })}> | |||||
| <Typography variant="h5"> | |||||
| <FormattedMessage id="confirm" /> | |||||
| </Typography></Button> | |||||
| </DialogActions> | |||||
| </Dialog> | |||||
| </div> | |||||
| <div> | |||||
| <Dialog | |||||
| open={isWarningPopUp} | |||||
| onClose={() => setIsWarningPopUp(false)} | |||||
| PaperProps={{ | |||||
| sx: { | |||||
| minWidth: '40vw', | |||||
| maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' }, | |||||
| maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' } | |||||
| } | |||||
| }} | |||||
| > | |||||
| <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle> | |||||
| <DialogContent style={{ display: 'flex', }}> | |||||
| <Typography variant="h4" style={{ padding: '16px' }}>{intl.formatMessage({ id: "MSG.plzSelectApp" })}</Typography> | |||||
| </DialogContent> | |||||
| <DialogActions> | |||||
| <Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">OK</Typography></Button> | |||||
| </DialogActions> | |||||
| </Dialog> | |||||
| </div> | |||||
| </> | |||||
| ); | |||||
| } | |||||
| @@ -0,0 +1,389 @@ | |||||
| // material-ui | |||||
| import { | |||||
| Button, | |||||
| Grid, TextField, | |||||
| Autocomplete, | |||||
| Typography | |||||
| } 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"; | |||||
| import * as FormatUtils from "utils/FormatUtils"; | |||||
| import { ThemeProvider } from "@emotion/react"; | |||||
| import { PNSPS_BUTTON_THEME } from "../../../themes/buttonConst"; | |||||
| import { useIntl } from "react-intl"; | |||||
| import {DatePicker} from "@mui/x-date-pickers/DatePicker"; | |||||
| import dayjs from "dayjs"; | |||||
| import {DemoItem} from "@mui/x-date-pickers/internals/demo"; | |||||
| import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider"; | |||||
| import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs"; | |||||
| // ==============================|| 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 [selectedStatus, setSelectedStatus] = React.useState({key: 0, label: 'All', type: 'all'}); | |||||
| 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]); | |||||
| const intl = useIntl(); | |||||
| const { locale } = intl; | |||||
| const marginBottom = 2.5; | |||||
| const { reset, register, handleSubmit } = useForm() | |||||
| const onSubmit = (data) => { | |||||
| data.status = selectedStatus?.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: sentDateFrom, | |||||
| dateTo: sentDateTo, | |||||
| contact: data.contact, | |||||
| status: (data.status === '' || data.status?.includes("all")) ? "" : data.status, | |||||
| orgId: (orgSelected?.key && orgSelected?.key > 0) ? orgSelected?.key : "", | |||||
| issueId: issueSelected?.id, | |||||
| groupNo: data.groupNo, | |||||
| }; | |||||
| 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({}); | |||||
| setSelectedStatus({key: 0, label: 'All', type: 'all'}); | |||||
| setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14))) | |||||
| setMaxDate(DateUtils.dateValue(new Date())) | |||||
| reset(); | |||||
| } | |||||
| const getIssueLabel=(data)=> { | |||||
| let issueYear = data.issueYear | |||||
| let volume = data.volume; | |||||
| let issueNo = data.issueNo; | |||||
| let issueDate = data.issueDate; | |||||
| if (locale === 'zh-HK') { | |||||
| return issueYear | |||||
| + " 第" + volume + "卷," | |||||
| + " 第" + issueNo + "期," | |||||
| + " " + DateUtils.dateFormat(issueDate, "YYYY年MM月DD日") | |||||
| + " (" + DateUtils.getWeekdayStr_ZH(issueDate) + ")"; | |||||
| } else if (locale === 'zh-CN') { | |||||
| return issueYear | |||||
| + " 第" + volume + "卷," | |||||
| + " 第" + issueNo + "期," | |||||
| + " " + DateUtils.dateFormat(issueDate, "YYYY年MM月DD日") | |||||
| + " (" + DateUtils.getWeekdayStr_CN(issueDate) + ")"; | |||||
| } | |||||
| return issueYear | |||||
| + " Vol. " + FormatUtils.zeroPad(volume, 3) | |||||
| + ", No. " + FormatUtils.zeroPad(issueNo, 2) | |||||
| + ", " + DateUtils.dateFormat(issueDate, "D MMM YYYY (ddd)"); | |||||
| } | |||||
| return ( | |||||
| <MainCard xs={12} md={12} lg={12} | |||||
| border={false} | |||||
| content={false} | |||||
| sx={{ backgroundColor: '#fff' }} | |||||
| > | |||||
| <form onSubmit={handleSubmit(onSubmit)}> | |||||
| <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1, mb: marginBottom }} width="98%"> | |||||
| {/*row 1*/} | |||||
| <Grid item justifyContent="space-between" alignItems="center" sx={{ mt: 1, ml: 3, mb: marginBottom }}> | |||||
| <Typography variant="pnspsFormHeader" > | |||||
| Search | |||||
| </Typography> | |||||
| </Grid> | |||||
| {/*row 2*/} | |||||
| <Grid container display="flex" alignItems={"center"}> | |||||
| <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}> | |||||
| <TextField | |||||
| fullWidth | |||||
| {...register("appNo")} | |||||
| id='appNo' | |||||
| label={"Application No."} | |||||
| defaultValue={searchCriteria.appNo} | |||||
| InputLabelProps={{ | |||||
| shrink: true | |||||
| }} | |||||
| /> | |||||
| </Grid> | |||||
| <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}> | |||||
| <Grid container spacing={1}> | |||||
| <Grid item xs={6}> | |||||
| <LocalizationProvider dateAdapter={AdapterDayjs}> | |||||
| <DemoItem components={['DatePicker']}> | |||||
| <DatePicker | |||||
| id="dateFrom" | |||||
| // onError={(newError) => setReceiptFromError(newError)} | |||||
| slotProps={{ | |||||
| field: { readOnly: true, }, | |||||
| // textField: { | |||||
| // helperText: receiptFromErrorMessage, | |||||
| // }, | |||||
| }} | |||||
| format="DD/MM/YYYY" | |||||
| label={"Submit Date (From)"} | |||||
| value={minDate === null ? null : dayjs(minDate)} | |||||
| maxDate={maxDate === null ? null : dayjs(maxDate)} | |||||
| onChange={(newValue) => { | |||||
| // console.log(newValue) | |||||
| if(newValue!=null){ | |||||
| setMinDate(newValue); | |||||
| } | |||||
| }} | |||||
| /> | |||||
| </DemoItem > | |||||
| </LocalizationProvider> | |||||
| </Grid> | |||||
| <Grid item xs={6}> | |||||
| <LocalizationProvider dateAdapter={AdapterDayjs}> | |||||
| <DemoItem components={['DatePicker']}> | |||||
| <DatePicker | |||||
| id="dateTo" | |||||
| // onError={(newError) => setReceiptFromError(newError)} | |||||
| slotProps={{ | |||||
| field: { readOnly: true, }, | |||||
| // textField: { | |||||
| // helperText: receiptFromErrorMessage, | |||||
| // }, | |||||
| }} | |||||
| format="DD/MM/YYYY" | |||||
| label={"Submit Date (To)"} | |||||
| value={maxDate === null ? null : dayjs(maxDate)} | |||||
| minDate={minDate === null ? null : dayjs(minDate)} | |||||
| onChange={(newValue) => { | |||||
| // console.log(newValue) | |||||
| if(newValue!=null){ | |||||
| setMaxDate(newValue); | |||||
| } | |||||
| }} | |||||
| /> | |||||
| </DemoItem > | |||||
| </LocalizationProvider> | |||||
| </Grid> | |||||
| </Grid> | |||||
| </Grid> | |||||
| <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}> | |||||
| <TextField | |||||
| fullWidth | |||||
| {...register("contact")} | |||||
| id="contact" | |||||
| label={"Client"} | |||||
| defaultValue={searchCriteria.contact} | |||||
| InputLabelProps={{ | |||||
| shrink: true | |||||
| }} | |||||
| /> | |||||
| </Grid> | |||||
| <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}> | |||||
| <Autocomplete | |||||
| {...register("status")} | |||||
| id="status" | |||||
| size="small" | |||||
| options={ComboData.publicNoticeStatic_GLD} | |||||
| value={selectedStatus} | |||||
| onChange={(event, newValue) => { | |||||
| if(newValue==null){ | |||||
| setSelectedStatus(ComboData.publicNoticeStatic_GLD[0]); | |||||
| }else{ | |||||
| setSelectedStatus(newValue); | |||||
| } | |||||
| }} | |||||
| getOptionLabel={(option) => option.label} | |||||
| renderInput={(params) => ( | |||||
| <TextField | |||||
| {...params} | |||||
| label="Status" | |||||
| InputLabelProps={{ | |||||
| shrink: true | |||||
| }} | |||||
| /> | |||||
| )} | |||||
| /> | |||||
| {/* <Autocomplete | |||||
| multiple | |||||
| {...register("status")} | |||||
| id="status" | |||||
| size="small" | |||||
| options={ComboData.publicNoticeStatic_GLD} | |||||
| value={selectedStatus} | |||||
| onChange={(event, newValue) => { | |||||
| const findAllIndex = newValue.findIndex((ele) => { | |||||
| return ele.type === "all" | |||||
| }) | |||||
| if (findAllIndex > -1) { | |||||
| setSelectedStatus([newValue[findAllIndex]]); | |||||
| setSelectedLabelsString('all') | |||||
| } else { | |||||
| const selectedLabels = newValue.map(option => option.type); | |||||
| const selectedLabelsString = `${selectedLabels.join(',')}`; | |||||
| setSelectedStatus(newValue); | |||||
| setSelectedLabelsString(selectedLabelsString); | |||||
| } | |||||
| }} | |||||
| getOptionLabel={(option) => option.label} | |||||
| renderInput={(params) => ( | |||||
| <TextField | |||||
| {...params} | |||||
| label="Status" | |||||
| InputLabelProps={{ | |||||
| shrink: true | |||||
| }} | |||||
| /> | |||||
| )} | |||||
| /> */} | |||||
| </Grid> | |||||
| { | |||||
| orgCombo ? | |||||
| <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}> | |||||
| <Autocomplete | |||||
| {...register("orgId")} | |||||
| disablePortal | |||||
| id="orgId" | |||||
| options={orgCombo} | |||||
| size="small" | |||||
| value={orgSelected} | |||||
| getOptionLabel={(option) => option.name? option.name : ""} | |||||
| inputValue={orgSelected ? orgSelected.name : ""} | |||||
| onChange={(event, newValue) => { | |||||
| if (newValue !== null) { | |||||
| setOrgSelected(newValue); | |||||
| }else{ | |||||
| setOrgSelected({}); | |||||
| } | |||||
| }} | |||||
| renderInput={(params) => ( | |||||
| <TextField {...params} | |||||
| label="Organisation" | |||||
| InputLabelProps={{ | |||||
| shrink: true | |||||
| }} | |||||
| /> | |||||
| )} | |||||
| /> | |||||
| </Grid> | |||||
| : <></> | |||||
| } | |||||
| <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}> | |||||
| <Autocomplete | |||||
| {...register("issueId")} | |||||
| disablePortal | |||||
| size="small" | |||||
| id="issueId" | |||||
| options={issueCombo} | |||||
| value={issueSelected} | |||||
| inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""} | |||||
| getOptionLabel={(option) => getIssueLabel(option)} | |||||
| onChange={(event, newValue) => { | |||||
| setIssueSelected(newValue); | |||||
| }} | |||||
| renderInput={(params) => ( | |||||
| <TextField {...params} | |||||
| label="Gazette Issue No." | |||||
| InputLabelProps={{ | |||||
| shrink: true | |||||
| }} | |||||
| /> | |||||
| )} | |||||
| /> | |||||
| </Grid> | |||||
| <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}> | |||||
| <TextField | |||||
| fullWidth | |||||
| {...register("groupNo")} | |||||
| id='groupNo' | |||||
| label="Gazette Code" | |||||
| defaultValue={searchCriteria.groupNo} | |||||
| InputLabelProps={{ | |||||
| shrink: true | |||||
| }} | |||||
| /> | |||||
| </Grid> | |||||
| </Grid> | |||||
| {/*last row*/} | |||||
| <Grid container maxWidth justifyContent="flex-end"> | |||||
| <ThemeProvider theme={PNSPS_BUTTON_THEME}> | |||||
| <Grid item sx={{ ml: 3 }}> | |||||
| <Button | |||||
| variant="contained" | |||||
| color="cancel" | |||||
| onClick={resetForm} | |||||
| > | |||||
| Reset | |||||
| </Button> | |||||
| </Grid> | |||||
| <Grid item sx={{ ml: 3 }}> | |||||
| <Button | |||||
| variant="contained" | |||||
| type="submit" | |||||
| > | |||||
| Submit | |||||
| </Button> | |||||
| </Grid> | |||||
| </ThemeProvider> | |||||
| </Grid> | |||||
| </Grid> | |||||
| </form> | |||||
| </MainCard> | |||||
| ); | |||||
| }; | |||||
| export default SearchPublicNoticeForm; | |||||
| @@ -0,0 +1,113 @@ | |||||
| // material-ui | |||||
| import { | |||||
| Grid, | |||||
| Typography, | |||||
| Stack | |||||
| } from '@mui/material'; | |||||
| import MainCard from "components/MainCard"; | |||||
| import * as React from "react"; | |||||
| import * as UrlUtils from "utils/ApiPathConst"; | |||||
| 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 [orgCombo, setOrgCombo] = React.useState([]); | |||||
| const [issueCombo, setIssueCombo] = React.useState([]); | |||||
| const [searchCriteria, setSearchCriteria] = React.useState({ | |||||
| dateTo: DateUtils.dateValue(new Date()), | |||||
| dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate() - 14)) | |||||
| }); | |||||
| const [onReady, setOnReady] = React.useState(false); | |||||
| React.useEffect(() => { | |||||
| getOrgCombo(); | |||||
| getIssueCombo(); | |||||
| }, []); | |||||
| React.useEffect(() => { | |||||
| setOnReady(true); | |||||
| }, [searchCriteria]); | |||||
| 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 ? | |||||
| <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center"> | |||||
| <Grid item> | |||||
| <LoadingComponent /> | |||||
| </Grid> | |||||
| </Grid> | |||||
| : | |||||
| <Grid container sx={{ minHeight: '87vh',backgroundColor: 'backgroundColor.default' }} direction="column"> | |||||
| <Grid item xs={12}> | |||||
| <div style={BackgroundHead}> | |||||
| <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | |||||
| <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>Mark Payment</Typography> | |||||
| </Stack> | |||||
| </div> | |||||
| </Grid> | |||||
| {/*row 1*/} | |||||
| <Grid item xs={12} md={12} lg={12} sx={{mb: -1}}> | |||||
| <SearchForm | |||||
| applySearch={applySearch} | |||||
| orgComboData={orgCombo} | |||||
| issueComboData={issueCombo} | |||||
| searchCriteria={searchCriteria} | |||||
| /> | |||||
| </Grid> | |||||
| {/*row 2*/} | |||||
| <Grid item xs={12} md={12} lg={12}> | |||||
| <MainCard elevation={0} | |||||
| border={false} | |||||
| content={false} | |||||
| sx={{ backgroundColor: '#fff' }} | |||||
| > | |||||
| <EventTable | |||||
| searchCriteria={searchCriteria} | |||||
| /> | |||||
| </MainCard> | |||||
| </Grid> | |||||
| </Grid> | |||||
| ); | |||||
| } | |||||
| export default UserSearchPage_Individual; | |||||
| @@ -10,6 +10,7 @@ import {isGranted, isGrantedAny} from "auth/utils"; | |||||
| const DashboardDefault = Loadable(lazy(() => import('pages/Dashboard/GLD'))); | const DashboardDefault = Loadable(lazy(() => import('pages/Dashboard/GLD'))); | ||||
| const ApplicationDetail = Loadable(lazy(() => import('pages/PublicNotice/Details_GLD'))); | const ApplicationDetail = Loadable(lazy(() => import('pages/PublicNotice/Details_GLD'))); | ||||
| const ApplicationSearch = Loadable(lazy(() => import('pages/PublicNotice/Search_GLD'))); | const ApplicationSearch = Loadable(lazy(() => import('pages/PublicNotice/Search_GLD'))); | ||||
| const ApplicationMarkAsPaidSearch = Loadable(lazy(() => import('pages/PublicNotice/Search_Mark_As_Paid_GLD'))); | |||||
| const ProofSearch = Loadable(lazy(() => import('pages/Proof/Search_GLD'))); | const ProofSearch = Loadable(lazy(() => import('pages/Proof/Search_GLD'))); | ||||
| const ProofCreate_FromApp = Loadable(lazy(() => import('pages/Proof/Create_FromApp'))); | const ProofCreate_FromApp = Loadable(lazy(() => import('pages/Proof/Create_FromApp'))); | ||||
| const ProofReply_GLD = Loadable(lazy(() => import('pages/Proof/Reply_GLD'))); | const ProofReply_GLD = Loadable(lazy(() => import('pages/Proof/Reply_GLD'))); | ||||
| @@ -56,6 +57,12 @@ const GLDUserRoutes = { | |||||
| path: '/application/search', | path: '/application/search', | ||||
| element: <ApplicationSearch/> | element: <ApplicationSearch/> | ||||
| }, | }, | ||||
| isGranted(["MAINTAIN_PAYMENT"])? | |||||
| { | |||||
| path: '/application/markAsPaid/search', | |||||
| element: <ApplicationMarkAsPaidSearch/> | |||||
| }:{}, | |||||
| isGrantedAny(["VIEW_PROOF","MAINTAIN_PROOF"])?{ | isGrantedAny(["VIEW_PROOF","MAINTAIN_PROOF"])?{ | ||||
| path: '/proof/search', | path: '/proof/search', | ||||
| @@ -108,6 +108,9 @@ export const GET_PUBLIC_NOTICE_getApplyUser = apiPath+'/application/get-apply-us | |||||
| export const POST_PUBLIC_NOTICE_APPLY = apiPath+'/application/apply'; | export const POST_PUBLIC_NOTICE_APPLY = apiPath+'/application/apply'; | ||||
| export const POST_CHECK_APP_EXPRITY_DATE = apiPath+'/application/checkExprityDate'; | export const POST_CHECK_APP_EXPRITY_DATE = apiPath+'/application/checkExprityDate'; | ||||
| export const GET_PUBLIC_NOTICE_OFFLINE_PAYMENT_LIST = apiPath+'/application/list-Mask-As-Paid'; | |||||
| export const SET_PUBLIC_NOTICE_STATUS_MARK_AS_PAID = apiPath+'/application/application-detail-status-Mark-As-Paid'; | |||||
| //GLD User | //GLD User | ||||
| export const POST_ADMIN_USER_REGISTER = apiPath+'/user/registry'; | export const POST_ADMIN_USER_REGISTER = apiPath+'/user/registry'; | ||||
| export const DELETE_USER = apiPath+'/user'; | export const DELETE_USER = apiPath+'/user'; | ||||
| @@ -124,6 +127,7 @@ export const SET_PUBLIC_NOTICE_STATUS_WITHDRAW = apiPath+'/application/applicati | |||||
| export const SET_PUBLIC_NOTICE_STATUS_RESUBMIT = apiPath+'/application/application-detail-status-resubmit'; | export const SET_PUBLIC_NOTICE_STATUS_RESUBMIT = apiPath+'/application/application-detail-status-resubmit'; | ||||
| export const SET_PUBLIC_NOTICE_STATUS_REVIEWED = apiPath+'/application/application-detail-status-reviewed'; | export const SET_PUBLIC_NOTICE_STATUS_REVIEWED = apiPath+'/application/application-detail-status-reviewed'; | ||||
| export const SET_PUBLIC_NOTICE_STATUS_PUBLISH = apiPath+'/application/application-detail-status-publish'; | export const SET_PUBLIC_NOTICE_STATUS_PUBLISH = apiPath+'/application/application-detail-status-publish'; | ||||
| export const SET_PUBLIC_NOTICE_STATUS_REVOKE = apiPath+'/application/application-detail-status-Revoke-Payment'; | |||||
| export const SET_PUBLIC_NOTICE_STATUS_PUBLISH_BULK = apiPath+'/application/application-detail-status-publish-bulk'; | export const SET_PUBLIC_NOTICE_STATUS_PUBLISH_BULK = apiPath+'/application/application-detail-status-publish-bulk'; | ||||
| export const UPDATE_PUBLIC_NOTICE_APPLY_DETAIL = apiPath+'/application/save'; | export const UPDATE_PUBLIC_NOTICE_APPLY_DETAIL = apiPath+'/application/save'; | ||||
| export const GET_AUDIT_LOG_LIST = apiPath+'/settings/auditLogList'; | export const GET_AUDIT_LOG_LIST = apiPath+'/settings/auditLogList'; | ||||