alex
/
PNSPS-frontend-MaterialUI
1
0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
Procházet zdrojové kódy

update UI

CR003
Anna Ho před 1 rokem
rodič
ffd3f166fa
revize
a322555297
11 změnil soubory, kde provedl 128 přidání a 87 odebrání
Rozdělené zobrazení
Diff Options
Zobrazit statistiky Stáhněte soubor opravy Stáhněte rozdílový soubor
  1. +32
    -22
      src/components/FiDataGrid.js
  2. +3
    -2
      src/pages/Proof/Payment/Pay_DN.js
  3. +2
    -1
      src/pages/Proof/Payment/Pay_Office.js
  4. +8
    -1
      src/pages/Proof/Reply_Public/ApplicationDetails.js
  5. +22
    -16
      src/pages/Proof/Reply_Public/ProofForm.js
  6. +25
    -17
      src/pages/Proof/Search_Public/DataGrid.js
  7. +5
    -1
      src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
  8. +11
    -11
      src/translations/en.json
  9. +7
    -7
      src/translations/zh-CN.json
  10. +7
    -7
      src/translations/zh-HK.json
  11. +6
    -2
      src/utils/DateUtils.js

+ 32
- 22
src/components/FiDataGrid.js Zobrazit soubor

@@ -1,17 +1,17 @@
// material-ui
import {useState, useEffect} from 'react';
import { useState, useEffect } from 'react';
import {
DataGrid, GridOverlay,
} from "@mui/x-data-grid";
import * as HttpUtils from "utils/HttpUtils";
import {FormattedMessage, useIntl} from "react-intl";
import {TablePagination, Typography} from '@mui/material';
import { FormattedMessage, useIntl } from "react-intl";
import { TablePagination, Typography } from '@mui/material';

// ==============================|| EVENT TABLE ||============================== //

