| @@ -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{ | ||||