@@ -166,7 +166,7 @@ const Index = () => { | |||
<DialogContent style={{ display: 'flex', }}> | |||
<Stack direction="column" justifyContent="space-between"> | |||
<Typography variant="h4"> | |||
<FormattedMessage id="totalAmount"/>(HK$): {FormatUtils.currencyFormat(fee)} | |||
<FormattedMessage id="totalAmount"/> (HK$): {FormatUtils.currencyFormat(fee)} | |||
</Typography> | |||
</Stack> | |||
</DialogContent> | |||
@@ -139,7 +139,11 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => { | |||
</div> | |||
</Grid> | |||
<Grid item xs={12} width={{xs:"90%", sm:"90%", md:"60%", lg:"60%"}}> | |||
<Button title={intl.formatMessage({id: 'back'})} sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }}> | |||
<Button | |||
aria-label={intl.formatMessage({id: 'back'})} | |||
title={intl.formatMessage({id: 'back'})} | |||
sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }} | |||
> | |||
<ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} /> | |||
</Button> | |||
</Grid> | |||
@@ -190,7 +194,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => { | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={6}> | |||
<RadioGroup | |||
aria-labelledby="demo-radio-buttons-group-label" | |||
aria-labelledby="radio-buttons-group-label" | |||
id="issueId" | |||
name="issueId" | |||
defaultValue={issueId} | |||
@@ -230,6 +234,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => { | |||
<Grid item xs={12} md={3} lg={3}> | |||
<label htmlFor="uploadFileBtn"> | |||
<Button | |||
aria-label={intl.formatMessage({id: 'uploadFileBtn'})} | |||
component="span" | |||
variant="outlined" | |||
size="large" | |||
@@ -260,6 +265,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => { | |||
<center> | |||
<ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}> | |||
<Button | |||
aria-label={intl.formatMessage({id: 'applyPublicNotice'})} | |||
variant="contained" | |||
type="submit" | |||
> | |||
@@ -281,7 +287,12 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => { | |||
<Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography> | |||
</DialogContent> | |||
<DialogActions> | |||
<Button onClick={() => setIsWarningPopUp(false)}>OK</Button> | |||
<Button | |||
aria-label={intl.formatMessage({id: 'ok'})} | |||
onClick={() => setIsWarningPopUp(false)} | |||
> | |||
<FormattedMessage id="ok" /> | |||
</Button> | |||
</DialogActions> | |||
</Dialog> | |||
</div> | |||
@@ -157,6 +157,7 @@ const ApplicationDetailCard = ( | |||
|| currentApplicationDetailData.status == "paid" | |||
|| currentApplicationDetailData.creditor} | |||
startIcon={<EditNoteIcon />} | |||
aria-label={intl.formatMessage({id: 'payFor'})} | |||
> | |||
<FormattedMessage id="payFor"/> | |||
</Button> | |||
@@ -169,6 +170,7 @@ const ApplicationDetailCard = ( | |||
disabled={currentApplicationDetailData.status !== "submitted"} | |||
title={intl.formatMessage({id: 'cancel'})} | |||
startIcon={<CloseIcon />} | |||
aria-label={intl.formatMessage({id: 'cancel'})} | |||
> | |||
<FormattedMessage id="cancel"/> | |||
</Button> | |||
@@ -544,6 +546,7 @@ const ApplicationDetailCard = ( | |||
<Button | |||
variant="contained" | |||
onClick={onDownloadClick()} | |||
aria-label={intl.formatMessage({id: 'download'})} | |||
title={intl.formatMessage({id: 'download'})} | |||
color="save" | |||
startIcon={<DownloadIcon sx={{alignItems:"center"}}/>} | |||
@@ -607,15 +610,23 @@ const ApplicationDetailCard = ( | |||
<DialogContent style={{ display: 'flex', }}> | |||
<Stack direction="column" justifyContent="space-between"> | |||
<Typography variant="h4"> | |||
<FormattedMessage id="totalAmount"/>(HK$): {FormatUtils.currencyFormat(fee)} | |||
<FormattedMessage id="totalAmount"/> (HK$): {FormatUtils.currencyFormat(fee)} | |||
</Typography> | |||
</Stack> | |||
</DialogContent> | |||
<DialogActions> | |||
<Button onClick={() => setIsPopUp(false)}><Typography variant="h5"> | |||
<Button | |||
onClick={() => setIsPopUp(false)} | |||
aria-label={intl.formatMessage({id: 'close'})} | |||
> | |||
<Typography variant="h5"> | |||
<FormattedMessage id="close"/> | |||
</Typography></Button> | |||
<Button onClick={() => doPayment()}><Typography variant="h5"> | |||
<Button | |||
onClick={() => doPayment()} | |||
aria-label={intl.formatMessage({id: 'confirm'})} | |||
> | |||
<Typography variant="h5"> | |||
<FormattedMessage id="confirm"/> | |||
</Typography></Button> | |||
</DialogActions> | |||
@@ -633,7 +644,10 @@ const ApplicationDetailCard = ( | |||
</Stack> | |||
</DialogContent> | |||
<DialogActions> | |||
<Button onClick={() => setErrorPopUp(false)}> | |||
<Button | |||
onClick={() => setErrorPopUp(false)} | |||
aria-label={intl.formatMessage({id: 'close'})} | |||
> | |||
<Typography variant="h5"> | |||
<FormattedMessage id="close"/> | |||
</Typography></Button> | |||
@@ -164,7 +164,12 @@ const DashboardDefault = () => { | |||
<Grid container direction="column" justifyContent="flex-start" alignItems="center"> | |||
<Grid item xs={12} width="75%"> | |||
<Stack direction="row"> | |||
<Button title={intl.formatMessage({id: 'back'})} sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/publicNotice") }}> | |||
<Button | |||
aria-label={intl.formatMessage({id: 'back'})} | |||
title={intl.formatMessage({id: 'back'})} | |||
sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} | |||
variant="outlined" onClick={() => { navigate("/publicNotice") }} | |||
> | |||
<ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} /> | |||
</Button> | |||
<Typography ml={3} mt={3} variant="h4">{title}</Typography> | |||
@@ -56,11 +56,15 @@ const PublicNotice = ({ proofList, paymentList }) => { | |||
<TabContext value={selectedTab}> | |||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | |||
<TabList onChange={handleChange} aria-label="lab API tabs example"> | |||
<Tab label={ | |||
<Tab | |||
aria-label={intl.formatMessage({id: 'proofRecord'})} | |||
label={ | |||
intl.formatMessage({id: 'proofRecord'}) + "(" + _proofList.length + ") "} value="1" | |||
/> | |||
<Tab label={ intl.formatMessage({id: 'paymentHistory'}) +"(" + _paymentList.length + ") "} value="2" /> | |||
<Tab | |||
aria-label={intl.formatMessage({id: 'paymentHistory'})} | |||
label={ intl.formatMessage({id: 'paymentHistory'}) +"(" + _paymentList.length + ") "} value="2" | |||
/> | |||
</TabList> | |||
</Box> | |||
<TabPanel value="1"> | |||
@@ -106,7 +106,7 @@ export default function BaseGrid({rows}) { | |||
width: 160, | |||
cellClassName: 'actions', | |||
renderCell: (params) => { | |||
return <Button onClick={handleDetailClick(params)}> | |||
return <Button aria-label={intl.formatMessage({id: 'viewDetail'})} onClick={handleDetailClick(params)}> | |||
<FormattedMessage id="viewDetail"/> | |||
</Button>; | |||
}, | |||
@@ -202,7 +202,7 @@ export default function SubmittedTab({ rows }) { | |||
width: 150, | |||
cellClassName: 'actions', | |||
renderCell: (params) => { | |||
return <Button onClick={handleDetailClick(params)}> | |||
return <Button aria-label={intl.formatMessage({id: 'viewDetail'})} onClick={handleDetailClick(params)}> | |||
<FormattedMessage id="viewDetail"/> | |||
</Button>; | |||
}, | |||
@@ -230,7 +230,7 @@ export default function SubmittedTab({ rows }) { | |||
totalAmount += datas[i].fee; | |||
} | |||
content.push(<Typography variant="h5"> | |||
<FormattedMessage id="totalAmount"/>(HK$): {FormatUtils.currencyFormat(totalAmount)} | |||
<FormattedMessage id="totalAmount"/> (HK$): {FormatUtils.currencyFormat(totalAmount)} | |||
<br /><br /> | |||
</Typography>); | |||
//setAmount(totalAmount); | |||
@@ -323,6 +323,7 @@ export default function SubmittedTab({ rows }) { | |||
<Button | |||
color="create" | |||
variant="contained" | |||
aria-label={intl.formatMessage({id: 'pay'})} | |||
onClick={() => { handlePaymentBtn() }} | |||
sx={{mt:2, ml:1}} | |||
> | |||
@@ -354,11 +355,13 @@ export default function SubmittedTab({ rows }) { | |||
</Stack> | |||
</DialogContent> | |||
<DialogActions> | |||
<Button onClick={() => setIsPopUp(false)}> | |||
<Button onClick={() => setIsPopUp(false)} aria-label={intl.formatMessage({id: 'close'})}> | |||
<Typography variant="h5"> | |||
<FormattedMessage id="close"/> | |||
</Typography></Button> | |||
<Button onClick={() => doPayment()}><Typography variant="h5"> | |||
<Button onClick={() => doPayment()} aria-label={intl.formatMessage({id: 'confirm'})}> | |||
<Typography variant="h5"> | |||
<FormattedMessage id="confirm"/> | |||
</Typography></Button> | |||
</DialogActions> | |||
@@ -377,11 +380,13 @@ export default function SubmittedTab({ rows }) { | |||
</Stack> | |||
</DialogContent> | |||
<DialogActions> | |||
<Button onClick={() => setCheckCareOf(false)}> | |||
<Button onClick={() => setCheckCareOf(false)} aria-label={intl.formatMessage({id: 'close'})}> | |||
<Typography variant="h5"> | |||
<FormattedMessage id="close"/> | |||
</Typography></Button> | |||
<Button onClick={() => afterWarningPayment()}><Typography variant="h5"> | |||
<Button onClick={() => afterWarningPayment()} aria-label={intl.formatMessage({id: 'confirm'})}> | |||
<Typography variant="h5"> | |||
<FormattedMessage id="confirm"/> | |||
</Typography></Button> | |||
</DialogActions> | |||
@@ -400,7 +405,7 @@ export default function SubmittedTab({ rows }) { | |||
</Stack> | |||
</DialogContent> | |||
<DialogActions> | |||
<Button onClick={() => setExpiryDateErr(false)}> | |||
<Button onClick={() => setExpiryDateErr(false)} aria-label={intl.formatMessage({id: 'close'})}> | |||
<Typography variant="h5"> | |||
<FormattedMessage id="close"/> | |||
</Typography></Button> | |||
@@ -75,6 +75,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||
fullWidth | |||
{...register("appNo")} | |||
id='appNo' | |||
aria-label={intl.formatMessage({id: 'applicationId'})} | |||
label={intl.formatMessage({id: 'applicationId'})} | |||
defaultValue={searchCriteria.appNo} | |||
InputLabelProps={{ | |||
@@ -89,6 +90,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||
{...register("dateFrom")} | |||
id="dateFrom" | |||
type="date" | |||
aria-label={intl.formatMessage({id: 'submitDateFrom'})} | |||
label={intl.formatMessage({id: 'submitDateFrom'})} | |||
defaultValue={searchCriteria.dateFrom} | |||
InputProps={{ inputProps: { max: maxDate } }} | |||
@@ -110,6 +112,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||
{...register("dateTo")} | |||
id="dateTo" | |||
type="date" | |||
aria-label={intl.formatMessage({id: 'submitDateTo'})} | |||
label={intl.formatMessage({id: 'submitDateTo'})} | |||
defaultValue={searchCriteria.dateTo} | |||
InputProps={{ inputProps: { min: minDate } }} | |||
@@ -125,6 +128,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||
{...register("careOf")} | |||
id="careOf" | |||
label="Care Of" | |||
aria-label={"Care Of"} | |||
defaultValue={searchCriteria.careOf} | |||
InputLabelProps={{ | |||
shrink: true | |||
@@ -139,6 +143,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||
{...register("contact")} | |||
id="contact" | |||
label={intl.formatMessage({id: 'contactPerson'})} | |||
aria-label={intl.formatMessage({id: 'contactPerson'})} | |||
defaultValue={searchCriteria.contact} | |||
InputLabelProps={{ | |||
shrink: true | |||
@@ -183,6 +188,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||
renderInput={(params) => ( | |||
<TextField {...params} | |||
label={intl.formatMessage({id: 'status'})} | |||
aria-label={intl.formatMessage({id: 'status'})} | |||
InputLabelProps={{ | |||
shrink: true | |||
}} | |||
@@ -212,6 +218,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||
<Button | |||
variant="contained" | |||
onClick={resetForm} | |||
aria-label={intl.formatMessage({id: 'reset'})} | |||
> | |||
<Typography variant="pnspsButtonText"> | |||
<FormattedMessage id="reset"/> | |||
@@ -223,6 +230,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||
<Button | |||
variant="contained" | |||
type="submit" | |||
aria-label={intl.formatMessage({id: 'search'})} | |||
> | |||
<Typography variant="pnspsButtonText"> | |||
<FormattedMessage id="search"/> | |||
@@ -109,7 +109,9 @@ export default function SearchPublicNoticeTable({ recordList }) { | |||
width: 150, | |||
cellClassName: 'actions', | |||
renderCell: (params) => { | |||
return <Button onClick={handleDetailClick(params)}> | |||
return <Button onClick={handleDetailClick(params)} | |||
aria-label={intl.formatMessage({id: 'viewDetail'})} | |||
> | |||
<FormattedMessage id="viewDetail"/> | |||
</Button>; | |||
}, | |||
@@ -118,7 +118,7 @@ const PublicNotice = () => { | |||
<Stack direction="row" justifyContent="flex-end" alignItems="center"> | |||
<ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}> | |||
<Box sx={{ mr: { md: "47px" } }}> | |||
<Button variant="contained" onClick={() => { onBtnClick() }}> | |||
<Button aria-label={intl.formatMessage({id: 'applyPublicNotice'})} variant="contained" onClick={() => { onBtnClick() }}> | |||
<FormattedMessage id="applyPublicNotice"/> | |||
</Button> | |||
</Box> | |||
@@ -133,10 +133,10 @@ const PublicNotice = () => { | |||
<TabContext value={selectedTab}> | |||
<Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto', overflowY:'auto' }}> | |||
<TabList onChange={handleChange} aria-label="lab API tabs example" sx={{ display: 'flex', flexDirection: 'row' }}> | |||
<Tab label={intl.formatMessage({id: 'processing'}) + " (" + submittedList?.length + ")"} value="1" /> | |||
<Tab label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList?.length + ")"} value="3" /> | |||
<Tab label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList?.length + ")"} value="4" /> | |||
<Tab label={intl.formatMessage({id: 'searchApplyRecord'})} value="5" /> | |||
<Tab aria-label={intl.formatMessage({id: 'processing'})} label={intl.formatMessage({id: 'processing'}) + " (" + submittedList?.length + ")"} value="1" /> | |||
<Tab aria-label={intl.formatMessage({id: 'pendingPublish'})} label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList?.length + ")"} value="3" /> | |||
<Tab aria-label={intl.formatMessage({id: 'pendingPayment'})} label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList?.length + ")"} value="4" /> | |||
<Tab aria-label={intl.formatMessage({id: 'searchApplyRecord'})} label={intl.formatMessage({id: 'searchApplyRecord'})} value="5" /> | |||
</TabList> | |||
</Box> | |||
<TabPanel value="1"> | |||
@@ -170,10 +170,10 @@ const PublicNotice = () => { | |||
<TabContext value={selectedTab}> | |||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | |||
<TabList onChange={handleChange} aria-label="lab API tabs example"> | |||
<Tab label={intl.formatMessage({id: 'processing'}) + " (" + submittedList.length + ")"} value="1" /> | |||
<Tab label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList.length + ")"} value="3" /> | |||
<Tab label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList.length + ")"} value="4" /> | |||
<Tab label={intl.formatMessage({id: 'searchApplyRecord'})} value="5" /> | |||
<Tab aria-label={intl.formatMessage({id: 'processing'})} label={intl.formatMessage({id: 'processing'}) + " (" + submittedList.length + ")"} value="1" /> | |||
<Tab aria-label={intl.formatMessage({id: 'pendingPayment'})} label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList.length + ")"} value="3" /> | |||
<Tab aria-label={intl.formatMessage({id: 'pendingPublish'})} label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList.length + ")"} value="4" /> | |||
<Tab aria-label={intl.formatMessage({id: 'searchApplyRecord'})} label={intl.formatMessage({id: 'searchApplyRecord'})} value="5" /> | |||
</TabList> | |||
</Box> | |||
<TabPanel value="1"> | |||
@@ -361,6 +361,7 @@ | |||
"dateTo": "Date(To)", | |||
"of": "of", | |||
"loading": "Loading...", | |||
"ok": "Ok", | |||
"Dashboard": "Dashboard", | |||
"event": "Event" |
@@ -361,6 +361,7 @@ | |||
"dateTo": "日期(到)", | |||
"of": "於", | |||
"loading": "加载中...", | |||
"ok": "好的", | |||
"Dashboard": "仪表板", | |||
"event": "活动" |
@@ -361,6 +361,7 @@ | |||
"dateTo": "日期(到)", | |||
"of": "於", | |||
"loading": "加載中...", | |||
"ok": "好的", | |||
"Dashboard": "儀表板", | |||
"event": "活動" |