- 자금이체 페이지 List 초기화 문제 및 Cursor 유지 오류 수정
- KeyIn결제 page 수정
This commit is contained in:
HyeonJongKim
@@ -54,7 +54,7 @@ export const FundAccountTransferRequestPage = () => {
|
||||
const isFormValid = () => {
|
||||
return (
|
||||
mid.trim() !== '' &&
|
||||
//bankCode.trim() !== '' &&
|
||||
bankCode.trim() !== '' &&
|
||||
accountNo.trim() !== '' &&
|
||||
accountName.trim() !== '' &&
|
||||
amount > 0 &&
|
||||
|
||||
@@ -2,7 +2,7 @@ import moment from 'moment';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import { DefaultRequestPagination, HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
@@ -19,31 +19,44 @@ import { useExtensionKeyinListMutation } from '@/entities/additional-service/api
|
||||
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
|
||||
import { KeyInPaymentList } from '@/entities/additional-service/ui/key-in-payment/key-in-payment-list';
|
||||
import { useStore } from '@/shared/model/store';
|
||||
import { KeyInPaymentListItem, KeyInPaymentTransactionStatus } from '@/entities/additional-service/model/key-in/types';
|
||||
|
||||
// contant로 옮기기
|
||||
const requestStatusBtnGroup = [
|
||||
{ name: '전체', value: KeyInPaymentTransactionStatus.ALL },
|
||||
{ name: '승인', value: KeyInPaymentTransactionStatus.APPROVAL },
|
||||
{ name: '전취소', value: KeyInPaymentTransactionStatus.PRE_CANCEL },
|
||||
{ name: '후취소', value: KeyInPaymentTransactionStatus.POST_CANCEL }
|
||||
];
|
||||
import { KeyInPaymentListItem, KeyInPaymentPaymentStatus } from '@/entities/additional-service/model/key-in/types';
|
||||
import { requestStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant';
|
||||
import useIntersectionObserver from '@/widgets/intersection-observer';
|
||||
|
||||
export const KeyInPaymentPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const userMid = useStore.getState().UserStore.mid;
|
||||
|
||||
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
|
||||
const [listItems, setListItems] = useState({});
|
||||
const [listItems, setListItems] = useState<Array<KeyInPaymentListItem>>([]);
|
||||
const [filterOn, setFilterOn] = useState<boolean>(false);
|
||||
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
|
||||
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
|
||||
const [nextCursor, setNextCursor] = useState<string | null>(null);
|
||||
const [mid, setMid] = useState<string>(userMid);
|
||||
const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [transactionStatus, setTransactionStatus] = useState<KeyInPaymentTransactionStatus>(KeyInPaymentTransactionStatus.ALL)
|
||||
const [paymentStatus, setPaymentStatus] = useState<KeyInPaymentPaymentStatus>(KeyInPaymentPaymentStatus.ALL)
|
||||
const [minAmount, setMinAmount] = useState<number>();
|
||||
const [maxAmount, setMaxAmount] = useState<number>();
|
||||
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
|
||||
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
|
||||
entries.forEach((entry: IntersectionObserverEntry) => {
|
||||
if (entry.isIntersecting) {
|
||||
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
|
||||
if (onActionIntersect) {
|
||||
callList();
|
||||
}
|
||||
}
|
||||
else {
|
||||
console.log('Element is no longer intersecting with the root.');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const { setTarget } = useIntersectionObserver({
|
||||
threshold: 1,
|
||||
onIntersect
|
||||
});
|
||||
|
||||
useSetHeaderTitle('KEY-IN 결제');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
@@ -57,73 +70,75 @@ export const KeyInPaymentPage = () => {
|
||||
|
||||
const callList = (option?: {
|
||||
sortType?: SortTypeKeys,
|
||||
val?: string
|
||||
status?: KeyInPaymentPaymentStatus,
|
||||
resetPage?: boolean
|
||||
}) => {
|
||||
pageParam.sortType = (option?.sortType) ? option.sortType : sortType;
|
||||
setPageParam(pageParam);
|
||||
setOnActionIntersect(false);
|
||||
|
||||
const currentPageParam = option?.resetPage
|
||||
? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType }
|
||||
: { ...pageParam, sortType: option?.sortType ?? sortType };
|
||||
|
||||
setPageParam(currentPageParam);
|
||||
|
||||
let newMinAmount = minAmount;
|
||||
if(!!minAmount && typeof (minAmount) === 'string'){
|
||||
if (!!minAmount && typeof (minAmount) === 'string') {
|
||||
newMinAmount = parseInt(minAmount);
|
||||
}
|
||||
let newMaxAmount = maxAmount;
|
||||
if(!!maxAmount && typeof (maxAmount) === 'string'){
|
||||
if (!!maxAmount && typeof (maxAmount) === 'string') {
|
||||
newMaxAmount = parseInt(maxAmount);
|
||||
}
|
||||
let listParams = {
|
||||
mid: mid,
|
||||
fromDate: startDate,
|
||||
toDate: endDate,
|
||||
paymentStatus: transactionStatus,
|
||||
paymentStatus: paymentStatus,
|
||||
minAmount: newMinAmount,
|
||||
maxAmount: newMaxAmount,
|
||||
page: pageParam
|
||||
... {
|
||||
page: currentPageParam
|
||||
}
|
||||
};
|
||||
|
||||
console.log('Request Info: ', listParams);
|
||||
|
||||
keyinList(listParams).then((rs) => {
|
||||
setListItems(assembleData(rs.content));
|
||||
// resetPage면 기존 리스트 무시, 아니면 추가
|
||||
setListItems(option?.resetPage ? rs.content : [
|
||||
...listItems,
|
||||
...rs.content
|
||||
]);
|
||||
if (rs.hasNext) {
|
||||
setNextCursor(rs.nextCursor);
|
||||
setPageParam({
|
||||
...currentPageParam, // pageParam이 아니라 currentPageParam 사용
|
||||
cursor: rs.nextCursor
|
||||
});
|
||||
setOnActionIntersect(true)
|
||||
}
|
||||
else {
|
||||
setNextCursor(null);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const assembleData = (content: Array<KeyInPaymentListItem>) => {
|
||||
console.log('rs.content:', content);
|
||||
let data: any = {};
|
||||
if (content && content.length > 0) {
|
||||
for(let i = 0; i < content?.length; i++){
|
||||
let paymentDate = content[i]?.paymentDate?.substring(0, 8);
|
||||
let groupDate = moment(paymentDate).format('YYYYMMDD');
|
||||
if(!!groupDate && !data.hasOwnProperty(groupDate)){
|
||||
data[groupDate] = [];
|
||||
}
|
||||
if(!!groupDate && data.hasOwnProperty(groupDate)){
|
||||
data[groupDate].push(content[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log('Data : ', data);
|
||||
return data;
|
||||
};
|
||||
|
||||
|
||||
const onClickToOpenFilter = () => {
|
||||
setFilterOn(!filterOn);
|
||||
};
|
||||
|
||||
const onClickToDownloadExcel = () => {
|
||||
let newMinAmount = minAmount;
|
||||
if(!!minAmount && typeof (minAmount) === 'string'){
|
||||
if (!!minAmount && typeof (minAmount) === 'string') {
|
||||
newMinAmount = parseInt(minAmount);
|
||||
}
|
||||
let newMaxAmount = maxAmount;
|
||||
if(!!maxAmount && typeof (maxAmount) === 'string'){
|
||||
if (!!maxAmount && typeof (maxAmount) === 'string') {
|
||||
newMaxAmount = parseInt(maxAmount);
|
||||
}
|
||||
downloadExcel({
|
||||
mid: mid,
|
||||
fromDate: startDate,
|
||||
toDate: endDate,
|
||||
paymentStatus: transactionStatus,
|
||||
paymentStatus: paymentStatus,
|
||||
minAmount: newMinAmount,
|
||||
maxAmount: newMaxAmount
|
||||
}).then((rs) => {
|
||||
@@ -133,16 +148,19 @@ export const KeyInPaymentPage = () => {
|
||||
|
||||
const onClickToSort = (sort: SortTypeKeys) => {
|
||||
setSortType(sort);
|
||||
setListItems([]);
|
||||
callList({
|
||||
sortType: sort
|
||||
sortType: sort,
|
||||
resetPage: true
|
||||
});
|
||||
};
|
||||
|
||||
const onClickToTransactionStatus = (val: KeyInPaymentTransactionStatus) => {
|
||||
console.log('TransactionStatus Test: ', val);
|
||||
setTransactionStatus(val);
|
||||
callList({
|
||||
val: val
|
||||
const onClickToPaymentStatus = (val: KeyInPaymentPaymentStatus) => {
|
||||
setPaymentStatus(val);
|
||||
setListItems([]);
|
||||
callList({
|
||||
status: val,
|
||||
resetPage: true
|
||||
});
|
||||
};
|
||||
|
||||
@@ -190,8 +208,8 @@ export const KeyInPaymentPage = () => {
|
||||
|
||||
<div className="filter-section">
|
||||
<SortTypeBox
|
||||
sortType={ sortType }
|
||||
onClickToSort={ onClickToSort }
|
||||
sortType={sortType}
|
||||
onClickToSort={onClickToSort}
|
||||
></SortTypeBox>
|
||||
<div className="excrow">
|
||||
<div className="full-menu-keywords no-padding">
|
||||
@@ -199,8 +217,8 @@ export const KeyInPaymentPage = () => {
|
||||
requestStatusBtnGroup.map((value, index) => (
|
||||
<span
|
||||
key={`key-service-code=${index}`}
|
||||
className={`keyword-tag ${(transactionStatus === value.value) ? 'active' : ''}`}
|
||||
onClick={() => onClickToTransactionStatus(value.value)}
|
||||
className={`keyword-tag ${(paymentStatus === value.value) ? 'active' : ''}`}
|
||||
onClick={() => onClickToPaymentStatus(value.value)}
|
||||
>{value.name}</span>
|
||||
))
|
||||
}
|
||||
@@ -211,6 +229,7 @@ export const KeyInPaymentPage = () => {
|
||||
listItems={listItems}
|
||||
additionalServiceCategory={AdditionalServiceCategory.KeyInPayment}
|
||||
mid={mid}
|
||||
setTarget={setTarget}
|
||||
></KeyInPaymentList>
|
||||
</div>
|
||||
</div>
|
||||
@@ -221,13 +240,13 @@ export const KeyInPaymentPage = () => {
|
||||
mid={mid}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
transactionStatus={transactionStatus}
|
||||
transactionStatus={paymentStatus}
|
||||
minAmount={minAmount}
|
||||
maxAmount={maxAmount}
|
||||
setMid={setMid}
|
||||
setStartDate={setStartDate}
|
||||
setEndDate={setEndDate}
|
||||
setTransactionStatus={setTransactionStatus}
|
||||
setTransactionStatus={setPaymentStatus}
|
||||
setMinAmount={setMinAmount}
|
||||
setMaxAmount={setMaxAmount}
|
||||
></KeyInPaymentFilter>
|
||||
|
||||
Reference in New Issue
Block a user