export function FiDataGrid({ rows, columns, sx, autoHeight,
hideFooterSelectedRowCount, rowModesModel, editMode,
pageSizeOptions, filterItems, customPageSize, doLoad, ...props }) {
hideFooterSelectedRowCount, rowModesModel, editMode,
pageSizeOptions, filterItems, customPageSize, doLoad, ...props }) {
const intl = useIntl();
const [_rows, set_rows] = useState([]);
const [_doLoad, set_doLoad] = useState({});
@@ -27,6 +27,7 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
const [myHideFooterSelectedRowCount, setMyHideFooterSelectedRowCount] = useState(true);
const [_sx, set_sx] = useState({
padding: "4 2 4 2",
lineHeight: "normal",
'& .MuiDataGrid-cell': {
borderTop: 1,
borderBottom: 1,
@@ -36,18 +37,26 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
border: 1,
borderColor: "#EEE"
},
"& .MuiDataGrid-columnHeaderTitle": {
whiteSpace: "normal",
lineHeight: "normal"
},
"& .MuiDataGrid-columnHeader": {
// Forced to use important since overriding inline styles
height: "unset !important"
},
});

const [rowCount, setRowCount] = useState(0);
useEffect(() => {
useEffect(() => {
setPage(0);
set_doLoad(doLoad);
set_doLoad(doLoad);
}, [doLoad]);

useEffect(()=>{
useEffect(() => {
getDataList();
},[_doLoad, page]);
}, [_doLoad, page]);


useEffect(() => {
@@ -70,16 +79,16 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
if (pageSizeOptions) {
set_pageSizeOptions(pageSizeOptions)
}
if(autoHeight !== undefined){
if (autoHeight !== undefined) {
set_autoHeight(autoHeight)
}
if(editMode){
if (editMode) {
set_editMode(editMode);
}
if(filterItems){
if (filterItems) {
set_filterItems(filterItems);
}
if(customPageSize){
if (customPageSize) {
setPageSize(customPageSize);
}
}, [sx, hideFooterSelectedRowCount, rowModesModel, rows, columns, pageSizeOptions, autoHeight, editMode, filterItems, customPageSize]);
@@ -103,11 +112,11 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
);
}

function getDataList() {
if(_doLoad?.url == null) return;
if(_doLoad.params == null) _doLoad.params = {};
_doLoad.params.start = page*pageSize;
if (_doLoad?.url == null) return;
if (_doLoad.params == null) _doLoad.params = {};
_doLoad.params.start = page * pageSize;
_doLoad.params.limit = pageSize;
HttpUtils.get({
url: _doLoad.url,
@@ -115,7 +124,7 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
onSuccess: function (responseData) {
set_rows(responseData?.records);
setRowCount(responseData?.count);
if(_doLoad.callback != null){
if (_doLoad.callback != null) {
_doLoad.callback(responseData);
}
}
@@ -127,10 +136,11 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
<DataGrid
{...props}
rows={_rows}
rowCount={rowCount?rowCount:0}
rowCount={rowCount ? rowCount : 0}
columns={_columns}
paginationMode="server"
disableColumnMenu
shrinkWrap={true}
rowModesModel={_rowModesModel}
pageSizeOptions={_pageSizeOptions}
editMode={_editMode}
@@ -142,12 +152,12 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
noRowsOverlay: CustomNoRowsOverlay,
Pagination: () => (
<TablePagination
count={rowCount?rowCount:0}
count={rowCount ? rowCount : 0}
page={page}
rowsPerPage={pageSize}
rowsPerPageOptions={_pageSizeOptions}
labelDisplayedRows={() =>
`${(_rows?.length?page*pageSize+1:0)}-${page*pageSize+(_rows?.length??0)} ${intl.formatMessage({ id: "of" })} ${rowCount}`
`${(_rows?.length ? page * pageSize + 1 : 0)}-${page * pageSize + (_rows?.length ?? 0)} ${intl.formatMessage({ id: "of" })} ${rowCount}`
}
labelRowsPerPage={intl.formatMessage({ id: "rowsPerPage" }) + ":"}
onPageChange={handleChangePage}


+ 3
- 2
src/pages/Proof/Payment/Pay_DN.js Zobrazit soubor

@@ -26,6 +26,7 @@ const BackgroundHead = {
const Index = ({ record }) => {
const navigate = useNavigate()
const intl = useIntl();
const { local } = intl;

return (
(
@@ -67,7 +68,7 @@ const Index = ({ record }) => {
id: 'proofPaymentBody_demandNote2'
},
{
closingDateOff: DateUtils.dateStr(record.closingDateOff),
closingDateOff: local === "en"? DateUtils.dateStr_Eng(record.closingDateOff): DateUtils.dateStr_Cht(record?.closingDateOff),
email: record?.mail,
}
)
@@ -79,7 +80,7 @@ const Index = ({ record }) => {
id: 'proofPaymentBody_demandNote3'
},
{
paymentDeadline: DateUtils.dateStr(record?.closingDate),
paymentDeadline: local === "en"? DateUtils.dateStr_Eng(record?.closingDate): DateUtils.dateStr_Cht(record?.closingDate),
}
)
}} />


+ 2
- 1
src/pages/Proof/Payment/Pay_Office.js Zobrazit soubor

@@ -26,6 +26,7 @@ const BackgroundHead = {
const Index = ({ record }) => {
const navigate = useNavigate()
const intl = useIntl();
const { locale } = intl;

return (
(
@@ -91,7 +92,7 @@ const Index = ({ record }) => {
id: 'proofPaymentBody_office5'
},
{
paymentDeadline: DateUtils.dateStr(record?.closingDate),
paymentDeadline: locale ==='en'? DateUtils.dateStr_Eng(record?.closingDate):DateUtils.dateStr_Cht(record?.closingDate)
}
)
}} />


+ 8
- 1
src/pages/Proof/Reply_Public/ApplicationDetails.js Zobrazit soubor

@@ -225,11 +225,14 @@ const ApplicationDetailCard = ({ formData, }) => {
/>
</Grid>
</Grid>

</Grid>

<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, }}>
<Grid container alignItems={"center"}>
{
data.creditor == true ?
<>
<Grid item xs={12} md={12} lg={12}
sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="h5" display="inline">
@@ -262,6 +265,10 @@ const ApplicationDetailCard = ({ formData, }) => {
}
</Typography>
</Grid>
</>
:
<></>
}

<Grid item xs={12} sm={3} md={3} lg={3}
sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>


+ 22
- 16
src/pages/Proof/Reply_Public/ProofForm.js Zobrazit soubor

@@ -49,6 +49,7 @@ const FormPanel = ({ formData }) => {

const navigate = useNavigate()
const params = useParams();
const dft = locale === 'en' ? "DD MMM YYYY" : "YYYY年MM月DD日";

const tabelStyle = {
border: "2px solid gray",
@@ -236,7 +237,7 @@ const FormPanel = ({ formData }) => {
<FormattedMessage id="proofReplyDate" /> :&nbsp;
{
locale === 'en' ?
DateUtils.dateValue(formik.values.replyDate)
DateUtils.datetimeStr(formik.values.replyDate)
:
DateUtils.datetimeStr_Cht(formik.values.replyDate)
}
@@ -323,6 +324,7 @@ const FormPanel = ({ formData }) => {
<tr style={tabelStyle}>
<th style={tabelStyle} width="50" align="left"></th>
<th style={tabelStyle} width="300" align="left"><FormattedMessage id="paymentMeans" /></th>
<th style={tabelStyle} width="300" align="left"><FormattedMessage id="commentDeadline" /></th>
<th style={tabelStyle} width="300" align="left"><FormattedMessage id="confirmingDealine" /></th>
<th style={tabelStyle} width="400" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>
</tr>
@@ -361,9 +363,10 @@ const FormPanel = ({ formData }) => {
}}><FormattedMessage id="viewDetail" /></a>
</td>
<td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} 5:00 p.m.</td>
<td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} 5:00 p.m.</td>
<td style={tabelStyle}>
<FormattedMessage id="payDnRemark" values={{
date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" })) + " 12:30 p.m."
date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))
}} />
</td>
</tr>
@@ -393,10 +396,11 @@ const FormPanel = ({ formData }) => {
setIsWarningPopUp(true);
}}><FormattedMessage id="viewDetail" /></a>
</td>
<td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 11:30 a.m.</td>
<td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 12:00 p.m.</td>
<td style={tabelStyle}>
<FormattedMessage id="payNPGORemark" values={{
date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" })) + " 12:30 p.m."
date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))
}} />
</td>
</tr>
@@ -410,6 +414,7 @@ const FormPanel = ({ formData }) => {
<tr style={tabelStyle}>
<th style={tabelStyle} width="50" align="left"></th>
<th style={tabelStyle} width="300" align="left"><FormattedMessage id="paymentMeans" /></th>
<th style={tabelStyle} width="300" align="left"><FormattedMessage id="commentDeadline" /></th>
<th style={tabelStyle} width="300" align="left"><FormattedMessage id="confirmingDealine" /></th>
<th style={tabelStyle} width="400" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>
</tr>
@@ -440,20 +445,20 @@ const FormPanel = ({ formData }) => {
</td>
<td style={tabelStyle}>{
locale === 'en' ?
`${DateUtils.dateFormat(formData.proofPaymentDeadline, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")}`
`${DateUtils.dateFormat(formData.reviseDeadline, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")}`
:
`${DateUtils.dateFormat(formData.reviseDeadline, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "上午")?.replace("pm", "下午").replace("00分", "")}`
}</td>
<td style={tabelStyle}>{
locale === 'en' ?
`${DateUtils.dateFormat(formData.proofPaymentDeadline, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")}`
:
`${DateUtils.dateFormat(formData.proofPaymentDeadline, intl.formatMessage({ id: "datetimeFormate" }))?.replace("am", "上午")?.replace("pm", "下午").replace("00分", "")}`
}</td>
<td style={tabelStyle}>
<FormattedMessage id="payOnlineRemark" values={{
date: (
locale === 'en' ?
`${DateUtils.dateFormat(formData.expiryDate, intl.formatMessage({ id: "paymentMethodDatetimeStrFormat" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")}`
:
`${DateUtils.dateFormat(formData.expiryDate, intl.formatMessage({ id: "paymentMethodDatetimeStrFormat" }))?.replace("am", "上午")?.replace("pm", "下午")}`
)
date: DateUtils.dateFormat(formData.proofPaymentDeadline, dft)
}} />
{/* {DateUtils.dateFormat(formData.expiryDate, intl.formatMessage({ id: "paymentMethodDatetimeStrFormat" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")} */}
</td>
</tr>
<tr>
@@ -493,11 +498,11 @@ const FormPanel = ({ formData }) => {
setIsWarningPopUp(true);
}}><FormattedMessage id="viewDetail" /></a>
</td>
<td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} 5:00 p.m.</td>
<td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} {locale ==='en'?"5:00 p.m.":"下午5時"}</td>
<td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} {locale ==='en'?"5:00 p.m.":"下午5時"}</td>
<td style={tabelStyle}>
<FormattedMessage id="payDnRemark" values={{
date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" })) + " 12:30 p.m."
date: DateUtils.dateFormat(formData.proofPaymentDeadline, intl.formatMessage({ id: "dateStrFormat" }))
}} />
</td>
</tr>
@@ -532,10 +537,11 @@ const FormPanel = ({ formData }) => {
setIsWarningPopUp(true);
}}><FormattedMessage id="viewDetail" /></a>
</td>
<td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 12:00 p.m.</td>
<td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} {locale ==='en'?"11:30 a.m.":"上午11時30分"}</td>
<td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} {locale ==='en'?"12:00 p.m.":"下午12時"}</td>
<td style={tabelStyle}>
<FormattedMessage id="payNPGORemark" values={{
date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" })) + " 12:30 p.m."
date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))
}} />
</td>
</tr>


