diff --git a/src/entities/transaction/model/types.ts b/src/entities/transaction/model/types.ts index acf1921..4f2c26d 100644 --- a/src/entities/transaction/model/types.ts +++ b/src/entities/transaction/model/types.ts @@ -155,21 +155,29 @@ export interface AllTransactionListProps { transactionCategory: TransactionCategory; listItems: Array; setDetailData: (detailData: DetailData) => void; + onClickToOpenFilter?: () => void; + onClickToOpenDownloadBottomSheet?: () => void; }; export interface CashReceiptListProps { transactionCategory: TransactionCategory; listItems: Array; setDetailData: (detailData: DetailData) => void; + onClickToOpenFilter?: () => void; + onClickToOpenDownloadBottomSheet?: () => void; }; export interface EscrowListProps { transactionCategory: TransactionCategory; listItems: Array; setDetailData: (detailData: DetailData) => void; + onClickToOpenFilter?: () => void; + onClickToOpenDownloadBottomSheet?: () => void; }; export interface BillingListProps { transactionCategory: TransactionCategory; listItems: Array; setDetailData: (detailData: DetailData) => void; + onClickToOpenFilter?: () => void; + onClickToOpenDownloadBottomSheet?: () => void; }; export interface AllTransactionListItem { tid?: string; diff --git a/src/entities/transaction/ui/all-transaction-list.tsx b/src/entities/transaction/ui/all-transaction-list.tsx index be546da..dc718fc 100644 --- a/src/entities/transaction/ui/all-transaction-list.tsx +++ b/src/entities/transaction/ui/all-transaction-list.tsx @@ -1,11 +1,23 @@ +import { useEffect, useState } from 'react'; import { AllTransactionListProps, ListItemProps } from '../model/types'; import { ListDateGroup } from './list-date-group'; +import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common'; +import { useTranslation } from 'react-i18next'; +import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store'; export const AllTransactionList = ({ transactionCategory, listItems, - setDetailData + setDetailData, + onClickToOpenFilter, + onClickToOpenDownloadBottomSheet }: AllTransactionListProps) => { + const { t, i18n } = useTranslation(); + + const { groupDate, setGroupDate } = useGroupDateStore(); + const { groupDateOn, setGroupDateOn } = useGroupDateOnStore(); + + const [listHeight, setListHeight] = useState(0); const getListDateGroup = () => { let rs = []; @@ -53,9 +65,92 @@ export const AllTransactionList = ({ return rs; }; + const getMax = (data: Array>) => { + let maxItem = null; + if(data.length > 0){ + let numberArr = data.map(( + value: Record, + index: number + ) => { + return value.top; + }); + let max = Math.max(...numberArr); + maxItem = data.filter(( + value: Record, + index: number + ) => { + return value.top === max; + }); + } + + return maxItem? maxItem[0]: null; + }; + + const setScrollAction = (e: Event) => { + let dateHeader = document.querySelectorAll('.date-header'); + let posData: Array> = []; + dateHeader.forEach((value, index) => { + let date: string = value.innerHTML; + let top: number = value.getBoundingClientRect().top; + if(top < 10){ + posData.push({ + date: date, + top: top + }); + } + }); + let maxItem = getMax(posData); + if(maxItem){ + setGroupDateOn(true); + setGroupDate(maxItem.date); + } + else{ + setGroupDateOn(false); + setGroupDate(''); + } + }; + + useEffect(() => { + ListScrollOn(true); + let heightList = GetListHeight(); + setListHeight(heightList.listHeight); + + let tabContent = document.querySelector('.tab-content'); + tabContent?.addEventListener('scroll', setScrollAction); + + return () => { + ListScrollOn(false); + tabContent?.removeEventListener('scroll', setScrollAction); + }; + }, []); + return ( <> -
+ { groupDateOn && +
+ { groupDate } +
+ + +
+
+ } +
0)? listHeight + 'px': 'unset' }} + > { getListDateGroup() }
diff --git a/src/entities/transaction/ui/billing-list.tsx b/src/entities/transaction/ui/billing-list.tsx index 97e236c..fb0d0c4 100644 --- a/src/entities/transaction/ui/billing-list.tsx +++ b/src/entities/transaction/ui/billing-list.tsx @@ -1,14 +1,23 @@ -import { PATHS } from '@/shared/constants/paths'; -import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { BillingListProps } from '../model/types'; import { ListDateGroup } from './list-date-group'; import { useTranslation } from 'react-i18next'; +import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store'; +import { useEffect, useState } from 'react'; +import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common'; export const BillingList = ({ transactionCategory, listItems, - setDetailData + setDetailData, + onClickToOpenFilter, + onClickToOpenDownloadBottomSheet }: BillingListProps) => { + const { t, i18n } = useTranslation(); + + const { groupDate, setGroupDate } = useGroupDateStore(); + const { groupDateOn, setGroupDateOn } = useGroupDateOnStore(); + + const [listHeight, setListHeight] = useState(0); const getListDateGroup = () => { let rs = []; @@ -55,13 +64,95 @@ export const BillingList = ({ return rs; }; + const getMax = (data: Array>) => { + let maxItem = null; + if(data.length > 0){ + let numberArr = data.map(( + value: Record, + index: number + ) => { + return value.top; + }); + let max = Math.max(...numberArr); + maxItem = data.filter(( + value: Record, + index: number + ) => { + return value.top === max; + }); + } + + return maxItem? maxItem[0]: null; + }; + + const setScrollAction = (e: Event) => { + let dateHeader = document.querySelectorAll('.date-header'); + let posData: Array> = []; + dateHeader.forEach((value, index) => { + let date: string = value.innerHTML; + let top: number = value.getBoundingClientRect().top; + if(top < 10){ + posData.push({ + date: date, + top: top + }); + } + }); + let maxItem = getMax(posData); + if(maxItem){ + setGroupDateOn(true); + setGroupDate(maxItem.date); + } + else{ + setGroupDateOn(false); + setGroupDate(''); + } + }; + + useEffect(() => { + ListScrollOn(true); + let heightList = GetListHeight(); + setListHeight(heightList.listHeight); + + let tabContent = document.querySelector('.tab-content'); + tabContent?.addEventListener('scroll', setScrollAction); + + return () => { + ListScrollOn(false); + tabContent?.removeEventListener('scroll', setScrollAction); + }; + }, []); return ( <> -
- { getListDateGroup() } -
+ { groupDateOn && +
+ { groupDate } +
+ + +
+
+ } +
0)? listHeight + 'px': 'unset' }} + > + { getListDateGroup() } +
); }; \ No newline at end of file diff --git a/src/entities/transaction/ui/cash-receipt-list.tsx b/src/entities/transaction/ui/cash-receipt-list.tsx index 024597d..ab21aa0 100644 --- a/src/entities/transaction/ui/cash-receipt-list.tsx +++ b/src/entities/transaction/ui/cash-receipt-list.tsx @@ -1,11 +1,24 @@ +import { useTranslation } from 'react-i18next'; import { CashReceiptListProps } from '../model/types'; import { ListDateGroup } from './list-date-group'; +import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store'; +import { useEffect, useState } from 'react'; +import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common'; export const CashReceiptList = ({ transactionCategory, listItems, - setDetailData + setDetailData, + onClickToOpenFilter, + onClickToOpenDownloadBottomSheet }: CashReceiptListProps) => { + const { t, i18n } = useTranslation(); + + const { groupDate, setGroupDate } = useGroupDateStore(); + const { groupDateOn, setGroupDateOn } = useGroupDateOnStore(); + + const [listHeight, setListHeight] = useState(0); + const getListDateGroup = () => { let rs = []; let date = ''; @@ -51,11 +64,94 @@ export const CashReceiptList = ({ return rs; }; + const getMax = (data: Array>) => { + let maxItem = null; + if(data.length > 0){ + let numberArr = data.map(( + value: Record, + index: number + ) => { + return value.top; + }); + let max = Math.max(...numberArr); + maxItem = data.filter(( + value: Record, + index: number + ) => { + return value.top === max; + }); + } + + return maxItem? maxItem[0]: null; + }; + + const setScrollAction = (e: Event) => { + let dateHeader = document.querySelectorAll('.date-header'); + let posData: Array> = []; + dateHeader.forEach((value, index) => { + let date: string = value.innerHTML; + let top: number = value.getBoundingClientRect().top; + if(top < 10){ + posData.push({ + date: date, + top: top + }); + } + }); + let maxItem = getMax(posData); + if(maxItem){ + setGroupDateOn(true); + setGroupDate(maxItem.date); + } + else{ + setGroupDateOn(false); + setGroupDate(''); + } + }; + + useEffect(() => { + ListScrollOn(true); + let heightList = GetListHeight(); + setListHeight(heightList.listHeight); + + let tabContent = document.querySelector('.tab-content'); + tabContent?.addEventListener('scroll', setScrollAction); + + return () => { + ListScrollOn(false); + tabContent?.removeEventListener('scroll', setScrollAction); + }; + }, []); + return ( <> -
- { getListDateGroup() } -
+ { groupDateOn && +
+ { groupDate } +
+ + +
+
+ } +
0)? listHeight + 'px': 'unset' }} + > + { getListDateGroup() } +
); }; \ No newline at end of file diff --git a/src/entities/transaction/ui/escrow-list.tsx b/src/entities/transaction/ui/escrow-list.tsx index 1993970..cfb42ac 100644 --- a/src/entities/transaction/ui/escrow-list.tsx +++ b/src/entities/transaction/ui/escrow-list.tsx @@ -1,11 +1,23 @@ +import { useTranslation } from 'react-i18next'; import { EscrowListProps } from '../model/types'; import { ListDateGroup } from './list-date-group'; +import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store'; +import { useEffect, useState } from 'react'; +import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common'; export const EscrowList = ({ transactionCategory, listItems, - setDetailData + setDetailData, + onClickToOpenFilter, + onClickToOpenDownloadBottomSheet }: EscrowListProps) => { + const { t, i18n } = useTranslation(); + + const { groupDate, setGroupDate } = useGroupDateStore(); + const { groupDateOn, setGroupDateOn } = useGroupDateOnStore(); + + const [listHeight, setListHeight] = useState(0); const getListDateGroup = () => { let rs = []; @@ -51,10 +63,93 @@ export const EscrowList = ({ } return rs; }; + + const getMax = (data: Array>) => { + let maxItem = null; + if(data.length > 0){ + let numberArr = data.map(( + value: Record, + index: number + ) => { + return value.top; + }); + let max = Math.max(...numberArr); + maxItem = data.filter(( + value: Record, + index: number + ) => { + return value.top === max; + }); + } + + return maxItem? maxItem[0]: null; + }; + + const setScrollAction = (e: Event) => { + let dateHeader = document.querySelectorAll('.date-header'); + let posData: Array> = []; + dateHeader.forEach((value, index) => { + let date: string = value.innerHTML; + let top: number = value.getBoundingClientRect().top; + if(top < 10){ + posData.push({ + date: date, + top: top + }); + } + }); + let maxItem = getMax(posData); + if(maxItem){ + setGroupDateOn(true); + setGroupDate(maxItem.date); + } + else{ + setGroupDateOn(false); + setGroupDate(''); + } + }; + + useEffect(() => { + ListScrollOn(true); + let heightList = GetListHeight(); + setListHeight(heightList.listHeight); + + let tabContent = document.querySelector('.tab-content'); + tabContent?.addEventListener('scroll', setScrollAction); + + return () => { + ListScrollOn(false); + tabContent?.removeEventListener('scroll', setScrollAction); + }; + }, []); return ( <> -
+ { groupDateOn && +
+ { groupDate } +
+ + +
+
+ } +
0)? listHeight + 'px': 'unset' }} + > { getListDateGroup() }
diff --git a/src/entities/transaction/ui/list-date-group.tsx b/src/entities/transaction/ui/list-date-group.tsx index 879bff1..327cd19 100644 --- a/src/entities/transaction/ui/list-date-group.tsx +++ b/src/entities/transaction/ui/list-date-group.tsx @@ -13,7 +13,7 @@ export const ListDateGroup = ({ setDetailData }: ListDateGroupProps) => { const { t, i18n } = useTranslation(); - + // Set moment locale based on current language const currentLocale = i18n.language === 'ko' ? 'ko' : 'en-gb'; moment.locale(currentLocale); diff --git a/src/entities/vat-return/ui/section/amount-section.tsx b/src/entities/vat-return/ui/section/amount-section.tsx index 34f88c8..3ff8c49 100644 --- a/src/entities/vat-return/ui/section/amount-section.tsx +++ b/src/entities/vat-return/ui/section/amount-section.tsx @@ -155,7 +155,13 @@ export const AmountSection = ({ } diff --git a/src/pages/transaction/all-transaction/list-page.tsx b/src/pages/transaction/all-transaction/list-page.tsx index 7b29644..94b60a0 100644 --- a/src/pages/transaction/all-transaction/list-page.tsx +++ b/src/pages/transaction/all-transaction/list-page.tsx @@ -307,11 +307,10 @@ export const AllTransactionListPage = () => { searchCl, searchValue ]); - return ( <>
-
+
{t('transaction.searchAmount')}
@@ -324,14 +323,14 @@ export const AllTransactionListPage = () => { {t('transaction.searchOptions')} onClickToOpenFilter() } + onClick={ onClickToOpenFilter } />
@@ -365,6 +364,8 @@ export const AllTransactionListPage = () => { listItems={ listItems } transactionCategory={ TransactionCategory.AllTransaction } setDetailData={ setDetailData } + onClickToOpenFilter={ onClickToOpenFilter } + onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet } >
diff --git a/src/pages/transaction/billing/list-page.tsx b/src/pages/transaction/billing/list-page.tsx index 788cbb8..c5fb5ae 100644 --- a/src/pages/transaction/billing/list-page.tsx +++ b/src/pages/transaction/billing/list-page.tsx @@ -240,7 +240,7 @@ export const BillingListPage = () => { { onClickToOpenFilter() } + onClick={ onClickToOpenFilter } />
@@ -248,7 +248,7 @@ export const BillingListPage = () => { { onClickToOpenDownloadBottomSheet() } + onClick={ onClickToOpenDownloadBottomSheet } />
@@ -277,6 +277,8 @@ export const BillingListPage = () => { listItems={ listItems } transactionCategory={ TransactionCategory.Billing } setDetailData={ setDetailData } + onClickToOpenFilter={ onClickToOpenFilter } + onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet } >
diff --git a/src/pages/transaction/cash-receipt/list-page.tsx b/src/pages/transaction/cash-receipt/list-page.tsx index 7010ed9..d91fdea 100644 --- a/src/pages/transaction/cash-receipt/list-page.tsx +++ b/src/pages/transaction/cash-receipt/list-page.tsx @@ -270,7 +270,7 @@ export const CashReceiptListPage = () => { { onClickToOpenFilter() } + onClick={ onClickToOpenFilter } />
@@ -278,7 +278,7 @@ export const CashReceiptListPage = () => { { onClickToOpenDownloadBottomSheet()} + onClick={ onClickToOpenDownloadBottomSheet } /> @@ -327,6 +327,8 @@ export const CashReceiptListPage = () => { listItems={ listItems } transactionCategory={ TransactionCategory.CashReceipt } setDetailData={ setDetailData } + onClickToOpenFilter={ onClickToOpenFilter } + onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet } >
diff --git a/src/pages/transaction/escrow/list-page.tsx b/src/pages/transaction/escrow/list-page.tsx index 66d72c7..25098a2 100644 --- a/src/pages/transaction/escrow/list-page.tsx +++ b/src/pages/transaction/escrow/list-page.tsx @@ -233,7 +233,7 @@ export const EscrowListPage = () => { { onClickToOpenFilter() } + onClick={ onClickToOpenFilter } /> @@ -241,7 +241,7 @@ export const EscrowListPage = () => { { onClickToOpenDownloadBottomSheet() } + onClick={ onClickToOpenDownloadBottomSheet } /> @@ -270,6 +270,8 @@ export const EscrowListPage = () => { listItems={ listItems } transactionCategory={ TransactionCategory.Escrow } setDetailData={ setDetailData } + onClickToOpenFilter={ onClickToOpenFilter } + onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet } >
diff --git a/src/shared/ui/assets/css/style-fix.css b/src/shared/ui/assets/css/style-fix.css index 9b8c8b4..e74d657 100644 --- a/src/shared/ui/assets/css/style-fix.css +++ b/src/shared/ui/assets/css/style-fix.css @@ -546,5 +546,8 @@ main.pop{ width: calc(100% - 42px); top: 50px; padding-left: 10px; - + padding-bottom: 20px; +} +.filter-section{ + margin-bottom: 0; } \ No newline at end of file diff --git a/src/shared/ui/assets/css/style-tax-invoice.css b/src/shared/ui/assets/css/style-tax-invoice.css index 9a09835..471b735 100644 --- a/src/shared/ui/assets/css/style-tax-invoice.css +++ b/src/shared/ui/assets/css/style-tax-invoice.css @@ -65,7 +65,6 @@ .tax-invoice { margin: 0; background: #FAFAFA; min-height: unset; - position: fixed; left: 0; top: 0;