diff --git a/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx b/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx index 23c8803..e76ba86 100644 --- a/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx +++ b/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx @@ -23,6 +23,16 @@ import { checkGrant } from '@/shared/lib/check-grant'; import { showAlert } from '@/widgets/show-alert'; import { snackBar } from '@/shared/lib'; +const defaultParams = { + fromDate: moment().format('YYYYMMDD'), + toDate: moment().format('YYYYMMDD'), + searchDateType: FundAccountSearchDateType.REQUEST_DATE, + searchCl: FundAccountSearchCl.ACCOUNT_NAME, + searchValue: '', + bankCode: '', + resultStatus: FundAccountResultStatus.ALL +} + export const FundAccountResultListWrap = () => { const { navigate } = useNavigate(); const { t } = useTranslation(); @@ -46,6 +56,7 @@ export const FundAccountResultListWrap = () => { const [bankCode, setBankCode] = useState(''); const [resultStatus, setResultStatus] = useState(FundAccountResultStatus.ALL); + const [filterUsed, setFilterUsed] = useState(false); const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState(false); const [totalRequestCount, setTotalRequestCount] = useState(0); @@ -61,7 +72,7 @@ export const FundAccountResultListWrap = () => { const [groupDate, setGroupDate] = useState(''); const [groupDateOn, setGroupDateOn] = useState(false); - + const [listHeight, setListHeight] = useState(0); const { mutateAsync: extensionFundAccountResultList } = useExtensionFundAccountResultListMutation(); @@ -69,20 +80,20 @@ export const FundAccountResultListWrap = () => { const { mutateAsync: extensionFundAccountResultSummary } = useExtensionFundAccountResultSummaryMutation(); const onIntersect: IntersectionObserverCallback = (entries: Array) => { entries.forEach((entry: IntersectionObserverEntry) => { - if(entry.isIntersecting){ - if(onActionIntersect && !!pageParam.cursor){ + if (entry.isIntersecting) { + if (onActionIntersect && !!pageParam.cursor) { setOnActionIntersect(false); callList('page'); - } + } } }); }; - const { setTarget } = useIntersectionObserver({ - threshold: 1, - onIntersect + const { setTarget } = useIntersectionObserver({ + threshold: 1, + onIntersect }); - + const callList = (type?: string) => { setOnActionIntersect(false); let listParams: ExtensionFundAccountResultListParams = { @@ -95,34 +106,34 @@ export const FundAccountResultListWrap = () => { bankCode: bankCode, resultStatus: resultStatus, page: { - ...pageParam, - ...{ sortType: sortType } - } + ...pageParam, + ...{ sortType: sortType } + } }; - if(type !== 'page' && listParams.page){ + if (type !== 'page' && listParams.page) { listParams.page.cursor = null; } extensionFundAccountResultList(listParams).then((rs: any) => { - if(type === 'page'){ + if (type === 'page') { setListItems([ ...listItems, ...rs.content ]); } - else{ + else { setListItems(rs.content); } - if(rs.hasNext + if (rs.hasNext && rs.nextCursor !== pageParam.cursor && rs.content.length === DEFAULT_PAGE_PARAM.size - ){ + ) { setPageParam({ ...pageParam, ...{ cursor: rs.nextCursor } }); } - else{ + else { setPageParam({ ...pageParam, ...{ cursor: null } @@ -130,11 +141,11 @@ export const FundAccountResultListWrap = () => { } setOnActionIntersect( !!rs.hasNext - && rs.nextCursor !== pageParam.cursor + && rs.nextCursor !== pageParam.cursor && rs.content.length === DEFAULT_PAGE_PARAM.size ); }).catch((e: any) => { - if(e.response?.data?.error?.message){ + if (e.response?.data?.error?.message) { snackBar(e.response?.data?.error?.message); return; } @@ -155,7 +166,7 @@ export const FundAccountResultListWrap = () => { setTotalFailCount(rs.totalFailCount); setTotalFailAmount(rs.totalFailAmount); }).catch((e: any) => { - if(e.response?.data?.error?.message){ + if (e.response?.data?.error?.message) { snackBar(e.response?.data?.error?.message); return; } @@ -171,12 +182,12 @@ export const FundAccountResultListWrap = () => { }; const onRequestDownloadExcel = ( - selectedMode: DownloadSelectedMode, - userEmail?: string - ) => { - if(selectedMode === DownloadSelectedMode.EMAIL + selectedMode: DownloadSelectedMode, + userEmail?: string + ) => { + if (selectedMode === DownloadSelectedMode.EMAIL && userEmail - ){ + ) { let params: ExtensionFundAccountResultExcelParams = { mid: mid, email: userEmail, @@ -187,7 +198,7 @@ export const FundAccountResultListWrap = () => { extensionFundAccountResultExcel(params).then((rs: ExtensionFundAccountResultExcelResponse) => { console.log('Excel Download Status:', rs); }).catch((e: any) => { - if(e.response?.data?.error?.message){ + if (e.response?.data?.error?.message) { snackBar(e.response?.data?.error?.message); return; } @@ -201,10 +212,10 @@ export const FundAccountResultListWrap = () => { const setDetailData = (detailData: DetailData) => { setDetailOn(detailData.detailOn); - if(detailData.mid){ + if (detailData.mid) { setDetailMid(detailData.mid); } - if(detailData.tid){ + if (detailData.tid) { setDetailTid(detailData.tid); } }; @@ -233,12 +244,12 @@ export const FundAccountResultListWrap = () => { if (list.length > 0) { rs.push( ); } @@ -252,29 +263,44 @@ export const FundAccountResultListWrap = () => { if (list.length > 0) { rs.push( ); } return rs; }; + const checkUsedFilter = () => { + let rs: boolean = true; + if (fromDate === defaultParams.fromDate + && toDate === defaultParams.toDate + && searchCl === defaultParams.searchCl + && searchValue === defaultParams.searchValue + && searchDateType === defaultParams.searchDateType + && bankCode === defaultParams.bankCode + && resultStatus === defaultParams.resultStatus + ) { + rs = false; + } + setFilterUsed(rs); + } + useEffect(() => { callSummary(); ListScrollOn(true); let heightList = GetListHeight(); setListHeight(heightList.listHeight); - + let tabContent = document.querySelector('.tab-content'); tabContent?.addEventListener('scroll', (e: Event) => { setScrollAction(e, setGroupDate, setGroupDateOn); }); - + return () => { ListScrollOn(false); tabContent?.removeEventListener('scroll', (e: Event) => { @@ -285,6 +311,7 @@ export const FundAccountResultListWrap = () => { useEffect(() => { callList(); + checkUsedFilter(); }, [ mid, searchCl, @@ -320,18 +347,21 @@ export const FundAccountResultListWrap = () => { - + {groupDateOn && +
+ {groupDate} +
+ + +
- } -
0)? listHeight + 'px': 'unset' }} + style={{ height: (listHeight > 0) ? listHeight + 'px' : 'unset' }} > - { getListDateGroup() } + {getListDateGroup()}
-
+
{ setResultStatus={setResultStatus} > - { !!downloadBottomSheetOn && + {!!downloadBottomSheetOn && } diff --git a/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx b/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx index d046d24..9c2e051 100644 --- a/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx +++ b/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx @@ -30,6 +30,18 @@ const getPaymentResultBtnGroup = (t: any) => [ { name: t('additionalService.linkPayment.paymentStopped'), value: LinkPaymentPaymentStatus.INACTIVE }, ]; +const defaultParams = { + fromDate: moment().format('YYYYMMDD'), + toDate: moment().format('YYYYMMDD'), + searchCl: LinkPaymentSearchCl.PHONE, + searchValue: '', + paymentMethod: LinkPaymentPaymentMethod.CARD, + paymentStatus: LinkPaymentPaymentStatus.ALL, + sendStatus: LinkPaymentSendStatus.ALL, + sendMethod: LinkPaymentSendMethod.ALL +} + + export const LinkPaymentHistoryWrap = () => { const { t } = useTranslation(); const { navigate } = useNavigate(); @@ -42,17 +54,19 @@ export const LinkPaymentHistoryWrap = () => { const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); const [mid, setMid] = useState(userMid); - const [searchCl, setSearchCl] = useState(LinkPaymentSearchCl.PHONE); - const [searchValue, setSearchValue] = useState(''); - const [paymentMethod, setPaymentMethod] = useState(LinkPaymentPaymentMethod.CARD); - const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD')); - const [toDate, setToDate] = useState(moment().format('YYYYMMDD')); - const [paymentStatus, setPaymentStatus] = useState(LinkPaymentPaymentStatus.ALL); - const [sendStatus, setSendStatus] = useState(LinkPaymentSendStatus.ALL); - const [sendMethod, setSendMethod] = useState(LinkPaymentSendMethod.ALL); - + const [searchCl, setSearchCl] = useState(defaultParams.searchCl); + const [searchValue, setSearchValue] = useState(defaultParams.searchValue); + const [paymentMethod, setPaymentMethod] = useState(defaultParams.paymentMethod); + const [fromDate, setFromDate] = useState(defaultParams.fromDate); + const [toDate, setToDate] = useState(defaultParams.toDate); + const [paymentStatus, setPaymentStatus] = useState(defaultParams.paymentStatus); + const [sendStatus, setSendStatus] = useState(defaultParams.sendStatus); + const [sendMethod, setSendMethod] = useState(defaultParams.sendMethod); + + const [filterUsed, setFilterUsed] = useState(false); + const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState(false); - + const [detailOn, setDetailOn] = useState(false); const [detailMid, setDetailMid] = useState(''); const [detailRequestId, setDetailRequestId] = useState(''); @@ -60,7 +74,7 @@ export const LinkPaymentHistoryWrap = () => { const { mutateAsync: linkPayHistoryList } = useExtensionLinkPayHistoryListMutation(); const { mutateAsync: downloadExcel } = useExtensionLinkPayHistoryDownloadExcelMutation(); - + const onIntersect: IntersectionObserverCallback = (entries: Array) => { entries.forEach((entry: IntersectionObserverEntry) => { if (entry.isIntersecting) { @@ -140,7 +154,7 @@ export const LinkPaymentHistoryWrap = () => { && rs.content.length === DEFAULT_PAGE_PARAM.size ); }).catch((e: any) => { - if(e.response?.data?.error?.message){ + if (e.response?.data?.error?.message) { snackBar(e.response?.data?.error?.message); return; } @@ -159,9 +173,9 @@ export const LinkPaymentHistoryWrap = () => { selectedMode: DownloadSelectedMode, userEmail?: string ) => { - if(selectedMode === DownloadSelectedMode.EMAIL - && userEmail - ){ + if (selectedMode === DownloadSelectedMode.EMAIL + && userEmail + ) { downloadExcel({ mid: mid, email: userEmail, @@ -176,11 +190,11 @@ export const LinkPaymentHistoryWrap = () => { }).then((rs) => { console.log('Excel Download Status: ' + rs.status); }).catch((e: any) => { - if(e.response?.data?.error?.message){ - snackBar(e.response?.data?.error?.message); - return; - } - }); + if (e.response?.data?.error?.message) { + snackBar(e.response?.data?.error?.message); + return; + } + }); } }; @@ -209,8 +223,25 @@ export const LinkPaymentHistoryWrap = () => { } }; + const checkUsedFilter = () => { + let rs: boolean = true; + if (fromDate === defaultParams.fromDate + && toDate === defaultParams.toDate + && searchCl === defaultParams.searchCl + && searchValue === defaultParams.searchValue + && paymentMethod === defaultParams.paymentMethod + && paymentStatus === defaultParams.paymentStatus + && sendMethod === defaultParams.sendMethod + && sendStatus === defaultParams.sendStatus + ) { + rs = false; + } + setFilterUsed(rs); + } + useEffect(() => { callList(); + checkUsedFilter(); }, [ mid, searchCl, @@ -240,14 +271,17 @@ export const LinkPaymentHistoryWrap = () => { {t('common.searchOptions')} + {filterUsed && + + }