From fed4eda6a6399d4e04d829b117f30cd0282fdcca Mon Sep 17 00:00:00 2001 From: anna Date: Thu, 2 Nov 2023 16:55:13 +0800 Subject: [PATCH] payment search --- src/layout/MainLayout/Header/index.js | 2 +- src/pages/Payment/Search_Public/DataGrid.js | 94 ++++++++++ src/pages/Payment/Search_Public/SearchForm.js | 142 ++++++++++++++ src/pages/Payment/Search_Public/index.js | 97 ++++++++++ .../Details_Public/ApplicationDetailCard.js | 173 ++++++++++++------ src/routes/PublicUserRoutes.js | 5 + src/utils/ApiPathConst.js | 1 + 7 files changed, 453 insertions(+), 61 deletions(-) create mode 100644 src/pages/Payment/Search_Public/DataGrid.js create mode 100644 src/pages/Payment/Search_Public/SearchForm.js create mode 100644 src/pages/Payment/Search_Public/index.js diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js index 58f66ad..fdd3b15 100644 --- a/src/layout/MainLayout/Header/index.js +++ b/src/layout/MainLayout/Header/index.js @@ -121,7 +121,7 @@ function Header(props) { 校對記錄
  • - 付款記錄 + 付款記錄
  • 設定 diff --git a/src/pages/Payment/Search_Public/DataGrid.js b/src/pages/Payment/Search_Public/DataGrid.js new file mode 100644 index 0000000..5e81d49 --- /dev/null +++ b/src/pages/Payment/Search_Public/DataGrid.js @@ -0,0 +1,94 @@ +// material-ui +import * as React from 'react'; +import { + Button +} from '@mui/material'; +import * as DateUtils from "utils/DateUtils"; +import * as FormatUtils from "utils/FormatUtils" +import { useNavigate } from "react-router-dom"; +import { FiDataGrid } from "components/FiDataGrid"; +// ==============================|| EVENT TABLE ||============================== // + +export default function SearchPublicNoticeTable({ recordList }) { + const [rows, setRows] = React.useState(recordList); + const navigate = useNavigate() + + React.useEffect(() => { + setRows(recordList); + }, [recordList]); + + const handleEditClick = (params) => () => { + navigate('/proof/reply/' + params.row.id); + }; + + + const columns = [ + { + field: 'actions', + headerName: '付款編號', + width: 150, + cellClassName: 'actions', + renderCell: (params) => { + return ; + }, + }, + { + id: 'appId', + field: 'appId', + headerName: '申請編號', + flex: 1, + renderCell: (params) => { + let appNo = params.row.appNo; + return
    {appNo}
    + }, + }, + { + id: 'created', + field: 'created', + headerName: '付款日期', + flex: 1, + valueGetter: (params) => { + return DateUtils.datetimeStr(params?.value); + } + }, + { + id: 'status', + field: 'status', + headerName: '付款狀況', + flex: 1, + valueGetter: (params) => { + return DateUtils.datetimeStr(params?.value); + } + }, + { + id: 'fee', + field: 'fee', + headerName: '費用', + flex: 1, + valueGetter: (params) => { + return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : ""; + } + }, + ]; + + function handleRowDoubleClick(params) { + navigate('/proof/reply/' + params.row.id); + } + + return ( +
    + + +
    + ); +} diff --git a/src/pages/Payment/Search_Public/SearchForm.js b/src/pages/Payment/Search_Public/SearchForm.js new file mode 100644 index 0000000..2f2af85 --- /dev/null +++ b/src/pages/Payment/Search_Public/SearchForm.js @@ -0,0 +1,142 @@ +// material-ui +import { + Button, + CardContent, + Grid, TextField +} from '@mui/material'; +import MainCard from "components/MainCard"; +import { useForm } from "react-hook-form"; +import * as React from "react"; +import * as DateUtils from "utils/DateUtils"; +// ==============================|| DASHBOARD - DEFAULT ||============================== // + + +const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => { + + const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom); + const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo); + + + const { reset, register, handleSubmit } = useForm() + + const onSubmit = (data) => { + let typeArray = []; + for (let i = 0; i < type.length; i++) { + typeArray.push(type[i].label); + } + const temp = { + code: data.code, + dateFrom: data.dateFrom, + dateTo: data.dateTo, + }; + applySearch(temp); + }; + + function resetForm() { + reset(); + } + + + return ( + + +
    + {/*row 1*/} + + + 搜尋 + + + + {/*row 2*/} + + + + + + + + { + setMinDate(DateUtils.dateStr(newValue)); + }} + InputLabelProps={{ + shrink: true + }} + /> + + + + { + setMaxDate(DateUtils.dateStr(newValue)); + }} + id="dateTo" + type="date" + label="付款日期(到)" + defaultValue={searchCriteria.dateTo} + /> + + + + + + {/*last row*/} + + + + + + + + + + +
    +     + ); +}; + +export default SearchPublicNoticeForm; diff --git a/src/pages/Payment/Search_Public/index.js b/src/pages/Payment/Search_Public/index.js new file mode 100644 index 0000000..50a1445 --- /dev/null +++ b/src/pages/Payment/Search_Public/index.js @@ -0,0 +1,97 @@ +// material-ui +import { + Grid, + Typography, + Stack +} from '@mui/material'; +import MainCard from "components/MainCard"; +import * as UrlUtils from "utils/ApiPathConst"; +import * as React from "react"; +import * as HttpUtils from "utils/HttpUtils"; +import * as DateUtils from "utils/DateUtils"; + +import Loadable from 'components/Loadable'; +const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); +const SearchForm = Loadable(React.lazy(() => import('./SearchForm'))); +const EventTable = Loadable(React.lazy(() => import('./DataGrid'))); +import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' + +const BackgroundHead = { + backgroundImage: `url(${titleBackgroundImg})`, + width: '100%', + height: '100%', + backgroundSize:'contain', + backgroundRepeat: 'no-repeat', + backgroundColor: '#0C489E', + backgroundPosition: 'right' +} + +// ==============================|| DASHBOARD - DEFAULT ||============================== // + +const Index = () => { + + const [record,setRecord] = React.useState([]); + const [searchCriteria, setSearchCriteria] = React.useState({ + dateTo: DateUtils.dateStr(new Date()), + dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)), + }); + const [onReady, setOnReady] = React.useState(false); + + React.useEffect(() => { + setOnReady(true); + }, [record]); + + React.useEffect(() => { + loadGrid(); + }, [searchCriteria]); + + function loadGrid(){ + HttpUtils.get({ + url: UrlUtils.LIST_PROOF, + params: searchCriteria, + onSuccess: function(responseData){ + setRecord(responseData); + } + }); + } + + + function applySearch(input) { + setSearchCriteria(input); + } + + return ( + !onReady ? + + : + + +
    + + 付款記錄 + +
    +     + {/*row 1*/} + + + + {/*row 2*/} + + + + + +     + ); +}; + +export default Index; diff --git a/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js b/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js index e01bd00..538c9b0 100644 --- a/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js +++ b/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js @@ -6,11 +6,13 @@ import { // InputAdornment, Typography, FormLabel, OutlinedInput, - Stack + Stack, + Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material'; // import MainCard from "../../components/MainCard"; const MainCard = Loadable(lazy(() => import('components/MainCard'))); import { useForm } from "react-hook-form"; +import { useNavigate } from "react-router-dom"; import { useEffect, useState @@ -24,6 +26,7 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo import * as HttpUtils from "utils/HttpUtils" import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils"; import * as DateUtils from "utils/DateUtils"; +import * as FormatUtils from "utils/FormatUtils"; // import BorderColorOutlinedIcon from '@mui/icons-material/BorderColorOutlined'; // import DoneIcon from '@mui/icons-material/Done'; @@ -38,8 +41,10 @@ const ApplicationDetailCard = ( // isNewRecord } ) => { + const [isPopUp, setIsPopUp] = useState(false); // const params = useParams(); const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({}); + const [fee, setFee] = useState(0); const [companyName, setCompanyName] = useState({}); const [fileDetail, setfileDetail] = useState({}); const [onReady, setOnReady] = useState(false); @@ -47,7 +52,8 @@ const ApplicationDetailCard = ( const [issueDate, setIssueDate] = useState(""); const { register, // getValues - } = useForm() + } = useForm(); + const navigate = useNavigate(); useEffect(() => { //if user data from parent are not null @@ -60,6 +66,11 @@ const ApplicationDetailCard = ( + " No. " + applicationDetailData.gazetteIssueDetail.issueNo); setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)")); + for (let i = 0; i < applicationDetailData.proofList.length; i++) { + if (applicationDetailData.proofList[i].action == true) { + setFee(applicationDetailData.proofList[i].fee); + } + } } }, [applicationDetailData]); @@ -83,6 +94,11 @@ const ApplicationDetailCard = ( setStatus("cancel") }; + function doPayment() { + setIsPopUp(false); + navigate('/paymentPage', { state: { amount: fee, appIdList: [currentApplicationDetailData.id]} }); + } + return ( !onReady ? @@ -100,22 +116,22 @@ const ApplicationDetailCard = ( spacing={2} mb={2} > - { - currentApplicationDetailData.status == "confirmed"? - - :null - } + { + currentApplicationDetailData.status == "confirmed" ? + + : null + } + + + + ); diff --git a/src/routes/PublicUserRoutes.js b/src/routes/PublicUserRoutes.js index a927954..c30566f 100644 --- a/src/routes/PublicUserRoutes.js +++ b/src/routes/PublicUserRoutes.js @@ -20,6 +20,7 @@ const Payment_FPS_CallBack = Loadable(lazy(() => import('pages/Payment/FPS/fpsca const Payment_FPS_Ackpage = Loadable(lazy(() => import('pages/Payment/FPS/AckPage'))); const Payment_Card = Loadable(lazy(() => import('pages/Payment/Card'))); const Payment_Callback = Loadable(lazy(() => import('pages/Payment/PaymentCallback'))); +const PaymentSearch_Public = Loadable(lazy(() => import('pages/Payment/Search_Public'))); // ==============================|| MAIN ROUTING ||============================== // @@ -90,6 +91,10 @@ const PublicDashboard = { path: 'paymentPage/fps/ackpage', element: }, + { + path: 'paymentPage/search', + element: + }, ] }, ] diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js index 3e93e27..e31dd23 100644 --- a/src/utils/ApiPathConst.js +++ b/src/utils/ApiPathConst.js @@ -83,6 +83,7 @@ export const GET_PROOF_PAY = apiPath+'/proof/pay-details';//GET export const PAYMENT_CREATE = apiPath+'/payment/create';//POST export const PAYMENT_SAVE = apiPath+'/payment/save';//POST +export const PAYMENT_LIST = apiPath+'/payment/list';//GET