alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

payment search

master
Anna Ho 1 year ago
parent
304e0aec70
commit
fed4eda6a6
7 changed files with 453 additions and 61 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      src/layout/MainLayout/Header/index.js
  2. +94
    -0
      src/pages/Payment/Search_Public/DataGrid.js
  3. +142
    -0
      src/pages/Payment/Search_Public/SearchForm.js
  4. +97
    -0
      src/pages/Payment/Search_Public/index.js
  5. +113
    -60
      src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js
  6. +5
    -0
      src/routes/PublicUserRoutes.js
  7. +1
    -0
      src/utils/ApiPathConst.js

+ 1
- 1
src/layout/MainLayout/Header/index.js View File

@@ -121,7 +121,7 @@ function Header(props) {
<Link className="documentRecord" to='/proof/search'><Typography variant={"headerTitle1"} sx={{ml:2}}>校對記錄</Typography></Link>
</li>
<li>
<Link className="paymentRecord" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ml:2}}>付款記錄</Typography></Link>
<Link className="paymentRecord" to='/paymentPage/search'><Typography variant={"headerTitle1"} sx={{ml:2}}>付款記錄</Typography></Link>
</li>
<li>
<Link className="userSetting" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ml:2}}>設定</Typography><KeyboardArrowDownIcon /></Link>


+ 94
- 0
src/pages/Payment/Search_Public/DataGrid.js View File

@@ -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 <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
},
},
{
id: 'appId',
field: 'appId',
headerName: '申請編號',
flex: 1,
renderCell: (params) => {
let appNo = params.row.appNo;
return <div style={{ margin: 4 }}>{appNo}</div>
},
},
{
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 (
<div style={{ height: 400, width: '100%' }}>

<FiDataGrid
rowHeight={80}
rows={rows}
columns={columns}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 5 },
},
}}
onRowDoubleClick={handleRowDoubleClick}
/>
</div>
);
}

+ 142
- 0
src/pages/Payment/Search_Public/SearchForm.js View File

@@ -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 (
<MainCard xs={12} md={12} lg={12}
border={false}
content={false}>

<form onSubmit={handleSubmit(onSubmit)}>
{/*row 1*/}
<CardContent sx={{ px: 2.5, pt: 3 }}>
<Grid item justifyContent="space-between" alignItems="center">
搜尋
</Grid>
</CardContent>

{/*row 2*/}
<Grid container alignItems={"center"}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("code")}
id='code'
label="申請編號:"
defaultValue={searchCriteria.code}
InputLabelProps={{
shrink: true
}}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
{...register("dateFrom")}
id="dateFrom"
type="date"
label="付款日期(從)"
defaultValue={searchCriteria.dateFrom}
InputProps={{ inputProps: { max: maxDate } }}
onChange={(newValue) => {
setMinDate(DateUtils.dateStr(newValue));
}}
InputLabelProps={{
shrink: true
}}
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<TextField
fullWidth
InputLabelProps={{
shrink: true
}}
{...register("dateTo")}
InputProps={{ inputProps: { min: minDate } }}
onChange={(newValue) => {
setMaxDate(DateUtils.dateStr(newValue));
}}
id="dateTo"
type="date"
label="付款日期(到)"
defaultValue={searchCriteria.dateTo}
/>
</Grid>
</Grid>


{/*last row*/}
<Grid container maxWidth justifyContent="flex-end">

<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<Button
size="large"
variant="contained"
onClick={resetForm}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
重置
</Button>
</Grid>

<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
提交
</Button>
</Grid>
</Grid>
</form>
</MainCard>
);
};

export default SearchPublicNoticeForm;

+ 97
- 0
src/pages/Payment/Search_Public/index.js View File

@@ -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 ?
<LoadingComponent/>
:
<Grid container sx={{minHeight: '85vh',backgroundColor:'#ffffff'}} direction="column">
<Grid item xs={12}>
<div style={BackgroundHead}>
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
<Typography ml={15} color='#FFF' variant="h4">付款記錄</Typography>
</Stack>
</div>
</Grid>
{/*row 1*/}
<Grid item xs={12} md={12} lg={12}>
<SearchForm
applySearch={applySearch}
searchCriteria={searchCriteria}
/>
</Grid>
{/*row 2*/}
<Grid item xs={12} md={12} lg={12}>
<MainCard elevation={0}
border={false}
content={false}
>
<EventTable
recordList={record}
/>
</MainCard>
</Grid>
</Grid>
);
};

