From 9619ae2a9ee5a1b1c4f5f7910e8dd688ebae3d73 Mon Sep 17 00:00:00 2001 From: anna Date: Wed, 27 Dec 2023 18:26:17 +0800 Subject: [PATCH] DN --- src/pages/DemandNote/Create/SearchForm.js | 17 +- .../Details/ApplicationDetailCard.js | 183 ++++++++++++++++++ .../DemandNote/Details/ClientDetailCard.js | 64 ++++++ src/pages/DemandNote/Details/DnDetailCard.js | 117 +++++++++++ .../DemandNote/Details/GazetteDetailCard.js | 96 +++++++++ src/pages/DemandNote/Details/index.js | 123 ++++++++++++ src/pages/DemandNote/Search/DataGrid.js | 43 ++-- src/routes/GLDUserRoutes.js | 5 + src/utils/ApiPathConst.js | 1 + src/utils/statusUtils/DnStatus.js | 24 +++ 10 files changed, 630 insertions(+), 43 deletions(-) create mode 100644 src/pages/DemandNote/Details/ApplicationDetailCard.js create mode 100644 src/pages/DemandNote/Details/ClientDetailCard.js create mode 100644 src/pages/DemandNote/Details/DnDetailCard.js create mode 100644 src/pages/DemandNote/Details/GazetteDetailCard.js create mode 100644 src/pages/DemandNote/Details/index.js create mode 100644 src/utils/statusUtils/DnStatus.js diff --git a/src/pages/DemandNote/Create/SearchForm.js b/src/pages/DemandNote/Create/SearchForm.js index cc648fa..a6da8b7 100644 --- a/src/pages/DemandNote/Create/SearchForm.js +++ b/src/pages/DemandNote/Create/SearchForm.js @@ -95,15 +95,13 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData }) => { {/*row 1*/} - Create + Please Select Gazette Issue : {/*row 2*/} - - - + { )} /> - - - - - {/*last row*/} - - + - - + + + + + + + + + + + + + + ); +}; + +export default ApplicationDetailCard; diff --git a/src/pages/DemandNote/Details/ClientDetailCard.js b/src/pages/DemandNote/Details/ClientDetailCard.js new file mode 100644 index 0000000..ce3a290 --- /dev/null +++ b/src/pages/DemandNote/Details/ClientDetailCard.js @@ -0,0 +1,64 @@ +// material-ui +import { + Grid, + // InputAdornment, + Typography, FormLabel, + +} from '@mui/material'; +import MainCard from "../../../components/MainCard"; +import * as React from "react"; + + +// ==============================|| DASHBOARD - DEFAULT ||============================== // +const ClientDetailCard = ({ data }) => { + + const [clientData, setClientData] = React.useState({}); + + React.useEffect(() => { + if (Object.keys(data).length > 0 && data !== undefined) { + setClientData(data); + } + }, [data]); + + const getDisplayField = (label, value) => { + return + + {label}: + + + {value} + + ; + } + + return ( + + + Client Details + + {getDisplayField("Client Type", clientData.type)} + {clientData.type === "ORG" ? + <> + {getDisplayField("Company Name (English)", clientData?.enCompanyName)} + {getDisplayField("Company Name (Chinese)", clientData?.chCompanyName)} + {getDisplayField("English Name", clientData.contactPerson)} + {getDisplayField("Contact Phone", clientData.contactTel ? clientData.contactTel.countryCode + " " + clientData.contactTel.phoneNumber : "")} + {getDisplayField("Email", clientData.emailBus)} + : + <> + {getDisplayField("English Name", clientData.enName)} + {getDisplayField("Chinese Name", clientData.chName)} + {getDisplayField("Contact Phone", clientData.mobileNumber ? clientData.mobileNumber.countryCode + " " + clientData.mobileNumber.phoneNumber : "")} + {getDisplayField("Email", clientData.emailAddress)} + + } + + ); +}; + +export default ClientDetailCard; diff --git a/src/pages/DemandNote/Details/DnDetailCard.js b/src/pages/DemandNote/Details/DnDetailCard.js new file mode 100644 index 0000000..f542fcf --- /dev/null +++ b/src/pages/DemandNote/Details/DnDetailCard.js @@ -0,0 +1,117 @@ +// material-ui +import { + FormControl, + Button, + Grid, + Typography, FormLabel, +} from '@mui/material'; + +import * as React from "react"; +import * as StatusUtils from "utils/statusUtils/DnStatus"; +import Loadable from 'components/Loadable'; +const MainCard = Loadable(React.lazy(() => import('components/MainCard'))); + +import DownloadIcon from '@mui/icons-material/Download'; + + +// ==============================|| DASHBOARD - DEFAULT ||============================== // +const DnDetailCard = ({ data }) => { + + const [dnData, setDnData] = React.useState({}); + + React.useEffect(() => { + if (Object.keys(data).length > 0) { + setDnData(data) + } + }, [data]); + + const onDownloadClick = () => { + + } + + const getDisplayField = (label, value) => { + return + + + {label}: + + + + + {value} + + + + + } + + return ( + + + + Demand Note + + + + + + {getDisplayField("DN No.", dnData.dnNo)} + + + + + Status: + + + + + {StatusUtils.getStatus_Eng(dnData.status)} + + + + + + + + {getDisplayField("Issue Date", dnData.issueDate)} + + {getDisplayField("DN Sent", dnData?.sentDate ? dnData.sentDate + " - " + dnData.sentBy : "")} + + + + + + + File: + + + {dnData.filename} + + + + + + + + + + + ); +}; + +export default DnDetailCard; diff --git a/src/pages/DemandNote/Details/GazetteDetailCard.js b/src/pages/DemandNote/Details/GazetteDetailCard.js new file mode 100644 index 0000000..0fdddcf --- /dev/null +++ b/src/pages/DemandNote/Details/GazetteDetailCard.js @@ -0,0 +1,96 @@ +// material-ui +import { + Grid, + Typography, FormLabel, +} from '@mui/material'; + +import MainCard from "../../../components/MainCard"; +import * as React from "react"; + +// ==============================|| DASHBOARD - DEFAULT ||============================== // +const GazetteDetailCard = ({ data }) => { + + const [appData, setAppData] = React.useState({}); + + React.useEffect(() => { + if (Object.keys(data).length > 0) { + setAppData(data); + } + }, [data]); + + return ( + + + + Gazette Details + +
+ + + + + + + Issue Number: + + + + {appData.issueNum} + + + + + + + Gazette Code: + + + + {appData.groupNo} + + + + + + + + + + Issue Date: + + + + {appData.gazetteIssueDate} + + + + + + + Group Title: + + + + {appData.groupTitle} + + + + + + + +
+ + ); +}; + +export default GazetteDetailCard; diff --git a/src/pages/DemandNote/Details/index.js b/src/pages/DemandNote/Details/index.js new file mode 100644 index 0000000..aaea97f --- /dev/null +++ b/src/pages/DemandNote/Details/index.js @@ -0,0 +1,123 @@ + +import { + Grid, + Typography, + Stack, + Box +} from '@mui/material'; +import Loadable from 'components/Loadable'; +import * as React from 'react'; +import { useParams } from "react-router-dom"; +import * as HttpUtils from "utils/HttpUtils"; +import * as DateUtils from "utils/DateUtils"; +import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' + +const LoadingComponent = Loadable(React.lazy(() => import('../../extra-pages/LoadingComponent'))); +const DnDetailCard = Loadable(React.lazy(() => import('./DnDetailCard'))); +const ApplicationDetailCard = Loadable(React.lazy(() => import('./ApplicationDetailCard'))); +const GazetteDetailCard = Loadable(React.lazy(() => import('./GazetteDetailCard'))); +const ClientDetailCard = Loadable(React.lazy(() => import('./ClientDetailCard'))); +import { + DEMAND_NOTE_LOAD, +} from "utils/ApiPathConst"; +// ==============================|| Body - DEFAULT ||============================== // + +const DemandNote_index = () => { + const params = useParams(); + const [data, setData] = React.useState({}); + const [isLoading, setLoading] = React.useState(false); + + + const BackgroundHead = { + backgroundImage: `url(${titleBackgroundImg})`, + width: '100%', + height: '100%', + backgroundSize: 'contain', + backgroundRepeat: 'no-repeat', + backgroundColor: '#0C489E', + backgroundPosition: 'right' + } + + React.useEffect(() => { + loadApplicationDetail(); + }, []); + + + const loadApplicationDetail = () => { + if (params.id > 0) { + HttpUtils.get({ + url: `${DEMAND_NOTE_LOAD}/${params.id}`, + onSuccess: (response) => { + + response["issueDate"] = DateUtils.dateStr(response["issueDate"]); + response["sentDate"] = DateUtils.datetimeStr(response["sentDate"]); + response["gazetteIssueDate"] = DateUtils.datetimeStr(response["gazetteIssueDate"]); + response["contactFaxNo"] =JSON.parse(response["contactFaxNo"]); + response["contactTelNo"] =JSON.parse(response["contactTelNo"]); + response["contactTel"] =JSON.parse(response["contactTel"]); + setData(response); + setLoading(false); + } + }); + } + } + + return ( + + + +
+ + Demand Note + +
+ + + + + + + + + + + + + + {isLoading && editMode ? + : + + } + + + + + + + + + + + + + + + + + + + + + + ); + +} + +export default DemandNote_index; + diff --git a/src/pages/DemandNote/Search/DataGrid.js b/src/pages/DemandNote/Search/DataGrid.js index a890362..bffc25b 100644 --- a/src/pages/DemandNote/Search/DataGrid.js +++ b/src/pages/DemandNote/Search/DataGrid.js @@ -22,10 +22,11 @@ export default function SeaarchDemandNote({ recordList }) { setRows(recordList); }, [recordList]); - const handleEditClick = (params) => () => { - navigate('/application/' + params.id); + const handleDnClick = (params) => () => { + navigate('/paymentPage/demandNote/details/' + params.id); }; + const onDownloadClick = (params) => () => { HttpUtils.fileDownload({ fileId: params.row.fileId, @@ -54,24 +55,28 @@ export default function SeaarchDemandNote({ recordList }) { } function handleRowDoubleClick(params) { - // handleEditClick(params) - navigate('/application/' + params.id); + handleDnClick(params); } const columns = [ + { + field: 'dnNo', + headerName: 'DN No.', + width: 175, + renderCell: (params) => { + return ; + }, + }, { field: 'appNo', headerName: 'App No.', width: 150, - renderCell: (params) => { - return ; - }, }, { id: 'contactPerson', field: 'contactPerson', headerName: 'Client', - flex: 2, + width: 300, renderCell: (params) => { let company = params.row.enCompanyName != null ? " (" + (params.row.enCompanyName) + ")" : ""; @@ -95,13 +100,6 @@ export default function SeaarchDemandNote({ recordList }) { ); } }, - { - id: 'dnNo', - field: 'dnNo', - headerName: 'DN No.', - width: 175, - }, - { id: 'issueDate', field: 'issueDate', @@ -111,9 +109,7 @@ export default function SeaarchDemandNote({ recordList }) { return DateUtils.dateStr(params?.value); } }, - { - id: 'status', field: 'status', headerName: 'Status', width: 175, @@ -122,7 +118,6 @@ export default function SeaarchDemandNote({ recordList }) { }, }, { - id: 'sentDate', field: 'sentDate', headerName: 'DN Sent Date', flex: 1, @@ -131,7 +126,6 @@ export default function SeaarchDemandNote({ recordList }) { } }, { - id: 'filename', field: 'filename', headerName: 'DN File', flex: 1, @@ -139,19 +133,8 @@ export default function SeaarchDemandNote({ recordList }) { return ; }, }, - { - id: 'status', - field: 'status', - headerName: '', - width: 150, - renderCell: (params) => { - return ; - }, - }, ]; - - return (
diff --git a/src/routes/GLDUserRoutes.js b/src/routes/GLDUserRoutes.js index 6cc4f70..3fa4463 100644 --- a/src/routes/GLDUserRoutes.js +++ b/src/routes/GLDUserRoutes.js @@ -16,6 +16,7 @@ const PaymentSearch_GLD = Loadable(lazy(() => import('pages/Payment/Search_GLD') const PaymentDetails_GLD = Loadable(lazy(() => import('pages/Payment/Details_GLD'))); const DemandNote_Create = Loadable(lazy(() => import('pages/DemandNote/Create'))); const DemandNote_Search = Loadable(lazy(() => import('pages/DemandNote/Search'))); +const DemandNote_Details = Loadable(lazy(() => import('pages/DemandNote/Details'))); // ==============================|| MAIN ROUTING ||============================== // const GLDUserRoutes = { @@ -68,6 +69,10 @@ const GLDUserRoutes = { { path: '/paymentPage/demandNote', element: + }, + { + path: '/paymentPage/demandNote/details/:id', + element: } ] }, diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js index 8f0c6d9..7c2d12f 100644 --- a/src/utils/ApiPathConst.js +++ b/src/utils/ApiPathConst.js @@ -97,6 +97,7 @@ export const PAYMENT_APP_LIST = apiPath+'/payment/applist';//POST export const DEMAND_NOTE_PREVIEW = apiPath+'/demandNote/preview';//GET export const DEMAND_NOTE_CREATE = apiPath+'/demandNote/create';//POST export const DEMAND_NOTE_LIST = apiPath+'/demandNote/list';//GET +export const DEMAND_NOTE_LOAD = apiPath+'/demandNote/load';//GET diff --git a/src/utils/statusUtils/DnStatus.js b/src/utils/statusUtils/DnStatus.js new file mode 100644 index 0000000..fda63c1 --- /dev/null +++ b/src/utils/statusUtils/DnStatus.js @@ -0,0 +1,24 @@ +import {getStatusTag} from "utils/statusUtils/Base"; + +const pending = {color:"#f5a83d", eng:"Pending", cht:"待辦"} +const toBePaid = {color:"#f5a83d", eng:"to be paid", cht:"待支付"} +const paid = {color:"#8a8784", eng:"paid", cht:"已付費"} + +export function getStatus_Cht(params) { + let status = getStatus(params); + return status?getStatusTag({color: status.color, textColor:status.textColor, text:status.cht }):""; +} + +export function getStatus_Eng(params) { + let status = getStatus(params); + return status?getStatusTag({color: status.color, textColor:status.textColor, text:status.eng }):""; +} + +function getStatus(params) { + let status = params?.row?params.row.status:params; + + if(status =="pending") return pending; + if(status == "to be paid") return toBePaid; + if(status =="paid") return paid; +} +