@@ -11,6 +11,7 @@ import { FiDataGrid } from "components/FiDataGrid"; | |||||
import * as DateUtils from "utils/DateUtils" | import * as DateUtils from "utils/DateUtils" | ||||
import {useTheme} from "@emotion/react"; | import {useTheme} from "@emotion/react"; | ||||
import {FormattedMessage, useIntl} from "react-intl"; | import {FormattedMessage, useIntl} from "react-intl"; | ||||
import { Grid } from '../../../../node_modules/@mui/material/index'; | |||||
// import * as Utils from "utils/Utils" | // import * as Utils from "utils/Utils" | ||||
// ==============================|| EVENT TABLE ||============================== // | // ==============================|| EVENT TABLE ||============================== // | ||||
@@ -23,6 +24,22 @@ export default function SearchPublicNoticeTable({ recordList }) { | |||||
const { locale } = intl; | const { locale } = intl; | ||||
//const intl = useIntl(); | //const intl = useIntl(); | ||||
const _sx = { | |||||
padding: "4 2 4 2", | |||||
boxShadow: 1, | |||||
border: 1, | |||||
borderColor: '#DDD', | |||||
'& .MuiDataGrid-cell': { | |||||
borderTop: 1, | |||||
borderBottom: 1, | |||||
borderColor: "#EEE" | |||||
}, | |||||
'& .MuiDataGrid-footerContainer': { | |||||
border: 1, | |||||
borderColor: "#EEE" | |||||
} | |||||
} | |||||
React.useEffect(() => { | React.useEffect(() => { | ||||
const indexedData = recordList.map((obj, index) => ({ index_number: index + 1, ...obj })); | const indexedData = recordList.map((obj, index) => ({ index_number: index + 1, ...obj })); | ||||
setRows(indexedData); | setRows(indexedData); | ||||
@@ -76,17 +93,22 @@ export default function SearchPublicNoticeTable({ recordList }) { | |||||
<div style={{ minHeight:400, width: '100%' }}> | <div style={{ minHeight:400, width: '100%' }}> | ||||
<FiDataGrid | <FiDataGrid | ||||
sx={_sx} | |||||
rowHeight={150} | rowHeight={150} | ||||
rows={rows} | rows={rows} | ||||
columns={columns} | columns={columns} | ||||
customPageSize={5} | customPageSize={5} | ||||
/> | /> | ||||
<Typography align="right" variant="h4" sx={{mr:2}}> | |||||
<FormattedMessage id="payTotal"/>: | |||||
<span style={{ color: "blue", fontWeight: "bold", }}> | |||||
(HK$) {FormatUtils.currencyFormat(total)} | |||||
</span> | |||||
</Typography> | |||||
<Grid container direction="row" justifyContent="flex-end" sx={{backgroundColor: '#fff' }}> | |||||
<Grid item> | |||||
<Typography align="right" variant="h4" sx={{mr:2,mt:1}}> | |||||
<FormattedMessage id="payTotal"/>: | |||||
<span style={{ color: "blue", fontWeight: "bold", }}> | |||||
(HK$) {FormatUtils.currencyFormat(total)} | |||||
</span> | |||||
</Typography> | |||||
</Grid> | |||||
</Grid> | |||||
</div> | </div> | ||||
); | ); | ||||
} | } |
@@ -15,7 +15,7 @@ const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/Loa | |||||
import DownloadIcon from '@mui/icons-material/Download'; | import DownloadIcon from '@mui/icons-material/Download'; | ||||
import {FormattedMessage, useIntl} from "react-intl"; | import {FormattedMessage, useIntl} from "react-intl"; | ||||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
const PaymentDetails = ({ formData,doPrint }) => { | |||||
const PaymentDetails = ({ formData,doPrint,onDownload }) => { | |||||
const intl = useIntl(); | const intl = useIntl(); | ||||
const { locale } = intl; | const { locale } = intl; | ||||
@@ -168,12 +168,16 @@ const PaymentDetails = ({ formData,doPrint }) => { | |||||
</FormLabel> | </FormLabel> | ||||
</Grid> | </Grid> | ||||
<Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}> | <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}> | ||||
{onDownload? | |||||
<LoadingComponent disableText={true} alignItems="flex-start"/> | |||||
: | |||||
<Button className="printHidden" variant="contained" sx={{ mt:2 }} onClick={doPrint}> | <Button className="printHidden" variant="contained" sx={{ mt:2 }} onClick={doPrint}> | ||||
<DownloadIcon/> | <DownloadIcon/> | ||||
<Typography sx={{fontSize: "16px"}}> | <Typography sx={{fontSize: "16px"}}> | ||||
<FormattedMessage id="download"/> | <FormattedMessage id="download"/> | ||||
</Typography> | </Typography> | ||||
</Button> | </Button> | ||||
} | |||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
@@ -40,6 +40,7 @@ const Index = () => { | |||||
const [record, setRecord] = React.useState(); | const [record, setRecord] = React.useState(); | ||||
const [itemList, setItemList] = React.useState([]); | const [itemList, setItemList] = React.useState([]); | ||||
const [onReady, setOnReady] = React.useState(false); | const [onReady, setOnReady] = React.useState(false); | ||||
const [onDownload, setOnDownload] = React.useState(false); | |||||
// const [detailsOrder, setDetailsOrder] = React.useState(2); | // const [detailsOrder, setDetailsOrder] = React.useState(2); | ||||
React.useEffect(() => { | React.useEffect(() => { | ||||
@@ -58,8 +59,15 @@ const Index = () => { | |||||
const doPrint = () => { | const doPrint = () => { | ||||
// window.print(); | // window.print(); | ||||
setOnDownload(true) | |||||
HttpUtils.fileDownload({ | HttpUtils.fileDownload({ | ||||
url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+params.id, | url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+params.id, | ||||
onResponse:()=>{ | |||||
setOnDownload(false) | |||||
}, | |||||
onError:()=>{ | |||||
setOnDownload(false) | |||||
} | |||||
}); | }); | ||||
}; | }; | ||||
@@ -122,6 +130,7 @@ const Index = () => { | |||||
<PaymentDetails | <PaymentDetails | ||||
formData={record} | formData={record} | ||||
doPrint={doPrint} | doPrint={doPrint} | ||||
onDownload={onDownload} | |||||
style={{ | style={{ | ||||
display: "flex", | display: "flex", | ||||
height: "100%", | height: "100%", | ||||
@@ -44,6 +44,10 @@ export default function SearchPublicNoticeTable({ recordList }) { | |||||
navigate('/paymentPage/details/' + params.row.id); | navigate('/paymentPage/details/' + params.row.id); | ||||
}; | }; | ||||
const handleEditDoubleClick = (params) =>{ | |||||
navigate('/paymentPage/details/' + params.row.id); | |||||
}; | |||||
const columns = [ | const columns = [ | ||||
{ | { | ||||
field: 'actions', | field: 'actions', | ||||
@@ -100,14 +104,13 @@ export default function SearchPublicNoticeTable({ recordList }) { | |||||
return ( | return ( | ||||
<div style={{ minHeight: 400, width: '100%' }}> | <div style={{ minHeight: 400, width: '100%' }}> | ||||
<FiDataGrid | <FiDataGrid | ||||
sx={_sx} | sx={_sx} | ||||
rowHeight={80} | rowHeight={80} | ||||
rows={rows} | rows={rows} | ||||
columns={columns} | columns={columns} | ||||
customPageSize={5} | customPageSize={5} | ||||
onRowDoubleClick={handleEditClick} | |||||
onRowDoubleClick={handleEditDoubleClick} | |||||
/> | /> | ||||
</div> | </div> | ||||
); | ); | ||||
@@ -44,7 +44,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||||
const onSubmit = (data) => { | const onSubmit = (data) => { | ||||
const temp = { | const temp = { | ||||
code: data.code, | code: data.code, | ||||
tarnsNo: data.tarnsNo, | |||||
transNo: data.transNo, | |||||
dateFrom: data.dateFrom, | dateFrom: data.dateFrom, | ||||
dateTo: data.dateTo, | dateTo: data.dateTo, | ||||
status : (status?.type && status?.type != 'all') ? status?.type : "", | status : (status?.type && status?.type != 'all') ? status?.type : "", | ||||
@@ -134,19 +134,6 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
<Grid item xs={12} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}> | |||||
<TextField | |||||
fullWidth | |||||
{...register("tarnsNo")} | |||||
id='tarnsNo' | |||||
label={intl.formatMessage({id: 'payId'})+":"} | |||||
defaultValue={searchCriteria.tarnsNo} | |||||
InputLabelProps={{ | |||||
shrink: true | |||||
}} | |||||
/> | |||||
</Grid> | |||||
<Grid item xs={12} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}> | <Grid item xs={12} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}> | ||||
<Autocomplete | <Autocomplete | ||||
{...register("status")} | {...register("status")} | ||||
@@ -174,6 +161,19 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||||
/> | /> | ||||
</Grid> | </Grid> | ||||
<Grid item xs={12} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}> | |||||
<TextField | |||||
fullWidth | |||||
{...register("transNo")} | |||||
id='transNo' | |||||
label={intl.formatMessage({id: 'payId'})+":"} | |||||
defaultValue={searchCriteria.transNo} | |||||
InputLabelProps={{ | |||||
shrink: true | |||||
}} | |||||
/> | |||||
</Grid> | |||||
</Grid> | </Grid> | ||||
@@ -22,10 +22,11 @@ import { useNavigate } from "react-router-dom"; | |||||
import * as DateUtils from "utils/DateUtils" | import * as DateUtils from "utils/DateUtils" | ||||
import Loadable from 'components/Loadable'; | import Loadable from 'components/Loadable'; | ||||
import { notifyActionSuccess } from 'utils/CommonFunction'; | import { notifyActionSuccess } from 'utils/CommonFunction'; | ||||
import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst"; | |||||
import {PNSPS_BUTTON_THEME} from "themes/buttonConst"; | |||||
import {ThemeProvider} from "@emotion/react"; | import {ThemeProvider} from "@emotion/react"; | ||||
import {FormattedMessage, useIntl} from "react-intl"; | import {FormattedMessage, useIntl} from "react-intl"; | ||||
const UploadFileTable = Loadable(React.lazy(() => import('./UploadFileTable'))); | const UploadFileTable = Loadable(React.lazy(() => import('./UploadFileTable'))); | ||||
import * as ProofStatus from "utils/statusUtils/ProofStatus"; | |||||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
@@ -154,7 +155,7 @@ const FormPanel = ({ formData }) => { | |||||
<Grid container direction="column" sx={{ paddingLeft: 0, paddingRight: 0 }}> | <Grid container direction="column" sx={{ paddingLeft: 0, paddingRight: 0 }}> | ||||
<Grid item xs={12} sm={12} md={12} lg={8} textAlign="left"> | <Grid item xs={12} sm={12} md={12} lg={8} textAlign="left"> | ||||
<Typography variant="h5"> | <Typography variant="h5"> | ||||
<FormattedMessage id="proofReplyDate" />: | |||||
<FormattedMessage id="proofReplyDate" /> : | |||||
{ | { | ||||
locale === 'en' ? | locale === 'en' ? | ||||
DateUtils.dateStr(formik.values.replyDate) | DateUtils.dateStr(formik.values.replyDate) | ||||
@@ -165,7 +166,7 @@ const FormPanel = ({ formData }) => { | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={12} textAlign="left"> | <Grid item xs={12} md={12} textAlign="left"> | ||||
<Typography variant="h5"> | <Typography variant="h5"> | ||||
<FormattedMessage id="proofReply" />: {formik.values.action ? | |||||
<FormattedMessage id="proofReply" /> : {formik.values.action ? | |||||
(<span style={{ color: 'green' }}> | (<span style={{ color: 'green' }}> | ||||
<FormattedMessage id="proofErrorFree" /> | <FormattedMessage id="proofErrorFree" /> | ||||
</span>) | </span>) | ||||
@@ -175,6 +176,19 @@ const FormPanel = ({ formData }) => { | |||||
</span>)} | </span>)} | ||||
</Typography> | </Typography> | ||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={12} textAlign="left"> | |||||
<Typography variant="h5"> | |||||
<FormattedMessage id="proofReply" /> : | |||||
<span style={{ color: 'green' }}> | |||||
{ | |||||
locale === 'en' ? | |||||
ProofStatus.getStatusText_Eng(formik.values).text | |||||
: | |||||
ProofStatus.getStatusText_Cht(formik.values).text | |||||
} | |||||
</span> | |||||
</Typography> | |||||
</Grid> | |||||
{ | { | ||||
formik.values.action ? | formik.values.action ? | ||||
null | null | ||||
@@ -3,7 +3,8 @@ import * as React from 'react'; | |||||
import {FiDataGrid} from "components/FiDataGrid"; | import {FiDataGrid} from "components/FiDataGrid"; | ||||
import { | import { | ||||
Button, | Button, | ||||
Typography, useMediaQuery | |||||
// Typography, | |||||
useMediaQuery | |||||
} from '@mui/material'; | } from '@mui/material'; | ||||
import * as DateUtils from "utils/DateUtils" | import * as DateUtils from "utils/DateUtils" | ||||
import {useNavigate} from "react-router-dom"; | import {useNavigate} from "react-router-dom"; | ||||
@@ -80,13 +81,13 @@ export default function BaseGrid({rows}) { | |||||
renderCell: (params) => ( | renderCell: (params) => ( | ||||
isORGLoggedIn()? | isORGLoggedIn()? | ||||
<div> | <div> | ||||
<Typography variant="pnspsNormalText">Care Of: {params.row.careOf}</Typography> | |||||
<Typography> | |||||
<FormattedMessage variant="pnspsNormalText" id="myRemarks"/>: {params.row.remarks} | |||||
</Typography> | |||||
Care Of: {params.row.careOf} <br/> | |||||
<FormattedMessage variant="pnspsNormalText" id="myRemarks"/>: {params.row.remarks} | |||||
</div>: | </div>: | ||||
<div> | <div> | ||||
<Typography variant="pnspsNormalText">{params.row.remarks}</Typography> | |||||
{params.row.remarks} | |||||
{/* <Typography variant="pnspsNormalText">{params.row.remarks}</Typography> */} | |||||
</div> | </div> | ||||
) | ) | ||||
}, | }, | ||||
@@ -166,12 +166,13 @@ export default function SubmittedTab({ rows }) { | |||||
renderCell: (params) => ( | renderCell: (params) => ( | ||||
isORGLoggedIn() ? | isORGLoggedIn() ? | ||||
<div> | <div> | ||||
<Typography variant="pnspsNormalText">Care Of: {params.row.careOf}</Typography> | |||||
<Typography variant="pnspsNormalText"> | |||||
<FormattedMessage id="myRemarks"/>: {params.row.remarks}</Typography> | |||||
Care Of: {params.row.careOf}<br/> | |||||
<FormattedMessage id="myRemarks"/>: {params.row.remarks} | |||||
</div> : | </div> : | ||||
<div> | <div> | ||||
<Typography variant="pnspsNormalText">{params.row.remarks}</Typography> | |||||
{/* <Typography variant="pnspsNormalText"> */} | |||||
{params.row.remarks} | |||||
{/* </Typography> */} | |||||
</div> | </div> | ||||
) | ) | ||||
}, | }, | ||||
@@ -83,10 +83,8 @@ export default function SearchPublicNoticeTable({ recordList }) { | |||||
renderCell: (params) => ( | renderCell: (params) => ( | ||||
isORGLoggedIn()? | isORGLoggedIn()? | ||||
<div> | <div> | ||||
<Typography variant="pnspsNormalText">Care Of: {params.row.careOf}</Typography> | |||||
<Typography variant="pnspsNormalText"> | |||||
<FormattedMessage id="myRemarks"/>: {params.row.remarks} | |||||
</Typography> | |||||
Care Of: {params.row.careOf} <br/> | |||||
<FormattedMessage id="myRemarks"/>: {params.row.remarks} | |||||
</div>: | </div>: | ||||
<div> | <div> | ||||
<Typography variant="pnspsNormalText">{params.row.remarks}</Typography> | <Typography variant="pnspsNormalText">{params.row.remarks}</Typography> | ||||
@@ -1,7 +1,7 @@ | |||||
import {Box, CircularProgress, Grid, Typography} from "@mui/material"; | import {Box, CircularProgress, Grid, Typography} from "@mui/material"; | ||||
import {FormattedMessage} from "react-intl"; | import {FormattedMessage} from "react-intl"; | ||||
const LoadingComponent = () => { | |||||
const LoadingComponent = ({disableText,alignItems}) => { | |||||
return ( | return ( | ||||
<Grid item xs={12} md={12} lg={12} justifyContent="space-between" alignItems="center"> | <Grid item xs={12} md={12} lg={12} justifyContent="space-between" alignItems="center"> | ||||
<Box | <Box | ||||
@@ -10,11 +10,15 @@ const LoadingComponent = () => { | |||||
alignItems="center" | alignItems="center" | ||||
// autoHeight={true} | // autoHeight={true} | ||||
> | > | ||||
<Grid container direction="column" alignItems="center"> | |||||
<Grid container direction="column" alignItems={alignItems?alignItems:"center"}> | |||||
<CircularProgress/> | <CircularProgress/> | ||||
<Typography variant="h5"> | |||||
<FormattedMessage id="loading" /> | |||||
</Typography> | |||||
{disableText? | |||||
null | |||||
: | |||||
<Typography variant="h5"> | |||||
<FormattedMessage id="loading" /> | |||||
</Typography> | |||||
} | |||||
</Grid> | </Grid> | ||||
</Box> | </Box> | ||||
@@ -17,14 +17,26 @@ export function getStatus_Eng(params) { | |||||
return getStatusTag({color: status.color, textColor:status.textColor, text:status.eng }) | return getStatusTag({color: status.color, textColor:status.textColor, text:status.eng }) | ||||
} | } | ||||
export function getStatusText_Cht(params) { | |||||
let status = getStatus(params); | |||||
return {text:status.cht,status:status.eng} | |||||
} | |||||
export function getStatusText_Eng(params) { | |||||
let status = getStatus(params); | |||||
return {text:status.eng,status:status.eng} | |||||
} | |||||
function getStatus(params) { | function getStatus(params) { | ||||
// console.log(params) | |||||
let replyDate = params.row?params.row.replyDate:params.replyDate; | let replyDate = params.row?params.row.replyDate:params.replyDate; | ||||
let action = params.row?params.row.action:params.action; | let action = params.row?params.row.action:params.action; | ||||
let returnBeforeDate = params.row?params.row.returnBeforeDate:params.returnBeforeDate; | let returnBeforeDate = params.row?params.row.returnBeforeDate:params.returnBeforeDate; | ||||
let isCancelled = params.row?params.row.cancelled:params.cancelled; | let isCancelled = params.row?params.row.cancelled:params.cancelled; | ||||
if(isCancelled) return cancel; | if(isCancelled) return cancel; | ||||
console.log(replyDate) | |||||
if(replyDate){ | if(replyDate){ | ||||
return action?confirm:unable; | return action?confirm:unable; | ||||
}else{ | }else{ | ||||