export default Index;

+ 113
- 60
src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js View File

@@ -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 ?
<LoadingComponent />
@@ -100,22 +116,22 @@ const ApplicationDetailCard = (
spacing={2}
mb={2}
>
{
currentApplicationDetailData.status == "confirmed"?
<Button
// size="large"
variant="contained"
// onClick={handleNewUserClick}
disabled={currentApplicationDetailData.status == "rejected" || currentApplicationDetailData.status == "cancelled" || currentApplicationDetailData.status == "paid"}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
<EditNoteIcon />
<Typography ml={1}> 支付</Typography>
</Button>
:null
}
{
currentApplicationDetailData.status == "confirmed" ?
<Button
// size="large"
variant="contained"
onClick={()=>{setIsPopUp(true)}}
disabled={currentApplicationDetailData.status == "rejected" || currentApplicationDetailData.status == "cancelled" || currentApplicationDetailData.status == "paid"}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
<EditNoteIcon />
<Typography ml={1}> 支付</Typography>
</Button>
: null
}
<Button
// size="large"
variant="contained"
@@ -329,50 +345,72 @@ const ApplicationDetailCard = (
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>聯絡電話:</FormLabel>
</Grid>

<Grid item xs={12} md={9} lg={9}>
<Stack direction="row">
<FormControl variant="outlined" sx={{ width: '25%' }} disabled>
<OutlinedInput
size="small"
{...register("countryCode",
{
value: currentApplicationDetailData.contactTelNo.countryCode,
})}
id='countryCode'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
</FormControl>
<FormControl variant="outlined" sx={{ width: '100%' }} disabled>
<OutlinedInput
size="small"
{...register("phoneNumber",
{
value: currentApplicationDetailData.contactTelNo.phoneNumber,
})}
id='phoneNumber'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
</FormControl>
</Stack>
<Grid container direction="row" justifyContent="space-between"
alignItems="center">
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>聯絡電話:</FormLabel>
</Grid>

<Grid item xs={12} md={9} lg={9}>
<Stack direction="row">
<FormControl variant="outlined" sx={{ width: '25%' }} disabled>
<OutlinedInput
size="small"
{...register("countryCode",
{
value: currentApplicationDetailData.contactTelNo.countryCode,
})}
id='countryCode'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
</FormControl>
<FormControl variant="outlined" sx={{ width: '100%' }} disabled>
<OutlinedInput
size="small"
{...register("phoneNumber",
{
value: currentApplicationDetailData.contactTelNo.phoneNumber,
})}
id='phoneNumber'
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
/>
</FormControl>
</Stack>
</Grid>
</Grid>
</Grid>
{
fee > 0 ?
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}>
<FormLabel>價錢:</FormLabel>
</Grid>

<Grid item xs={12} md={9} lg={9}>
<FormLabel>{FormatUtils.currencyFormat(fee)}</FormLabel>
</Grid>
</Grid>
</Grid>
:
<></>
}

</Grid>
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}>
<Grid container alignItems={"center"}>
@@ -460,7 +498,7 @@ const ApplicationDetailCard = (
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1, paddingTop: 2}}>
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1, paddingTop: 2 }}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}>
@@ -473,6 +511,21 @@ const ApplicationDetailCard = (
</Grid>
</Grid>
</Grid>
<div>
<Dialog open={isPopUp} onClose={() => setIsPopUp(false)} >
<DialogTitle></DialogTitle>
<Typography variant="h2" style={{ padding: '16px' }}>確認付款</Typography>
<DialogContent style={{ display: 'flex', }}>
<Stack direction="column" justifyContent="space-between">
總計金額: {FormatUtils.currencyFormat(fee)}
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={() => setIsPopUp(false)}>Close</Button>
<Button onClick={() => doPayment()}>確認</Button>
</DialogActions>
</Dialog>
</div>
</form>
</MainCard>
);


+ 5
- 0
src/routes/PublicUserRoutes.js View File

@@ -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: <Payment_FPS_Ackpage/>
},
{
path: 'paymentPage/search',
element: <PaymentSearch_Public/>
},
]
},
]


+ 1
- 0
src/utils/ApiPathConst.js View File

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





Write Preview
Loading…
Cancel
Save