+ 25
- 17
src/pages/Proof/Search_Public/DataGrid.js Zobrazit soubor

@@ -11,9 +11,9 @@ import { useNavigate } from "react-router-dom";
import { FiDataGrid } from "components/FiDataGrid";
import {
isORGLoggedIn,
} from "utils/Utils";
import {useTheme} from "@emotion/react";
import {useIntl} from "react-intl";
} from "utils/Utils";
import { useTheme } from "@emotion/react";
import { useIntl } from "react-intl";
import { clickableLink } from 'utils/CommonFunction';
// ==============================|| EVENT TABLE ||============================== //

@@ -44,7 +44,15 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
'& .MuiDataGrid-footerContainer': {
border: 1,
borderColor: "#EEE"
}
},
"& .MuiDataGrid-columnHeaderTitle": {
whiteSpace: "normal",
lineHeight: "normal"
},
"& .MuiDataGrid-columnHeader": {
// Forced to use important since overriding inline styles
height: "unset !important"
},
}


@@ -66,7 +74,7 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
}
}*/

const getIssueLabel=(data) =>{
const getIssueLabel = (data) => {
let issueYear = data.row.issueYear
let volume = data.row.issueVolume;
let issueNo = data.row.issueNo;
@@ -90,22 +98,22 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
+ ", " + DateUtils.dateFormat(issueDate, "D MMM YYYY (ddd)");
}

const columns = [
{
field: 'actions',
headerName: intl.formatMessage({id: 'proofId'}),
headerName: intl.formatMessage({ id: 'proofId' }),
width: isMdOrLg ? 'auto' : 200,
flex: isMdOrLg ? 1.5 : undefined,
cellClassName: 'actions',
renderCell: (params) => {
return clickableLink('/proof/reply/' + params.row.id,params.row.refNo);
return clickableLink('/proof/reply/' + params.row.id, params.row.refNo);
},
},
{
id: 'appId',
field: 'appId',
headerName: isORGLoggedIn()?intl.formatMessage({id: 'gazetteCount3'}):intl.formatMessage({id: 'gazetteCount2'}),
headerName: isORGLoggedIn() ? intl.formatMessage({ id: 'gazetteCount3' }) : intl.formatMessage({ id: 'gazetteCount2' }),
width: isMdOrLg ? 'auto' : 330,
flex: isMdOrLg ? 2 : undefined,
renderCell: (params) => {
@@ -114,13 +122,13 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
let isssue = getIssueLabel(params);

// return <div style={{ margin: 4 }}>{appNo}<br />{isssue}<br />{params.row.appRemarks}</div>
return <div style={{ margin: 4 }}>{isssue}<br />{isORGLoggedIn()?<>{params.row.appCareOf}<br /></>:null}{params.row.appRemarks}</div>
return <div style={{ margin: 4 }}>{isssue}<br />{isORGLoggedIn() ? <>{params.row.appCareOf}<br /></> : null}{params.row.appRemarks}</div>
},
},
{
id: 'created',
field: 'reviseDeadline',
headerName: intl.formatMessage({id: 'proofDate'}),
headerName: intl.formatMessage({ id: 'proofDate' }),
width: isMdOrLg ? 'auto' : 200,
flex: isMdOrLg ? 1.5 : undefined,
valueGetter: (params) => {
@@ -130,7 +138,7 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
{
id: 'proofPaymentDeadline',
field: 'proofPaymentDeadline',
headerName: intl.formatMessage({id: 'replyBefore'}),
headerName: intl.formatMessage({ id: 'replyBefore' }),
width: isMdOrLg ? 'auto' : 200,
flex: isMdOrLg ? 1.5 : undefined,
valueGetter: (params) => {
@@ -142,7 +150,7 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
{
id: 'replyDate',
field: 'replyDate',
headerName: intl.formatMessage({id: 'replyDate'}),
headerName: intl.formatMessage({ id: 'replyDate' }),
width: isMdOrLg ? 'auto' : 200,
flex: isMdOrLg ? 1.5 : undefined,
valueGetter: (params) => {
@@ -151,17 +159,17 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
},
{
id: 'actions',
headerName: intl.formatMessage({id: 'status'}),
headerName: intl.formatMessage({ id: 'status' }),
width: isMdOrLg ? 'auto' : 160,
flex: isMdOrLg ? 1 : undefined,
renderCell: (params) => {
return locale === 'en' ? ProofStatus.getStatus_Eng(params) : locale === 'zh-HK' ?ProofStatus.getStatus_Cht(params):ProofStatus.getStatus_Cn(params);
return locale === 'en' ? ProofStatus.getStatus_Eng(params) : locale === 'zh-HK' ? ProofStatus.getStatus_Cht(params) : ProofStatus.getStatus_Cn(params);
},
},
{
id: 'fee',
field: 'fee',
headerName: intl.formatMessage({id: 'fee'}),
headerName: intl.formatMessage({ id: 'fee' }),
width: isMdOrLg ? 'auto' : 160,
flex: isMdOrLg ? 1 : undefined,
valueGetter: (params) => {
@@ -175,7 +183,7 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
}

return (
<div style={{ width: '100%', overflowX: 'auto'}}>
<div style={{ width: '100%', overflowX: 'auto' }}>

<FiDataGrid
sx={_sx}


+ 5
- 1
src/pages/PublicNotice/ListPanel/PendingPaymentTab.js Zobrazit soubor

@@ -193,11 +193,15 @@ export default function SubmittedTab({ setCount, url }) {
renderCell: (params) => (
isORGLoggedIn() ?
<div>
<FormattedMessage id="gazetteCount" />: {params.row.issueVolume + "/" + params.row.issueYear
+ " No. " + params.row.issueNo}<br />
<FormattedMessage id="careOf" />: {params.row.careOf}<br />
<FormattedMessage id="myRemarks" />: {params.row.remarks}
</div> :
<div>
{params.row.remarks}
<FormattedMessage id="gazetteCount" />: {params.row.issueVolume + "/" + params.row.issueYear
+ " No. " + params.row.issueNo}<br />
<FormattedMessage id="myRemarks" />:{params.row.remarks}
</div>
)
},


+ 11
- 11
src/translations/en.json Zobrazit soubor

@@ -4,10 +4,10 @@
"zh-CN": "简体中文",
"language":"Language",
"iamsmartLink": "https://www.iamsmart.gov.hk/en/",
"dateStrFormat": "YYYY-MM-DD",
"dateStrFormat": "DD MMM YYYY",
"datetimeStrFormat": "YYYY-MM-DD HH:mm:ss",
"paymentMethodDatetimeStrFormat": "YYYY-MM-DD h:mm a",
"datetimeFormate": "YYYY-MM-DD h:mm a",
"paymentMethodDatetimeStrFormat": "DD MMM YYYY h:mm a",
"datetimeFormate": "DD MMM YYYY h:mm a",
"PNSPS": "PNSPS",
"PNSPS_fullname": "Public Notice Submission and Payment System",
@@ -120,15 +120,15 @@
"proofPaymentHeader_demandNote": "Public Notice: Proofreading Completed and Payment Means Selected",
"proofPaymentBody_demandNote": "We have received the manuscript proofreading confirmation and printing instructions for application number: {appNo}<br/><br/>You have selected to make payment by General Demand Note.",
"proofPaymentBody_demandNote2": "The General Demand Note will be sent to the following email address within one working day, but not later than {closingDateOff} 9:00 p.m. : <br/>{email}",
"proofPaymentBody_demandNote3": "Please make payment and return the payment proof (e.g. ATM receipt, internet banking record)and the application number to [email protected] by {paymentDeadline}.",
"proofPaymentBody_demandNote3": "Please make payment and return the payment proof (e.g. ATM receipt, internet banking record)and the application number to [email protected] by {paymentDeadline} 12:30 p.m..",
"proofPaymentBody_demandNote4": "We will process the publication after receiving payment confirmation.",

"proofPaymentHeader_office": "Public Notice: Proofreading Completed and Payment Means Selected",
"proofPaymentBody_office": "We have received the manuscript proofreading confirmation and printing instructions for application number: {appNo}",
"proofPaymentBody_office2": "You have selected to make payment at North Point Government Offices Collection Office:<center><br/>Collection Office at Accounts Section<br/>10/F North Point Government Offices<br/>333 Java Road North Point</center>",
"proofPaymentBody_office3": "The office hours of the Collection Office is from Monday to Friday: 8:30 a.m. to 1 p.m., 2 p.m. to 5 p.m.",
"proofPaymentBody_office3": "The office hours of the Collection Office is from Monday to Friday: 8:30 a.m. to 1 p.m., 2 p.m. to 5 p.m. , except public holidays.",
"proofPaymentBody_office4": "Cheques, drafts or cashier’s orders should be made payable to “The Government of the Hong Kong Special Administrative Region” or “The Government of the HKSAR” and crossed. They must not be made payable to any individual officer. Payment is valid only after the cheque, draft or cashier’s order is cleared.",
"proofPaymentBody_office5": "Please print out this page or present your application details on screen at our Collection Office, and complete the payment by {paymentDeadline}.",
"proofPaymentBody_office5": "Please print out this page or present your application details on screen at our Collection Office, and complete the payment by {paymentDeadline} 12:30 p.m..",
"proofPaymentBody_office6": "We will process the publication after receiving payment confirmation.",

"proofPaymentHeader_online": "Public Notice: Proofreading Completed and Payment Means Selected",
@@ -423,7 +423,7 @@
"download": "Download",
"paymentHistory": "Payment History",
"proofId": "Proof Code",
"proofDate": "Deadline for online manuscript revision",
"proofDate": "Deadline for online manuscript revision (Pay online via PNSPS)",
"proofDateFrom": "Proof Sent Date (From)",
"proofDateTo": "Proof Sent Date (To)",
"replyDate": "Reply Date",
@@ -431,7 +431,7 @@
"payFeeFor": "Pay for",
"payFor": "Pay",
"payFee": "Payment Amount",
"replyBefore": "Deadline for Online Confirm Proof",
"replyBefore": "Deadline for Online Confirm Proof (Pay online via PNSPS)",
"applicationPublishDate": "Publish Date",
"pleaseCheckReminder": "Please download the following printed manuscript file and proofread it carefully",
"payAnd": "Pay and ",
@@ -470,9 +470,9 @@
"fpsQrcodeTitle4":"Remaining time:",
"fpsQrcodeTitle5":"s",

"payDnRemark": "Payment proof (e.g. ATM receipt, internet banking record) to be sent to [email protected] by {date}",
"payNPGORemark" :"Payment to be completed at NPGO Collection Office by {date}",
"payOnlineRemark" :"Payment to be completed via this system by {date} 2:30 p.m.",
"payDnRemark": "Payment proof (e.g. ATM receipt, internet banking record) to be sent to [email protected] by {date} 12:30 p.m..",
"payNPGORemark" :"Payment to be completed at NPGO Collection Office by {date} 12:30 p.m..",
"payOnlineRemark" :"Payment to be completed via this system by {date} 2:30 p.m..",

"before": "Before",
"page": "Page",


+ 7
- 7
src/translations/zh-CN.json Zobrazit soubor

@@ -7,7 +7,7 @@
"dateStrFormat": "YYYY年MM月DD日",
"datetimeStrFormat": "YYYY年MM月DD日 HH:mm:ss",
"paymentMethodDatetimeStrFormat": "YYYY年MM月DD日 ah时mm分",
"datetimeFormate": "YYYY年MM月DD日 h:mm a",
"datetimeFormate": "YYYY年MM月DD日 ah时mm分",

"PNSPS": "公共启事提交及缴费系统",
"PNSPS_fullname": "公共启事提交及缴费系统",
@@ -78,9 +78,9 @@
"fpsQrcodeTitle4":"剩余时间:",
"fpsQrcodeTitle5":"秒",
"payDnRemark": "在{date}之前將付款證明（如自動櫃員機收據、網上銀行付款記錄）電郵至[email protected]。",
"payNPGORemark" :"在{date}之前在北角政府合署收款处完成付款",
"payOnlineRemark" :"在{date} 下午2時30分 之前在此系统完成网上付款。",
"payDnRemark": "在{date} 下午12時30分 前將付款證明（如自動櫃員機收據、網上銀行付款記錄）電郵至[email protected]。",
"payNPGORemark" :"在{date} 下午12時30分 前在北角政府合署收款处完成付款",
"payOnlineRemark" :"在{date} 下午2時30分 前透過此系统完成网上付款。",
"MSG.registerIAmSmart": "你可点击「智方便」按钮，系统会自动输入个人资料，或自行输入个人资料，以即时启动 公共启事提交及缴费系统 帐户。<br/>如欲使用「智方便」提供个人资料，请先下载「智方便」流动应用程式并登记成为「智方便」用户。",
"MSG.registerPersonal": "需上载身份证明文件数码档案以进行网上申请。 <br/>如：香港身份证; 护照; 中国内地身份证; 专业执业证书等",
@@ -156,7 +156,7 @@
"proofPaymentHeader_demandNote": "公共启事: 已完成校对并已选择付款方式",
"proofPaymentBody_demandNote": "我们已收到以下申请编号的稿件校对确认及可付印指示。<br/>{appNo}<br/><br/>你已选择以一般缴款单付款。",
"proofPaymentBody_demandNote2": "一般缴款单将在一个工作天内，但不迟于{closingDateOff} 晚上9时前发送至以下电邮地址： <br/>{email}",
"proofPaymentBody_demandNote3": "请在{paymentDeadline}前缴付款项并将相关付款证明（例如银行入数纸或网上银行付款记录）连同申请编号电邮至[email protected]。",
"proofPaymentBody_demandNote3": "请在{paymentDeadline}下午12时30分前缴付款项并将相关付款证明（例如银行入数纸或网上银行付款记录）连同申请编号电邮至[email protected]。",
"proofPaymentBody_demandNote4": "我们将在收到付款后处理刊登事宜。",

"proofPaymentHeader_office": "公共启事: 已完成校对并已选择付款方式",
@@ -456,7 +456,7 @@
"download": "下载",
"paymentHistory": "付款记录",
"proofId": "校对编号",
"proofDate": "网上修订稿件最后限期",
"proofDate": "网上修订稿件最后限期 (透过此系统网上付款)",
"proofDateFrom": "出稿日期 (从)",
"proofDateTo": "出稿日期 (到)",
"replyDate": "回复日期",
@@ -464,7 +464,7 @@
"payFeeFor": "应缴金额 ($)",
"payFor": "付款",
"payFee": "付款金额 ($)",
"replyBefore": "网上确定付印最后限期",
"replyBefore": "网上确定付印最后限期 (透过此系统网上付款)",
"applicationPublishDate": "刊出日期",
"pleaseCheckReminder": "请下载下列印刷稿档案，并仔细校对",
"payAnd": "缴费及",


+ 7
- 7
src/translations/zh-HK.json Zobrazit soubor

@@ -7,7 +7,7 @@
"dateStrFormat": "YYYY年MM月DD日",
"datetimeStrFormat": "YYYY年MM月DD日 HH:mm:ss",
"paymentMethodDatetimeStrFormat": "YYYY年MM月DD日 ah時mm分",
"datetimeFormate": "YYYY年MM月DD日 h:mm a",
"datetimeFormate": "YYYY年MM月DD日 ah時mm分",

"PNSPS": "公共啟事提交及繳費系統",
"PNSPS_fullname": "公共啟事提交及繳費系統",
@@ -78,9 +78,9 @@
"fpsQrcodeTitle4":"剩餘時間:",
"fpsQrcodeTitle5":"秒",

"payDnRemark": "在{date} 下午12時30分 之前將付款證明（如自動櫃員機收據、網上銀行付款記錄）電郵至 [email protected]。 ",
"payNPGORemark" :"在{date} 下午12時30分 之前在北角政府合署收款處完成付款",
"payOnlineRemark" :"在{date} 下午2時30分 之前在此系統完成網上付款。",
"payDnRemark": "在{date} 下午12時30分 前將付款證明（如自動櫃員機收據、網上銀行付款記錄）電郵至 [email protected]。 ",
"payNPGORemark" :"在{date} 下午12時30分 前在北角政府合署收款處完成付款",
"payOnlineRemark" :"在{date} 下午2時30分 前透過此系統完成網上付款。",

"MSG.registerIAmSmart": "你可點擊「智方便」按鈕，系統會自動輸入個人資料，或自行輸入個人資料，以即時啟動 公共啟事提交及繳費系統 帳戶。<br/>如欲使用「智方便」提供個人資料，請先下載「智方便」流動應用程式並登記成為「智方便」用戶。",
"MSG.registerPersonal": "需上載身份證明文件數碼檔案以進行網上申請。<br/>如：香港身份證; 護照; 中國內地身份證; 專業執業証書等",
@@ -156,7 +156,7 @@
"proofPaymentHeader_demandNote": "公共啟事: 已完成校對並已選擇付款方式",
"proofPaymentBody_demandNote": "我們已收到以下申請編號的稿件校對確認及可付印指示。<br/>{appNo}<br/>你已選擇以一般繳款單付款。",
"proofPaymentBody_demandNote2": "一般繳款單將在一個工作天內，但不遲於{closingDateOff} 晚上9時前發送至以下電郵地址： <br/>{email}",
"proofPaymentBody_demandNote3": "請在{paymentDeadline}前繳付款項並將相關付款證明（例如銀行入數紙或網上銀行付款記錄）連同申請編號電郵至[email protected]。 ",
"proofPaymentBody_demandNote3": "請在{paymentDeadline}下午12时30分前繳付款項並將相關付款證明（例如銀行入數紙或網上銀行付款記錄）連同申請編號電郵至[email protected]。 ",
"proofPaymentBody_demandNote4": "我們將在收到付款後處理刊登事宜。",

"proofPaymentHeader_office": "公共啟事: 已完成校對並已選擇付款方式",
@@ -457,7 +457,7 @@
"download": "下載",
"paymentHistory": "付款記錄",
"proofId": "校對編號",
"proofDate": "網上俢訂稿件最後限期",
"proofDate": "網上俢訂稿件最後限期 (透過此系統網上付款)",
"proofDateFrom": "出稿日期 (從)",
"proofDateTo": "出稿日期 (到)",
"replyDate": "回覆日期",
@@ -465,7 +465,7 @@
"payFeeFor": "應繳金額 ($)",
"payFor": "付款",
"payFee": "付款金額 ($)",
"replyBefore": "網上確定付印最後限期",
"replyBefore": "網上確定付印最後限期 (透過此系統網上付款)",
"applicationPublishDate": "刊出日期",
"pleaseCheckReminder": "請下載下列印刷稿檔案，並仔細校對",
"payAnd": "繳費及",


+ 6
- 2
src/utils/DateUtils.js Zobrazit soubor

@@ -1,7 +1,7 @@
import dayjs from 'dayjs';

var days_ZH = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
var days_CN = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
var days_ZH = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var days_CN = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];

export const datetimeStr = (date) =>{
@@ -29,6 +29,10 @@ export const dateStr_Cht = (date) =>{
return dateFormat(date,"YYYY年MM月DD日")
};

export const dateStr_Eng = (date) =>{
return dateFormat(date,"DD MMM YYYY")
};

export const datetimeFieldFormat = (date) =>{
return dateFormat(date,"YYYY-MM-DDTHH:mm");
};


Zapsat Náhled
Načítá se…
Zrušit
Uložit